The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev">'+a.prevText+'</li><li class="next">'+a.nextText+"</li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};
You have to change the mark-up to:
<div class="hero">
<div class="hero-carousel">
<article>
<img src="slide-1.jpg" />
<div class="contents">text goes here</div>
</article>
<article>
<img src="slide-1.jpg" />
<div class="contents">text goes here</div>
</article>
</div>
</div>
Do not forget to add the jQuery mark-up like:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
This should work for you.
EDIT - Try to use inspect element or view source to help you solve similar issues.
Related
For anyone that can help with CSS on IE-11. I cannot figure out why this code is not working. Only if I comment out the CSS .container_main_box {/*position: relative;*/... does the page load correctly and then the link on the left call the javascript function. I inherited this code and trimmed it down until I can recreate the issue which is what you see here. I have searched and tried everything I could find on the Internet and nothing works. I am really not good with CSS or any front-end stuff so I am really struggling with this. Can anyone help?
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Temporary</TITLE>
<SCRIPT type="text/javascript">
function openMenu() {
console.log("Called the Javascript function successfully.")
}
</SCRIPT>
<style>
.sidebar {
margin: 0;
padding: 0px 0px;
top: -15px;
width: 180px;
height: 417px;
float: left;
background-color: #2a2e43;
position: relative;
overflow: hidden;
text-align: left;
overflow-y: hidden;
border-bottom-color: #f7f6fa;
}
.sidebar a {
display: block;
text-decoration: none;
text-align: left;
font: Regular 11px/13px Helvetica;
letter-spacing: 0;
color: #ffffff;
padding: 8px;
font-size: 16px;
overflow-y: hidden;
border-bottom-color: #f2f2f7;
}
.box_size {
width: 100%;
}
.container {
padding: 0.2em 0.4em;
width: 100%;
height: 100%;
position: absolute;
margin-top: 20px;
}
.container_main_box {
position: relative;
float: left;
width: 100%;
height: 75%;
min-width: 50%;
max-width: 100%;
top: -432px;
}
</style>
</HEAD>
<BODY>
<DIV class="container">
<DIV class="sidebar">
<DIV>
<A onclick="openMenu()" href="#"><span>First Link</span></A>
</DIV>
<DIV>
<A onclick="openMenu()" href="#"><span>Second Link</span></A>
</DIV>
</DIV>
<DIV class="container_main_box">
<DIV>
<DIV class="box_size"><SPAN>Just some content...</SPAN></DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Add onclick event listener to container div.
I tried the following, and as you can see, the event does not seem to be registered. How can I add the listener to this div?
The div id I want is "engineersContainer."
document.getElementById("engineersContainer").addEventListener("click", function(e) {
console.log("It was clicked");
alert("It was clicked");
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
z-index: -1;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
Remove the -1 z-index, otherwise it will be under the rest of the page
Add the event listener in the page load event
See second example for a workaround
window.addEventListener("load", function() {
document.getElementById("engineersContainer")
.addEventListener("click", function(e) {
console.log("It was clicked");
});
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
/* z-index: -1 */
}
.containerHeader:before {
content: "";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height: 45px
}
.containerHeader {
font-size: 1.5em;
text-align: center
}
#clickText {
padding-bottom: 10px;
font-size: 0.75em;
text-align: center
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText"> (Click to See All Permits) </div>
</div>
Otherwise add another div on top of it
window.addEventListener("load", function() {
document.getElementById("engineersContainerClick").addEventListener("click", function(e) {
console.log("It was clicked");
});
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
z-index: -1
}
#engineersContainerClick {
margin: 2px;
border-radius: 20px;
width: 200px;
height:70px;
padding: 5px;
border:none;
overflow: hidden;
position: absolute;top:0;
background-color: transparent;
z-index:999;
}
.containerHeader:before {
content: "";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height: 45px
}
.containerHeader {
font-size: 1.5em;
text-align: center
}
#clickText {
padding-bottom: 10px;
font-size: 0.75em;
text-align: center
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText"> (Click to See All Permits) </div>
</div>
<div id="engineersContainerClick" class="barContainer">
You need to remove the z-index: -1 in your CSS.
Any user clicks are not making contact with the element, but with the document above the element.
Working Example:
document.getElementById("engineersContainer").addEventListener("click", function(e) {
console.log("It was clicked");
alert("It was clicked");
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
/* width:-moz-fit-content; */
/* width: fit-content; */
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
document.getElementById("engineersContainer").onclick=function(){
console.log("your event");
}
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<body>
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
</body>
ng-js -->
document.getElementById("engineersContainer").onclick=function(){
console.log("your event");
}
<div id="engineersContainer"> Here is the Engineers Container
</div>
I would use an anonymous function for this. You must call the script after your div has been created, as Javascript is read top to bottom and will not have a reference if it is run before the div has been placed.
Beware that if you have a listener on the container div, it will impact your ability to introduce any clickable options within the divs child elements such as buttons later on. Could this cause you problems in the future? If so rethink the design possibly to save you some trouble later. Also, the negative Z index needs to be removed as it is being drawn beneath the layer that Javascript detects the clicks. Sorry for the edits I'm new to StackO.
Maybe some of you can help me solve this problem.
I have this code and I made like an extension for the product that will show product description when click on product. But the on click function isn't working (can't close description).
Thanks!
$('.product').on('click', function(){
$('.product .productExtension').css("display","none");
$(this).children(".productExtension").css("display","block");
});
function close(){
$('.productExtension').css("display","none");
}
.product{
position: relative;
width: 80px; height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center; font-family: Arial;
}
.product > .productExtension{
position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 300px; height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product > .productExtension > .closeProductExtension{
position: absolute;
top: -40px; left: 0;
width: 20px; height: 20px;
margin: 10px;
border: none;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="close()">Close</div>
</div>
</div>
Now I know it wasn't fully part of the question, and I took a bit of liberty with the styling, but there is absolutely no need to hide all different productExtension classes upon each close. It would be far lighter to read the properties detailed inside your product div, and render them to a modal.
It does have an overly complex way of closing the modal ( just some liberties at work there, I am sorry for that one :) )
The answer that is currently accepted both details the reason why you cannot use close (could be window.close), I just thought the offer a different perspective when you have more than one product how to transfer the data between a modal and your DOM as you describe it now. I think it has its advantages
window.addEventListener( 'load', function() {
document.querySelectorAll('.product').forEach( product => {
product.addEventListener('click', handleProductClicked, false );
} );
document.querySelectorAll('[data-action]').forEach( action => {
action.addEventListener('click', handleAction );
} );
function handleAction( e ) {
const owner = e.currentTarget;
const action = owner.getAttribute('data-action');
const selector = owner.getAttribute('data-target');
const target = document.querySelector( selector );
if (action === 'hide') {
if ( !target.classList.contains('hidden') ) {
target.classList.add('hidden');
}
}
}
function showModal( title, content, owner ) {
const modal = document.querySelector('#modal');
if ( modal.classList.contains('hidden') ) {
modal.classList.remove( 'hidden' );
}
modal.querySelector('[data-for=title]').innerText = title;
modal.querySelector('[data-for=content]').innerHTML = content;
}
function handleProductClicked( e ) {
const productContainer = e.currentTarget;
const name = productContainer.querySelector('.productName').innerText;
const description = productContainer.querySelector('.productExtension').innerHTML;
showModal( name, description, productContainer );
}
} );
.hidden {
display: none;
visibility: hidden;
}
.productExtension {
display: none;
visibility: hidden;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
border: solid #a0a0a0 1px;
box-shadow: 5px 3px 5px #777;
background-color: #cfcfcf;
}
.modal > .title {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 20px;
font-size: 0.9em;
background-color: blue;
border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 18px;
background-color: #efefef;
border: solid #a0a0a0 1px;
text-align: center;
text-transform: small-caps;
}
.controls:hover {
font-weight: bold;
cursor: pointer;
}
.modal > .title > [data-for] {
padding: 3px;
color: #fff;
font-weight: 800;
}
.modal > .content {
position: absolute;
left: 0px;
right: 0px;
top: 21px;
bottom: 0px;
padding: 5px;
border: inset #666 1px;
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
<div class="modal hidden" id="modal">
<div class="title">
<span data-for="title"></span>
<div class="controls">
<span data-action="hide" data-target="#modal">X</span>
</div>
</div>
<div class="content" data-for="content">
</div>
</div>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
</div>
</div>
<div class="product">
<div class="productName">Blue Hoodie</div>
<div class="productPrice">14.75$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in blue color</div>
</div>
</div>
This is happening because both functions trigger. The first trigger because you are clicking on an item that is inside the DIV “product” and the second because you’ve passed the function to the onClick. You should take out the “productExtension” div from “product” to make it works.
As mentioned in other comments, you have two click handler in the parent and child. The parent div is intercepting all click events. Try this for your requirement.
$(".product").on("click", function(e) {
$(".product .productExtension").css("display", "none");
$(this)
.children(".productExtension")
.css("display", "block");
if (e.target.classList.contains('closeProductExtension')) {
$(".productExtension").css("display", "none");
}
});
You have several problems. The first is that you trigger the open event as well. To solve this you can use stop propagation. The second is that you are using the method name "close" which is already used in JS.
$('.product').on('click', function() {
$('.product .productExtension').css("display", "none");
$(this).children(".productExtension").css("display", "block");
});
function closeE(event) {
event.stopPropagation();
$('.productExtension').css("display", "none");
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
.product>.productExtension {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product>.productExtension>.closeProductExtension {
position: absolute;
top: -40px;
left: 0;
width: 20px;
height: 20px;
margin: 10px;
border: 1px solid black;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="closeE(event)">Close</div>
</div>
</div>
I have 5 images wrapped in a absolutely positioned div. When I click "next" button I set div's right: 0 and when I click "previous" button I set div's left: 0.
So it behaves like a horizontal slider of images.
What I need now is to add animation to this transition. I want this div to "move" slowly.
I tried this:
$('.slider').animate({right:'0'}, 1000);
Instead of $('.slider').css('right','0');
But it didn't work. The div moves to the right with no animation.
Here is the code with snippet:
$('.arrow-right').on('click', function() {
$('.slider').attr('style', '');
$('.slider').css('right','0');
$('.arrow').toggle();
});
$('.arrow-left').on('click', function() {
$('.slider').attr('style', '');
$('.slider').css('left','0');
$('.arrow').toggle();
});
.container {
height: 130px;
margin-bottom: 20px;
overflow: hidden;
position: relative;
white-space: nowrap;
background: grey;
width: 420px;
}
.arrow {
text-align: center;
margin-top: 4px;
font-size: 26px;
cursor: pointer;
display: block;
}
.arrow-left {
background: rgba(255,255,255,0.8);
padding: 10px;
padding-left: 2px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
left: 0;
top: 47px;
color: #4c4c4c;
cursor: pointer;
z-index: 999;
}
.arrow-right {
background: rgba(255,255,255,0.8);
padding: 10px;
padding-right: 2px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
position: absolute;
right: 0;
top: 47px;
color: #4c4c4c;
cursor: pointer;
z-index: 999;
}
.slider {
position: absolute;
}
.slider img {
height: 130px;
width: 130px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="arrow hide">
<i class="fa fa-chevron-left arrow-left"></i>
</span>
<div class="slider">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
<span class="arrow">
<i class="fa fa-chevron-right arrow-right"></i>
</span>
</div>
You cannot animate an absolute dive from left:0 to right:0.
You need to calculate left position and animate from 0 to new left.
Also $('.slider').attr('style', ''); will remove position:absolute, so just comment it.
$('.arrow-right').on('click', function() {
//$('.slider').attr('style', '');
var left = $('.slider').outerWidth() - $('.container').outerWidth();
$('.slider').animate({left:'-'+left+'px'}, 1000);
$('.arrow').toggle();
});
$('.arrow-left').on('click', function() {
//$('.slider').attr('style', '');
$('.slider').animate({left:'0'}, 1000);
$('.arrow').toggle();
});
See this Fiddle
I am fairly new to Javascript and am looking for a advice on refactoring the code below to be more efficient.
The code does the following:
1. 19 images fade-in with various delays
2. When a mouse hovers over one of the various images, an explanation of that image will appear in a div at the top of the screen.
Any help creating a new, much shorter, code that accomplishes the same thing would be extremely helpful, as 19 images currently require a ton of space for the JavaScript code and I would be surprised if there weren't a more elegant script to accomplish the same thing.
Also, I would like to add a fade-in to the div that appears at the top of the window, but have been unable to add it correctly.
Thank you for your time and help.
HTML Example
<div id="arch">
<div class="fade-in two-seven">
<img src="myimage" />
</div>
</div>
<!--Fade In Image-->
<div id="arch-con">
<p>Some text</p>
</div>
<!--Top Screen div-->
<div id="bran">
<div class="fade-in three-one">
<img src="myimage" />
</div>
</div>
<div id="bran-con">
<p>Some text</p>
</div>
<div id="code">
<div class="fade-in three-nine">
<img src="myimage" ALT="" />
</div>
</div>
<div id="code-con">
<p>Some Text</p>
</div>
CSS Example
#arch {
left: 25%;
top: 27%;
width: 14%;
height: auto;
visibility: visible;
position: absolute;
}
#arch:hover {
transform: scale(1.05);
}
#arch-con {
width: 30%;
height: 12%;
position: absolute;
background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
border: 4px solid #FFF;
border-radius: 20px;
display: none;
line-height: 0px;
padding: 11px;
margin: 0px;
left: 35%;
text-align: center;
}
#arch-con p {
color: white;
font-size:120%
}
#bran {
left: 44%;
top: 27%;
width: 18%;
height: auto;
visibility: visible;
position: absolute;
}
#bran:hover {
transform: scale(1.05);
}
#bran-con {
width: 30%;
height: 12%;
position: absolute;
background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
border: 4px solid #FFF;
border-radius: 20px;
display: none;
line-height: 0px;
padding: 11px;
margin: 0px;
left: 35%;
text-align: center;
}
#bran-con p {
color: white;
font-size:120%
}
#code {
left: 66%;
top: 27%;
width: 14.5%;
height: auto;
visibility: visible;
position: absolute;
}
#code:hover {
transform: scale(1.05);
}
#code-con {
width: 30%;
height: 12%;
position: absolute;
background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
border: 4px solid #FFF;
border-radius: 20px;
display: none;
line-height: 0px;
padding: 11px;
margin: 0px;
left: 35%;
text-align: center;
}
#code-con p {
color: white;
font-size:120%
}
JavaScript Example
$(document).ready(function () {
$("#arch").on("mouseenter", function () {
$("#arch-con").show();
}).on("mouseleave", function () {
$("#arch-con").hide();
});
});
$(document).ready(function () {
$("#bran").on("mouseenter", function () {
$("#bran-con").show();
}).on("mouseleave", function () {
$("#bran-con").hide();
});
});
$(document).ready(function () {
$("#code").on("mouseenter", function () {
$("#code-con").show();
}).on("mouseleave", function () {
$("#code-con").hide();
});
});
You can achieve what you need in a much more DRY fashion by using common classes:
<div id="arch" class="image-container">
<div class="fade-in two-seven">
<img src="myimage" />
</div>
</div>
<div id="arch-con" class="text-container">
<p>Some text</p>
</div>
<div id="bran" class="image-container">
<div class="fade-in three-one">
<img src="myimage" />
</div>
</div>
<div id="bran-con" class="text-container">
<p>Some text</p>
</div>
<div id="code" class="image-container">
<div class="fade-in three-nine">
<img src="myimage" ALT="" />
</div>
</div>
<div id="code-con" class="text-container">
<p>Some Text</p>
</div>
Then you can use the same function on all the elements with this class:
$(function() {
$('.image-container').hover(function() {
$(this).next('.text-container').toggle();
});
});
Also note that you can use the hover() event with toggle() to tidy the logic further.
Example fiddle
Make a selector that matches all the elements, then you can use the next method to get to the div to show/hide:
$(document).ready(function(){
$("#arch,#bran,#code").on("mouseenter", function() {
$(this).next().show();
}).on("mouseleave", function() {
$(this).next().hide();
});
});
If you add a class to all the divs, then the selector gets shorter. You can also use that to reuse code in the CSS. Example assuming the class expimg and expimg-con on the pair of elements:
.expimg { height: auto; visibility: visible; position: absolute; }
.expimg:hover { transform: scale(1.05); }
.expimg-con { width: 30%; height: 12%; position: absolute; background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%; border: 4px solid #FFF; border-radius: 20px; display: none; line-height: 0px; padding: 11px; margin: 0px; left: 35%; text-align: center; }
.expimg-con p {color: white; font-size:120%}
#arch { left: 25%; top: 27%; width: 14%; }
#bran { left: 44%; top: 27%; width: 18%; }
#code { left: 66%; top: 27%; width: 14.5%; }
First thing, you only want to have one document.ready(). According to the docs...
jQuery detects this state of readiness for you. Code included inside
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute
So:
$(document).ready(function(){
alert('foo');
});
$(document).ready(function(){
alert('bar');
});
Is equivalent to:
$(document).ready(function(){
alert('foo');
alert('bar');
});
.. It's not technically wrong to have multiple document ready statements, but you don't have a specific reason to, its a better rule of thumb to just use one.
Second, as an alternative to #Rory and #Guffa's correct answers, you can also accomplish the functionality you want through just using jQuery selectors..
Example:
$('#foo, #bar, #baz').hover(function(){
var tarElem = '#' + $(this).attr('id') + "-con";
$(tarElem).toggle();
});
.a{
width: 100px;
height: 100px;
background-color: steelblue;
margin: 10px;
display: inline-block;
}
.b{
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="foo">Foo</div>
<div class="a" id="bar">Bar</div>
<div class="a" id="baz">Baz</div>
<div class="b" id="foo-con">Foo-con</div>
<div class="b" id="bar-con">Bar-con</div>
<div class="b" id="baz-con">Baz-con</div>