I have to create a very simple photo album in JQuery, with 4 pics and 2 buttons("previous" and "next")
Once I get to the end of the album (meaning I'm pressing "Previous" on the first image or "Next" on the last one) the script should simply go on showing me the various pics in loop.
I wrote the code for the "Next" button without issues, but using the same code (in reverse) for the "Previous" button just won't work: once I get to the first-child of my div, all I can see is an empty border.
<script>
$(document).ready(function () {
$("img").wrapAll("<div>");
$("div").children().hide();
var current = $("div :first-child");
current.show();
$("#nextbutton").click(function () {
if (current.is(":last-child")) {
current.hide();
current = $("div :first-child");
current.show();
}
else {
var next = current.next();
current.hide();
current = next;
current.show();
}
});
$("#prevbutton").click(function () {
if (current.is(":first-child")) {
current.hide();
current = $("div:last-child");
current.show();
}
else {
var prev = current.prev();
current.hide();
current = prev;
current.show();
}
});
});
</script>
<style>
div{border-color: yellow;
border-style: groove;}
</style>
Even stranger, instead of seeing my div border covering just the single image, I get a bigger one (specifically, the images are 8x8, the border is 8x20) and I don't know how to correct it as well.
There's a small typo in your code. In your $("#prevbutton").click(), the line:
current = $("div:last-child");
Should be:
current = $("div :last-child");
// ^space
$(div:last-child) is looking for the last child div whereas $(div :last-child) looks for the last child of that div.
JSFiddle
Related
I have owl carousel slider with 5 items. And my problem is that i need first and last element of my slider to be always with opacity. Slider has like 15 elements which 9 cloned, 5 have .active class and one with cloned and .active.
I tryied make it using javascript where i found all ".active" classes in slider, but i don't exactly know what i should do with object which was found.
There is code which found all ".active" classes
var owlCarouselActive = document.getElementById("slider-tour").getElementsByClassName("owl-item active");
I need in order to this .active first and last have :before with my background style when i click on button prev or next.
You could do this with javascript
var owlCarouselActive = document.getElementsByClassName("owl-item active");
var first = owlCarouselActive[0]; //get first item
var last = owlCarouselActive[owlCarouselActive.length - 1]; //get last item
first.style.opacity = 0.8;
last.style.opacity = 0.8;
I'm not at home but try something like this:
function setOpacity() {
var elements = $('.active');
let count = 0;
$(elements).each(function(k,v) {
if (count == 0 || count == elements.length - 1) {
$(v).css('opacity', '0.8');
}
count++;
});
}
$(document).ready(function() {
setOpacity();
});
Run that function everytime you want it to update.
E.G on a button click.
You can use owlCarouselActive [0] to access the first element and owlCarouselActive [owlCarouselActive.length-1] to access the last element. Generally you can access i-th element by owlCarouselActive [i].
I have a list with scroll bar. Also there is a button that when pressed, it moves to a certain #id and scroll bar also moves to make that element visible. But it is not accurate. It moves, but not always to the exact place. How can I make this scroll function to be accurate:
DEMO http://jsfiddle.net/danials/anpXP/1/
My jQuery code:
function next() {
$(".list li").css("background", "grey");
goToByScroll(myID);
$("#" + myID).css("background", "red");
myID = $("#" + myID).next("li").attr("id");
}
function goToByScroll(id) {
$('.list').animate({
scrollTop: $("#" + id).offset().top - $("#" + id).height()
},
'slow');
}
In the demo try pressing the next button, and you'll see in some items the scroll moves but not correctly.
Any idea?
The problem with your code is that you are getting the offset of each element as you scroll down the list.
Offset is:
The .offset() method allows us to retrieve the current position of an element
relative to the document.
So this makes the offset of the box smaller, the further down the list you go.
What you need to do is figure out what the height+margin of an element is and do some math:
var myID = $(".list").children().first().attr("id");
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(myID-1)},'slow');
$("#"+myID).css("background", "red");
myID++;
}
This fiddle shows it in action. What it does is get the height+margin of the current element, and then multiplies it by how many elements down the list you are.
This only works assuming that all elements are the same size and that they have incremental IDs though.
UPDATE
If you want to make it work with Dynamic IDs, all you do is set an incremental variable to keep track of how many you have iterated through, and then grab the next ID similarly to how you did before:
var myID = $(".list").children().first().attr("id");
var inc = 1;
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(inc-1)},'slow');
$("#"+myID).css("background", "red");
myID = $("#"+myID).next().attr("id");
inc++;
}
And here's a fiddle.
I have this simple next and previous function that i wrote but i am having one simple issue. On the last slider on click next, it shows a blank slider then on click next it starts all over as it is supposed to. What am i missing? Below is the jquery code;
$('div.contsliders').each(function(e) {
if (e != 0)
$(this).hide();
});
$('span.next').click(function(){
if ($('div.contsliders:visible').next().length != 0)
$('div.contsliders:visible').next().fadeIn(1000).prev().hide();
else {
$('div.contsliders:visible').hide();
$('div.contsliders:first').fadeIn(1000);
}
return false;
});
$('span.prev').click(function(){
if ($('div.contsliders:visible').prev().length != 0)
$('div.contsliders:visible').prev().fadeIn(1000).next().hide();
else {
$('div.contsliders:visible').hide();
$('div.contsliders:last').fadeIn(1000);
}
return false;
});
HERE IS THE JSFIDDLE LINK
I will really appreciate it mates, thanks.
That is because when it checks for the following condition for the div which you think it is the last using $('div.contsliders:visible').next().length gives .contsnextprev (hence length will still be 1 instead of 0 as assumed) so it shows that one instead of moving to the beginning, which happens when you click on it again. It is because .contsnextprev is the div next to the last slide #five.
if ($('div.contsliders:visible').next().length != 0)
$('div.contsliders:visible').next().fadeIn(1000).prev().hide();
You can change it to:
var $nxt = $('div.contsliders:visible').next('.contsliders');
if ($nxt.length != 0)
$nxt.fadeIn(1000).prev().hide();
Demo
Infact you can simplify this to just one handler as well:
$('div.contsliders:gt(0)').hide(); //Hide all but the first one
var $allSlides = $('div.contsliders'),
traverseDefault = "first", //set the defaults
actionDefault ="next";
$('span.next, span.prev').click(function(){
var traverse = traverseDefault,
action = actionDefault;
if($(this).is('.prev')){ //if action is prev
traverse = "last"; //set traverse to last in case nothing is available
action = "prev"; //set action to prev
}
var $curr = $allSlides.filter(':visible'), //get the visible slide
$nxtTarget = $curr[action](".contsliders"); //get the next target based on the action.
$curr.stop(true, true).fadeIn(1000).hide(); //hide current one
if (!$nxtTarget.length){ //if no next
$nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
}
$nxtTarget.stop(true, true).fadeIn(1000); //show the target
});
Demo
So, I need a div to slide up when another slides down.
Example:
When Home button is clicked a div, we'll call it box_Home, slides down. When Games button is clicked, box_Home should slide up and then box_Games should slide down. What's happening is that they are overlapping instead of swapping out.
http://jsfiddle.net/M8UgQ/15/
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e) {
e.preventDefault();
var $this = $(this),
speed = 500;
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
console.log(box_id);
if($this.hasClass('active') === true) {
$this.removeClass('active');
$(box_id).slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active');
$(box_id).slideDown(speed);
} else {
a.removeClass('active')
$(box_id).slideUp(speed);
$this.addClass('active');
$(box_id).delay(speed).slideDown(speed);
}
});
take a look at this
http://jsfiddle.net/rWrJ9/1/
the main idea is...
if the element clicked is active, remove it, otherwise: 1. find (if any) already active elements (using $('.active')) and use jQuery.map() to make them inactive and slide them up, and 2. make the element clicked active.
I also removed the unneeded variable a
IMPORTANT: the this inside the map() function is different from the this (or rather, $this as you called it) outside the map() function
I think you're saying you have two buttons id="Home" class="open" and id="Game" class="open", and two divs id="box_Home" and id="box_Game". If so, you add class="box" to box_Home and box_Game and do something like this:
$('.open').click(function(e) {
e.preventDefault();
var $this = $(this);
var link_id = $this.attr('id');
var box_id = '#box_' + link_id;
$('.box').slideUp();
$(box_id).slideDown();
});
Hi check this fiddle i hope you need thing to implement
jsfiddle
in the if else statement you are doing a mistake
else if(a.hasClass('active') === false) {
replace it with
else if($this.hasClass('active') === false) {
Code: http://codepen.io/anon/pen/sumIx
$('.module article').hide();
});
$('.module-content, .module-photo').click(function() {
for (var i = 0; i < 5; i++) {
$('.module article').slideUp();
} $(this).parent().children('article').slideToggle('slow');
});
If you click on any of the boxes, the previously active div closes as expected.
When you try to close the same div which is active, it opens right back up. How do I keep everything else the same but correct the behavior so that it doesn't reopen?
Try this:
$('.module-content').click(function() {
var $this = $(this).closest('section').find('article');
$('.module article').not($this).slideUp();
$this.slideToggle('slow');
});
http://codepen.io/anon/pen/DBirp
jQuery iterates element collections naturally so your loops are irrelevant in this case. Here's the commented updated code:
$('.module-content').click(function() {
//stores a reference to the clicked section's article
var article = $(this).parent().children('article');
//hides all other articles
$('.module article').not(article).slideUp();
//toggles the clicked one
article.slideToggle('slow');
});
http://codepen.io/anon/pen/dgJDr