Jump to content
brooke_theperson

jQuery append stuff

Recommended Posts

Hey so I have this code, and I start out with my homepage on the screen. If I hover over some images they glow and the source shows up beneath them. Later, if I click the homepage button on my sidebar, it shows the homepage again. This time when I hover over the images they glow, but don't show the image source. Is there something wrong with this code? Please help

 

 

<script>$(document).ready(function(){    $('.homepage').click(function(){        $('.body').empty();        $('.body').append("<div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>");        $('img').mouseenter(function(){            $(this).css('border', '2px solid yellow');        });        $('img').mouseleave(function(){            $(this).css('border', '2px solid black');        });        $('.aimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.aimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.bimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.bimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.cimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.cimg').mouseleave(function(){            $('.imagesource').empty();        });        $('.dimg').mouseenter(function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");        });        $('.dimg').mouseleave(function(){            $('.imagesource').empty();        });    });    $('img').mouseenter(function(){        $(this).css('border', '2px solid yellow');    });    $('img').mouseleave(function(){        $(this).css('border', '2px solid black');    });    $('.aimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");    });    $('.aimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.bimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.bimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.cimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.cimg').mouseleave(function(){        $('.imagesource').empty();    });    $('.dimg').mouseenter(function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>");    });    $('.dimg').mouseleave(function(){        $('.imagesource').empty();    });});</style> <body>    <div class = 'page'>        <div class = 'header'>Hacking the School Computer System</div>        <div class = 'sidebar'>            <button class = 'homepage'>Homepage</button>            <button class = 'page2'>Page 2</button>            <button class = 'page3'>Page 3</button>            <button class = 'page4'>Page 4</button>        </div>        <div class = 'body'>            <div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>            <div class = 'imagesource'></div>        </div>        <div class = 'footer'>Created by Brooke Simmerman</div>    </div></body>

Share this post


Link to post
Share on other sites

It applies hover effects to elements that exist after page load, you are removing these completely and replacing these, this is the problem the original elements do not exist with this hover effect applied anymore. you have to use jquery .on() http://www.w3schools.com/jquery/event_on.asp, which applies the hover effect to JavaScript created content as well.

Share this post


Link to post
Share on other sites

Is this right, or should I be using the .on() somewhere else, because it still isn't working?

 

        $('.aimg').on('mouseenter', function(){            $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");        });        $('.aimg').on('mouseleave', function(){            $('.imagesource').empty();        });

Share this post


Link to post
Share on other sites

Everthing that is removed and recreated using js, must use .on(). The .on() target selector MUST always exist, in this instance you should be using '.body' as only its content is removed, then you target specific js created child elements, for example

$('.body').on('mouseenter', '.aimg', function(){...});

Share this post


Link to post
Share on other sites

So I changed my code to this, and it still doesn't work?

 

 

    $('.body').on('mouseenter', '.aimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>");    });    $('.body').on('mouseleave', '.aimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.bimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw</p>");    });    $('.body').on('mouseleave', '.bimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.cimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70</p>");    });    $('.body').on('mouseleave', '.cimg', function(){        $('.imagesource').empty();    });    $('.body').on('mouseenter', '.dimg', function(){        $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ</p>");    });    $('.body').on('mouseleave', '.dimg', function(){        $('.imagesource').empty();    });

Share this post


Link to post
Share on other sites

You, you div, whats the most important element required to show image sources, remember you have removed all from .body, and replaced everything except........

 

Edit: also there is no img closing tag '</img>' html is <img src="whatever.jpg" alt="" >if you were using xhtml it would be <img src="whatever.jpg" alt="" />

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Think about it, where is the source code shown on hover, where is this element placed, what happens to all the content where this element is placed and finally, when it is replaced is it the same exact code that was removed.

Share this post


Link to post
Share on other sites

Thank you so much for all of your help. The whole time I was thinking of the '.body' div as the 'homepageappend' div, when really it is the larger div in which everything is nested. Also, thanks for making me figure it out with hints. Really helped.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...