Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    moving element to top of stack

    it doesn't get much simpler than this, but i can't figure it out.
    why does it always make v1 the dog ? i realize that it is last in the list, and sure enough if i put b1 under b2, it is now always the cat.
    but shouldn't an onclick event move that element to the top of the stack ?
    and thereby making the associated v1 in focus ?

    <!doctype html>
    <html lang="en">

    <head>
    <title>A Cat's Life</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    </head>

    <body>

    <div id="box" style="display:block; background-image:url(long-leaf-1.jpg); position:absolute; margin-top:200px; margin-left:300px; width:150px;height:150px; border:2px solid orange;">DDDDD</div>

    <div id="b1"><button onclick="showPicture()" style="width:100px; line-height:1.1; border-radius:7px; background-color:#ffccff; position:absolute; margin-top:40px; margin-left:50px; font-size: 0.9em;">Picture 1
    <script>v1="url(http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg)"</script></button></div>


    <div id="b2"><button onclick="showPicture()" style="width:100px; line-height:1.1; border-radius:7px; background-color:#ffccff; position:absolute; margin-top:140px; margin-left:50px; font-size: 0.9em;">Picture 2
    <script>v1="url(http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg)"</script></button></div>




    <script> function showPicture(){
    alert(v1);
    var frame = document.getElementById('box');
    $(frame).css('color','red');
    $(frame).css('background-size','contain');
    $(frame).css('background-image',v1);

    }
    </script>



    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <button onclick="showPicture('http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg')">Picture 1</button>
    ...
    <button onclick="showPicture('http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg')">Picture 1</button>
    Code:
    function showPicture(backgroundImage){
        $('#box')
            .css('color','red');
            .css('background-size','contain');
            .css('background-image', 'url("' + backgroundImage + '")');
    }
    Btw, why are you using inline style to style your elements? If you use classes, your markup will be much cleaner and the script to change the styles would be much simpler. You would just toggle the classes in the 'box' div to change the background image.

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for the reply. i have tried to utilize your suggestion, but it doesn't seem to run. i stuck in an alert to find out if the function was running, and apparently it isn't. but i am sure the problem is that i haven't understood the principle that you were showing me. would you mind straightening me out ?

    i think i get the idea - clicking the button calls the function showPicture, which accepts an argument called backgroundImage. "box" is selected, and 3 css properties are set.

    it seems understandable to me, but it won't go.


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset='utf-8'>
    <title>A Cat's Life</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    </head>
    <body>
    <div id="box" style="position:absolute; margin-top:200px; margin-left:300px; width:150px;height:150px; border:2px solid orange;">DDDDD</div>
    <button onclick="showPicture('http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg')">Picture 10</button>
    <button onclick="showPicture('http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg')">Picture 11</button>
    <script>
    function showPicture(backgroundImage){
    alert("MM");
    $('#box')
    .css('color','red');
    .css('background-size','contain');
    .css('background-image', 'url("' + backgroundImage + '")');
    }
    </script>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    got it going. took out the first two .css semicolons.


  •  

    Posting Permissions

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