Skitter jQuery Slideshow - want to set time interval

Skitter jQuery Slideshow - want to set time interval - javascript

I found this amazing jQuery slideshow called Skitter. it's awesome! so I implemented it in my latest project.Is it possible to change the time interval between two images. I searched for that every where in their website and javascript files.
in jquery.skitter.js page bellow lines are there
interval: 2500,
interval_in_elements: 300, // Interval animation hover elements hideTools
interval_out_elements: 500, // Interval animation out elements hideTools
I changed those but those lines, but no effect.
my code
<script>
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
if (value == 'dots_preview') {
$('.border_box').css({'marginBottom': '40px'});
options['dots'] = true;
options['preview'] = true;
}
else {
options[value] = true;
if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
}
}
}
$('.box_skitter_large').skitter({interval: 3000});
$('.box_skitter_large').skitter(options);
// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});
</script>
< div class="box_skitter box_skitter_large">
<ul>
<?php
$galClass = "cube,cubeRandom,block,cubeStop,cubeHide,cubeSize,horizontal,showBars,showBarsRandom,tube,fade,fadeFour,paralell,paralell,blind,blind,blindHeight,directionTop,directionBottom,directionRight,directionLeft,cubeStopRandom,cubeSpread";
$galClassArray = array_filter(explode(',',$galClass));
foreach($getall_img as $all_image)
{
if($all_image!='')
{
shuffle($galClassArray);
?>
<li>
<a href='<?php echo $all_image["img_link"];?>' target="_blank">
<img src="<?php echo $upload_path.$all_image["img_name"];?>" class="<?php echo $galClassArray[1];?>" width="950" height="320" />
</a>
<?php /*<div class="label_text"><p><?php echo $all_image["img_title"];?></p></div>*/?>
</li>
<?php
}
}
?>
</ul>
</div>

Looks like this did the job:
$('.box_skitter_large').skitter({interval: 3000});
$('.box_skitter_large').skitter(options); // REMOVE THIS LINE TO PREVENT
// PREVIOUS CUSTOM SETTINGS
// OVERWRITE

Related

How to add strikethrough in the js tree according condition?

I have created a jsTree to show the folder pathname. My problem is how do I add a strikethrough according to the condition active or inactive in the JSTree ? Hope someone can guide me to solve this problem. Below is my code:
<?php
$folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
$arr_sql5 = db_conn_select($folderData);
foreach ($arr_sql5 as $rs_sql5) {
$active = $rs_sql5['status'];
}
$folders_arr = array();
while($row = mysqli_fetch_assoc($folderData)){
$parentid = $row['parentid'];
if($parentid == '0') $parentid = "#";
$selected = false;$opened = false;
if($row['id'] == 2){
$selected = true;$opened = true;
}
$folders_arr[] = array(
"id" => $row['id'],
"parent" => $parentid,
"text" => $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>",
"category" => $row['category'],
"state" => array("selected" => $selected,"opened"=>$opened)
);
}
?> -->
<!-- Initialize jsTree -->
<div id="folder_jstree" title=""></div>
<!-- Store folder list in JSON format -->
<textarea style="" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>
<script style="text/javascript">
$(document).ready(function() {
var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());
$('#folder_jstree').jstree({
'core': {
'data': folder_jsondata,
'multiple': false
},
'plugins': ['sort'],
'sort': function(a, b) {
return this.get_text(a).localeCompare(this.get_text(b), 'en', {
numeric: true
});
}
});
var getColor = function(i) {
if (i >= 100 && i <= 199) {
return "blue";
} else if (i >= 200 && i <= 299) {
return "red";
} else if (i >= 300 && i <= 399) {
return "yellow";
} else if (i >= 400 && i <= 499) {
return "purple";
} else if (i >= 500 && i <= 599) {
return "green";
} else {
return "#000";
}
};
var colorNodes = function(nodelist) {
var tree = $('#folder_jstree').jstree(true);
nodelist.forEach(function(n) {
tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10));
tree.redraw_node(n.id); //Redraw tree
colorNodes(n.children); //Update leaf nodes
});
};
$('#folder_jstree').bind('load_node.jstree', function(e, data) {
var tree = $('#folder_jstree').jstree(true);
colorNodes(tree.get_json());
});
$('#folder_jstree').bind('hover_node.jstree', function(e, data) {
$("#" + data.node.id).attr("title", data.node.original.category);
});
});
/* $(function() {
$(document).tooltip();
}); */
</script>
Inside json_encode($folders_arr) the content is:
[{"id":"1","parent":"#","text":"100 PENTADBIRAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 PENGURUSAN ASET <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 PENGURUSAN SUMBER MANUSIA <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 PERUNDANGAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 PERHUBUNGAN AWAM <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"8","parent":"6","text":"100-1-1 PENGGUBALAN-PENYEDIAAN-PINDAAN UNDANG-UNDANG-PERATURAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 KHIDMAT NASIHAT <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"10","parent":"8","text":"100-1-1-1 UNDANG-UNDANG KECIL KERJA DI JALAN 1996 <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"11","parent":"8","text":"100-1-1-2 UNDANG-UNDANG KECIL PERUNTUKAN MENGENAI LESEN BERSESAMA (MAJLIS PERBANDARAN) <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"12","parent":"8","text":"100-1-1-3 UNDANG-UNDANG KECIL MENGKOMPAUN KESALAHAN-KESALAHAN (MAJLIS PERBANDARAN KLANG), JALAN PARIT DAN <span id='category'>JTM (BERHUBUNG KOD 100-1\/1\/2)<\/span>","category":"JTM (BERHUBUNG KOD 100-1\/1\/2)","state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 JABATAN PENGUATKUASAAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 JABATAN BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 PUBLISITI, PROMOSI DAN PROTOKOL <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"16","parent":"15","text":"100-2-1-1 PUBLISITI DAN KENYATAAN MEDIA <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"84","parent":"#","text":"201 HAHA <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}}]
I want the condition such that if $active = 0 then it will show the strikethrough in the jsTree. Else if $active = 1 then it will back to normal.
Actually I want the actual output like the below sample picture. For the output below I just used Paint software to edit, easier to let you know what I want as the output:
My working JSFiddle code is here: https://jsfiddle.net/ason5861_cs/9x0dsotz/2/
Hope someone can guide me on how to add strikethrough according to the condition active or inactive into my code?
Note：$row['name'] and $row['category']needed to put strikethrough together if inactive.

With PHP you could have your conditional to set the value of a NULL variable to text-decoration that changes to line-through. This would be done with CSS. Simply have a conditional that checks if the value of $active is set to 0, if it is, then set the value of the null variable to display line-through. If the value of active is anything other than 0, then $strikeThrough will stay NULL and output nothing, therefor no change to text style that is wrapped in span tag.
$strikeThrough = null;
if($active = 0){
$strikeThrough = 'text-decoration: line-through;'
$output = "<span style='".$strikeThrough."'>" . $rs_wtpname . "</span>";
}
// no change needed for default Active
IN JS, you could use the #folder_jstree nodelist to run through your list and update there. Likely within your colorNodes function you could have a conditional there to check the value of status, then append css to your value if set to 0 (inactive).
If you are unable to get the status from PHP into JS, you could dump the value in the php code using the aforementioned method into an arbitrary data attribute or even alt attribute added to the #folder_jstree element span tag. Then retrieve that using JS and perform your conditional in JS.
EDIT: (April 25th, 2020)
Okay I think I see what you are doing with the JSON and your $folders_array now and how it is saving the data to be parsed in the JSON file.
Try the following code in your php and see if it works.
$folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
$arr_sql5 = db_conn_select($folderData);
foreach ($arr_sql5 as $rs_sql5) {
$active = $rs_sql5['status']; //--> Here you are setting active state
}
$folders_arr = array();
while($row = mysqli_fetch_assoc($folderData)){
$parentid = $row['parentid'];
if($parentid == '0') $parentid = "#";
$selected = false;$opened = false;
if($row['id'] == 2){
$selected = true;$opened = true;
}
//--> this would be the default state of active = 1 set in $output
$output = $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>";
//--> Now we see if active is set to 0
if($active === 0){
//--> if active is set to 0 change the value of $output to reflect 'text-decoration'
$output = "<span style='text-decoration: line-through;'>" . $row['name'] . ' ' . "<span id='category'>". $row['category']."</span></span>";
}
$folders_arr[] = array(
"id" => $row['id'],
"parent" => $parentid,
"text" => $output, //--> save the proper $output in our array
"category" => $row['category'],
"state" => array("selected" => $selected,"opened"=>$opened)
);
}

How do I make a standalone repeating jQuery function

I have been working on a filter function in jQuery for a simple unordered list. Each list is inside a block with a filter that can be modified in the back-end (Wordpress) to filter out specific strings. The filter also has a reset button to set it back to the original state.
Now I've been asked to make this a repeatable list. Repeating the list itself wasn't a problem but the filter now filters out items in all existing lists.
So the filter does work but it gets a bit overexcited filtering out all elements that have the class filter-list_item. I thought adding a number to the class on the parent div on each loop and then adding a for loop in jQuery to target these specific classes would fix this. Hence the $list_count and listCount variables. This however does the exact same thing and still affects all lists. I'm not sure why. Any help on how to make it so that the filters only filter out items in their corresponding lists would be much appreciated.
This is the current jQuery for the filter function:
$(document).ready(function (){
// Content filter
var lists = $(".filter-list").length;
for(var listCount = 0; listCount < lists; ) {
$(".filter-list-"+listCount).find(".content-filter").change(function() {
// Retrieve the option value and reset the count to zero
var search = $(this).val(), count = 0;
$(".filter-list_item").each(function(){
// Remove item if it does not match the value
var string = this.innerText;
var found = strSearch(search.toLowerCase(), string.toLowerCase());
if (found) {
$(this).css("display", "block");
// Show the list item if the value matches and increase the count by 1
count++;
} else {
$(this).css("display", "none");
}
// Show reset button
if($(this).index() > 0) {
$(".filter-reset").addClass("active");
}
});
// Update the count
if(count == 0) {
$(".filter-select-results").text("No results for " +search);
} else if(count > 0) {
$(".filter-select-results").text('');
}
});
// Reset filter
$(".filter-reset").click(function() {
$(".content-filter").prop('selectedIndex',0);
$(".filter-list_item").css("display", "block");
$(".filter-reset").removeClass("active");
$(".filter-select-results").text('');
});
listCount++;
}
});
// Search function
function strSearch(search, string) {
var n = string.search(search);
if(n >= 0) {
return true;
}
return false;
}
And this is the PHP used to build the lists
<?php
$list_count = 0;
foreach ($layout['list'] as $list) { ?>
<div class="container filter-list filter-list-<?php echo $list_count++; ?>">
<div class="title-wrapper">
<h2><?php echo $list['title']; ?></h2>
<?php echo $list['description'];
// Content filter
if($list['content_filter'] == true) { ?>
<div class="filter-container">
<button class="filter-reset"><i class="fa-icon fa fa-undo"></i></button>
<select class="content-filter" name="filterselect">
<option value="all" disabled selected>Selecteer een locatie</option>
<?php foreach($list['filter_options'] as $filter) { ?>
<option value="<?php echo $filter['option']; ?>"><?php echo $filter['option']; ?></option>
<?php } ?>
</select>
</div>
<?php } ?>
</div>
<div class="filter-select-results"></div>
<ul class="filter-list_items">
<?php foreach($list['list_items'] as $list_item) { ?>
<?php if( $list_item['link'] ) { ?>
<li class="filter-list_item"><?php echo $list_item['item']; ?></li>
<?php } else { ?>
<li class="filter-list_item">
<span><?php echo $list_item['item']; ?></span>
</li>
<?php } ?>
<?php } ?>
</ul>
</div>

Replace $(".filter-list_item").each(function(){ with $(this).closest(".filter-list").find(".filter-list_item").each(function(){
This is assuming .content-filter-element is part of a .filter-list. closest then navigates to the first parent satisfying the condition. Whether that condition holds is a bit unclear from the php code you showed.

Javascript seems not to be working on mobile

I have a text toggle option on my (WordPress) website:
If you click on the red "info" link on the right the text under it opens. The problem is that it doesn't seem to work on mobile (iPhone 4). See the screenshot attached. It seems to me the javascript is not loading at all or just not working?
html link:
<div id="<?php the_ID(); ?>" class="projectTitel">
<?php the_title( sprintf( '<h2 class="entry-title"><button rel="bookmark" class="show">', esc_url( get_permalink() ) ), '<div class="info">Info ↓</div><div class="close_info">X</div></button></h2>' ); ?>
</div>
javascript code:
<script type="text/javascript">
var divs = document.getElementsByClassName("projectTitel");
[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));
// by default, all Inhoud divs are hidden
hideElements("Inhoud");
hideElements("close_info");
jQuery('.info').show();
function handler(event) {
// get the clicked project's index :
var projectIndex = getClickedProjectIndex(event);
// toggle the right Inhoud div :
toggleDiv(document.getElementsByClassName("Inhoud")[projectIndex]);
toggleDiv(document.getElementsByClassName("close_info")[projectIndex]);
toggleDiv(document.getElementsByClassName("info")[projectIndex]);
}
// hide all elements that have the provided class name
function hideElements(className) {
var elements = document.getElementsByClassName(className);
[...elements].forEach(element => element.style.display = "none");
}
function getClickedProjectIndex(event) {
var elements = document.getElementsByClassName("projectTitel");
var projectIndex = 0;
[...elements].forEach((element, index) => {
if (element.id == event.currentTarget.id) {
projectIndex = index;
}
});
return projectIndex;
}
function toggleDiv(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>

Replace "[...divs]" on "Array.from(divs)"
And do it for all other instances of [...{a}].

Javascript - How do i find the current number in a nodelist/querySelectorAll?

I am currently working on a vertical javascript image slider, i am trying to make it dynamic so that i can have more than 1 slider using the same code.. everything works fine except that i cant target the current wrapper..
How do i know which wrapper is currently being used?
I tried to browse the STO for a while but could only find some very old answers, we now have 2017 is there any real solution to this problem?
HTML/PHP which generates the sliders
<div class="profileCosplaysWrapper">
<div id="slideLeftVerticalSlider" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon"></div></div>
<div id="slideRightVerticalSlider" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon"></div></div>
<div id="profileCosplayImageWrapper" class="profileCosplayImageWrapper">
<?php
while ($stmt->fetch()) {
?>
<a class="profileCosplayInnerWrapper" href="index.php?page=cosplay&id=<?php echo $profileCosplayId; ?>">
<!--<div class="profileCosplayInnerWrapper">-->
<img class="profileCosplayImages" src="uploads/<?php echo $profileCosplays; ?>" alt="rate a cosplay latest 10 profile cosplays">
<!--</div>-->
</a>
<?php
}
$stmt->close();
?>
</div>
</div>
<div class="profileCosplaysWrapper">
<div id="slideLeftVerticalSlider" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon"></div></div>
<div id="slideRightVerticalSlider" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon"></div></div>
<div id="profileCosplayImageWrapper" class="profileCosplayImageWrapper">
<?php
while ($stmt->fetch()) {
?>
<a class="profileCosplayInnerWrapper" href="index.php?page=cosplay&id=<?php echo $profileCosplayRandomId; ?>">
<!--<div class="profileCosplayInnerWrapper">-->
<img class="profileCosplayImages" src="uploads/<?php echo $profileCosplaysRandom; ?>" alt="rate a cosplay latest 10 profile cosplays">
<!--</div>-->
</a>
<?php
}
$stmt->close();
?>
</div>
</div>
Javascript
var slideLeftVerticalSlider = document.querySelectorAll('.slideLeftVerticalSlider');
var slideRightVerticalSlider = document.querySelectorAll('.slideRightVerticalSlider');
var imagesWrapper = document.querySelectorAll('.profileCosplayImageWrapper');
var profileRightInterval;
var profileLeftInterval;
slideLeftVerticalSlider.forEach(function(e){
e.addEventListener('mouseover', profileMouseOverLeft, false);
});
slideRightVerticalSlider.forEach(function(e){
e.addEventListener('mouseover', profileMouseOverRight, false);
});
slideLeftVerticalSlider.forEach(function(e){
e.addEventListener('mouseout', function (e) {
clearInterval(profileLeftInterval);
});
});
slideRightVerticalSlider.forEach(function(e){
e.addEventListener('mouseout', function (e) {
clearInterval(profileRightInterval);
});
});
function profileMouseOverLeft(e) {
profileLeftInterval = setInterval(function () {
profileMoveLeft(0);
}, 7);
}
function profileMouseOverRight(e) {
profileRightInterval = setInterval(function () {
profileMoveRight(0);
}, 7);
}
function profileMoveLeft(currentSlider) {
imagesWrapper[currentSlider].scrollLeft += -5;
}
function profileMoveRight(currentSlider) {
imagesWrapper[currentSlider].scrollLeft += 5;
}
If you look at these functions i am passing "0" as a parameter, which ofcourse should be dynamic
function profileMouseOverLeft(e) {
profileLeftInterval = setInterval(function () {
profileMoveLeft(0);
}, 7);
}
function profileMouseOverRight(e) {
profileRightInterval = setInterval(function () {
profileMoveRight(0);
}, 7);
}
function profileMoveLeft(currentSlider) {
imagesWrapper[currentSlider].scrollLeft += -5;
}
function profileMoveRight(currentSlider) {
imagesWrapper[currentSlider].scrollLeft += 5;
}

You should be able to use this or the event target
function profileMouseOverLeft(e) {
console.log(this);
console.log(e.target);
}
based on your HTML using this and parentNode:
Array.from(document.querySelectorAll(".slideLeftVerticalSlider")).forEach( elem => elem.addEventListener("mouseover", left) )
Array.from(document.querySelectorAll(".slideRightVerticalSlider")).forEach( elem => elem.addEventListener("mouseover", right) )
function left (evt) {
var wrapper = this.parentNode.querySelector(".profileCosplayImageWrapper")
wrapper.style.backgroundColor = "red";
}
function right (evt) {
var wrapper = this.parentNode.querySelector(".profileCosplayImageWrapper")
wrapper.style.backgroundColor = "blue";
}
<div class="profileCosplaysWrapper">
<div id="slideLeftVerticalSlider1" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon">L</div></div>
<div id="slideRightVerticalSlider1" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon">R</div></div>
<div id="profileCosplayImageWrapper1" class="profileCosplayImageWrapper">
foo
</div>
</div>
<div class="profileCosplaysWrapper">
<div id="slideLeftVerticalSlider2" class="slideLeftVerticalSlider"><div class="slideLeftVerticalIcon">L</div></div>
<div id="slideRightVerticalSlider2" clasS="slideRightVerticalSlider"><div class="slideRightVerticalIcon">R</div></div>
<div id="profileCosplayImageWrapper2" class="profileCosplayImageWrapper">
foo
</div>
</div>

In your event handler you already have a reference to the element.
You can search the HTMLElementCollection to find the index of that element:
function getIndex(element) {
for(var i=0; i<slideLeftVerticalSlider.length;i++)
{
if (slideLeftVerticalSlider[i]===element) return i;
}
return -1;
}
The same method can be applied to any element collection.
You should also be giving every element on your page a unique id.

Javascript fade in multiple elements

In my custom Wordpress theme I am trying to animate all my table "nodes" in as the page loads simultaneously.
I can get this animation to work by applying the animation to each element individually but since trying to automate this process the animation fades all my nodes in at the same time and I do not understand why.
The below code generates my nodes...
<div class="span12 news-tiles-container">
<div class="row span12 news-tiles-inner">
<?php
$node_id = 1;
$node_size_id = 1;
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
if($node_size_id > 3) {
$node_size_id = 1;
}
?>
<a href='<?php the_permalink(); ?>'>
<div class='node node<?php echo $node_id ?> size<?php echo $node_size_id ?>'
style='background-image: url(<?php the_field( 'thumbnail' ); ?>);'>
<div id="news-caption" class="span12">
<p class="span9"><?php the_title(); ?></p>
<img class="more-arrow" src="<?php bloginfo('template_directory'); ?>/images/more-arrow.png" alt="Enraged Entertainment logo"/>
</div>
</div>
</a>
<?php
$node_size_id++;
$node_id++;
?>
<?php endwhile; endif; ?>
</div>
</div>
And I am using the following code to control there animate in
$(document).ready(function(){
// Hide all of the nodes
$('.node').hide(0);
// Local Variables
var node_id = 1;
var nodes = 10;
var i = 0;
while(i <= nodes)
{
$('.node'+node_id).hide(0).delay(500).fadeIn(1000);
node_id+=1;
nodes--;
} });
I assume it is something to do with my while loop, but the node counter increments successfully so it should be applying the animation to node1 then node2 then node3 and so on.
Thanks in advance
Alex.

Here's a generic plugin that will perform any animation you want, in sequence, on a jQuery collection of elements:
(function ($) {
$.fn.queueEach = function (func) {
var args = [].slice.call(arguments, 1); // array of remaining args
var els = this.get(); // copy of elements
(function loop() {
var el = els.shift();
if (el) {
$.fn[func].apply($(el), args).promise().done(loop);
}
})();
return this;
}
})(jQuery);
Usage:
$('.node').queueEach('fadeIn', 'slow');
Working demo at http://jsfiddle.net/alnitak/D39Cw/

Use your brandy dandy .fadeQueue(): working jsFiddle
$.fn.fadeQueue = function(){
$(this).fadeIn(function(){
if(!$(this).is(':last-child')) // making sure we are not done
$(this).next().fadeQueue();
});
}
This will wait for the callback of .fadeIn() for each div before moving to the next one..

Probably not as elegant, but still works:
$(document).ready(function(){
$('.node').hide();
$('.node').each(function(index,elem){
setTimeout(function(){$(elem).fadeIn(1000);},1000*index);
});
});
jsFiddle here

Develop Reference

JavaScript is the programming language of the Web.

Skitter jQuery Slideshow - want to set time interval - javascript

Looks like this did the job: $('.box_skitter_large').skitter({interval: 3000}); $('.box_skitter_large').skitter(options); // REMOVE THIS LINE TO PREVENT // PREVIOUS CUSTOM SETTINGS // OVERWRITE

Related

How to add strikethrough in the js tree according condition?

How do I make a standalone repeating jQuery function

Javascript seems not to be working on mobile

Javascript - How do i find the current number in a nodelist/querySelectorAll?

Javascript fade in multiple elements

Categories

Resources