SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery problem loading image and DIV at the same time

    Hi,

    I have the following navigation links:

    HTML Code:
    <a href="images/apollohaga.jpg" title="a" id="productlink">Num 1</a><br />
                            <a href="images/apolloherr.jpg" title="b" id="productlink">Num 2</a><br />
                            <a href="images/apollodam.jpg" title="c" id="productlink">Num 3</a><br />
                            <a href="images/apollosandhamn.jpg" title="d" id="productlink">Num 4</a><br />
                            <a href="images/apollovaxholm.jpg" title="e" id="productlink">Num 5</a><br />
    which, when clocked load an image into a div with this jquery:

    HTML Code:
    $("a#productlink").click(function() {
    		  $("#productpics").html($("<img>").attr("src", this.href).attr("class", $(this).attr("title")));
    
    		  return false;
    	});
    I then have a series of DIVs which match the title of each link above (a, b, c, d, e)
    HTML Code:
    <div id="a">This is a</div>
    <div id="b">This is b</div>
    <div id="c">This is c</div>
    <div id="d">This is d</div>
    <div id="e">This is e</div>
    I want the link to load the image (as it is doing already) but also load the corresponding div into another placeholder div (with no content) called: <div id="productholder"></div>

    I have tried all sorts of things to get this working but no luck so far.

    Any help appreciated!

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You'll want to use this for the productholder:
    $("#productholder").html(...);

    So it's just a matter of working out how to retrieve the HTML content of the div.

    You can get the div from the link title. You don't need to use $(this).attr('title') since this.title achieves just the same thing:
    $('#' + this.title)

    So, you should be able to get the content from there, and put it in the product holder.

    Code javascript:
    var content = $('#' + this.title).html();
    $("#productholder").html(content);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Almost working perfectly now, cheers!

    I now have this jQuery code:

    HTML Code:
    $(document).ready(function() {
    	$("a#productlink").click(function() {
    		  $("#productpics").html($("<img>").attr("src", this.href));
         	  var content = $('#' + this.title).html();
    		  $(".productcontent").css("visibility", "visible");
    		  $("#producttext").html(content);
    		  return false;
    	});
    });
    I changed a div name, the target DIV to load the content div's is now #producttext (.productcontent is a CSS class used maker the visibility hidden until a link is clicked)

    When I click a link for whichever 1 I want to load, it loads the correct image and DIV. however, when I click on a second link, it loads the image, clears the #prdoucttext DIV and doesn't load a new DIV to match the picture.

    Any ideas why that might be happening?

  4. #4
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone able to help with this last bit guys? I'm stuck!

    Cheers,
    Martin

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Have a look at live instead of click.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems like it will help, thanks.

    I had a look and changed it to:

    HTML Code:
    $(document).ready(function() {
    	$("a#productlink").live(click(function() {
    		  $("#productpics").html($("<img>").attr("src", this.href));
         	  var content = $('#' + this.title).html();
    		  $(".productcontent").css("visibility", "visible");
    		  $("#producttext").html(content);
    		  return false;
    	}));
    });
    ....but now it just loads the image on its own in the browser like as if you clicked a normal HTML link

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You have the syntax of the parameters wrong. Look again at the documentation.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, I noticed an error I made and have changed it:

    HTML Code:
    $(document).ready(function() {
    	$("a#productlink").live('click',function() {
    		  $("#productpics").html($("<img>").attr("src", this.href));
         	  var content = $('#' + this.title).html();
    		  $(".productcontent").css("visibility", "visible");
    		  $("#producttext").html(content);
    		  return false;
    	});
    });
    The image load is back to normal now but it wont load the text part except for the 1st 1 I click on

  9. #9
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put in an alert to show the value of 'content' on each click. On the first click it is fine then on subsequent it is giving 'null'

    I was reading up on .live and thought that would sort it.

    This should be pretty simple, dunno why I'm stuck on it!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    May we have a look at a sample test page that demonstrates the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HEre you go: Untitled Document

    Click on "Produkter"

    Thanks for your help!

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mcrumlish View Post
    HEre you go: Untitled Document
    Thanks.

    Your unique identifier "productlink" is illegally used on multiple links.

    ID attributes are unique identifiers. They must be unique.

    Remove the "productlink" identifiers completely, and either use a class name instead, or as a better solution, use a selector such as '#productlist a' to target all of those intended links.

    Also, run your HTML page through an HTML validator to find and fix other problems.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot about the ID being unique. I have removed those now and used '#productlist a' as the selector and reuploaded but still the same error.

    Would you mind having a look again? I dont know what Im missing

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mcrumlish View Post
    Would you mind having a look again? I dont know what Im missing
    Your click event is currently targeting only one id element.

    You need to apply the advice that I gave to you in my previous post, about targeting all of the appropriate links with a selector such as '#productlist a'
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I thought I had done. I changed it to this:

    HTML Code:
    $(document).ready(function() {
    	$("#productlist a").live('click',function() {
    		  $("#productpics").html($("<img>").attr("src", this.href));
         	  var content = $('#' + this.title).html();
    		  //alert(content);
    		  $(".productcontent").css("visibility", "visible");
    		  $("#producttext").html(content);
    		  return false;
    	});
    });
    Apologies, this is my first real foray into jQuery

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Currently the "producttext" section contains all of the content.
    Your script copies one of them to the variable called content, and then replaces all of the "producttext" with that content.

    End result, you have now lost all of the previous content.

    What I believe you should do instead, is to first hide all of the content in "producttext" and then to show only the one that you want to be shown.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, that done it!

    I just moved the DIVs outside that layer and hid them

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •