jQuery select element

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

jQuery select element

Post by Wolfie »

Hello all

I have made some jquery code :

Code: Select all

 $("div.data a").live("mouseover",function(){        $('#foto').load('gallery.php', {                    'dir':$(this).parent('div.data').attr('rel'),                    'kategory':$(this).parent('div.data').attr('value'),                    'gallery':'no'}, function() {            $(this).hide().fadeIn('slow');        });        $move_by = 600;        $frame_left = 0;        $frame_no = 1;      return false;    }); 
To serve this php code :

Code: Select all

 
if(isset($_POST['kategory'])) {
        $rows = $data->retrieveData($_POST['kategory']);
        //print_r($rows[0]['title']);
        $count = count($rows);
    }
    
    for($i = 0; $i < $count; $i++) {
        echo '<div id="data" class="data" rel="'.$rows[$i]['dir'].'" value="'.$rows[$i]['kategory'].'"><a href="#">'.$rows[$i]['date'].' :  '.$rows[$i]['title'].' - '.$rows[$i]['text'].'</a></div>';
    }
 
As u c, after clicking on $('div.data a') the load functions is fired, but there was a mistake , cause on the page there are fiew anchors elements close each other, and when moving mouse over one before another load finished, the whole page starts blinking.
So I decided to made interval and I made this code :

Code: Select all

 $("div.data a").live("mouseover",function(){        setTimeout(function() {        $('#foto').load('gallery.php', {                    'dir':$(this).parent('div.data').attr('rel'),                    'kategory':$(this).parent('div.data').attr('value'),                    'gallery':'no'}, function() {            $(this).hide().fadeIn('slow');        });        $move_by = 600;        $frame_left = 0;        $frame_no = 1;      return false;      }, 1000);    }); 
U can see here the setTimeout function set to 1000ms. But now the problem is that the [data] parameter, which is second load() function parameter don't gather the 'rel' and 'value' values corectly.

Code: Select all

 'dir':$(this).parent('div.data').attr('rel'),'kategory':$(this).parent('div.data').attr('value'), 
I think because of $(this), which no longer referes to $('div.data a').
I was trying to refere to this values in some other way but without good results,
Enybody can help ?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery select element

Post by kaszu »

Instead of a timer you could just stop XHR.

Code: Select all

var xhrRequest = null;  //Create in global scope
$("div.data a").live("mouseover",function(){
    //Stop xhr if there is one
    if (xhrRequest) try {
        xhrRequest.abort();
    } catch (e) {}
    //Save XHR object
    xhrRequest = $('#foto').load('gallery.php', {
But if you still want to use timer, then use temporary variable

Code: Select all

$("div.data a").live("mouseover",function(){
        var self = $(this);  //Save reference, it will be available only inside closures (this function and this call and all 'sub' functions)
        setTimeout(function() {
        $('#foto').load('gallery.php', {
                    'dir':self.parent('div.data').attr('rel'),  //self is a reference to A element
Edit: I suggest buying Johns new book "Secrets of the JavaScript Ninja", it's really worth the money.
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: jQuery select element

Post by Wolfie »

Thanks !

Your firs solution is what I was looking for for three days!

But unfortunately....it is still blinking, I thought that because of the nature of mouseover, but I have used this plugin and still blinking :(

Maybe u can check what can be wrong, here is my page , just wait till menu and anchors will load, than just hover over the dates and u will se what is hapening......

I made the code like this :

Code: Select all

    var xhrRequest = null;  //Create in global scope   $("div.data a").live("mouseenter",function(){       //Stop xhr if there is one       if (xhrRequest) try {           xhrRequest.abort();       } catch (e) {}       //Save XHR object       xhrRequest = $('#foto').load('gallery.php', {                    'dir':$(this).parent('div.data').attr('rel'),                    'kategory':$(this).parent('div.data').attr('value'),                    'gallery':'no'}, function() {            $(this).hide().fadeIn('slow');        });        $move_by = 600;        $frame_left = 0;        $frame_no = 1;      return false;    }); 
Maybe there is still some mistake.....I was also trying the second version, but also blinks

------------------------------------------------------------------------------------------------
Ok, I know why it is still blinking but I don't know how to handle with this stuff.

The blinking is because of last parameter of load() function which is :

Code: Select all

 $(this).hide().fadeIn('slow'); 
When I set fadeIn(1) there was no blinking, so this is because fadeIn() function.
So how can handle this issue ?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery select element

Post by kaszu »

Remove that line

Code: Select all

$(this).hide().fadeIn('slow');
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: jQuery select element

Post by Wolfie »

Yes, but than I will not have fadeIn effect,

I have figure out things with hoverIntent jQuery plugin...

Thanks for help
Post Reply