0

There is a fixed toolbar at the top of the page by default with "hide" button. When user clicks the hide button, the toolbar hides.

When user hovers over the top of the page, toolbar shows up transparent'ly with "show" button. when user clicks "show", the toolbar shows up like before.

I see that show and hide is done using "display:show/hide" property. But i see that this property shows up under "element.style" section of developer tool. Does this mean that the style was injected in javascript/jQuery using the style/.css() method? OR does this mean anything else?

gopal rao
  • 293
  • 1
  • 12
  • 1
    There is no “.css() method” in JavaScript. If you are referring to the jQuery method (or that of any other framework) – yes, those usually manipulate the style of an element directly (via the `.style` attribute), same as `.show/.hide`, and that counts as an element style. – CBroe Apr 13 '15 at 09:25
  • `display:show/hide` ? – Praveen Puglia Apr 13 '15 at 09:26
  • Oh yes....I meant jQuery!!! – gopal rao Apr 13 '15 at 09:30

1 Answers1

2

No it's most likely to achieved via HTML Element style.

You often want to use the "element style" directly because it's the styling "anchor" with the highest priority:

  1. Element.style

  2. id

  3. .class

Check this example:

function onClick(){
  document.getElementById("hello").style.display =     "None";
}
<div id="hello">Hello World!</div>
<button onclick="onClick()">Click Me</button>

HTML section:

We've added two kind of components. The first is a simple "DIV". It has initially the style "display: block".

The second component is a button. We execute the function "onClick()" if we click it.

JS section

As soon as the "onClick()" function is executed we get the div with the id "hello" via document.getElementById("hello"). Now we are able to set the "display" style to "None". None makes the element disappear ("display: none").

Even if you do this via jQuery's show/hide functions it would just result in the "display: none/block" style.

Community
  • 1
  • 1
OddDev
  • 3,644
  • 5
  • 30
  • 53
  • I did not get what you said.Can you pls explain a little more. – gopal rao Apr 13 '15 at 09:32
  • Right, so what you say, is that the styles appearing under element.style is always coming from javascript/jquery/(any other script) injected styling...(not via a addclass kindof) right? – gopal rao Apr 13 '15 at 09:34
  • Most likely, yes. But you have to consider one thing: it's always possible to write the "style" things in the initial markup. So you can style your elements just in your "html section". However, your case can only be solved with a script. Another hint: be aware that jQuery is only a framework for Javascript not another language. – OddDev Apr 13 '15 at 09:39
  • Thanks, thats right. could be injected directly from html. One thing i found now is that under the "Network" tab, when i click the show or hide button, I don't see any request going? Is there a way to exactly get hold of the file where the show/hide is taken care of? – gopal rao Apr 13 '15 at 09:46
  • Puh that's sort of complicated. You are able to add watch expressions to the "Firefox Developer Tools Debugger" (don't know if there is a similar function in Chrome). https://developer.mozilla.org/en-US/docs/Tools/Debugger – OddDev Apr 13 '15 at 09:54
  • https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event – OddDev Apr 13 '15 at 10:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75096/discussion-between-odddev-and-gopal-rao). – OddDev Apr 13 '15 at 10:58
  • OddDev - Sure...Saw your message now...Pls add me - gopal.rao.sln@gmail.com. thanks! – gopal rao Apr 13 '15 at 13:52