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>
Related
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 a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>
This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
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.
I am trying to make my own "slideshow" type of jquery effect. I have been messing around with this for quite a while now and just seem to be going in circles. So hopefully one of you can see what I'm missing.
The Javascript/jQuery Code:
<script type="text/javascript">
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(500);
$('.slideDeactive').click(changeSlide);
});
function changeSlide(){
$('.slideActive').addClass('slideDeactive').removeClass('slideActive');
$(this.id).addClass('slideActive').removeClass('slideDeactive');
$('.slideDeactive').click(changeSlide);
}//end changeSlide
</script>
The HTML Code:
<body>
<div id="slideShow">
<div id="slideShowItem0" class="slideActive">
ITEM 0
</div>
<div id="slideShowItem1" class="slideDeactive">
ITEM 1
</div>
<div id="slideShowItem2" class="slideDeactive">
ITEM 2
</div>
</div>
The CSS Code:
#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;
}
#slideShowItem0, #slideShowItem1, #slideShowItem2{
position: relative;
width: 350px;
height: 100%;
}
.slideActive{
z-index: 1;
position: absolute;
left: 25%;
top: 0;
background-color: grey;
}
.slideDeactive{
background-color: fuchsia;
z-index: 0;
float: left;
top: -100%;
cursor: pointer;
/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}
I think I may have an error with my slideActive class too, because if the the slide is on the right then it may need a different left value than if it is on the left, I think.
Let me know what you all think, thanks for the help in advance!
try this
$(document).ready(function(){
$('.slideDeactive').live('click', function()
{
$('.slideActive').removeClass('slideActive').addClass('slideDeactive');
$(this).addClass('slideActive').removeClass('slideDeactive');
});
})
Instead of
$('.slideDeactive').click(changeSlide);
and
function changeSlide(){
$('.slideActive').addClass('slideDeactive').removeClass('slideActive');
$(this.id).addClass('slideActive').removeClass('slideDeactive');
$('.slideDeactive').click(changeSlide);
}//end changeSlide
This will get effect of active and deactive.
Final solution for slideshow jquery/css code:
HTML Code:
<body>
<div id="slideShow">
<div class="slideCenter">
ITEM 0
</div>
<div class="slideLeft">
ITEM 1
</div>
<div class="slideRight">
ITEM 2
</div>
</div>
</body>
jQuery Code:
<script type="text/javascript">
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(500);
$('.slideLeft').live('click', function(){
$('.slideCenter').removeClass('slideCenter').addClass('slideLeft');
$(this).addClass('slideCenter').removeClass('slideLeft');
});
$('.slideRight').live('click', function(){
$('.slideCenter').removeClass('slideCenter').addClass('slideRight');
$(this).addClass('slideCenter').removeClass('slideRight');
});
});
</script>
CSS Code:
#slideShow{
float: left;
border: solid white 2px;
width: 700px;
height: 200px;
margin-top: 200px;
}
.slideCenter{
z-index: 1;
position: absolute;
margin-left: 175px;
width: 350px;
height: 200px;
float: left;
background-color: grey;
}
.slideLeft{
z-index: 0;
background-color: fuchsia;
float: left;
cursor: pointer;
width: 350px;
height: 200px;
/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}
.slideRight{
z-index: 0;
background-color: yellow;
float: right;
cursor: pointer;
width: 350px;
height: 200px;
/*Opacity compatible for all major browsers*/
filter: alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
}
Thanks a lot Bibin for your help!