Databases
StackOverflow2013
Postsdbo
POLogo Won't Slide Down (HTML, CSS, jQuery)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLogo Won't Slide Down (HTML, CSS, jQuery)
    primarykey
    data
    text
    <p>I am using jQuery to slide a sign in box down when the user clicks "Sign In". When it is clicked, I would like the whole page to slide down, including the logo. So far, the page does slide down, except for the logo. You can view the page here:</p> <p><a href="http://mini.lukedude5.com" rel="nofollow">http://mini.lukedude5.com</a></p> <p>When either "Sign In" or "Sign Up" is clicked, the body of the page slides down (set bottom margin to 500px to exaggerate it). However as you can see, the logo "mi.ni" doesn't slide down.</p> <pre><code>&lt;div id = 'header'&gt; &lt;a href = '/' title = 'mi.ni' id = 'logo'&gt;mi.ni&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Above is the HTML for the logo, and below is the CSS.</p> <pre><code>#wrapper { width: 1000px; margin-left: auto; margin-right: auto; } #wrapper #header { height: 100px; width: 260px; background: url('/styles/images/logo2.png') no-repeat; margin: 20px auto 0px auto; } #wrapper #header #logo { height: 100px; width: 260px; display: block; text-indent: -9999px; } </code></pre> <p>The header is wrapped in the wrapper. The bar from which the sign in box slides down is NOT inside the wrapper.</p> <p>The CSS for the sign in/up box is:</p> <pre><code>#topBar #signIn, #signUp { width: 250px; float: right; color: #FFF; margin-top: 5px; font-weight: bold; display: none; margin-bottom: 500px; } </code></pre> <p>Any help on this issue is appreciated!</p> <p>EDIT: HTML for bar spanning top of page.</p> <pre><code>&lt;div id = 'topBarWrapper'&gt; &lt;div id = 'topBar'&gt; &lt;div id = 'mainTop'&gt; mi.ni is a URL shortening service. Learn more about mi.ni. I am trying my hardest to get the domain http://mi.ni. &lt;/div&gt; &lt;div id = 'rightTop'&gt; &lt;span id = 'signInText'&gt;Sign In&lt;/span&gt; | &lt;span id = 'signUpText'&gt;Sign up&lt;/span&gt; &lt;/div&gt; &lt;div id = 'signIn'&gt; &lt;form action = '' method = 'POST'&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Username:&lt;/td&gt; &lt;td&gt;&lt;input type = 'text' name = 'username' id = 'usernameSignIn' class = 'input' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Password:&lt;/td&gt; &lt;td&gt;&lt;input type = 'password' name = 'password' id = 'passwordSignIn' class = 'input' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;div class = 'signInSubmit'&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id = 'signUp'&gt; &lt;form action = '' method = 'POST'&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Username:&lt;/td&gt; &lt;td&gt;&lt;input type = 'text' name = 'username' id = 'usernameSignUp' class = 'input' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Email:&lt;/td&gt; &lt;td&gt;&lt;input type = 'text' name = 'email' id = 'emailSignUp' class = 'input' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Password:&lt;/td&gt; &lt;td&gt;&lt;input type = 'password' name = 'password' id = 'passwordSignUp' class = 'input' /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;div class = 'signUpSubmit'&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS for bar:</p> <pre><code>#topBarWrapper { width: 100%; height: 25px; padding-top: 5px; background: #000; color: #FFF; } #topBar { width: 1050px; margin-left: auto; margin-right: auto; } #topBar #mainTop { display: inline; } #topBar #rightTop { display: inline; margin-left: 50px; font-weight: bold; } #topBar #rightTop #signInText { cursor: pointer; margin-right: 5px; } #topBar #rightTop #signUpText { cursor: pointer; margin-left: 5px; } #topBar #signIn, #signUp { width: 250px; float: right; color: #FFF; margin-top: 5px; font-weight: bold; display: none; margin-bottom: 500px; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLukas
    1. USLukas
    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. POLogo Won't Slide Down (HTML, CSS, jQuery)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POLogo Won't Slide Down (HTML, CSS, jQuery)
      1. This table or related slice is empty.
      1. VTDownMod
    1. COneed to see more of the HTML. I'm thinking that the logo is not a child (or something similar) of the login element but need to see the containing HTML to give you a better answer
      singulars
      1. POLogo Won't Slide Down (HTML, CSS, jQuery)
      1. USJT Smith
    2. COAlso, I'm looking at the page source now... Need to be careful of naming your elements with global names.. You have `id'header'` and `id'body'`. These could cause problems for you later
      singulars
      1. POLogo Won't Slide Down (HTML, CSS, jQuery)
      1. USJT Smith
    3. COAdded HTML and CSS for bar spanning top of page. I've done extensive research into getting a .ni (Nicaraguan) TLD, and may be getting close :).
      singulars
      1. POLogo Won't Slide Down (HTML, CSS, jQuery)
      1. USLukas
 

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