-1

I am tring to show twitter user information on my web page. I have created a div tag which is will contain user information using jquery. I want to show user information when the cursor is over this div tag. Below is my code in jquery:

var hideDelay = 500;
var currentID;
var hideTimer = null;
var container;

$(function () {
    container = $('<div id="personPopupContainer" style=\"max-width:400px;\">'
    + '<table border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
    + '<tr>'
    + '   <td class="corner topLeft"><div style="position:absolute;top:15px;left:-16px;"><img src="images/balloon_tail.png" /></div></td>'
    + '   <td class="top"></td>'
    + '   <td class="corner topRight"></td>'
    + '</tr>'
    + '<tr>'
    + '   <td class="left"></td>'
    + '   <td><div id="personPopupContent"></div></td>'   //the div tag is here
    + '   <td class="right"></td>'
    + '</tr>'
    + '<tr>'
    + '   <td class="corner bottomLeft">&nbsp;</td>'
    + '   <td class="bottom"></td>'
    + '   <td class="corner bottomRight"></td>'
    + '</tr>'
    + '</table>'
    + '</div>');
    $('body').append(container);

    $('#personPopupContainer').mouseover(function () {
        if (hideTimer)
            clearTimeout(hideTimer);
    });

    $('#personPopupContainer').mouseout(function () {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function () {
            container.css('display', 'none');
        }, hideDelay);
    });
});

That is working well. But the below code that is

$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

isn't working.

function UserMouseOver(o) {

    var obj = $("#" + o);

        var Settings = obj.attr('rel').split(',');

        var UserID = Settings[0];
        var ScreenName = Settings[1];
        if (hideTimer)
            clearTimeout(hideTimer);

        var pos = obj.offset();
        var width = obj.width();
        if (pos != null && width != null) {
            container.css({
                left: (pos.left + width) + 20 + 'px',
                top: pos.top - 23 + 'px'
            });
        }
        $('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

}

what I am doing wrong? Can someone please help me?

8
  • 4
    <center> is deprecated and should be avoided. Can you explain what exactly not working means? What is it supposed to do? What is it currently doing? What is it not doing? Any errors?
    – Jared
    Mar 6, 2013 at 15:25
  • Where are you calling UserMouseOver()?
    – JJJ
    Mar 6, 2013 at 15:27
  • @jrod the loading.gif isn't showing in the div tag.
    – RockOnGom
    Mar 6, 2013 at 15:27
  • 1
    Have you confirmed that the function is being called at all? If you change it to .html('<p>test</p>'), do you see the text? Have you checked the browser dev tools what gets inserted into the DOM?
    – JJJ
    Mar 6, 2013 at 15:29
  • @Juhana UserMouseOver is working. When the cursor is over a different div tag.
    – RockOnGom
    Mar 6, 2013 at 15:30

3 Answers 3

0

Note: in the actual code there is no typo ( the image tag isn't closed early ) but in the code you focus on, there is a typo, as Stian points out.

Longshot.. Is the image even available? You can use this plugin:

https://github.com/desandro/imagesloaded

..then change the HTML once the image is known to be in the DOM.

0

Your question does not entirely explain what you are trying to do. However, I can at least explain why your image isn't showing.

First, you need to call your function UserMouseOver(o) from inside $('#personPopupContainer').mouseover(function () {. . .}. The way you coded it, UserMouseOver(o) will never get called, and none of the logic in the function will get executed.

Second, in your $('#personPopupContainer').mouseout(function () {. . .}, the line container.css('display', 'none') is hiding your entire container object (ALL your HTML!) on mouseout. That will cause your "loading" gif to never display, because the div you are trying to display (personPopupContent) resides within the container object you just set to display: none! You should set the display to none only on the particular element you are trying to hide; for example, you could add id="balloon_tail" to your balloon image and change the Javascript line to $('#balloon_tail).css('display', 'none').

Third, you will get an error on the line var Settings = obj.attr('rel').split(','); because you did not include a rel attribute in your outermost element personPopupContainer. You will need to add a rel attribute of comma separated strings to this element for this line to work. (However, according to W3C, the only official element that uses the rel attribute is <a>, the anchor tag.)

Finally, I would add an image tag to #personPopupContent to make it something like <div id="personPopupContent"><img src="" id="loading_sm" /></div>. Then you can change

$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

to

$('#loading_sm').attr("src", "images/loading_sm.gif");

but that's just me.

I hope this helps!

0

If the code is working as you stated (I can't see where you are calling your mouse over method) and it's only the image that isnt showing.

Use a Web Debugger to check for any 404 errors e.g. http://www.fiddler2.com/fiddler2/ or even your browser's F12 web debugger.

Make sure your path to the image is correct.

UPDATE

Okay, now that we know it works. Try the following : Add a class to #personPopupContent e.g. class="popupContent" . Change the line of code where you set the html to call the class selector instead of the ID selector. Then to make sure that jQuery is getting the html element to add the content to, add some text to it.

  //All  the other code
   + '   <td><div id="personPopupContent" class="popupContent"></div></td>'
  //All  the other code

Change the selector in UserMouseOver() method :

$('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');

PLEASE MAKE SURE

I don't know where you are calling the UserMouseOver() method, so please add a Document Ready around the piece of jquery.

function UserMouseOver(o) {

    //All the other code

    $(function () {
        $('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');
    });
}
4
  • Thanks for your suggestion. I looked and I saw the image.But the image isn't seeing in popup div.
    – RockOnGom
    Mar 6, 2013 at 15:51
  • Place an alert('mouse over is working'); in your mouse over method.. just to make sure it is working, let me know what happens. And if you can, add your code to jsfiddle.net so we can see the code and fix it. Mar 6, 2013 at 19:10
  • Yeah,I had tried an alert message and it have worked. Maybe I should look at this code initially.
    – RockOnGom
    Mar 6, 2013 at 20:44
  • Okay, now that we know it works. Try the following : Add a class to #personPopupContainer e.g. class="popupContainer" . Change the line of code where you set the html to call the class selector instead of the ID selector. Then to make sure that jQuery is getting the html element to add the content to, add some text to it. see my updated answer. Mar 7, 2013 at 5:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.