Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When using jQuery, you have to bind your events in such a way that the elements have already loaded.</p> <p>You have:</p> <pre><code>&lt;script type= "text/javascript"&gt; $("#expandBtn").click(function(){ alert('hello'); }); &lt;/script&gt; </code></pre> <p>I think what you want is:</p> <pre><code>&lt;script type= "text/javascript"&gt; $(document).ready(function(){ $("#expandBtn").click(function(){ alert('hello'); $('header').addClass('expanded'); }); }); &lt;/script&gt; </code></pre> <p>The <a href="http://api.jquery.com/" rel="nofollow">API documentation</a> is going to be your friend here. First step -- <a href="http://api.jquery.com/ready/" rel="nofollow"><code>ready()</code></a>.</p> <p><strong>UPDATE</strong></p> <p>You have this call to jQuery:</p> <pre><code>$j('#header').addClass('expanded'); </code></pre> <p>But your markup is for the HTML5 element <code>&lt;header&gt;</code>. In that case your jQuery needs to change to:</p> <pre><code>$j('header').addClass('expanded'); </code></pre> <p>Where <code>$j</code> is your jQuery object. More typically you would use <code>$</code> or <code>jQuery</code>.</p> <p>Time to bone up on <a href="http://api.jquery.com/category/selectors/" rel="nofollow">jQuery Selectors</a>!</p> <p><strong>UPDATE</strong></p> <p>Here's your updated page:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;itsMontoya&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;link rel="shortcut icon" href="/favicon.ico" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type= "text/javascript"&gt; $(document).ready(function(){ $('.expandBtn').bind('click', function(){ $('header').toggleClass('expanded'); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="wrap"&gt; &lt;header id="header" class=""&gt; &lt;div class="blackBG transparent"&gt;&lt;/div&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt; Home&lt;img src="images/home.png"&gt; &lt;/li&gt; &lt;li&gt; Pictures&lt;img src="images/pictures.png"&gt; &lt;/li&gt; &lt;li&gt; Music&lt;img src="images/mymusic.png"&gt; &lt;/li&gt; &lt;li&gt; About Me&lt;img src="images/aboutme.png"&gt; &lt;/li&gt; &lt;li&gt; Resume&lt;img src="images/resume.png"&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="logo" class="logo"&gt;&lt;p&gt;itsMontoya&lt;/p&gt;&lt;/div&gt;&lt;div id="expandBtn" class="expandBtn anchor"&gt;&lt;/div&gt; &lt;/header&gt; &lt;section class="content"&gt; &lt;article class="blogEntry"&gt;&lt;/article&gt; &lt;/section&gt; &lt;footer class="anchor"&gt; &lt;div class="over anchor"&gt;&lt;p&gt;2011 itsMontoya.com&lt;/p&gt;&lt;/div&gt; &lt;div class="blackBG transparent anchor under"&gt;&lt;/div&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POAdding style to Header when div is clicked using Javascript
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USartlung
    1. USartlung
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POAdding style to Header when div is clicked using Javascript
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COW00t! This worked very well and the code was very clean and simple.
      singulars
      1. PO
      1. USJosh
    2. COGlad to help. My suggestion: check out that selectors page on the jQuery site. I also think you'll get a lot out of http://jqueryfordesigners.com/ . Once you read a bit more you'll be able to see right off the difference between `$('header')` and `$('#header')` and `$('.header')`. Welcome to StackOverflow!
      singulars
      1. PO
      1. USartlung
    3. COI decided to add a movement element to this for a cleaner effect. Could you point me in the right direction for a proper way to toggle between in and out?
      singulars
      1. PO
      1. USJosh
 

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