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>
Related
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>
I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});
Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>
You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.
It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }
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");
});
Right now I have divs that show when you scroll past a certain mark but realized that this gets broken when the browser is resized. Is there any way I can make this responsive? I'm not sure if adding $(window).resize(checkY); would work either.
EDIT:
The end goal is to show the title when the associated content comes into view
HTML
<div class="title" data-position="400,1150">Yama</div>
<div class="title" data-position="1150,1800">Modurra</div>
<div class="title" data-position="1800,2600">Computer</div>
<div class="title" data-position="2600,3300">Maru</div>
<div class="title" data-position="3300,3900">Sushi</div>
<div class="title" data-position="3900,4700">Summit</div>
<div class="title" data-position="4700,10000">Lights Out</div>
JS
<script>
//Note you do not need to make an anonymous
//function just to do the call for checkY
//just pass the function
$(window).scroll(checkY);
function checkY() {
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
console.log(top);
$(".title").each(function () {
var positionData = $(this).data("position").split(",");
if (top > positionData[0] && top <= positionData[1]) {
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
</script>
EDIT
.title {
position:fixed;
top:0px;
left:45%;
display:none;
padding:10px;
background:rgba(255,255,255,0);
color:#000;}
#Yama {
position:absolute;
display:block;
height:900px;
font-family: Arial, Helvetica, sans-serif;
font-size:70pt;
letter-spacing:0px;
font-weight:100;
-webkit-font-smoothing: antialiased;
text-align:center;}
This is the wrapper holding everything.
#mini {width:100%; height:100%;
padding-top:140px;}
What you want to do is find the target content and determine if the element is within the viewport. If it is then you show the title.
With this you won't need to use data-* attributes. You can just put the title in the main content's element, and then use jQuery's .closest method to get the closest parent (the content element). And from there do the tests.
HTML
<div id="Yama" class="content">
<div class="title">Yama</div>
</div>
<div id="Modurra" class="content">
<div class="title">Modurra</div>
</div>
<div id="Computer" class="content">
<div class="title">Computer</div>
</div>
<div id="Maru" class="content">
<div class="title">Maru</div>
</div>
<div id="Sushi" class="content">
<div class="title">Sushi</div>
</div>
<div id="Summit" class="content">
<div class="title">Sushi</div>
</div>
<div id="LightsOut" class="content">
<div class="title">Lights Out</div>
</div>
JS
$(window).scroll(checkY);
function checkY(){
var top = $(window).scrollTop();
$(".title").each(function(){
var target = $(this).closest(".content");
//The start range value is just offset().top
var tTop = target.offset().top;
//The end range value is the start range value plus
//the content elements height
var tBottom = tTop+target.outerHeight();
if(top >= tTop && top <= tBottom){
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
JSFiddle Demo
I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});
it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo