This is my whole code..what I am trying to do is to have-. when DOM is ready first div shows on page and second one after a delay and then third one and so on up to 150.
Problem with the current code is that, whole 150 div loads at once after a small delay.
My code -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test for dashed div</title>
<style type="text/css">
.dashdiv
{
width: 150px;
height: 50px;
background: #ae2d3e;
float:left;
box-shadow: 10px 10px 6px #d4a7b0;
margin: 5px;
}
</style>
</head>
<body>
<?php
for($i =0; $i < 150; $i++)
{
?>
<div class="dashdiv">
This is a div text
</div>
<?php
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.dashdiv').each(function()
{
$(this).hide().delay(1000).fadeIn(1850);
});
});
</script>
</body>
</html>
The problem you're facing, which no one has mentioned, is that jQuery delay() is only chainable on an fx queue. So, using it after hide() will not work. A quick fix to get it working would be to use an effect in place of hide(), ie:
$('div.dashdiv').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});
Try using the index argument that is automatically assigned for every iteration of each to extend the delay in a linear manner:
$('div.dashdiv').each(function(i) {
$(this).delay(1000*i).fadeIn(1850);
});
Also, following your comment, the style of the div elements should be changed to make them hidden:
.dashdiv {
display:none;
...
}
You can use :
Html:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
jQuery:
$('#parent .child')
.hide()
.each(function(index){
var _this = this;
setTimeout( function(){ $(_this).fadeIn(); }, 5000*index );
});
demo at http://jsfiddle.net/gaby/eGWx9/1/
Here's a way to delay and fadeIn a div only once the previous div has finished.
It uses the fadeIn callback to move to the next div in the array:
// hide all
$('.dashdiv').hide();
// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
if(i < divs.length){
$(divs[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
Or without getElementsByClassName.
// hide all
$('.dashdiv').hide();
// fade in each div one by one
(function fade(i){
if(i < $('.dashdiv').length){
$($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
Demo: http://jsfiddle.net/louisbros/RdxS6/
Related
When i click on a element with a class named sections, i should get an alert showing what is it's class index, but it's showing a wrong number.
For example, if i click the first div element with a class named sections, javascript alert should say 1, not 3.
Is there a way to target class indexes with click() using jQuery?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>this is the title</title>
<style>
.sections {
width:200px;
padding:30px;
background:blue;
margin:20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div class="sections"></div>
<div class="sections"></div>
<div class="sections"></div>
<script src="jquery-1.8.2.min.js"></script>
<script src="script/script2.js"></script>
<script>
$('.sections').click(function() {
x = $(this).index();
alert(x);
});
</script>
</body>
</html>
index() with no arguments gets index within all siblings.
You have 6 siblings....3 with the class and 3 without
Try
var $sections = $('.sections').click(function(){
var x = $sections.index(this);
alert(x);
});
You need to pass in the selector against which you want to index of ( if you want to get the index based on the specific class )
x = $('.sections').index(this);
$('.sections').click(function() {
x = $('.sections').index(this);
alert(x);
});
.sections {
width: 200px;
padding: 30px;
background: blue;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div class="sections"></div>
<div class="sections"></div>
<div class="sections"></div>
You are correct index(), is used to find index of an element with respect to its siblings but correct way to use it in your code is.
$('.sections').click(function() {
var x = $('.sections').index(this);
alert(x);
});
Also, please note that it will start from 0 instead of 1.
https://api.jquery.com/index/
So, as you noticed, it's alerting it's index for itself among it's siblings in the DOM. (starting at 0)
If you want to get it's index among similar objects, you can use .index slightly differently.
$('.sections').click(function(){
x = $('.sections').index($(this));
alert(x);
});
This is still 0 based, so you can now expect that it will show 0 for the first item, then 1 and 2.
From the documentation:
If we omit the argument, .index() will return the position of the first element within the set of matched elements in relation to its siblings:
Your first .sections element is in 4th position among its siblings, so it returns 3 (the first being 0).
You want to pass a selector or an element to index().
So what I want to do is have a page that is split into 4 divs (let's say 1, 2, 3, and 4). So whenever I try to scroll down after div 1, the page would automatically scroll to div 2; if I try to scroll my mouse down below div 2, it would scroll automatically to div 3; and the same way for div 3 to div 2, etc. I'm sure you have seen something similar to this in some online pages (can't think of any right now but if I find something I will link it).
Basically what it would do is, when you scroll up from a div it would animate the transition to the top of the previous div on its own.
I tried using jQuery and doing scrollTop, but couldn't get it to work.
See this:
$('html, body').animate({scrollTop: $('#div1').offset().top},'slow');
The whole code took me a long time to make
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var n=1;
var classes=$('.class').length;
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
n--;
n=n<1?1:n;
} else {
n++;
n=n>classes?classes:n;
}
//to prevent duplicate event
setTimeout(function () {
$('html,body').animate({scrollTop: $('.class[data-number='+n+']').offset().top},'fast');
},10);
});
});
</script>
<style>
html, body {
margin: 0;
height: 100%;
}
.class{
height: 100%;
}
.class:nth-child(2n){
background: red;
}
.class:nth-child(2n+1){
background: blue;
}
</style>
</head>
<body>
<div class="class" data-number="1" ></div>
<div class="class" data-number="2" ></div>
<div class="class" data-number="3" ></div>
<div class="class" data-number="4" ></div>
</body>
</html>
Say my html is this
<div class='screen'>
<p>*A lot of text here*</p>
</div>
<div class='screen'>
<p>*More text and some images here*</p>
</div>
<div class='screen'>
<p>*Even more text and an image here*</p>
</div>
and right below my html, I have this
<style>
.screens {
margin: 10px;
}
</style>
<script type='text/javascript'>
hide();
</script>
Now, the Javascript function hide is in an external JS file which I imported in the html file. This is the hide function.
function hide() {
$('.screen').hide();
}
Now, when I open up this page, sometimes it works (it hides the text right away so it is a blank page) and other times, the text shows for like one second and then the text becomes hidden. How come it doesn't hide the text right away 100% of the time? would it work 100% of the time if I do
<script type='text/javascript'>
$(document).ready(function() {
hide();
});
</script>
?
Create a wrapper div and give it a display:none;. When needed, display it with show()
CSS:
.wrapper{ display:none;}
HTML:
<div class="wrapper>YOUR CONTENT</div>
Javascript
$(document).ready(function(){
$(".wrapper").show();
});
Or if you just care about .screen, change its CSS to display:none and the javascript to show() instead of hide()
<style>
.screens {
margin: 10px;
display:none;
}
</style>
<script type='text/javascript'>
show();
function show() {
$('.screen').show();
}
</script>
I am trying to create a toggling highlight effect using addClass and removeClass.
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
The addClass is working properly, but removeClass does not. I know there is a toggleClass method but I am just wondering what is wrong with this code.
You're removing the class, then adding it back with no delay, before the UI can be redrawn. You need to do one or the other, which suggests an else:
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight')
} else {
$(this).addClass('box-highlight')
}
The problem with your code is that it runs very quickly, and you won't see the effect :).
To make such effect, you can use a timer or delay. For example, you can do like this:
$("#box").addClass("box-highlight")
.delay(300).queue(function(next){
$(this).removeClass("box-highlight");
next();
});
Try this................
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}else{
$(this).addClass('box-highlight');
}
});
});
Check the bottom for revised edition
Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view.
Here's the HTML:
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
Right now I have this in my CSS:
#one div { display: none; }
And this for my JS:
$(document).ready(function() {
$('#one').hover(function() {
$('#one > div').css({ display : 'block' });
});
});
I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.
Thanks guys/gals
revised
New JavaScript
$(document).ready(function() {
$('#one').hover(function () {
$('#one > div').slideToggle();
});
});
This works! Although it comes down from the top, and I planned on having it come up from the bottom.
Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .animate().
CSS:
#one {
overflow: hidden;
position: relative;
border: 1px solid gray;
height: 40px;
}
#one div {
position: absolute;
bottom: -100%;
}
jQuery:
$('#one').hover(
function() {
$(this).find('div').animate({
bottom: '0%'
}, 'fast' );
},function() {
$(this).find('div').animate({
bottom: '-100%'
},'fast');
}
);
jsFiddle: http://jsfiddle.net/blineberry/mrzqK/
what about using jQuery slideUp or fadeIn?
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideUp/
This code works for me.
$(document).ready(function () {
$('#one').hover(function () {
$('#one > div').slideDown();
});
});
Needs a bit of tweeking to make it look nice but it does slide down.
edit
Here is a site describing how to use animate to do what you want.
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
you may do something like this
$(div).show("slide", { direction: "down" }, 1000)
or even the animate property may solve your problems
more here
http://docs.jquery.com/UI/Effects/Slide
api.jquery.com/animate/
firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)
secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?
I added a bg color for demo purposes.
hears a little demo:
http://jsfiddle.net/R9A3G/
If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style>#one div { display: none; }</style>
<head>
<title></title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$("#one").find("div").slideDown("slow");
});
$('#one').mouseout(function() {
$("#one").find("div").slideUp("slow");
});
});
</script>
<body>
<div>
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
</div>
</body>
</html>
TRY THIS