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");
}
});
});

show one div and hide the rest onclick

https://leiacarts.github.io/index.html
https://codepen.io/leiacarts/pen/PoqRxNZ
I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:
1.) keep images constrained to and auto resizable within the (red) content div
2.) hide the images when the section is "shut" onclick.
HTML:
<div class="section">
<div class="bookmark">↑ ten ↔ sion ↓</div>
<div class="content"><p></p>
<!-- <div class="space"></div> -->
<!-- <img class="fit" src="images/ziptiesmall.png">
<img class="fit" src="images/ziptiesmall2.png">
<img class="fit" src="images/ziptiesmall3.png"> -->
</div>
</div>
the JavaScript:
var sections = document.querySelectorAll(".section")
sections.forEach(function(section) {
section.addEventListener("click", expandSection);
})
function expandSection(event) {
let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;
sections.forEach(function(section) {
section.classList.remove("open")
})
section.classList.add("open");
}

I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).
.content.bg.zip {
margin-left: 40px;
/* width: 100%; */
background-color: #000;
background-image: url(images/ziptiepattern.png);
background-repeat: repeat;
}

swap image when hovering over its container div

I've hit a brick wall trying to swap an image when hovering over its containing div.
i can do it with css, but i have 6 div's with 6 images contained in them. if i did it in css, i would need 6 sets of hover events to change the background image. i want to do this with the most simple code possible.
at the moment the images are not set as a background image but as an <img src>
all hover images use the same name but with'over' added into the file name.
ie. shop.png shopover.png is their away to append the img src file name to add the 'over' part when hovering over its container div?
html :
<div class="row">
<div class="c2 center"><img src="images/eliquid.png"><h2 class="center">Juice Brands</h2></div>
<div class="c2 center"><img src="images/mod.png"><h2 class="center">Hardware</h2></div>
<div class="c2 center"><img src="images/dist.png"><h2 class="center">Distributors</h2></div>
<div class="c2 center on"><img src="images/shop.png"/><h2 class="center">Retailers</h2></div>
<div class="c2 center"><img src="images/robot.png"><h2 class="center">Machinary / Packaging</h2></div>
<div class="c2 center"><img src="images/other.png"><h2 class="center">Other</h2></div>
</div>
css :
#exhibitorcontainer {
background-color:rgba(0, 0, 0, 0.7);
background:url(../images/bg2.png) repeat;
width:100%;
height:100%;
}
#exhibitorcontainer .c2 {
margin: 0 5px;
width: 15.8%;
background-color:rgba(0, 0, 0, 0.5);
}
#exhibitorcontainer h2 {
font-size:16px;
color: #1b9bff;
}
#exhibitorcontainer .c2:hover h2 {
color:#666;
}
at the moment i switch the H2 from blue to grey, i want to do the same for the image. any ideas on the best way of doing this?

Simpliest way is to use two images:
<div class="c2 center">
<img src="images/dist.png" class="normal-image">
<img src="images/dist-over.png" class="hover-image">
<h2 class="center">Distributors</h2>
</div>
Then use the CSS:
.hover-image, .c2:hover .normal-image {
display: none;
}
.c2:hover .hover-image {
display: inline;
}

You can change simply, by using javascript as given below:
Image code of html
<img src="images/click.png" onmouseover="ic()" id="myImage"/>
Image change by javascript
function ic(){
document.getElementById('myImage').src='images/yes.png';
}
Now when mouseover on your image then javascript call this function and set your image there, if you want that when mouseover not on image, then image return on previous so use same script for viceversa.

6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified

Was my title strong enough?
I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.
Here's my code so far:
<div class="contactus.container">
<div class="contactus.left">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block" >
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.center">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block">
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.right">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block;">
<img align="right" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>
And here's the CSS:
.contactus.container {
width:100%;
text-align:center;
}
.contactus.left {
float:left;
width:100px;
}
.contactus.center {
display: inline-block;
margin:0 auto;
width:100px;
}
.contactus.right {
float:right;
width:100px;
}
.content {
display: inline-block;
vertical-align: top;
Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.

First thing's first, you cannot use . inside your class name, as mentioned by #grammar in the comments (props to #Scot for copying it to an answer). When you make a reference to .contactus.left in your css, it will look for an element with two classes, like class="contactus left". For the divs you have with class names like contactus.left, you could either give them two separate classes, like <div class="contactus left"> or use a separator like an underscore or a hyphen, such as <div class="contactus-left">.
However, correcting that will not solve your problem. As for what you are trying to accomplish, I believe you mean to say that you want 2 groups of 3 (left, center, and right). To accomplish this, you will want each sub-div to have the display: inline-block style instead of just the center div, and to make sure the center div is actually centered on the page, you will want to divide up the width of the container amongst the three inner divs, and assign the appropriate text-align value to each.
See this fiddle.
You can manage the div sizing yourself, just assigning a percentage for the width of each div. Alternatively, there are css frameworks like foundation and bootstrap that help you manage your page layout with a grid system that basically uses percentages and inline-block elements, and provide you with intuitive class names to easily put your content where you want it.

I think you have named and formatted your classes incorrectly.
Try renaming the css classes like this:
.contactus_center {
display: inline-block;
margin:0 auto;
width:100px;
}
and your HTML like this:
<div class="contactus_center">

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.