0

I'm using a simple jquery function for an image gallery. There is a div of thumbnails, then the target div where the large images are loaded into after one clicks on a thumbnail.

It's working fine in all browsers, with the exception of Safari, where the image's absolute url is loaded, opposed to being loaded inside of the div.

Here's the jquery code:

$("#thumbnails a").click(function() {
    $("#work").html($("<img>").attr("src", this.href));

    return false;
});

Any thoughts? Thanks

Yoram de Langen
  • 5,391
  • 3
  • 24
  • 31
jonathonthoma
  • 1
  • 1
  • 1
  • 2

4 Answers4

2

this.href is not safe!

Use $(this).attr('href') and it will work.

Check out my question here: Retrieving HTML attribute values "the DOM 0 way"

It explains that there are several HTML attributes (href among them) that are problematical, so one should use jQuery's attr() to retrieve their values.

Quote from an answer on that page:

For example, the href property of an element always reports a fully qualified URL while getAttribute("href") will return the string specified in the HTML href attribute verbatim. Except, of course, in IE. jQuery's attr() does attempt to normalize this kind of inconsistency.

UPDATE

I figured it out. You didn't ensure that the jQuery code runs after the DOM is ready. Always place all your jQuery code inside the ready handler: 

$(function() {

    // place all jQuery code here

});

UPDATE 2

Try this code: 

$('#thumbnails a').click(function() {
    $('#work').empty().html( '<img src="' + $(this).attr('href') + '">' );
    return false;       
});

I should have seen this earlier. The argument of the html() function has to be a string.

UPDATE 3

It could be that Safari (at least) does not execute JavaScript code that is on a page which is loaded entirely via jQuery's load() method.

However, I think that I figured out how to deal with it!

On the 1776.php page, move the SCRIPT element from the HEAD to the BODY of the document.

<body>
    <script> ... the code ... </script>
    <div> ... </div>
</body>
Community
  • 1
  • 1
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • How should I incoporate this inside of the .html()function and/or tag? – jonathonthoma Jan 21 '11 at 22:20
  • @jon Just replace `this.href` with `$(this).attr('href')` – Šime Vidas Jan 21 '11 at 22:23
  • This is what I did (it doesnt work): $("#work").html($("").attr("src", $(this).attr("href"))); return false; – jonathonthoma Jan 21 '11 at 22:28
  • @jon What happens in Safari? Does the web-page get replaced by the image? – Šime Vidas Jan 21 '11 at 22:35
  • Yeah, it does. This code is actually doing this in all browsers now. – jonathonthoma Jan 21 '11 at 22:38
  • @jon Do the browsers report an error? It seems that you got an error in the JavaScript code which disables the even handler. – Šime Vidas Jan 21 '11 at 22:39
  • I ran firebug and looked in my error console, receiving 0 errors...here is a link to the page I'm working on: http://cprandpartners.com/work/1776.php – jonathonthoma Jan 21 '11 at 22:42
  • @jon You should have supplied that link from the start. It took me 10 seconds to figure it out. `:)` – Šime Vidas Jan 21 '11 at 22:47
  • Haha, I figured it was something easy. What is it? – jonathonthoma Jan 21 '11 at 22:48
  • That didn't work :/ It's working in firefox but still broken up in Safari – jonathonthoma Jan 21 '11 at 22:56
  • @jon It works in my Safari 5. What Safari version are you testing in? – Šime Vidas Jan 21 '11 at 23:08
  • I'm in safari 5.0.3....tested it on four different computers in safari. No good in any of them :/ – jonathonthoma Jan 24 '11 at 16:26
  • @jonathan Are those Macs? I'm on Windows 7. – Šime Vidas Jan 24 '11 at 16:27
  • 3 are macs, one is running XP. On each of them, the image i loaded directly by its URL in a new window. In firefox, the images load into the #work div, as they are intended to – jonathonthoma Jan 24 '11 at 17:24
  • @jonathan Also, check out the newest version of jQuery - 1.4.4 – Šime Vidas Jan 24 '11 at 18:57
  • That actually worked...I am having this issue, which I didn't think would matter, but apparrently does. 1776.php is loaded dynamically through http://cprandpartners.com/work/home.php, and inside of home.php, it still has the issue it was having before. Click design> 1776 Clothing> then try using the script. Any ideas? – jonathonthoma Jan 24 '11 at 19:39
  • @jonathon How are you inserting 1776.php into home.php? – Šime Vidas Jan 24 '11 at 19:46
  • function c1776() { $('#container').html('

    '); $('#container').css({'right' : '900px'}); $('#container').load("1776.php"); $("#container").stop().animate({ right:'0px' },{queue:false, duration:500, easing: 'linear'}); }     – jonathonthoma Jan 24 '11 at 20:04
  • @jonathon Is the issue present if you open 1776.php directly in Safari? (Did we resolve the original issue?) – Šime Vidas Jan 24 '11 at 20:22
  • Yeah, we did. It only happens once 1776.php is loaded inside of home.php – jonathonthoma Jan 24 '11 at 20:27
  • @jonathon Did you accidentally revert to the old code? I'm asking because the 1776.php page - http://cprandpartners.com/work/1776.php - contains your original code, and not the code I posted in my UPDATE 2. – Šime Vidas Jan 24 '11 at 20:37
  • You're right. It did revert in a recent update..but it's back to your code, and still functioning the same (or lack there of) – jonathonthoma Jan 24 '11 at 20:50
  • @jonathon You got a copy-paste error (I assume): one of the three `)};` at the end has to be moved right after `return false;` It has to look like so: http://jsfiddle.net/gD78L/ – Šime Vidas Jan 24 '11 at 20:57
  • I've removed the resize script for simplicity. It's now just the code we're looking at. Still getting the same result. – jonathonthoma Jan 24 '11 at 21:02
  • @jonathon It appears that Safari (at least) does not execute the JavaScript code on a page which is loaded into another page via load(). Check out this question: http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file – Šime Vidas Jan 24 '11 at 21:12
  • @jonathon I am finally able to experience your issue in my Safari. That will make it easier to resolve the issue. – Šime Vidas Jan 24 '11 at 21:14
  • @jonathon OK, I think I finally figured it out. View UPDATE 3 in my answer. – Šime Vidas Jan 24 '11 at 21:25
  • I removed everything with the exception of what's in the body tags and included the jquery inside of this area. Worked like a charm. Thanks for all your help – jonathonthoma Jan 24 '11 at 21:26
  • @jonathon Yes, as long as the SCRIPT element is **not** inside the HEAD element, the JavaScript code will execute. – Šime Vidas Jan 24 '11 at 21:32
  • @jonathon I've opened a question addressing this behavior in Safari: http://stackoverflow.com/questions/4787457/javascript-doesnt-execute-in-safari-when-loading-entire-page-via-jquerys-load – Šime Vidas Jan 24 '11 at 21:40
1
$("#thumbnails a").click(function() {
      $('#work').empty().append($('<img>', {
           src:   this.href
      }));
      return false;
});
jAndy
  • 231,737
  • 57
  • 305
  • 359
0

I its getting confused off the this.href because while your in the attribute $("#work").

try this:

$("#thumbnails a").click(function() {
    var urlHref = $(this).attr('href');
    $("#work").html($("<img>").attr("src", urlHref));
    return false;
});
Yoram de Langen
  • 5,391
  • 3
  • 24
  • 31
  • No, that's not an issue. The `this` value would have a different value only if it were inside a nested function expression / declaration. But it isn't. – Šime Vidas Jan 21 '11 at 22:07
0

Use css property background:url(...) instead of <img> tag when appending images through javascript in Safari Mobile only. It won't work with <img> tags.

Prasad Jadhav
  • 5,090
  • 16
  • 62
  • 80
Jimmy Boyd
  • 1