Develop Reference

set tabbed content to slide image

I want image slider to work in such a way that on hover of tab or click it should change the coreesponsing image like you can always see on flipkarts home page. Now the script I have made is working like normal slider which changes the image in 5 seconds. Can anybody help me to achieve what I need.
HTML
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
<ul class="tab-slide">
<li>POWEROCK 13600mAh Power Banks</li>
<li style="float:right">POWERPUNCH 10500mAh Power Banks</li>
</ul>
</div>
css
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:600px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.tabbed{
width:100%;
max-width:1600px;
margin:0 auto
}
ul.tab-slide{
margin:0;
padding:0
}
ul.tab-slide li{
list-style:none;
width:50%;
display:block;
float:left;
display:list-item;
text-align:center;
background:#00a3d3
}
ul.tab-slide li a{
position:relative;
color:#000;
text-decoration:none;
width:100%;
display:block;
color:#fff;
padding:15px 0 15px 0;
}
ul.tab-slide li:hover{background:#000;}
JS
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});
});//]]>
</script>

You can do this easy with some extra jQuery and adding some id's to your html.
First you have to add an id to the image within the HTML code:
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="linktoimage"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="linktoimage">
after that you add data-id to the hyperlinks:
<li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
<li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>
When you have done that you can add the following jQuery:
$('.tabbed a').on({
'mouseenter': function() {
$('.fadein img').hide();
$('#' + $(this).data('id')).fadeIn();
}
This should do the trick. JSFIDDLE over here: https://jsfiddle.net/enhtymgk/1/

Switch z-index at divs on click

Im trying to iterate through a div of children thats absolute positioned and have z-indexes. when a button is clicked i want the z-index to increase so it works like a loop almost. so on each click i want the current visible div to have a lower z index so only one div is visible at a time.
$(function() {
$('button').click(function(){
//.three sholed take the place of .one and .two should jump up one step. i want this to be repeatable.
});
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
}
.one {
background:red;
z-index:1;
}
.two {
background:green;
z-index:2;
}
.three {
background: blue;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="holder">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>

Use jquery to add a class to the element that shall have the wanted index/ be visible on click
$("button").click(function(){
$(".current").removeClass("current").next().addClass("current")
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
If you want to loop it
$("button").click(function(){
if($(".holder >div:last-child").hasClass("current")){
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
}else{
$(".current").removeClass("current").next().addClass("current");
}
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>

just using .css like this:
$("selector").css("z-index","1");
$(document).ready(function(){
var start = 2;
$('button').click(function(){
$('.holder > div').eq(start).hide();
start--;
$('.holder > div').eq(start).show();
if(start<0){start=2;}
});
});
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
}
.one {
background:red;
z-index:1;
}
.two {
background:green;
z-index:2;
}
.three {
background: blue;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>

i did something like this to fake a gif with fading animations:
you could simply adjust it to your needs on an onclick handler instead of a setInterval
function fakeGif(container, speed) {
$(container).find('.active').css('z-index', 3);
setInterval(function() {
var $active = $(container).find('.active');
var $next = ($active.next().length > 0) ? $active.next() : $(container).find('.gif').first();
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1000,function(){//fade out the top image
$active.css('z-index',1).fadeIn(1000).removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}, speed);
}
$('.gif--container').each(function(){
var time = $(this).attr('data-gif-time');
var container = $(this);
$(this).find('.gif').first().addClass('active');
fakeGif(container,time);
});
and the Html for this is simple:
<div class="gif--container" data-gif-time="3000">
<div class="gif image:parent fl">
<img src="whatever1.jpg" />
</div>
<div class="gif image:parent fl">
<img src="whatever2.jpg" />
</div>
<div class="gif image:parent fl">
<img src="whatever3.jpg" />
</div>
</div>

I find always very usefull to make lots of different staff this simple jquery:
$(document).ready(function () {
$('.click-here').click(function () {
$('.box1').toggleClass("z-index")
});
});
You basically say that clicking in whatever element has the class "click-here" will add a class on whatever element you want (in this case "box1") (and remove the class on next click).
for your question here you have this fiddle that I hope it will help you

The content slider concept

Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.

LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)

<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/

http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...

New div slide down on click

Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}

this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/

Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none

Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}

Show/Hide Div in jQuery, issue with "skipping" divs

I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide
The code looks like this in script:
$('.hideButton').click( function() {
var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
$('.first').animate({ width: toggleWidth},200);
if ( $('.first').width() == 10 ){
$(".content").attr("hidden",false);
}
else if ( $('.first').width() == 100 ){
$(".content").attr("hidden",true);
}
});
HTML:
<div class="contain">
<div class="row">
<div class="navigation">
navigation
</div>
<div class="advert">
advert
</div>
</div>
<div class="row">
<div class="main">
main
<br/>
<button class="hideButton">hide</button>
<br/>
<div class="first">
1
</div>
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
}
.navigation{
height:100px;
background-color:orange;
width:400px;
display:inline-block;
}
.advert{
height:100px;
background-color:lime;
width:200px;
display:inline-block;
}
.main{
width:600px;
height: 300px;
background-color: magenta;
}
.first{
width:100px;
height:80%;
background-color: yellow;
display:inline-block;
}
.second{
width:100px;
height:80%;
background-color: blue;
display:inline-block;
}
.third{
width:100px;
height:80%;
background-color: red;
display:inline-block;
}
And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/
Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...
I just need that one div that gets hidden on click of button and that he does not affect anything else...
Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?

Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.
JSFiddle Demo
.first{
width:100px;
height:80%;
background-color: yellow;
float: left;
}
.second{
width:100px;
height:80%;
background-color: blue;
float: left;
}
.third{
width:100px;
height:80%;
background-color: red;
float: left;
}

You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>

Try adding this to your CSS:
.first,.second,.third {
vertical-align: top;
}
During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.
Updated fiddle: http://jsfiddle.net/EhjeA/3/