We Keep Coding

Can i get help understanding a changing div section with a background image and gradient filter and using click function javascript to change it?

I have a div section with a background image with a gradient cover and some text on. I want to control changing this with a java script button. When its clicked it should remove the gradient and show a new div section with different background image no gradient and text. The JQuery underneath is supposed to check whether the first div is showing. and when clicked it should hide the original div and replace it with the new one. I cannot seem to get it working. any help would be appreciated.
/*
jQuery event that triggers when the button is pressed
# is an ID jQuery selector, usage:#anyElementId
*/
$('btnClick').on('click',function(){
/*
In CSS, you can check if an element is visible by checking if the property display value is different from none, because if it's value is none, it will not be visible
*/
if($('call-to-section').css('display')!='none'){
/*
So, if div call-to-section is visible, the condition will be true
*/
$('call-to-section2').show().siblings('div').hide();
}else if($('#call-to-section2').css('display')!='none'){
/*
Condition to check if call-to-section2 is visible
*/
$('call-to-section').show().siblings('div').hide();
/*
If it is, it will show call-to-section and right after that will search for it siblings and hide them with .siblings('div').hide();
*/
}
});
<!-- Call To Action Section
================================================== -->
<section id="call-to" class="call-to-section">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Global Reach & <span>Demographics.</span></h3>
<p class="wow fadeIn animated">With 3 billion searches per month, YouTubes search
volume is bigger than Bing, AOL, Yahoo and Ask.com combined. If YouTube's user base were a
country,
it would be the third largest in the world. It is the worlds largest site for traffic.
</p>
<button id="btnClick" class="btn btn-default wow fadeInRight hvr-sweep-to-right
button-gradient animated " >Have a look</button>
</div>
</div>
</div>
</section>
<section id="call-to" class="call-to-section2" style= "display:none;">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Test & <span>Testing</span></h3>
<p class="wow fadeIn animated">This is a new text and total differnt background
picture"
</p>
<button class="btn btn-default wow fadeInRight hvr-sweep-to-right button-gradient
` `animated " id="btnClick" >Have a look</button>
</div>
</div>
</div>
</section>
<!-- /.call-to-section -->
* 9. Call To Action Section
--------------------------------- */
.call-to-section {
height: auto;
width: 100%;
background: url(../images/low-poly.jpg) no-repeat;
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;
}
.call-to-section2 {
height: auto;
width: 100%;
background-color:#FFF
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;

I had corrected and obtained the desired result, There was following error in codes written.
1) Both Div element has the same id #call-to, which is actually not required if required for some other purpose please have a separate id for all Div.
2)both Button element also have the same ID #btnClick, change it as #btnClick and #btnClick1
I think id can not be the same for two elements. Read the MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
Complete Code is available in my Codepen https://codepen.io/sanjayism/full/ExVdKpv
$(document).ready(function () {
$("#btnClick").on("click", function () {
if ($(".call-to-section").css("display") == "block") {
$(".call-to-section").css("display", "none");
$(".call-to-section2").css("display", "block");
}
});
$("#btnClick1").on("click", function () {
if ($(".call-to-section2").css("display") == "block") {
$(".call-to-section").css("display", "block");
$(".call-to-section2").css("display", "none");
}
});
});

Expanding a div (a box) with a header and a hidden div

I'm trying to expand a box (a div) with a header and a hidden div. The problem is that the height isn't affected in the expansion and the hidden text doesn't show up properly.
The main goal is to expand a small box as if it was a tab, to a form, without changing page and with an expansion animation. When expanded, the user can see the text and edit it. As if it was something like a pop-up filling almost the entire screen. All this is already done expect the "expansion part".
I've tried to adapt my code to many of online solutions, but most of them are simple divs. This is a simple example of what I'm trying to do: http://jsfiddle.net/xcWge/14/ (its only the blue box).
HTML
<div class="row">
<div class="col-md-3 col-sm-6 to-expand">
<div id="child" class="widget">
<div class="widget-body text-center">
<div class="big-icon m-b-md watermark"><i class="fa fa-5x fa-exclamation-circle"></i></div>
<h2 class="m-b-md">Tarif</h2>
<p class="text-muted m-b-lg">Some introduction.</p>
<div class="menu-separator"><hr></div>
<div id="hidden-box">
<p>This contains the text to be hidden, assume that it has a huge number of paragraphs</p>
</div>
Button
.row is the group of "expandable boxes"; .to-expand is the div that includes a single box and #child is the div that included all the content in the box.
CSS
<style>
.btn-primary-w {
border-color: #06285e;
border-width: 2px;
}
div.to-expand {
width: 100%;
max-height:-10%;
overflow: hidden;
transition: all .3s ease;
}
.to-expand.fullscreen {
z-index: 999;
max-height: 990px;
}
I saw a solution that was using a negative margin-top and then return it to 0 with overflow hidden to simulate the hidden text but that solution didn't work.
JS
function func() {
$('#to-expand').toggleClass('fullscreen');
$('#to-expand')[0].style.zIndex = "999";
}

Interactions with Background being blocked by Div over the background

I am using Particles.js on the background. I have div layer over the canvas which contains text and images.
This div blocks the interactions with the background killing the experience. Is there a way to make sure the div allows the interactions through it with the background. Above and below the Div the interactions work well as the content is vertically centered.
Demo Link

I see this css in your code. ( line no. 19)
#hero-unit .particles-js-canvas-el {
z-index: -1 !important;
}
Change it to
#hero-unit .particles-js-canvas-el {
z-index: 1 !important;
}
and
#hero-unit #hero-wrapper {
z-index: 1!important;
}
FIX to make the the interaction through the text or next to it
wrap the divs in seperate .col-md-9 rows
<div class="row">
<!-- first row -->
<div class="col-md-9">
<img class="hero-logo hidden-xs" src="http://creo.mink7.com/wp-content/themes/creo/images/logo-home.png" alt="">
<h1 class="head">Together we can Make a universe of smart innovations for a Better tomorrow</h1>
</div>
<!-- second row -->
<div class="col-md-9 newsletter">
<div id="frontpage-mailchimp">
<h4>Join the Community of Makers</h4>
<!-- MailChimp for WordPress v3.0.10 - https://wordpress.org/plugins/mailchimp-for-wp/ -->
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-114" method="post" data-id="114" data-name="Join us in making things better">
<!-- mailchimp stuffs -->
</form>
</div>
</div>
</div>
and finally, this css
#hero-wrapper .col-md-9{
z-index: 1; // reduce the default z-index for div
}
#hero-wrapper .col-md-9.newsletter{
z-index: 9999; // increase the z-index for newletter div only
}

How to create sliding images on hover with Bootstrap 3?

I want the images to slide when I move my cursor over the image. Let's say I will have 3 pictures.
The images will slide only if I am on the DIV.
I am pretty sure that this could be achieved with carousel but I am not sure if it is the best way.
My code
<div class="container products">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://codepen.io/anon/pen/xbbNPM
Also I want the div to be clickable when my mouse is over.

I am pretty sure that this could be achieved with carousel but I am
not sure if it is the best way.
Why not? Because of you already use Bootstrap you should use its features in the first place.
also read http://getbootstrap.com/javascript/#carousel and find out that you can use multiple carousels on the same page:
Carousels require the use of an id on the outermost container (the
.carousel) for carousel controls to function properly. When adding
multiple carousels, or when changing a carousel's id, be sure to
update the relevant controls.
Cause you want to slide the carousal on mouseover(hover) you do not need any control, each of your carousels can code like that shown below:
<div class="col-md-4">
<!-- Reveal Up Full -->
<div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
<div class=" carousel-inner" role="listbox">
<div class="item active image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
</div>
</div>
</div>
Notice that i'm not sure why you wrap your 3 md-4 columns in a md-12 column, you do not need a img-responsive class for your carousel's images.
After creating your HTML you should create a JavaScript trigger for the mouseover (i use mouse enter here):
<script>
$('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>
Also I want the div to be clickable when my mouse is over.
As you can see in the above i have wrapped the images in a a tag. The only possible issue left will be that the .carousel-caption is not clickable and overlay the images. Use the following CSS code to make the .carousel-caption clickable:
<style>
.carousel-caption {
pointer-events: none;
}
</style>
Demo: http://www.bootply.com/bmLVbymbhj
update
The caption doesn't slide up anymore. Actually code has changed dramatically. I think I > need to integrate it to your code.
Yes, you should integrate the revealUpFull class. Let me know if you found any troubles by doing this, or formulate a new question on SO.
You should use something like that shown below:
.carousel-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
/* make image clickable */
pointer-events: none;
/* override bootstrap */
left: 0;
right: 0;
}
/* REVEAL UP FULL */
div.image.revealUpFull .carousel-caption {
height: 100%;
width: 100%;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: 0;
}
div.image.revealUpFull:hover .carousel-caption {
bottom: 0;
}
.carousel-caption {
pointer-events: none;
}
The left and right arrows which helps to slide are removed. This is what I want but
their blocks remains. So there is a space on the left and right.
I expect that the above issue is not related to the removed arrows but will be due to the size of the images. You are using image with a 360px width. As mentioned before the carousal's images are responsive by default. The CSS code sets a max-width:100% for these images, which means that they should not display larger than their original size. You can solve this by using larger images or give the image a with of 100% (mostly scaling up images will have quality issues). You can use the code that shown beneath:
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
max-width: none;
width: 100%;
}
What I want is when my mouse is over the DIV, 3 pictures will slide automatically with
infinite loop. Between each of them there will be 2 secs
In fact you should be able to use the following:
$('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});});
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
But the carsousel already pause on mouseenter. I will post a solution for that later on.
The carousel api has a pause option (hover by default), you can set this option to an empty string to prevent the carousel stop cycling on hover.
You should remove the carousel data-attribute in your HTML to enable explicit JavaScript initialization:
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page >load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript >initialization of the same carousel.
After that you can use:
$('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });
When putting above three point together you will get something look like that show in the following demo: http://www.bootply.com/acGNORR3it

It looks like we don't need carousel for this simple feature. Javascript way will be easiest and fastest.
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/750/375/sports/1/";
path[1] = "http://lorempixel.com/750/375/sports/2/";
path[2] = "http://lorempixel.com/750/375/sports/3/";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",3000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="" width="400" />
Demo: http://codepen.io/anon/pen/emmqYJ
Let me know if any easier solution exists.

Finding the next hidden div and showing it with a jQuery selector

I'm building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I'm very new to programming.
I'm having trouble working out a selector to allows the user to go "back" showing the next hidden div, after the first shown div, and hiding the last showing div - faux code example below.
<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>
<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>
Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.
$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.
// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it
});
Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom
$('.scrollUp').click(function() {
// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.
$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?
});

I dont quite understand correctly, however this info may help...you need to match the first visible div then use .prevAll() and filter to get the hidden sibling
$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();

I've spent hours today on this site trying to do something very similar to what was posted in this question.
What I have is Previous | Next links navigation doing through a series of divs, hiding and showing.
Though what I ended up with was different than the answer here....this was the one that most got me where I needed to be.
So, thanks.
And in case anyone is interested, here's what I did:
<script language="javascript">
$(function() {
$("#firstPanel").show();
});
$(function(){
$(".nextButton").click(function () {
$(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
});
});
$(function(){
$(".backButton").click(function () {
$(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
});
});
</script>
<style type="text/css">
.defaultHidden { display: none; }
.navigation { display: block; width: 700px; text-align: center; }
#contentWrapper { margin-top: 20px !important; width: 700px; }
.nextButton { cursor: pointer; }
.backButton { cursor: pointer; }
</style>
<div class="navigation">
<span class="backButton"><< Previous</span> | <span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
<div id="firstPanel" class="panel defaultHidden">
<img src="images/quiz/Slide1.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel" style="display: none;">
<img src="images/quiz/Slide4.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<img src="images/quiz/Slide6.jpg" width="640" />
</div>
Repeat ad naseum...
</div>

a shot in the dark but...
selecting the first shown div and sliding it up
$('.slideShow:visible:first').slideUp();
selecting the first hidden div after the first shown div and sliding it down...
$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()
psuedo selectors FTW!

Something like the following should do the trick
$(function() {
$(".scrollUp").click(function() {
//Check if any previous click animations are still running
if ($("div.slideShow:animated").length > 0) return;
//Get the first visible div
var firstVisibleDiv = $("div.slideShow:visible:first");
//Get the first hidden element before the first available div
var hiddenDiv = firstVisibleDiv.prev("div.slideShow");
if (hiddenDiv.length === 0) return; //Hit the top so early escape
$("div.slideShow:visible:last").slideUp();
hiddenDiv.slideDown();
});
$(".scrollDown").click(function() {
if ($("div.slideShow:animated").length > 0) return;
var lastVisibleDiv = $("div.slideShow:visible:last");
if (lastVisibleDiv.next("div.slideShow").length === 0) {
//No next element load in content (or AJAX it in)
$("<div>").addClass("slideShow")
.css("display", "none")
.text("Dummy")
.insertAfter(lastVisibleDiv);
}
$("div.slideShow:visible:first").slideUp();
lastVisibleDiv.next().slideDown();
});
});
Only thing that this solution does is check if an element that was previously invisible is now being animated. This solves some of the problems regarding multiple clicks of the links that occur before the animations have completed. If using AJAX you'd have to do something similar (e.g. turn a global variable on / off - or just disable the scroll down link) to avoid multiple requests being made to the server at once...