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
Related
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.
Excuse the vague question title. Not entirely sure on how to word this.
Basically my issue stems from a bit of jquery in which when setting the data attr in the html the img tag shows some odd behavior as shown below.
<img src="images/gallery/
<img src="/images/gallery/bob.png" class="thumbnail" data="1">
" class="popupImage">
From what I am seeing is the class "popupImage" is not replacing the class "thumbnail" however the img tag nested in the outer img tag should be a seperate entity all together, my mind is baffled, and have been at this for hours and probably just need a new pair of eyes to look over it.
Any help would be greatly appreciated
This is the full html code and jQuery code for the gallery.
If I can provide anymore information who needs it please ask and I shall try and give some more where possible.
HTML
<?php
$data = $db->query("SELECT * FROM `gallery_items` ORDER BY id ASC");
//display query results
?>
<br /><br />
<?php
foreach($data as $item)
{
echo "<a data='".$item['id']."' class='noStyle'>
<img src='/images/gallery/".$item['image']."' class='thumbnail' data='".$item['id']."'>
</a>";
}
if(count($data) < 1){
echo "<p style='text-align: center;'><br /><br />No results found</p>";
}
?>
<div class="image">
<button class="prev" data="unset"><</button>
<img src='' class="popupImage">
<button class="next" data="unset">></button>
</div>
jQuery
$(".noStyle").click(function(){
loadPopup($(this).attr("data"));
});
offFocus();
function loadPopup(id){
imgSrc = "/images/gallery/"+$("a[data='"+id+"']").html();
$("div.background").fadeIn(400, function(){
$(".popupImage").attr("src", imgSrc);
$(".image").fadeIn(500);
reFocus();
setPrevNext($("button[data='"+id+"']"));
});
$(window).resize(function(){
reFocus();
});
function reFocus(){
$(".image").css({"left": (($(window).width()/2) - ($(".image").width()/2))+"px", "top": (($(window).height()/2) - ($(".image").height()/2))+"px"});
};
}/*close loadPopup */
function setPrevNext(buttonObj){
objects = $(".button");
firstObj = $(".button:first");
lastObj = $(".button:last");
prev = undefined;
next = undefined;
if(buttonObj.attr("data") == firstObj.attr("data"))
prev = lastObj;
else
prev = objects.eq(objects.index(buttonObj)-1);
if(buttonObj.attr("data") == lastObj.attr("data"))
next = firstObj;
else
next = objects.eq(objects.index(buttonObj)+1);
$(".prev").attr("data", prev.attr("data"));
$(".next").attr("data", next.attr("data"));
//next = buttonObj.next("button").attr("data");
//$(".next").attr("data", "next");
}
function offFocus() {
$(".background").click(function(){
$(".background").css({"display": "none"});
$(".image").css({"display": "none"});
});
};
Well im adding to database some records but i dont like the way i did and wanted to make something way easier for the user and better.
What i did was: http://i.imgur.com/AYrPyCn.jpg
And what i want is: http://i.imgur.com/aKNBTtO.jpg
Well i guess i know how to create the divs geting all the images from database and the horizontal scroll bar but what i dont know is when i select the image that id from image will appear on the input create by me.
Help needed.
Code from what i have:
<select name="id_artigo" id="attribute119">
<?php
do {
?>
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
</select>
<div id="editimg"><p><img src="images/artigos/1.png" id="main" /></p></div>
Js:
$('#attribute119').change(function () {
$('#main').attr('src', 'images/artigos/' + $('#attribute119 :selected').text() + '.png');
});
You can use jQuery slideshow plugin like jcarousel or jssor.
Just do a google search on "jQuery slideshow" or "jQuery carousel".
I recommend you to use jcarousel.
Anas
Since you don't want it to look like a drop-down any more, replace the drop-down with a hidden field, which will hold the ID of the item they select:
<input type="hidden" name="id_artigo" />
(for testing you could use type="text" instead)
Give each of your images a data-id-artigo attribute:
<img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">
When an image is clicked, update the hidden ID's value:
$('.artigo_img').on('click', function() {
var idArtigo = $(this).data('idArtigo'); // get the artigo ID from the `data-` attribute
$('[name="id_artigo"]').val(idArtigo); // update the value of the hidden field
});
When the form is submitted, id_artigo will be equal to the selected item, just like before.
I see now that you just want to select 1 image, this answer is for selecting multiple images.
(not tested, so there might be some errors)
<style>
.img_holder
{
height:100px;
clear:both;
}
.floating_img
{
float:left;
width:100px;
height:100px;
}
.img_selected
{
border:1px solid black;
}
</style>
<div class="img_holder">
<?php
$img_id_arr = array();
do {
$selected = true; //<--implement if they are selected
$selected_class = '';
if($selected)
$img_id_arr[] = $row_artigos['id_artigo'];
$selected_class = ' img_selected';
}
?>
<div class="floating_img<?php echo $selected_class; ?>" onclick="toggle_img(<?php echo $row_artigos['id_artigo']; ?>);"><img src="images/artigos/<?php echo $row_artigos['id_artigo']; ?>.png" id="main" /></div>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
<input typ="hidden" id="my_selected_images" name="my_selected_images" value="<?php echo implode(';',$img_id_arr); ?>">
<script>
function toggle_img(img_id)
{
var selected_imgs = $('#my_selected_images').value;
var img_arr = selected_imgs.split(";");
var found = false;
var new_arr = [];
for (i = 0; i < img_arr.length; i++) {
if(img_id == img_arr[i])
{
found = true;
//deselect img
}
else{
//leave other item untouched
new_arr.push(img_arr[i]);
}
}
if(!found)
{
new_arr.push(img_id);
//select img
}
$('#my_selected_images').value = new_arr.join(';');
}
</script>
</div>
I have a website that uses the following script:
//==================== EXPAND ========================//
$('a.expand').live('click',function() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
});
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('.optionsUser > li:last').css({'border':'none'});
This is used to display data when the user clicks on "expand". Instead of this, I want the text to appear automatically. How should I change the script? I have tried changing live('click' to live('load' but this doesn't work.
The site uses: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Thanks in advance.
This is the php code:
<!-- EXPAND -->
<a data-expand="<?php echo $_SESSION['LANG']['expand']; ?>" data-hide="<?php echo $_SESSION['LANG']['hide']; ?>" class="expand getData" data="<?php echo $key['id']; ?>" data-token="<?php echo $key['token_id']; ?>">
<?php echo $icon; ?>
<span class="textEx"><?php echo $_SESSION['LANG']['expand']; ?></span> <?php echo $typeMedia; ?>
</a>
And this is the sample html:
<a data-expand="Expand" data-hide="Collapse" class="expand getData" data="697" data-token="0f1966ac9d8529055f9b0e09c0a58a65cdf5d5e8"> <span class="textEx">Genişlet</span> </a>
Think of facebook or twitter, you click on expand and you get an area to reply to a post. At the moment I have to click to see the reply form, but I want that to appear by default.
You can use a custom event or simply trigger the click programmatically:
$(function(){//run on page load
$('a.expand').live('click',function() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
});
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('a.expand').trigger("click");//trigger click on page load
$('.optionsUser > li:last').css({'border':'none'});
});
If you move the code from the anonymous function you're binding to a.expand to a named function, all you would need to do is invoke it on DOM ready, then you would also just pass the function to your a.expand handler.
$(function(){
$('a.expand').live('click', Expand);
Expand(); // Invoke function
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('.optionsUser > li:last').css({'border':'none'});
});
//Extracted function
function Expand() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
}
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