Databases
StackOverflow2013
Postsdbo
POjQuery: Toggling multiple things with one click (noob)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: Toggling multiple things with one click (noob)
    primarykey
    data
    text
    <p>Forgive me- I don't like adding to the beginner questions on here, but alas, I am stuck. I am trying to slide a bunch of things to the left and off the screen (including a background image), effectively toggling a control panel (#navCol) and making the main area bigger (.main to .mainLarge). </p> <p>It's working ok in Firefox, but not in IE. I should note that I am beginner with jQuery, but not with html/css and the current css set up looks nasty but can't be avoided for this project. I suspect my jQuery is wrong, because in IE every time I hit the toggle link, only some of the animations occur. When clicked again, other ones do.</p> <p>If I need to clarify anything, please let me know, and thanks in advance!</p> <pre><code>$('a#nav-toggle').click(function() { $('#navCol').toggle('slide',400); $('#main').toggleClass('mainLarge', 530); $('body').toggleClass('backgroundOffset', 500); return false; }); </code></pre> <p>Is that right? Here is the html:</p> <pre><code>&lt;body&gt; &lt;div id="horNav"&gt; &lt;ul id="navigation"&gt; ... &lt;/ul&gt; &lt;/div&gt; &lt;div id="navCol"&gt; Left Col &lt;/div&gt; &lt;div id="main" class="main"&gt; Main Col &lt;a href="#" id="nav-toggle"&gt;&lt;-&gt;&lt;/a&gt; &lt;/div&gt; &lt;!-- End main --&gt; &lt;/body&gt; </code></pre> <p>And here's the css:</p> <pre><code>body { background: #f1f1f1 url(/images/shadow.png) repeat-y top; background-position: 400px 0px; } .backgroundOffset{ background-position: 55px 0px; } #navCol{ background: #eaeaea; color: #000000; height:100%; left:0px; margin-right:40px; position:fixed; top:0; width:400px; padding-top: 70px; } .main{ padding-left: 460px; padding-top: 100px; padding-right: 100px; } .mainLarge{ background-position: 55px 75px; padding-left: 115px; } </code></pre>
    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. USJames M
    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. This table or related slice is empty.
    1. COWhat version of IE? I just put your code in a document and it worked identically in both FF3.5 and IE7.
      singulars
      1. POjQuery: Toggling multiple things with one click (noob)
      1. USErik
    2. COYet another noobtastic error- I had some other jquery that was conflicting. When I removed that, it worked just as you said. Thanks for verifying that it works.
      singulars
      1. POjQuery: Toggling multiple things with one click (noob)
      1. USJames M
 

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