7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

URGENT MAJOR JQUERY ISSUE!!

by newbim
4 replies
Hi

I'm pulling my hair out with this one. I'm relatively new to jQuery, but not web dev, and have struck a brick wall.

I have two problems:

The aWeber signup form I want to hover above the main page is hovering fine, but for some reason isn't closing.

And the second (which is really doing my nut in) is that in some browsers, the popup is showing and working fine (e.g. Chrome) but in others, it is showing behind the video div I have. This mainly happens in PC Browsers though.

I have checked the z-index, and the video's z-index is a lot lower than the signup form.

If anyone could help me out with some info on the first places to check, I've checked the syntax, and it seems to be ok, I'm going to post an example in the morning on the coding.

It is obviously something I'm doing wrong. Please can someone give me an example code for a close button. Here's an example of what I have for the "close offer" button:

CSS
Code:
#clickme {}
HTML
Code:
$('#clickme').click(function(){
    $('.awebersignup').fadeOut('slow');
});
LINK
Code:
<div class="awebersignup">
<a href="#" id="clickme">Close Offer</a>
</div>
Any advice would be greatly appreciated.

Cheers,

Newbim.
#issue #jquery #major #urgent
  • Profile picture of the author LynxSI
    You should add a "return false;" in your function code after the fade out. That prevents the browsers default action of following the href link. Right now you're probably jumping to the current page + "#" in your browser, right?

    There's also a fancier jQuery way to "prevent default" but I forget it off the top of my head. You could google "jQuery prevent default".

    Also check your selectors. Is the awebersignup form the class name? That's what the period means. If its actually an "ID" name, you need to chance the period to a pound sign. Selectors are often the hardest part of jQuery for newbies.

    Of course "clickme" is probably a poor name choice as well. Not "wrong", but you could have duplicates in the document or other conflicting scripts. You might want to makeup a more guarenteed unique name.
    Signature

    Ben Swayne
    Lynx System Integrators Ltd.
    Ben Swayne's Blog | Barcode Scanners and Label Printers

    {{ DiscussionBoard.errors[2052969].message }}
  • Profile picture of the author n7 Studios
    You need to seperate out the issues here:

    1. Inline popup not correctly displaying across all browsers
    2. Inline popup not always closing

    Two solutions:
    1. Use an existing jQuery plugin (jQuery Popup Dialog And Gallery Plugin Reviews has a good review of several plugins). Most of these are set to be cross browser compatible
    2. Use Firefox and install Firebug and YSlow. This will help you debug any CSS and Javascript to help you identify possible issues. This is probably the longer route of the two if you're fairly new to web development.
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[2053055].message }}
  • Profile picture of the author alv22
    1. Sometimes #ids and .classes can be a problem.

    Id's are unique, and classes are not. This means you can have only one element with a certain id on a page. This might work fine with CSS, browsers usually render multiple elements with the same id correctly, but javascript can be trickier. You should construct your javascript handlers accordingly.

    This means:
    You have just one aweber-signup box on your page at any given time. You don't need to give it a class, an ID should be good - whereas you might have several different elements that, when clicked, close the same aweber box. Make that a class.

    Why not make everything a class and not ID, then?
    ID's are faster to parse with javascript and a bit more semantic. Ie. when you tell javascript to hide .hideme, javascript goes through all your pages elements and their subelements to find the right elements to hide, even if there's only one. If you tell it to hide #hideme, it stops on the first hit in the document, which might be more than ten times faster.

    It's usually not a problem, but doing these things right from the beginning begins to matter when you have lots of functionality (or on slow computers), and the margin for these kind of errors becomes smaller at the same time!

    You should try something like this (you have to adjust your html, see the selector classes and ids).

    Code:
    $('.close').click(function(){
    $('#awebersignup').fadeOut('slow');
    return false;
});
    This allows you to place class="close" on any element (or as many elements as you'd like) anywhere on the page to enable the close-function on them.

    2. Regarding the z-index-issue, do you have position:relative or position:absolute set on the elements? Many browsers require position:relative on an element for the z-index to have any effect.

    (First post! )
    {{ DiscussionBoard.errors[2055507].message }}
  • Profile picture of the author LynxSI
    Another good site with some pre-built plugins is flowplayer.org's jQuery tools.
    This guy tries very hard to produce very clean, distilled code without too many unnecessary features to gum up the works. Lots of samples too. Check him out: http://flowplayer.org/tools/index.html
    Signature

    Ben Swayne
    Lynx System Integrators Ltd.
    Ben Swayne's Blog | Barcode Scanners and Label Printers

    {{ DiscussionBoard.errors[2055632].message }}

Trending Topics