Databases
StackOverflow2013
Postsdbo
POJavascript - Overriding styles previously declared in another function
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript - Overriding styles previously declared in another function
    primarykey
    data
    text
    <p>Ok, this is my HTML</p> <pre><code>&lt;div id="plus" style="margin-left: 10px; margin-top: 303px;"&gt; &lt;div id="plus-back"&gt; &lt;/div&gt; &lt;div id="plus-ex"&gt; X &lt;/div&gt; &lt;/div&gt; </code></pre> <p>NOTE: the <code>#plus</code> element's inline styles was declared previuously by another script</p> <p>And this is my JS</p> <pre><code>document.getElementById("plus").onclick = showNav document.getElementById("plus-ex").onclick = hideNav function showNav(){ this.style.width="200px" this.style.height="200px" document.getElementById("plus-ex").style.display="block" } function hideNav(){ document.getElementById("plus").style.width="48px" document.getElementById("plus").style.height="48px" } </code></pre> <p>Well.. this is what i have. The goal is simple, when you click <code>#plus</code>, this is expanded to show some content, and appears a "X" that is inside <code>#plus-ex</code>, and when you click that "X", <code>#plus</code> go back to the start (that is a div with 48px of height and width thanks to stylesheet). The problem with this, is that <code>hideNav()</code> is not doing a good work. When you click <code>#plus</code>, <code>showNav()</code> function is fired successfully, but after that, when you click the "X" and hideNav() is fired (successfully too), that should apply the initial style, but does anything. I have tested applying another CSS propieties like <code>background-color</code> and works OK, but not with <code>width</code> and <code>height</code>. </p> <p>I think that the problem is that i can't override the styles applied by <code>showNav()</code></p> <p>What should i do?</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. USYavierre
    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. COmaybe the problem is `.style.display="block"` ?
      singulars
      1. POJavascript - Overriding styles previously declared in another function
      1. USmuratgu
    2. CO@muratgu No, i deleted `.style.display="block"` but the problem persist.
      singulars
      1. POJavascript - Overriding styles previously declared in another function
      1. USYavierre
    3. CO@Yavierre: `<div>` by default will shrink/wrap its height based on its content. I'm afraid you cannot set its height explicitly.
      singulars
      1. POJavascript - Overriding styles previously declared in another function
      1. USKhanh TO
 

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