CODEWITHSUNDEEP
javascriptjquery
John the horn
John the horn

Reputation: 131

How to add wrapper and bind to certain element

I am having 2 issues with my code:

  1. I want to limit the effects of the script to the div <div id="photo">
  2. How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.

This is my code hope you can help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
                .selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
                #cret {
                    position:relative;
                    z-index:3;
                    border-style:solid; border-width:5px; border-color:#000000;
                    padding: 10px 10px 10px 10px;
                    margin:auto;
                    width:620px;
                    height:420px;
                }
                img {
                    position:static;
                    z-index:1;
                }
            </style>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
        </head>

        <body>
            <script type="text/javascript"/>
                $(document).ready(function() {
                    $('img').width('10%').height('10%');

                    $('img').on("click", function() {
                        $(this).wrap('<div id="cret"/>');
                        $(this).animate({width:'600px', height:'400px'}).addClass("selected");
                    });

                    $(document).on("click", function(){
                        $("img").unwrap();
                    });

                    $('img').click(function(){ return false; });    

                    $('#cret').click(function(){ return false; });

                    $(document).on("click", function(){
                        $('img').animate({width:'10%', height:'10%'}).removeClass("selected");
                    });

                    $('img').click(function(){ return false; });

                    $('#cret').click(function(){ return false; });
                });
            </script>

            <div id="photo">
                <img src="image source"/>
                <img src="image source"/>
            </div>
    </body>
</html>

Upvotes: 1

Views: 99

Answers (1)

Kidi
Kidi

Reputation: 61

To limit the scope of the selector, you can specify a more precise jquery selector instead of $('img') $('#photo img'); it will affect only img present in photo id div.

you should review your selector and the animate will be more effectively use in correct one... like put your animate only on img.selected.

Hope it helps http://api.jquery.com/category/selectors/

Upvotes: 2

Related Questions