<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
CSS
#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}
JQUERY
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
I have the above jquery slider all i need to have a timeout function which the slider slides automatically and as well i need it to slide according to the prev and next buttons. Thanks in advance
DEMO
To use the timeout function goes like this:
setInterval(function(){
//your function you want to timeout
},1000);
1000 milliseconds = 1 second
Try this
Use clearInterval(tId) to stop and run() to start again if you want to pause when next/prev is clicked
Live Demo
var tId;
function run() {
tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$sp = $(".sp");
$('.nav').click(function () {
var which = this.id.replace("button-", ""),
next = which == "next",
$oldActive = $('.active');
if (next) {
if ($oldActive.index()==$sp.length-1) {
$('.sp').first().addClass('active');
} else {
$oldActive.next().addClass('active');
}
} else {
if ($oldActive.index()==0) {
$('.sp').last().addClass('active');
} else {
$oldActive.prev().addClass('active');
}
}
$oldActive.removeClass('active');
$('.sp').fadeOut();
$('.active').fadeIn();
});
run();
});
I think you would want to use the jQuery.animate function. Something like this:
$(".active").animate({width:"100%"},750);
This assumes that the sliders have a default css property of width: 0%.
Edit: new fiddle http://jsfiddle.net/qnM3x/1/
Related
I have a little problem with prepend() because if I "copy" my div and if click on counter the count change in whole divs the same is with hover. Is this possible change number count and hover only in clicked or hovered div?
Thank you for help and time:)
HTML
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
And javascript
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
var count = 0;
$(".count").click(function() {
count++;
$(".count").html(+count);
});
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
FIDDLE
Yes sure, use the current clicked element object $(this) :
$(this).html(+count);
Instead of :
$(".count").html(+count);
And use event delegation on() to attach click event to the new elements added dynamically to the DOM :
$("body").on('click',".count",function() {
count++;
$(this).html(+count);
});
To increment count separatelly for every div you should get the current count then add 1 to it, like :
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
Hope this helps.
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(this).fadeOut(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count"> Click Me
</div>
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
Here we are creating dynamic id for each prepend. And by sending that div id to the javascript function and using same count logic as #Zakaria Acharki used to maintain count value.
var divNumber = 1;
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
divNumber++;
});
function makeCount(id){
var count = parseInt( $("#"+id).text());
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$("#"+id).text(count);
}
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
.Wrap
{
width:650px;
height:800px;
}
.container
{
position:relative;
top:5px;
left:5px;
width:200px;
height:200px;
background-color:red;
float:left;
margin-left:5px;
margin-top:5px;
}
.AddDiv
{
position:absolute;
top:0px;
}
.count
{
position:absolute;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background-color:white;
text-align:center;
line-height:100px;
cursor:pointer;
}
.background
{
width:20px;
height:20px;
background-color:green;
position:absolute;
left:170px;
top:10px;
}
.hover
{
width:200px;
height:200px;
background-color:rgba(255,255,255,0.8);
position:absolute;
z-index:1001;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
Try .insertBefore() function:
check: https://jsfiddle.net/mpqtrjzx/
$( '<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>' ).insertBefore( ".container:first" );
I built a basic Jquery Slider for myself and had a few problems with it.
The automatic slide itself works perfectly, but when I try to navigate with my arrows, for example switching left and right, the whole system doesn't work. I hope someone can understand it.
Here's the index.html:
<div id="slider">
<div id="no">
<div class="slide active-slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
<div id="arrow-left" class="btn"><</div>
<div id="arrow-right" class="btn">></div>
<div id="loader"><div id="bar"></div></div>
</div>
Script:
$('#slider').hover(function(){
$('.btn').fadeIn(300);
}, function(){
$('.btn').fadeOut(300);
});
startSlide();
function startSlide() {
var currentSlide = $('.active-slide')
$('#bar').css('width', '0');
$('#bar').animate({width:'100%'}, 4000, function(){
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-right').click(function(){
$('#bar').stop();
if($('.active-slide').next().hasClass('slide')) {
$('.active-slide').removeClass('active-slide').next().addClass('active-slide');
startSlide();
} else {
$('.active-slide').removeClass('active-slide');
$('.slide').first().addClass('active-slide');
startSlide();
}
});
$('#arrow-left').click(function(){
$('#bar').stop();
if($('.active-slide').prev().hasClass('slide')) {
currentSlide.removeClass('active-slide');
currentSlide.prev().addClass('active-slide');
startSlide();
} else {
currentSlide.removeClass('active-slide');
$('.slide').last().addClass('active-slide');
startSlide();
}
});
}
i'm creating a navbar. when i click one of the options , that option becomes active but when i click on the other option the previous option which was active remains there
SEE MY FIDDLE EXAMPLE : https://jsfiddle.net/bpmbu3th/
I just want to make the item active which is clicked
MY HTML
<p id="parent1">i'm the parent</p>
<p id="child1">i'm the first child</p>
<p id="parent2">i'm the 2nd parent</p>
<p id="child2">i'm the second children</p>
MY CSS
#parent1{
background-color:#000;
color:#fff;
}
#child1{
display:none;
background-color:red;
color:#fff;
}
#parent2{
background-color:#000;
color:#fff;
}
#child2{
display:none;
background-color:red;
color:#fff;
}
MY JQUERY
(function(){
var object = {
dropdown1:$('#child1'),
dropdown2:$('#child2'),
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
You should use common class to get rid of repetitive code.
Here's an example
$(function() {
$('.parent').on('click', function() {
var child = $(this).next('.child'); //Finds the next child
//fade out others then handle current child
$('.child').not(child).fadeOut(function() {
child.fadeToggle();
})
});
});
.parent {
background-color:#000;
color:#fff;
}
.child {
display:none;
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parent">i'm the parent</p>
<p class="child">i'm the first child</p>
<p class="parent">i'm the 2nd parent</p>
<p class="child">i'm the second children</p>
You just have to add two lines of code in your javascript, here is the edited snippet -
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
object.dropdown2.fadeOut(); //this line
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown1.fadeOut(); //this line
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
Is that you wanted?
You need to fade out the other one:
(function () {
var object = {
dropdown1: $('#child1'),
dropdown2: $('#child2'),
dropdown1parent: function () {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.fadeIn();
object.dropdown2.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
},
dropdown2parent: function () {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.fadeIn();
object.dropdown1.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
https://jsfiddle.net/ghorg12110/bpmbu3th/1/
You should think about creating a function to manage that, it will become a nightmare if you use a lot of "dropdown".
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/
You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO
Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
check this may be user question is solve Fiddle
Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly