I have 4 orange buttons, i'm creating a setInterval function that calls another function in order to make the 4 buttons change color every three secondes, that stuff works well.
Now imagine the current button that is gray is the button 1, logically the next one to change will be button 2, if i click on button 3, i want the button 4 to change and not the 2, so i want to change the next button.
Here is my jsfiddle example
here is my code :
var z = 1;
function updateColor(btn) {
// defilement des boutons de jaune a gris sur desktop
$('.all-divs').find('.btn').removeClass('btn-current');
z++;
$('#btn-'+z).addClass('btn-current').siblings('.btn-current').removeClass('btn-current');
if(z == 4){z = 0;}
}
$(document).ready(function() {
setInterval(updateColor, 3000);
});
$('.btn').click(function(){
$('.btn').removeClass("btn-current");
$(this).addClass("btn-current");
});
.btn{
width:50px;
height:50px;
margin:10px auto;
text-align:center;
background-color:orange;
border-radius:50px;
}
.btn-current{
width:50px;
height:50px;
margin:10px auto;
text-align:center;
background-color:#666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="all-divs">
<div class="btn" id="btn-1">
1
</div>
<div class="btn" id="btn-2">
2
</div>
<div class="btn" id="btn-3">
3
</div>
<div class="btn" id="btn-4">
4
</div>
</div>
Thank you all
In your button click event, just make this change:
$('.btn').click(function(){
$('.btn').removeClass("btn-current");
$(this).addClass("btn-current");
z = this.id.split('-')[1];
});
jsFiddle Demo
Try this. If I understood correctly, it should help. https://jsfiddle.net/y0dc5ooc/26/
<div class="btn" id="btn-1">1</div>
<div class="btn" id="btn-2">2</div>
<div class="btn" id="btn-3">3</div>
<div class="btn" id="btn-4">4</div>
function updateColor(id) {
$('.btn').removeClass('btn-current');
var btnId = '#btn-' + id;
$(btnId).addClass('btn-current');
}
$(document).ready(function() {
$('.btn').click(function(e){
var id = this.getAttribute('id').substr(4);
if(id ==4)
{id = 1;}
else{ id = parseInt(id) + 1;}
updateColor(id);
});
});
Related
//$(document).ready(function(){
$('.next').click(function(){
$('.box').fadeOut();
$('.box').next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
I have a div .box, and the next button. I need to select the next div if i click the next button but only the first div not all. For example if i click next button while it shown box 1 then the next box that should be appear is 2 and so on. But now it shown 2 3 4. How to do this ?
you can get the first visible div using $(.box:visible) and then fadeIn next div to it. you can also add a check for last element, in which case you can fadeIn the first element. something like this:
//$(document).ready(function(){
$('.next').click(function(){
var visibleBox = $('.box:visible');
$(visibleBox).fadeOut();
if(!$(visibleBox).next('div').length)
$('.box').first().fadeIn();
else
$(visibleBox).next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
It's showing 2 3 4 because you ares selecting ALL .box elements, i.e. 1 2 3 4
.next() of 1 = 2
.next() of 2 = 3
.next() of 3 = 4
.next() of 4 = nothing
You should find the box that is currently being shown, and then find it's next sibling.
// Filter by CSS rule
var $showing = $('.box').filter(function() {
return $(this).css('display') === 'block';
}).fadeOut();
// or using :visible
$showing = $('.box:visible').fadeOut();
$showing.next().fadeIn();
you can use another class to labeled, which div is on the display. for example, you add a class display. then you put that class, on the first box. when you click next, you can remove the class display from the current one, and move it into the next one.
HTML
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box display">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
CSS
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
.display{
display:block
}
JQuery
$('.next').click(function(){
var current = $('.box.display');
current.fadeOut().removeClass('display').next().fadeIn().addClass('display');
});
Demo : https://jsfiddle.net/dfaLnsmo/
If I understand your requirement this will work
$(document).ready(function(){
var i = 1;
$('.next').click(function(){
$('.box').fadeOut();
$('.box:nth-child(i)').fadeIn();
if(i >= $('.box').length)
i++;
else
i=1;
});
});
Try the following Jquery
var curr = 1;
$('.next').click(function(){
if(curr < $( ".box" ).length) {
$('.box').hide();
$( ".box" )[curr].style.display= "block";
curr += 1;
}
});
Here is the working jsfiddel : https://jsfiddle.net/Lv7yr820/1/
I've created a custom function goToNext() it's just supposed to alert the id of the next element that i've clicked on.
I want to call this custom function inside another click function.
For now when I click on first element it alerts id_2 (next from the first, so it's ok) but if you click the second element it doesn't return id_3 (like it's supposed to be) but it return id_2 same if you click on the last element (supposed to alert the first)
this is my jsfiddle example here
function goToNext() {
var get_next_id = $('.btn').next().attr("id");
alert(get_next_id);
}
$('.btn').click(function() {
goToNext();
});
.btn {
width: 50px;
height: 50px;
margin: 10px auto;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn" id="id-1">
1
</div>
<div class="btn" id="id-2">
2
</div>
<div class="btn" id="id-3">
3
</div>
Try this
function goToNext($btn){
var get_next_id = $btn.next().attr("id");
alert(get_next_id);
}
$('.btn').click(function(){
goToNext($(this));
});
You have to use this
function goToNext(thisObj){
var get_next_id = $(thisObj).next().attr("id");
if(get_next_id!=undefined)
alert(get_next_id);
else
alert($(thisObj).parents().find("div:first").attr("id"));
}
$('.btn').click(function(){
goToNext(this);
});
.btn{
width:50px;
height:50px;
margin:10px auto;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="btn" id="id-1">
1
</div>
<div class ="btn" id="id-2">
2
</div>
<div class ="btn" id="id-3">
3
</div>
You need to use reference this
function goToNext(e){
var get_next_id = $(e).next().attr("id");
alert(get_next_id);
}
$('.btn').click(function(){
goToNext(this);
});
Updated Fiddle
I need to develop a News page with 3 articles that can be hidden or showed one by one, by means of 2 buttons: "Show more news" and "Show less news"
Each article must be hidden/displayed by clicking the relevant button only once, starting from the last article (at the bottom page) to the first one (top of page). HTML:
<!-- Articles-->
<article id="art-1" class="row" >My first Art</article>
<article id="art-2" class="row art" >My second Art</article>
<article id="art-3" class="row art" >My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news1">Show Less</button>
<button class="button-grey" id="show-less-news2">Show Less</button>
<button class="button-grey" id="show-less-news3">Show Less</button>
<button class="button-grey" id="show-more-news1">Show More</button>
<button class="button-grey" id="show-more-news2">Show More</button>
<button class="button-grey" id="show-more-news3">Show More</button>
I managed to do this with JQuery but the code is extremely verbose and I need 6 buttons instead of 2, but I believe there must be a simplier way to get the same result with a less complex code. This is the JQuery code:
$("#show-more-news1").css({display:'none'});
$("#show-more-news2").css({display:'none'});
$("#show-more-news3").css({display:'none'});
$("#show-less-news1").css({display:'none'});
$("#show-less-news2").css({display:'none'});
//function 1 less
$("#show-less-news3").click(function(){
$("#art-3").hide(400);
$("#show-less-news3").hide();
$("#show-more-news3").show();
$("#show-less-news2").show();
});
//function 2 less
$("#show-less-news2").click(function(){
$("#art-2").hide(400);
$("#show-less-news2").hide();
$("#show-more-news3").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
//function 3 more
$("#show-more-news3").click(function(){
$("#art-3").show(400);
$("#show-more-news3").hide();
$("#show-less-news2").hide();
$("#show-less-news3").show();
});
//function 3 less
$("#show-less-news1").click(function(){
$("#art-1").hide(400);
$("#show-less-news1").hide();
$("#show-more-news2").hide();
$("#show-more-news1").show();
});
//function 2 more
$("#show-more-news2").click(function(){
$("#art-2").show(400);
$("#show-more-news2").hide();
$("#show-less-news1").hide();
$("#show-less-news2").show();
$("#show-more-news3").show();
});
//function 1 more
$("#show-more-news1").click(function(){
$("#art-1").show(400);
$("#show-more-news1").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
Some CSS:
article {
position: realtive;
width: 100%;
height: 50px;
border: 1px solid red;
float:left;
background-color: yellow;
}
.button-grey {
display: block;
background-color: #cfcfcf;
width: 150px;
height: 30px;
float:right;
}
Here's a CodePen. Can someone help me to get the same result with a better code?
Thanks a lot!
Using your HTML with only two buttons and identical CSS
The following JS works for better for me:
Javascript:
var newsDepth = 3;
var maxNewsDepth = 3;
$('#show-more-news').hide();
$('#show-more-news').click( function () {
(newsDepth < maxNewsDepth ) && newsDepth++;
$('#art-' + newsDepth).show();
$('#show-less-news').show();
if (newsDepth == maxNewsDepth) $('#show-more-news').hide();
});
$('#show-less-news').click( function () {
( newsDepth > 1 ) && newsDepth--;
$('#art-' + (newsDepth + 1)).hide();
$('#show-more-news').show();
if (newsDepth == 1) $('#show-less-news').hide();
});
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Articles-->
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news">Show Less</button>
<button class="button-grey" id="show-more-news">Show More</button>
Here is a codepen for you
I've got a better version in this jsfiddle.
HTML:
<!-- Articles-->
<div id="articles">
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
</div>
<!--Buttons-->
<button class="button-grey" id="show-less">Show Less</button>
<button class="button-grey" id="show-more" style="display: none">Show More</button>
JS:
var allArticles = $('#articles article');
var visibleCount = 3;
$('#show-less').on('click', function() {
// no more articles to hide
if (visibleCount == 0) return;
// hide the previous one
$(allArticles[--visibleCount]).hide();
// Show the more button
$('#show-more').show();
// hide the less button
if (visibleCount == 0)
$('#show-less').hide();
});
$('#show-more').on('click', function() {
if (visibleCount == allArticles.length) return;
// show the next article
$(allArticles[visibleCount++]).show();
// Show the less button
$('#show-less').show();
// hide the more button
if (visibleCount == allArticles.length)
$('#show-more').hide();
});
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
The two functions when a user clicks the next button will call the next() and fbsharing() function.
next swaps between 4 divs that will display only one at a time (WORKING)
fbsharing (will display a customised share button in a div id=fbshare (FAIL)
here is my jsfiddle : http://jsfiddle.net/U3jdm/
<div id="content" style="width:60%; float:left; padding: 10px 10px 10px 10px;">
<div id="ncholder">
<div id="ncframe"></div>
<div class="PortSwap" id="swap0">
111111111111
</div>
<div class="PortSwap" id="swap1">
2222222222
</div>
<div class="PortSwap" id="swap2">
333333333
</div>
<div class="PortSwap" id="swap3">
4444444444
</div>
</div>
<div id="ncnav" style="width:83%; float:left; padding: 30px 10px 10px 10px;">
<div style="width:30%; float:right; color:#66ce9d; font-size:18px; font-weight:bold;">
<div style="width:30px; height:30px; float:left;"><img src="leftnav.png" alt="Previous" onClick="(function(){prev(); fbSharing();})();"/></div>
<div style="width:30px; height:30px; float:right;"><img src="rightnav.png" alt="Next" onClick="(function(){next(); fbSharing();})();"/></div>
</div></div>
<div id="fbshare" style="color:#ed1a64; font-size:18px; font-weight:bold;"> </div>
</div>
<script>
$(function () {
"use strict";
$('.PortSwap').hide().eq(0).addClass('active').show();
});
function prev() {
var current = $('.PortSwap.active'),
prev = current.prev('.PortSwap');
console.log(prev.length, prev);
if (prev.length) {
current.hide().removeClass('active');
prev.addClass('active').show();
}
}
function next() {
var current = $('.PortSwap.active'),
next = current.next('.PortSwap');
if (next.length) {
current.hide().removeClass('active');
next.addClass('active').show();
}
}
function fbSharing() {
var test = document.getElementByClassName("PortSwap active");
var share;
var testid = test.id;
if (testid = 'swap0') {
share ="1111111";
}
else if (test.ID = 'swap1') {
share ="2222";
}
else if (test.ID = "swap2") {
share ="33333";
}
else if (test.ID = "swap3") {
share ="44444";
}
document.getElementById("fbshare").innerHTML=share;
}
</script>
Hi, Thanks for spotting my mistake on the getelementsclassname.
For a working demo of the two functions being executed onclick, here it is:
http://jsfiddle.net/79B8z/1/
I found 2 errors.
1. There is no function named getElementByClassName its getElementsByClassName (with an s)
2. document.getElementsByClassName returns a collection of HTMLElement you need the first one so you might have to use an array index notation.
Finally,
It should look like,
var test = document.getElementsByClassName("PortSwap active")[0]
JS Fiddle
To start two functions onclick just use
onclick="next(), fbsharing()"
I think thats what you mean..