Weird jQuery event problem

[TySkby]

Hi,

Using jQuery 1.4.4 with the Roundabout plugin. Something weird is going on here and I can't put my finger on it.

I have a function set up that changes the text of a <span> when a new image is called into focus. It gets called in $(document).ready like so:

<script>
                        $(document).ready(function() {
                            $('ul#archiveScroll').roundabout({
                                shape: 'lazySusan',
                                tilt: -5.0,
                                minOpacity: 0.09,
                                maxOpacity: 1.0,
                                reflect: true
                            });
                            $('ul#archiveScroll li').focus(function(){
                                var title = $(this).children('.issueTitle').html().toString();
                                document.getElementById('displayTitle').textContent = title;
                            });
                        });
                    </script>

I have 7 images in rotation, but for some reason (no matter what order the images are in), the sixth and seventh images fail to trigger the "focus" event.

View it in action: http://jettisonquarterly.com/archive/

Please help- we have clients looking at the site this week and I need it to look spiffy. Is there anything I can do to figure out *what* is causing the problem?

Thanks,
Ty

[scrappedcola]

In your focus event put a console.log that specifies what this and title are (assuming you have Firefox and firebug available as IE's debugger doesn't show objects in the console.log). Have you tried this with a click even rather than focus?

[tinymark]

You must have fixed it. The images grow in opacity as they come to the front. Only the front image clicks to an href. http://jettisonquarterly.com/archive/pdf/issue03.pdf showed up as 404. I tested with IE7, IE8, Safari 5.04 Chrome and Firefox. The customers will be happy.

[TySkby]

scrappedcola: I am using firebug, but I'm not sure what you mean by "add a console.log". I haven't tried with click, but the change should happen when an image moves to the front of the queue, which is when focus is supposed to be triggered in roundabout.

tinymark: Not fixed- the links all work fine (except that Issue 03- as the owner is telling me to keep the link up even though they are still looking for the pdf it's supposed to link to). The issue is the blue text that changes as you scroll through the different images that says something like "Issue 01 - Spring 2009".

The text changes when issues 1-5 get scrolled to the front, but not when issues 6 or 7 are scrolled. That's what I don't understand- why does the text change fine when any issue except for the last two are scrolled? I tried changing up the order (ie reversing) and it's not specific to 6 and 7 in that case- it's whatever the last two <li>s are.

For clarification, here's the HTML for the images that get scrolled:

<ul id="archiveScroll">
	<li>
		<a href="./pdf/issue01.pdf" target="_blank"><img src="./thumbs/issue01.jpg" alt="Issue 1" /></a>
		<div class="issueTitle">Issue 1 - Spring 2009</div>
	</li>
	<li>

		<a href="./pdf/issue02.pdf" target="_blank"><img src="./thumbs/issue02.jpg" alt="Issue 2" /></a>
		<div class="issueTitle">Issue 2 - Summer 2009</div>
	</li>
	<li>
		<a href="./pdf/issue03.pdf" target="_blank"><img src="./thumbs/issue03.jpg" alt="Issue 3" /></a>
		<div class="issueTitle">Issue 3 - Fall 2009</div>
	</li>
	<li>

		<a href="./pdf/issue04.pdf" target="_blank"><img src="./thumbs/issue04.jpg" alt="Issue 4" /></a>
		<div class="issueTitle">Issue 4 - Winter 2009</div>
	</li>
	<li>
		<a href="./pdf/issue05.pdf" target="_blank"><img src="./thumbs/issue05.jpg" alt="Issue 5" /></a>
		<div class="issueTitle">Issue 5 - Spring 2010</div>
	</li>
	<li>

		<a href="./pdf/issue06.pdf" target="_blank"><img src="./thumbs/issue06.jpg" alt="Issue 6" /></a>
		<div class="issueTitle">Issue 6 - Summer 2010</div>
	</li>
	<li>
		<a href="./pdf/issue07.pdf" target="_blank"><img src="./thumbs/issue07.jpg" alt="Issue 7" /></a>
		<div class="issueTitle">Issue 7 - Fall 2010</div>
	</li>
</ul>

Thanks!

[McLaren]

I'm not sure what you mean by "add a console.log".

in your javascrtip code write line

console.log(x); and you will see x value in the console ;)

[scrappedcola]

As Speed mentioned console.log(x) will output to firebug's console values that you place in it and if an object (dom or otherwise) allows you to drill into the object and see it's properties. I would suggest doing a console.log("this",this); and a console.log("title",title); Within the focus function to make certain each are what you expect them to be. The reason why I suggest you try the click is to verify that the function works right for each image and if not it might give some insight as to why the focus isn't working right (ie something is misspelt or the z-index is prohibiting the right image to come register focus).

[TySkby]

Thanks for the insight.

I added the console.log lines so now my focus function looks like this:

$('ul#archiveScroll li').focus(function(){
	var title = $(this).children('.issueTitle').html().toString();
	document.getElementById('displayTitle').textContent = title;
	console.log("this",this);
	console.log("title",title);
});

Here's an example of the output. Although I the images for issues 6 and 7 were brought to the front, they generated no output for either console.log lines.

this <li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 197.4px; top: 82.9px; width: 284px; height: 300px; opacity: 1; z-index: 400; font-size: 16px;" current-scale="1.0000">
title Issue 2 - Summer 2009
this <li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 197.4px; top: 82.9px; width: 284px; height: 300px; opacity: 1; z-index: 400; font-size: 16px;" current-scale="1.0000">
title Issue 3 - Fall 2009
this <li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 197.4px; top: 82.9px; width: 284px; height: 300px; opacity: 1; z-index: 400; font-size: 16px;" current-scale="1.0000">
title Issue 4 - Winter 2009
this <li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 197.4px; top: 82.9px; width: 284px; height: 300px; opacity: 1; z-index: 400; font-size: 16px;" current-scale="1.0000">
title Issue 5 - Spring 2010
this <li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 197.4px; top: 82.9px; width: 284px; height: 300px; opacity: 1; z-index: 400; font-size: 16px;" current-scale="1.0000">
title Issue 1 - Spring 2009

Basically that's the output if you click each image in order, coming back around to the first.

Will try changing to click and see what happens. Stay tuned :)

[TySkby]

Holy crap! Changing it to "click" worked. Here's the script:

$('ul#archiveScroll li').click(function(){
    var title = $(this).children('.issueTitle').html().toString();
    document.getElementById('displayTitle').textContent = title;
    console.log("this",this);
    console.log("title",title);
});

And the output:

this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 2 - Summer 2009
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 3 - Fall 2009
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 4 - Winter 2009
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 5 - Spring 2010
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 6 - Summer 2010
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.6px; top: 68.1px; width: 251.908px; height: 266.1px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8870">
title Issue 7 - Fall 2010
this <li class="roundabout-moveable-item" style="position: absolute; left: 454.5px; top: 68.1px; width: 251.936px; height: 266.13px; opacity: 0.83; z-index: 344; font-size: 14.19px;" current-scale="0.8871">
title Issue 1 - Spring 2009

Now, that's awesome and everything (thank you so much), but is it wrong of me to still be thinking, "But why didn't it work on focus?"??? I love that it's working, don't get me wrong, and I'm perfectly happy to keep it this way (since the only noticeable difference is that the text changes when the image is clicked as opposed to when it finally makes its way to the center), but why would changing the event from "focus" to "click" make such a difference?

[tinymark]

I am going to watch this one. The thing works for me everywhere. http://jettisonquarterly.com/archive/pdf/issue03.pdf missing.

[scrappedcola]

I'm not certain exactly why it worked. The click event was localized on the li and I think that was why it worked. If you have time to play around you might try setting the focus event on the anchor tag within the li. You would have to change the title code a bit to

var title = $(this).parents("li").find(".issueTitle").html().

. I would be interested to see if the more specific focus event might fix it. I haven't really dug under the hood for the Roundabout plugin code so I'm not certain how it places focus on elements (the documents on the site weren't all that helpful either). But if you can figure out how and when it places focus that might shed some light on the overall issue at hand.

[TySkby]

I am going to watch this one. The thing works for me everywhere. http://jettisonquarterly.com/archive/pdf/issue03.pdf missing.

I know the Issue 03 pdf is missing- my boss wants me to keep it like that (not sure why, but I do as I'm told).

If you look, you should see that clicking on issue numbers 6 and 7 (the last two in the order) does not change the blue text below the image. All the other images change accordingly. Are you seeing something different.

Incidentally, I just tested this in IE and it looks seriously messed up- the image size is quite screwy and as for the text changing- it doesn't, no matter which image is brought front and center (tested it with "click" and "focus"- no deal). Does IE hate jQuery?

Edit: Should have clarified- up to this point, I have been working on this in Firefox 3.6

[TySkby]

I'm not certain exactly why it worked. The click event was localized on the li and I think that was why it worked. If you have time to play around you might try setting the focus event on the anchor tag within the li. You would have to change the title code a bit to

var title = $(this).parents("li").find(".issueTitle").html().

. I would be interested to see if the more specific focus event might fix it. I haven't really dug under the hood for the Roundabout plugin code so I'm not certain how it places focus on elements (the documents on the site weren't all that helpful either). But if you can figure out how and when it places focus that might shed some light on the overall issue at hand.

Played around with it a little, and your suggestion did work, but it looks (in terms of user experience) no different than when I'm using "click". I also found the lack of detail in the roundabout docs frustrating. I'm just going to go with "click", since it works fine for my purposes. I just put it in production at the original URL.

Any ideas on why this is completely broken in IE? Why doesn't the script change that text in any way?

[tinymark]

No wonder. I have colour issues with my eyes.

This is the wrong place to explain it. I get people to check things just like this for me. Albert Einstein agree. If all your suits are the same colour, what does it matter what you're wearing?

[scrappedcola]

Try using the jquery .text() function on your div. You site as it stands works in IE9 but IE 7 and 8 don't change the text so using the jQuery function might be the way to go as it tends to be a bit more cross browser happy.

$("#displayTitle").text(title);

[tinymark]

This tool is valuable to me when I'm trying to understand why CSS is doing something. It is a Microsoft tool Web Expression SuperPreview. you can get it here. http://www.microsoft.com/downloads/en/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en

Beyond the fact that it does a good job of giving you a look at what a page would look like with the different versions of IE, but I discovered that when I had an a href in an li and I target things for the li weird things would happen. I found it morre reliable to use the a href as my target. Hope this helps.

[TySkby]

Try using the jquery .text() function on your div. You site as it stands works in IE9 but IE 7 and 8 don't change the text so using the jQuery function might be the way to go as it tends to be a bit more cross browser happy.

$("#displayTitle").text(title);

That works perfectly. Just what I needed- thanks!

tinymark: That seems like a useful tool- downloading it now, we'll see what kinds of fruit it yields.