Re: [Refresh Austin: 6542] jquery cross browser issue

43 views
Skip to first unread message

John Fawcett

unread,
Jun 29, 2012, 1:57:21 PM6/29/12
to refresh...@googlegroups.com
Not totally sure, but sometimes IE has some issues with scoping and what-not when you leave off 'var' from your variable declarations.

On Jun 29, 2012, at 12:52 PM, Stephanie Meyer wrote:

 Any idea why this code doesn’t work in IE?

<script type="text/javascript">
        $(document).ready(function() {
            switchers = $('#switchers > li');
            states = $('#state_info > div');
            switchers.each(function(idx) {
                    $(this).data('state', states.eq(idx));
                }).click(
                function() {
                    switchers.removeClass('active');
                    states.removeClass('active');             
                    $(this).addClass('active');  
                    $(this).data('state').addClass('active');
                });
            });
    </script>

I have an unordered list with an id of “switchers”. The li’s act as anchors to toggle the content within a separate “state_info” div (swaps divs of content with the “state_info” div..the visible content div has a class of “active”). I’m not sure if it matters but it’s worth noting that the “switchers” ul is nested in a div, with an id of “map”, which is at the same level of hierarchy as the “state_info” div, so “switchers” and “state_laws” are not at the same parental level...if you understand what I’m trying to say :)

To better explain (in case there is a better solution), the page is meant to display state laws per state via a map. The li’s of “switchers” are positioned absolutely over the states of the map. When the user clicks the state, the individual state’s laws appear in a box below the map. here is the full page of code: https://gist.github.com/3019523 (don't critiquing the mark-up, unless there is something detrimental to the functionality...I know that there is some scripting I could do to eliminate redundant code)
I’m not sure what about the code above doesn’t work with IE. Please help. Thanks in advance! 
-Steph M

--
Our Web site: http://www.RefreshAustin.org/
 
You received this message because you are subscribed to the Google Groups "Refresh Austin" group.
 
[ Posting ]
To post to this group, send email to Refresh...@googlegroups.com
Job-related postings should follow http://tr.im/refreshaustinjobspolicy
We do not accept job posts from recruiters.
 
[ Unsubscribe ]
To unsubscribe from this group, send email to Refresh-Austi...@googlegroups.com
 
[ More Info ]
For more options, visit this group at http://groups.google.com/group/Refresh-Austin

Eric Leversen

unread,
Jun 29, 2012, 2:12:44 PM6/29/12
to refresh...@googlegroups.com

Jim Bob Howard

unread,
Jun 29, 2012, 2:41:15 PM6/29/12
to refresh...@googlegroups.com
Stephanie,

You seem to have a z-index issue going on. Hover over the 'I' in HI and you'll see that you get a pointer cursor. Clicking on that one works.

But your img tags seem to be "above" those and so the LI isn't getting the click.

In the console, I added this and the map worked for me...

$("#map > img").css("cursor","pointer")
                       .click(
       function() {
           $("#_" + $(this).attr('id')).click();
       });

Blessings,
Jim Bob
--
Jim Bob Howard
-----------------------------------------------------------
SharePoint 2010 at Work: Tips, Tricks, and Bold Opinions
The Best of EndUserSharePoint.com
 
Follow me on Twitter: www.twitter.com/jbhoward


Stephanie Meyer

unread,
Jun 29, 2012, 4:11:31 PM6/29/12
to refresh...@googlegroups.com
Hey Jim,

I see where you are going with this and I like it, however when I tried to apply it to my code it didn’t work. Can you please send the full script with what you intended? I’m not the jquery master I wish I were, first of all, and my brain is fried due to stress and lack of sleep.

Thanks so much!

______________________________



Stephanie Meyer | graphic designer & web developer

3400 northland
austin, tx  78731
t | 512 628 0096
f | 512 628 0086

sme...@envision-creative.com
www.envision-creative.com

facebook | facebook.com/envisioncreative
twitter | @envisioncreativ
image.jpg

Jim Bob Howard

unread,
Jun 29, 2012, 4:26:41 PM6/29/12
to refresh...@googlegroups.com
Sure.

Just change what you have to this:

$(document).ready(function() {
$("#map > img")
.css("cursor","pointer")
.click(function() {
// Gets the id from the img and uses it to click the appropriate #switcher > li
  $("#_" + $(this).attr('id')).click(); 
});
switchers = $('#switchers > li');
states = $('#state_info > div');
switchers.each(function(idx) {
$(this).data('state', states.eq(idx));
}).click(function() {
 switchers.removeClass('active');
 states.removeClass('active');             
 $(this).addClass('active');  
 $(this).data('state').addClass('active');
});
});

Blessings,
Jim Bob

--
Our Web site: http://www.RefreshAustin.org/
 
You received this message because you are subscribed to the Google Groups "Refresh Austin" group.
 
[ Posting ]
To post to this group, send email to Refresh...@googlegroups.com
Job-related postings should follow http://tr.im/refreshaustinjobspolicy
We do not accept job posts from recruiters.
 
[ Unsubscribe ]
To unsubscribe from this group, send email to Refresh-Austi...@googlegroups.com
 
[ More Info ]
For more options, visit this group at http://groups.google.com/group/Refresh-Austin
image.jpg

Stephanie Meyer

unread,
Jun 29, 2012, 7:03:46 PM6/29/12
to refresh...@googlegroups.com
Jim, you freaking rock! :-) Thank you for your help!

______________________________



Stephanie Meyer | graphic designer & web developer

3400 northland
austin, tx  78731
t | 512 628 0096
f | 512 628 0086

sme...@envision-creative.com
www.envision-creative.com

facebook | facebook.com/envisioncreative
twitter | @envisioncreativ
| graphic designer & web developer



On 6/29/12 1:41 PM, "Jim Bob Howard" <jimbob...@gmail.com <http://jimbob...@gmail.com> > wrote:

Stephanie,

You seem to have a z-index issue going on. Hover over the 'I' in HI and you'll see that you get a pointer cursor. Clicking on that one works.

But your img tags seem to be "above" those and so the LI isn't getting the click.

In the console, I added this and the map worked for me...

$("#map > img").css("cursor","pointer")
                       .click(
        function() {
            $("#_" + $(this).attr('id')).click();
        });

Blessings,
Jim Bob

On Fri, Jun 29, 2012 at 1:12 PM, Eric Leversen <er...@webchronicconsulting.com <http://er...@webchronicconsulting.com> > wrote:




On Jun 29, 2012, at 12:52 PM, Stephanie Meyer wrote:

image.jpg
image.jpg
Reply all
Reply to author
Forward
0 new messages