Databases
StackOverflow2013
Postsdbo
POHow to add wrapper and bind to certain element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add wrapper and bind to certain element
    primarykey
    data
    text
    <p>I am having 2 issues with my code:</p> <ol> <li>I want to limit the effects of the script to the div <code>&lt;div id="photo"&gt;</code></li> <li>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. </li> </ol> <p>This is my code hope you can help.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;style type="text/css"&gt; .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; } &lt;/style&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"/&gt; $(document).ready(function() { $('img').width('10%').height('10%'); $('img').on("click", function() { $(this).wrap('&lt;div id="cret"/&gt;'); $(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; }); }); &lt;/script&gt; &lt;div id="photo"&gt; &lt;img src="image source"/&gt; &lt;img src="image source"/&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRory McCrossan
    1. USJohn the horn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to add wrapper and bind to certain element
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou reeally need to indent that code better.
      singulars
      1. POHow to add wrapper and bind to certain element
      1. UStechfoobar
    2. COUnbelievable mess. Mass of events which conflict with each others. Why do you need to dynamically wrap the image if the only thing you do is zooming the image? Why do you use all that `return false;`? And why do you specify css rules for img if they are the same as default?
      singulars
      1. POHow to add wrapper and bind to certain element
      1. USYuS
    3. CO@Yuri i was trying to make the image that is non active from the pare to stay in it`s position. I use all that return false to make the code run only once per click per image because if you click a second time on the image that is zoomed in it makes a new div cret in the div cret that exist already. And the huge mess is because I`m a neube :D
      singulars
      1. POHow to add wrapper and bind to certain element
      1. USJohn the horn
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload