I'm not a programmer, just trying to assemble a small website for myself.:)
What I'm trying to do:
A ".container" with a grid of images - each inside of an identical ".wrapper", some of them are non-clickable single-image wrappers, some of them are clickable "stacks" of 1-4 images - click again and again to see all images in that .wrapper one by one.
<div class="container">
<div class="wrapper">
<div class="content"><img src="1.png"></div>
<div class="content"><img src="2.png"></div>
<div class="content"><img src="3.png"></div>
<div class="content"><img src="4.png"></div>
</div>
<div class="wrapper">
<div class="content"><img src="5.png"></div>
</div>
<div class="wrapper">
<div class="content"><img src="6.png"></div>
<div class="content"><img src="7.png"></div>
</div>
</div>
What I have done so far: found here (JQuery cycle through text on click) this piece of code:
$(document).ready(function () {
var divs = $('div[id^="content-"]').hide(),
i = 0;
function cycle() {
divs.fadeOut(400).delay(400).eq(i).fadeIn(400);
i = ++i % divs.length;
};
cycle()
$('button').click(cycle);
// click button to show next paragraph
});
and "almost" "adapted" it for my needs :D:
<script type="text/javascript">
$(document).ready(function () {
var divs = $('.content').hide(),
i = 0;
function cycle() {
divs.fadeOut(0).delay(0).eq(i).fadeIn(0);
i = ++i % divs.length;
};
cycle()
$('.wrapper').click(function(){cycle()})
});
</script>
and also this FIDDLE - the problem looks similar to mine, maybe?
The problem and what I need: the "adapated" version of the jQuery code above works with 1 ".wrapper". But different names for all wrappers and a copy of the same script for each of them in my index.html sounds like a disastrous idea and the only way I can do it myself.:D I believe there should be an elegant tweak/fix of the jQuery code that would make it work for EACH ".wrapper" independently and only for images inside it, not interfering with other .wrappers and their images.
This is why I'm asking for your help and would appreciate any help, guys!
I believe the following will do what you want (if I understand requirements correctly). You basically need to loop over each wrapper and treat them as individual instances
$('button').on('click', function() {
// isolate each wrapper
$('.wrapper').each(function() {
// get the content within this wrapper instance
var $content = $(this).find('.content');
// don't do anything if it is a single
if ($content.length > 1) {
// current is the only visible one
var $curr = $content.filter(':visible');
// if current is last one next will be first one in this group
// otherwise will be the one right after it
var $next = $curr.is($content.last()) ? $content.first() : $curr.next();
// fade out current
$curr.fadeOut(function() {
// this function runs when fadeOut has completed
// and can now fade in the next one
$next.fadeIn()
});
}
});
});
.wrapper {
border: 2px solid #ccc;
margin: 10px;
padding: 10px
}
.content {
display: none
}
.content:first-child {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="content">Wrap #1 Img #1</div>
<div class="content">Wrap #1 Img #2</div>
<div class="content">Wrap #1 Img #3</div>
<div class="content">Wrap #1 Img #4</div>
</div>
<div class="wrapper">
<div class="content">Wrap #2 Img #1</div>
</div>
<div class="wrapper">
<div class="content">Wrap #3 Img #1</div>
<div class="content">Wrap #3 Img #2</div>
</div>
</div>
<button>Toggle content</button>
Related
i want to hover over one div and use jquery to find the nearest div by the name and to show that div.
<div class="entry">
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
</div>
all the .footer classes will be hidden but i want to make it so that when i over over the .body class, only the nearest .footer class shows. [ meaning : if i hover over the first .body class, only the first .footer will be shown. ]
my current code isn't working and i'm starting to wonder if it's something wrong with it.
current jquery code :
$('.footer').hide();
$('.body').hover(function(){
$(this).closest('.footer').find('.footer').show();
});
While the problem is the same as this question, the reason is slightly different.
When you use .closest(".class") it's the equivalent of .parents().filter(".class").first() (or .last(), I don't recall exactly which way parents() works as that's what closest is for).
ie it goes up the tree
So $(".body").closest(".entry") would give you an element for your HTML.
In this case, you want siblings, but more specifically the next one. There's a jquery method .next() which looks like it's correct, but as detailed in the link above, this only gives the very next one (in your HTML this would be the date div) even if a filter is applied - so $(this).next(".footer") would give an empty set (as it's not .date).
The work around is:
$(this).nextAll(".footer").first()
Once you get this working, your will find that your hover does not work as expected as the footers are not hiding again - as you're using .hover rather than mouseenter mouseout, you just need to move the .hide() call inside the second event handler, giving:
// startup
$(".footer").hide();
// event
$(".body").hover(function() {
$(this).nextAll(".footer").first().show();
}, function() {
$(".footer").hide();
});
div > div { width: 100px; height: 10px }
.body { border: 1px solid red; }
.date { border: 1px solid blue; }
.footer { border: 1px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
</div>
$(this).closest('.footer')
You should start to use console.log() sometimes to check elements you would like to get. This does not find anything so nothing further to search and to show.
If you possibly can separate bodies and footers into containers you can do smth like
this.
Try to make use of nextUntil(".footer").next(); as below
$('.body').hover(function() {
$(this).nextUntil(".footer").next().show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
IF your html is gonna keep those triads layout, you don't need jQuery for it.
Just use CSS to select the second div after the .body on hover
div{width:100px; height:100px; background-color:lime; margin:10px; float:left}
.body{background:yellow; clear:left;}
.footer{display:none;}
.body:hover + div + div{
display:block;
background:red;
}
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="date"></div>
<div class="footer"></div>
<div class="body"></div>
<div class="somethingelse"></div>
<div class="footer"></div>
The answer by freedomn-m offered a good explanation and good solution in case you want the nearest NEXT .footer, which seems to be the case from your example HTML.
However, if you want your request strictly, so you want exact NEAREST .footer, then his solution will not work for you. And I don't think there is a jQuery built-in functionality that can give you that, so you'll have to do it manually. Get the list of the children of the parent (don't use the siblings as they don't include the current element) and go through the list to calculate the distance from your current element using the indexes and then select the .footer that is really the nearest.
$('.body').hover(function() {
var children = $(this).parent().children();
var index = children.index(this);
var closest = children.length;
var footer = -1;
children.each(function(i, child) {
if (i !== index && $(child).hasClass("footer")) {
var distance = Math.abs(index - i);
if (distance < closest) {
closest = distance;
footer = i;
}
}
});
if (footer > -1)
children.eq(footer).show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
If you don't care much about the performance, you can shorten the code a bit by selecting the list of .footer instead of the children of the parent, and then let jQuery give you the index of each of them. Not very efficient, but shorter code:
$('.body').hover(function() {
var index = $(this).index();
var closest = 9999;
var footer;
$(this).siblings(".footer").each(function(i, sibling) {
var distance = Math.abs(index - $(sibling).index());
if (distance < closest) {
closest = distance;
footer = sibling;
}
});
if (footer !== undefined)
$(footer).show();
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
Inspired by freedomn-m's comment, we can also use the .prevAll() and .nextAll() methods to get the previous and next .footer siblings. These two methords return the siblings ordered by the closest, so we simply pick the first one of each list, subtract their indexes from our element's index (to find the distance), compare them together, and return the closest. This solution is also less efficient than the first one, but you may find the code easier to read:
$('.body').hover(function() {
var me = $(this);
var prev = me.prevAll(".footer").first();
var next = me.nextAll(".footer").first();
if (prev.length == 0)
next.show();
else if (next.length == 0)
prev.show();
else {
index = me.index();
if (Math.abs(prev.index() - index) < Math.abs(next.index() - index))
prev.show();
else
next.show();
}
}, function() {
$(".footer").hide();
});
body {
font: 13px Verdana;
}
.footer {
display: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="date">date</div>
<div class="footer">footer</div>
<div class="body">body</div>
<div class="somethingelse">somethingelse</div>
<div class="footer">footer</div>
</div>
<div class="wrap">
</div>
my css
.wrap{
overflow-x:hidden;
}
should I do like this in js?
document.getElementById("whatever").className = "";
where to get the id in this case? since I use .wrap not #wrap.
I think you're looking for the DOM function getElementByClassName().
For example, if you run var x = document.getElementByClassName('wrap') in your case, x will be a list of all dom elements which have the class 'wrap' .
source: w3schools
Your question is a bit confusing, but to give you an easy example, have a look at this:
var divs = document.getElementsByClassName('wrap');
for (var i=0; i<divs.length; i++) {
divs[i].addEventListener('click', removemyclass);
}
function removemyclass () {
this.className = '';
}
.wrap {
height:50px;
width: 100%;
border: 2px solid #aaa;
}
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
<div class="wrap">
</div>
This will find the one ( this ) element you are clicking on and remove its class Name, so that it doesn't have a border anymore, but you can still find it in your console as an element in the DOM
I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>
It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>
Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});
This a continued question from this post:
Add style to random loaded divs I have now tried to simplify this question as much as possible.
Here goes:
Using this code I am trying to add style to randomly loaded items depending in what order they are loaded.
<script>
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){
return Math.round(Math.random())-0.5;
}).slice(0,6)
$(divs).each(function( index ) {
if(index==1 || index==3)
$(this).css("margin-left", "0%");
else
$(this).css("margin-left", "2%"); //or whatever left value you need
});
$(divs).show();
});
</script>
I need the .item bars to line up as in this picture
So far this only ocurs by chance every so many times you refresh the browser.
I think if you try it yourself you'll see what the problem
Here is the whole shebang for a quick copy/paste
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style>
.container {width:750px; background-color:#CCC; height:200px; padding-top:70px; margin: 0 auto; margin-top:5%}
.item {display:none; text-align:center; width:32%; float:left}
</style>
<script>
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){
return Math.round(Math.random())-0.5;
}).slice(0,6)
$(divs).each(function( index ) {
if(index==1 || index==3)
$(this).css("margin-left", "0%");
else
$(this).css("margin-left", "2%"); //or whatever left value you need
});
$(divs).show();
});
</script>
</head>
<body>
<div class="container">
<div class="item" style="background-color:#F00">1</div>
<div class="item" style="background-color:#9F0">2</div>
<div class="item" style="background-color:#FF0">3</div>
<div class="item" style="background-color:#939">4</div>
<div class="item" style="background-color:#3CF">5</div>
<div class="item" style="background-color:#CF3">6</div>
<div class="item" style="background-color:#6C9">7</div>
<div class="item" style="background-color:#999">8</div>
<div class="item" style="background-color:#90F">9</div>
<div class="item" style="background-color:#FF9">10</div>
<div class="item" style="background-color:#099">11</div>
<div class="item" style="background-color:#666">12</div>
</div>
</body>
</html>
Because you are not randomizing the DOM order, only what divs to include in the divs array. The order is still numerical.
So when looping the divs using $.each(divs), you are looping the random order you created, but the DOM order is still untouched (if that makes sense). You could say that divs and $('div.items') are out of sync.
You can try this instead: (DEMO: http://jsbin.com/aSejiWA/3)
$(document).ready(function(){
var divs = $("div.item").get().sort(function(){
return Math.round(Math.random())-0.5;
}).slice(0,6);
$(divs).addClass('show'); // to re-select the visual items
$('.item.show').each(function( index ) {
$(this).css('margin-left', index%3 ? '2%' : 0);
}).show();
});
It is because the divs you are looping over won't always match the order of your divs in markup, which means you'll be applying the wrong margins. Try the code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style>
.container {width:750px; background-color:#CCC; height:200px; padding-top:70px; margin: 0 auto; margin-top:5%}
.item {display:none; text-align:center; width:32%; float:left}
</style>
<script>
$(document).ready(function(){
var $container = $('div.container'),
divs = $("div.item").get().sort(function(){
return Math.round(Math.random())-0.5;
}).slice(0,6),
<!-- Make a clone, leaving original pot untouched -->
$clonedDivs = $(divs).clone();
<!-- Clear container -->
$container.html('');
<!-- Append new divs to container -->
$clonedDivs.each(function( index ) {
$container.append(this);
if (index % 3 == 0) {
$(this).css("margin-left", "0%");
} else {
$(this).css("margin-left", "2%"); //or whatever left value you need
}
});
$clonedDivs.show();
});
</script>
</head>
<body>
<div class="pot">
<div class="item" style="background-color:#F00">1</div>
<div class="item" style="background-color:#9F0">2</div>
<div class="item" style="background-color:#FF0">3</div>
<div class="item" style="background-color:#939">4</div>
<div class="item" style="background-color:#3CF">5</div>
<div class="item" style="background-color:#CF3">6</div>
<div class="item" style="background-color:#6C9">7</div>
<div class="item" style="background-color:#999">8</div>
<div class="item" style="background-color:#90F">9</div>
<div class="item" style="background-color:#FF9">10</div>
<div class="item" style="background-color:#099">11</div>
<div class="item" style="background-color:#666">12</div>
</div>
<div class="container">
</div>
</body>
</html>
So I have a div:
<div id="lol">
Some random text!
</div>
And I have other div:
<div id="happy">
lol
</div>
How could a make an animation, in which the first div is smoothly replaced by the second one? If a Do a fadeIn/fadeOut, the second div would only starting to happear after the first div was gone.
I think simply this would work.
$("#happy").hide();
$("#smooth").click(function(){
$("#happy").show();//no transition for this
$("#lol").slideUp();//with transition
});
here is a demo fiddle
or you can even toggle the effect like this
Yes. Quite easy. Assuming #lol is visible and #happy is not. (You can use jQuery's show/hide to set that up).
$('#lol').fadeOut(function() {
$('#happy').fadeIn();
});
$("#lol").fadeOut(1000,function(){
$("#happy").fadeIn();
});
I think that is what do you want:
$("button").click(function () {
$(".happy").toggle('slow');
});
JSFIDDLE
You can add a class to both of these divs, then toggle the class. This will allow both to toggle simultaneously (one fades in at the same time the other is fading out).
HTML
<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>
JQuery
$("#happy").hide();
$("#btn").click(function() {
$(".toggle").toggle(2000);
});
JSFiddle
Using fadeOut/fadeIn will work if you use absolute positioning. There are many other options as well.
I'm not at all sure what you would like to see in your final result, but here are a few examples:
Example fiddle
CSS:
div.container {
position: relative;
height: 30px;
}
div.container div {
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="container">
<div id="lol">Some random text!</div>
<div id="happy" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol1">Some random text!</div>
<div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol2">Some random text!</div>
<div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
<div id="lol3">Some random text!</div>
<div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>
Sample code:
$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);
$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);
$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});
$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);