Databases
StackOverflow2013
Postsdbo
POExpand a div on click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExpand a div on click
    primarykey
    data
    text
    <p>My problem is fairly simple for many of you. I want to expand the div(onClick) to fit the outer div and it should completely cover all the other three divs.(not fullscreen)</p> <p>I am trying to do this using the following code but the entire structure of page gets disturbed when i try to do this.</p> <pre><code>&lt;head runat="server"&gt; &lt;title&gt;Untitled Page&lt;/title&gt; &lt;link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="js/jquery-1.8.1.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .toggler { max-width: 500px; max-height: 270px; position: relative; } .newClass { height: 500px; width: 290px; display: inline-block; z-index: 10000px; float: left; } .divClass { float: left; vertical-align: middle; height: 50px; width: 500px; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#div1').click(function() { $('#div1').toggleClass('newClass'); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;table width="100%"&gt; &lt;tr style="height: 100%;"&gt; &lt;td style="width: 30%; height: 500px;"&gt; &lt;/td&gt; &lt;td style="width: 70%; height: 500px;"&gt; &lt;div style="width: 100%; height: 500px;"&gt; &lt;table style="height: 500px; width: 100%;"&gt; &lt;tr&gt; &lt;td class="toggler"&gt; &lt;div id="div1" style="background-color: Black;"&gt; Hello World! &lt;/div&gt; &lt;/td&gt; &lt;td style="width: 50%" class="toggler"&gt; &lt;div id="div2" style="background-color: Blue; width: 100%; height: 100%;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 50%" class="toggler"&gt; &lt;div id="div3" style="background-color: Red; width: 100%; height: 100%;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;td style="width: 50%" class="toggler"&gt; &lt;div id="div4" style="background-color: Maroon; width: 100%; height: 100%;"&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p></p> <p>What exactly is the problem with my code???? please help..</p> <p><br/> <strong>Note</strong>: I've also tried addClass and removeClass methods.. No good results... </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USwriteToBhuwan
    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
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COit should cover all the div? you want the 3 divs not to show when the onclick div is bigger right? btw why are they in a table?
      singulars
      1. POExpand a div on click
      1. USChanckjh
    2. COand z-index doesnt use px
      singulars
      1. POExpand a div on click
      1. USChanckjh
    3. COI need to apply this function to all the other three divs... and yes, you are right, i dont want to show other three divs when any ne of them is zoomed...
      singulars
      1. POExpand a div on click
      1. USwriteToBhuwan
 

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