random li (list) with jQuery before page get loaded - javascript

how I can random a list with jQuery before page get loaded?
i found this example on the web: http://whatanswered.com/websites-javascript/random-elements-using-jquery.php
(you must scroll down a bit to see)
but it works only after mouse press the button. *this is my problem, i need it to work atomatically before the page is getting loaded.
Any ideas?
I copied the code in this FIDDLE, if anyone would like to help, it might be usefull!
$(function() {
$('button').click(function() {
$("div.list").randomize("div.cat");
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);

You can just call the randomize plugin when the page loads - be aware though the plugin needs to have been loaded before hand:
$(function() {
$("div.list").randomize("div.cat");
});
Updated fiddle: http://jsfiddle.net/yNChm/1/

The easiest way is to call the randomize() function after the document.ready event has fired:
$(document).ready(function() {
$("div.list").randomize("div.cat");
});

You should be able to accomplish this by doing a $(window).ready, or something along those lines:
$(function() {
console.log('Yo');
$("div.list").randomize("div.cat");
});
Make sure you register the plugin first!

Related

jquery - colorbox - adding a function to the popup

I have a "quick view" feature that captures a dynamic URL also known as "qvURL" and creates a colorbox with it via:
<script type="text/javascript">
$(function(){
$(".quickview_btn").click(function(e){
e.preventDefault();
var qvURL = $(this).attr("href");
$.colorbox({"href": qvURL})
});
$.colorbox.resize();
});
</script>
Now. I need to make some changes in the child window - but it seems the AJAX or whatever is wiping out the entire DOM and anything I load from the parent window doesn't reflect.
For instance - let's say I just want to add a div that says qwerty!
[I'm actually wanting to create an mbox around a Call To Action]
Any insight would be greatly appreciated!
Please note - the URLs it's loading is content that I can not manipulate - so it has to be done in the parent window.
Thanks!
Please see below for my full snippet:
<script>
$( document ).ready(function() {
$('.quickview_btn').click(function(){
//Quickview tracking
$('.quickview').attr('id', 'quickviewClicked-area');
mboxDefine('quickviewClicked-area','quickviewClicked','clicked=Y');
$( 'div.quickview' ).bind( 'click', function() {
console.log('clicked!');
product = $(this).children().attr('href');
console.log(product)
mboxUpdate('quickviewClicked', "link="+product);
});
//thumbnail add to cart tracking
$('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area');
mboxDefine('ThumbnailAddToCart-area','ThumbnailAddToCartClicked','clicked=Y');
$( 'div.qlBtns' ).bind( 'click', function() {
;
mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y");
console.log('mbox updated!')
});
});
});
/*
$(document).ready(function(){
$(qvURL).$colorbox({
iframe : true,
frastIframe: false,
onComplete: function(){
$('.name').html('yeah you got it');
}
});
});
*/
</script>
< script >
$(document).ready(function() {
$('.quickview_btn').click(function() {
//Quickview tracking
$('.quickview').attr('id', 'quickviewClicked-area');
mboxDefine('quickviewClicked-area', 'quickviewClicked', 'clicked=Y');
$('div.quickview').bind('click', function() {
console.log('clicked!');
product = $(this).children().attr('href');
console.log(product)
mboxUpdate('quickviewClicked', "link=" + product);
});
//thumbnail add to cart tracking
$('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area');
mboxDefine('ThumbnailAddToCart-area', 'ThumbnailAddToCartClicked', 'clicked=Y');
$('div.qlBtns').bind('click', function() {;
mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y");
console.log('mbox updated!')
});
});
});
/*
$(document).ready(function(){
$(qvURL).$colorbox({
iframe : true,
frastIframe: false,
onComplete: function(){
$('.name').html('yeah you got it');
}
});
});
*/
< /script>
I see this line in your code:
$.colorbox({"href": qvURL})
and my first question is whether or not that selector is enough. Mind you I am more a middle-ware than a client-side guru, but from my knowledge of jQuery, that selector won't do anything because jQuery can't tell what you mean. See how you used the quotes in the assignment of the click function?
$(".quickview_btn").click(function(e){
e.preventDefault();
if you used $("#colorbox") to get the object (if that is its id) or $(".colorbox" if is is a a class you are targeting.
(I am not an expert, as I said, but those who are agree:
$(".someClass") selects all elements with class name someClass
$("#testButton") selects the element with the id value of testButton
-- Courtesy of the DZone jQuery Ref Card at https://dzone.com/refcardz/jquery-selectors
So it may be that everything else is fine, you just aren't passing your code anything to hook into the colorbox object.

Trigger jQuery event on pageload

I have the following jQuery:
// change the number of finished and missing assets
$('.add-requirements .overall-status .status-dropdown li').live('click', function() {
var remaining_titles = $('.item-section.finished').length;
$('.add-requirements .remaining-titles').text(remaining_titles);
});
It fires whenever a status dropdown is changed. How would I also make it fire when the page loads?
From what I can understand you want to update the remaining count on page load and I assume that the finished status is pre setted on the desired elements.
I'll go about this in another way
$('.add-requirements .overall-status .status-dropdown li').live('click', updateRemaining);
updateRemaining()
function updateRemaining(){
var remaining_titles = $('.item-section.finished').length;
$('.add-requirements .remaining-titles').text(remaining_titles);
}
Just chain on a trigger('click') to trigger a click on first pageload :
$('.add-requirements .overall-status .status-dropdown li').live('click', function() {
var remaining_titles = $('.item-section.finished').length;
$('.add-requirements .remaining-titles').text(remaining_titles);
}).trigger('click');
But you should really be using on()
$('closest_non_dynamic_parent').on('click', 'your_freakishly_long_selector', function() {
A bit more verbose, but here is what worked for me:
var remaining_titles_section = $('.add-requirements .remaining-titles');
remaining_titles_section.text($('.item-section.finished').length);
$('.add-requirements .overall-status .status-dropdown li').live('click', function() {
var remaining_titles = $('.item-section.finished').length;
remaining_titles_section.text(remaining_titles);
});

Number, hover (etc) effect not work after Ajax Load More

I'm using Drupal 7 and get my content with View module on page. And my pager Views Load More module. And my thumbnail effect hover, shadow etc. Image hover using this code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
And getting number on my current thumbnail. This code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
Everything is OK. All effects on start page. But when click Load More button, my effects can't work another page.
How do i solve this problem? Thanks.
The reason why it stops working is due to the hover function (and your other scripts/functions) only works on existing elements. So if you add something with ajax, it wont apply to that unless you reload the script after the ajax load.
Another option is to use live() or on() (for the hover part. On is the new version of live, added in jQuery 1.7).
Live and on listens for any existing or future elements.
A live script would look something like this:
$(".yourElement").live({
mouseenter:
function () {
// Do something
},
mouseleave:
function () {
// Do something
},
mousemove:
function () {
// Do something
}
});

Timer Reset Function Not Working!

Hello Guys!
I have been trying to create a simple sample code for my newest jQuery Plugin, but it doesn't seems to be working at all! Can anyone tell where I'm going wrong?, or can anyone provide me a new function to do it. So my problem is that when I mouse over an element classed trigger an another element classed eg should fadeIn(); but if the user takes out the mouse before the element classed eg fades in it should not be fading in anymore, but this is not working at all. I don't not what is getting wrong? Please help me out. (Below is my Problem HTML nad Jquery Code!)
HTML CODE
<div class="trigger">MouseOverMe</div>
<div class="eg">See Me!</div>
JQUERY CODE
function timereset(a)
{
var elem = $('.'+a);
if(elem.data('delay')) { clearTimeout(elem.data('delay')); }
}
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
$('div.eg').delay(1000).fadeIn();
});
$('div.trigger').mouseout(function () {
timereset('eg');
$('div.eg').fadeOut();
});
});
THANKS IN ADVANCE
You don't need that timereset stuff, simply call stop() on the object and the previous effect will stop:
http://api.jquery.com/stop/
Update based on the new comment:
$('div.trigger').mouseout(function () {
$('div.eg').stop().hide();
});
jQuery
$('.trigger').hover(function() {
$('.eg').delay(1000).fadeIn();
}, function() {
$('.eg').stop(true, true).hide();
});
Fiddle: http://jsfiddle.net/UJBjg/1
Another option would be to clear the queued functions like:
$('div.trigger').mouseout(function () {
$('div.eg').queue('fx', []);
$('div.eg').fadeOut();
});
Bear in mind if the fadeOut/In has already started by using stop you could end up with a semi-transparent element.
EDIT
Here's an example: http://jsfiddle.net/Qchqc/
var timer = -1;
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
timer = window.setTimeout("$('div.eg').fadeIn(function() { timer = -1; });",1000);
});
$('div.trigger').mouseout(function () {
if(timer != -1)
window.clearTimeout(timer);
$('div.eg').fadeOut();
});
});

jquery event once all images are loaded (including cached images)?

I have the following function which is for ajaxing in a page and the showing it only once all the images are loaded:
$.get('target-page.php', function(data){
var $live = $('#preview_temp_holder').html(data);
var imgCount = $live.find('img').length;
$('img',$live).load(function(){
imgCount--;
if (imgCount==0){
//DO STUFF HERE ONCE ALL IMAGES ARE LOADED
$('#preview_pane').html($live.children()).fadeIn(800);
$live.children().remove();
}
});
});
The problem comes with cached images not firing the .load() event and thus not decrementing the imgCount.
I know i need to implement Nick Craver's solution but am not sure how. Can anyone help me?
I spent a long time looking for solutions for this. The plugin suggested on the jQuery API page (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) did not work in firefox.
My solution was to loop through each image and only add the load event if it was not already loaded (i.e. cached by the browser). The code below includes a counter that I was using to check that load events were only firing for images not already in the cache:
$(document).ready(function () {
var images = $("img.lazy");
$(".image-wrapper").addClass("loading");
var loadedCount = 0;
images
.hide()
.each(function () {
if (!this.complete) {
$(this).load(function () {
loadedCount++;
console.log(loadedCount);
displayImage(this);
});
}
else {
displayImage(this);
}
});
});
function displayImage(img) {
$(img).fadeIn(300, function () {
$(this).parents(".image_wrapper").removeClass("loading");
});
}
I'm no javascript expert so if you spot any problems with this solution please do let me know. As I say, it works in IE8, Chrome and Firefox (not sure about older versions of IE).
Ok, managed to get them merged:
$.get('target-page.php', function(data){
var $live = $('#preview_temp_holder').html(data);
var $imgs = $live.find('img')
var imgCount = $imgs.length;
$imgs.one('load', function() {
imgCount--;
if (imgCount==0){
//DO STUFF HERE
//ALL IMAGES ARE LOADED
$('#preview_pane').html($live.children()).fadeIn(800);
}
})
.each(function() {
if(this.complete){
$(this).load();
}
});
});
note: a 404-ing image would break this.
Change:
$('img',$live).one('load', function(){
...
});
And after above append:
$live.find('img').each(function() {
if(this.complete) $(this).load();
});
Generally I suggest to reuse $live.find('img') from previous count statement.

Categories