I was wondering how to make the individual menu items fade in with delay on page load.
I would like them to fade in not in a chronological order, so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...
How would such a jQuery or JavaScript code look and where in the code would I need to paste it?
Thanks a lot for help!
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function.
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>
You can use setTimeout and put it into a closure and work.
$(function () {
var currentTime = 0;
$("#item1, #item2, #item3")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
$(function () {
var currentTime = 0;
$("#item3, #item1, #item2")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
</script>
<style>
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
</style>
<title>My Menus</title>
</head>
<body>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
</body>
</html>
This can be achieved by following these steps:
1. Set the "display" property of the elements to "none" in CSS
2. Put your code in "$(document).ready(function(){ here })" after including the jQuery library
3. Set the delay(value) to the elements as needed for the order you want to show the elements
4. Call the fade function or any other effect or function for the elements
You can make the elements appear in any order you want, you just need to set the delay(value) accordingly. The later you want the elements to appear, the higher should you set this value.
In this example the elements appear in chronological order, just change the delay(value) to suit your needs. You can select the elements according to your needs. For example, here ID isn't used to select the elements, but can be used as well. This method works great too!
Remember to include the jQuery library first!
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li:nth-child(1)").fadeIn();
$("li:nth-child(2)").delay("1000").fadeIn();
$("li:nth-child(3)").delay("2000").fadeIn();
$("li:nth-child(4)").delay("3000").fadeIn();
$("li:nth-child(5)").delay("4000").fadeIn();
$("li:nth-child(6)").delay("5000").fadeIn();
$("li:nth-child(7)").delay("6000").fadeIn();
$("li:nth-child(8)").delay("7000").fadeIn();
$("li:nth-child(9)").delay("8000").fadeIn();
$("li:nth-child(10)").delay("9000").fadeIn();
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ul>
</body>
</html>
Assuming a list like this of unknown number of items
<div class="fadein-delay">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
...
</div>
you will a more modular script
$(function () {
$(".fadein-delay > div").each(function(index) {
console.log($(this).text());
$(this).delay(300*index).fadeIn(600);
});
});
and css that hides all items initially
.fadein-delay > div {
display: none;
}
Here is a working example https://codepen.io/giorgosk/pen/aVpXad
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
the code below allows me to have 5 different items on a page, and then let me clone any item I drag to different area and allow me to drag the new clone item. However, when I try to move the clone item to different location, it again clone that item. what did i do wrong?
<blockquote>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 5px; height: 5px; padding: 0.5em; }
.arrow h3 { text-align: center; margin: 0; }
</style>
<script>
function DragClone(id) {
$('.' + id).draggable({helper: "clone"});
$('.' + id).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
}
</script>
</head>
<body>
<div id="test1" class="i1" onmousedown="DragClone('i1');">
<img src="img1">
</div>
<div id="test2" class="i2" onmousedown="DragClone('i2');">
<img src="img2">
</div>
<div id="test3" class="i3" onmousedown="DragClone('i3');">
<img src="img3">
</div>
<div id="test4" class="i4" onmousedown="DragClone('i4');">
<img src="img4">
</div>
<div id="test5" class="i5" onmousedown="DragClone('i5');">
<img src="img5">
</div>
</body>
</html>
</blockquote>
if i do, it works fine but i do not want to create 5 the same function with just different class name.
$(function() {
$('.chaser').draggable({helper: "clone"});
$('.chaser').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable());
});
});
so my main goal is to create one function and pass in the class name so it knows to clone that item only and only clone the original and not the clone. Then allow me to drag the item around and resize the new clone item. please advise. thank you
I hope this will help you, its not perfect i think but quite near jsfiddle
HTML
<div id="test1" class="cloneable" onmousedown="DragClone(this);">
<img src="img1.png">
</div>
<div id="test2" class="cloneable" onmousedown="DragClone(this);">
<img src="img2.png">
</div>
JS
DragClone = function(elem) {
if($(elem).hasClass('cloneable')) {
$(elem).draggable({helper: "clone"});
$(elem).bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable().removeClass('cloneable'));
});
}
}
Update:
I update jsfiddle
I have created a listview in jquery with a listdivider with a filter. The filter works as expected but as soon as you collapse either of the list dividers, the search subsequently does not work at all,
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).bind("mobileinit", function () {
jQuery.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script>
<script>
var hide=0;
var dpwClone='';
$(function(){
$('[data-role="list-divider"]').click(function(element){
$(this).nextUntil('[data-role="list-divider"]').toggle();
$("#eServiceList").listview("refresh");
// $(this).nextUntil('[data-role="list-divider"]').toggle();
});
$( "#eServiceList" ).listview( "option", "filterCallback", searchList);
function searchList( text, searchValue, item ) {
var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
var show = false;
var hide = true;
if (result == -1 )
return hide;
return show;
};
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem nested list views</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
<li data-role="list-divider" id="dpw" >
DPW
</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider" id="custo">
Customs
</li>
<li>Friends</li>
<li>Work</li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Below is the JSfiddle link.
http://jsfiddle.net/jsfiddle_one/R8pZH/
Using .toggle() adds to the element an inline style attribute style="display: none;" or style="display: block;". List items are already enhanced with display: block; by jQuery Mobile. Hence, when using .toggle() - when it is visible again - the element will get display: block; twice, inline and in CSS style sheet.
To overcome this problem, use .toggleClass() classes rather than inline styling. I fixed your problem by adding a class
.hide { display: none !important; }
and I used it with .toggleClass('hide');
New code
Using custom CSS classes to override existing CSS is safer, and keep in mind that for jQuery Mobile, it's better to end each property with !important to force override.
I want to turn the JavaScript in this example into jQuery.
Basically I've jerry-rigged two scripts together. One is jQuery; creates the "active" function. But the hide/display layer function is in Javascript, and there's too much code for my liking, I'm thinking it must be possible to cut it down into something simple and effective with jQuery.
FYI, I just started out with Javascript and jQuery.
Help?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSMenu</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function HideLayer(d) { document.getElementById(d).style.display = "none"; }
function DisplayLayer(d) { document.getElementById(d).style.display = "block"; };
$(function() {
$('div.menuitem').click(function() {
var $this = $(this);
$('.active').removeClass('active');
$this.addClass('active');
})
});
</script>
<style>
#menuholder {width:100px; float:left; border-bottom:solid thin #000;}
.menuitem {border-top:solid thin #000; border-left:solid thin #000; border-right:solid thin #000;}
.menuitem:hover {cursor:pointer; color:#555}
.active {font-weight:bold; color:#000}
.active:hover {color:#000}
#layerholder {float:left; margin-left:20px; width:50px; height:50px; border:solid thin;}
.layer {padding-left:3px; font-size:36px; display:none;}
</style>
</head>
<body>
<div id="menuholder">
<div onClick="DisplayLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');HideLayer('fourthLayer')" class="menuitem">Item 1</div>
<div onClick="HideLayer('firstLayer');HideLayer('thirdLayer');HideLayer('fourthLayer');DisplayLayer('secondLayer')" class="menuitem">Item 2</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('fourthLayer');DisplayLayer('thirdLayer')" class="menuitem">Item 3</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');DisplayLayer('fourthLayer')" class="menuitem">Item 4</div>
</div>
<div id="layerholder">
<div class="layer" id="firstLayer">1</div>
<div class="layer" id="secondLayer">2</div>
<div class="layer" id="thirdLayer">3</div>
<div class="layer" id="fourthLayer">4</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
You could change your HTML to:
<div id="menuholder">
<div rel="firstLayer" class="menuitem">Item 1</div>
<div rel="secondLayer" class="menuitem">Item 2</div>
...
</div>
And then use this jQuery:
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).show();
});
This also not 100% perfect as rel is not a valid attribute for div elements. You should consider changing the divs to a elements (and use the href attribute) which has the benefit that the browser also jumps to the linked element.
DEMO
Update: If you decide to go with links, it would be:
<div id="menuholder">
<a href="#firstLayer" class="menuitem">Item 1</div>
<a href="#secondLayer" class="menuitem">Item 2</div>
...
</div>
and
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$(this.href).show();
});
jQuery is JavaScript. There is absolutely no reason to "convert" anything.
And jQuery has hide and show functions built in.
$('#id').hide();
And as for your onClick event..
It should be lowercase.
You could just do $('.layer').hide();$('#specificLayer').show();.
The script on that page already uses jquery as shown by the <script src="http://code.jquery.com/jquery-latest.js"> at the top, and the use of the $ sign before variables after it. Jquery is just a set of javascript functions in a library, so you can combine them without issue.
I'm trying to fire an event every time a navigation link (a.nav) is clicked. For Safari, it works as expected; however, in every other browser it ONLY fires the first time a link is clicked. For some reason, I'm not getting the desire result, is there anything I'm missing?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PatrickCason.com</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style type="text/css">
#main, #namespace {
padding-right: 115px;
}
#textarea {
padding-right: 115px;
padding-top: 15px;
}
#social {
bottom: 82px;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.history.js" type="text/javascript"></script>
<script src="spritely.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$("#main").show("slide", { direction: "up" }, 1000);
$("#copyright").show("slide", { direction: "down" }, 500);
$("#main").effect("bounce", { times: 1, distance: 5 }, 250);
$('a.nav').live('click', function() {
//For some reason... this only works with the first time I click a nav link... herein lies the problem!
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
});
</script>
</head>
<body>
<div id="floater"></div>
<div id="container">
<div id="main">
<div id="spark"></div>
<div id="namespace"><span style="font-size: 20px;">hi. i am </span><h1 style="display: inline; font-size: 36px;">Patrick Cason</h1><span style="font-size: 20px;">.</span></div>
<div id="nav">
<ul>
<li>Contact Me!</li>
<li>About</li>
<li>Links</li>
<li>Blog</li>
</ul><br>
<p><b>Phone:</b><br><span style="font-size: 24px; font-weight: bold;">615.339.4300</span></p>
<p><b>Email:</b><br>pcason#comcast.net</p>
</div>
<div id="social">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/feed.png"></li>
</ul>
</div>
<div id="home"><img src="images/home.png"></div>
<div id="textarea">
<div id="content"></div>
</div>
</div>
<div id="shadow"></div>
<script>
$(window).load(function () {
$("#shadow").fadeIn(1250);
});
</script>
<div id="copyright">
Copyright © 2011 Patrick Cason. All rights reserved.
</div>
</div>
</body>
</html>
I hope I'm not being to vague... I'd really appreciate the help.
I don't see the need for using live() in your case. That is for when you have dynamically added html. Or, when you have a decent number of elements that will bind to the same event handler (rather than click() which would bind individual handlers for each link).
$('a').click(function() {
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
});
I think the problem might be your selector. Try just selecting <a> tags
http://jsfiddle.net/EmvQk/
EDIT:
Edit your code to comment out the sprite() method and add an alert() as indicated in the comments below. I am pretty confident the problem is stemming from the sprite() call and this little test will determine if that is the case.
Your Css needs to follow the set of rules that the library requires in order to function properly. After reviewing the library example and based on your #sprite css rule ... Try making these changes:
#sprite
{
background: transparent url(images/spark.png) 0 0 no-repeat;
position: absolute;
top: 0;
left: 223px;
width: 156px;
height: 567px;
z-index: 2000;
cursor: pointer;
}
It is an issue with Spritely, as of version 0.5 they have a destroy() method, so...
$("#spark").click(function() {
var $spark = $("#spark");
$coil.sprite({
fps: 30,
no_of_frames: 12,
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
obj.spState(1);
killSprite($spark);
}
});
});
function killSprite(yourEl){
yourEl.destroy();
}
I popped the destroy method in a function that is called on the last frame of your animation so hopefully it won't cause any issues
It should be that
$('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
in and of itself doesn't work multiple times. Have you tried calling that function twice and see what happens.
To test if your click handler is the culprit, add an alert to the click handler and see if the issue is your click handler or the code snipped above.
It seems to me that your problem may be with the spritely plugin for jQuery. I set up a quick test at: http://jsfiddle.net/Htm4y/, that worked for me (in Chrome). In the example, clicking the .nav links fires a jQuery toggle. I would need to see your css to figure out what is supposed to be in that div, but it must be configured correctly in order for spritely to animate it.