ansaurus

Question

Hide/Show <div> according to URL in Prototype

Answer 1

A:

I just made a test case on JS Bin which complains:

Exception thrown: $$("#hello").hide is not a function
Caused by line (23/21): $$('#hello').hide();

(using latest version of Prototype)

When using:

$('hello').style.display = "none";

it works correctly, see example.

EDIT: I adjusted the example on JS Bin to conditionally add a class name to the body before the involved element is reached. Using

.registered-user #hello { display: none; }

The element doesn't show up at all. It's not the most neat solution, as you have to throw some script in the middle of your document, but it works. If someone knows a better solution, please tell.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"&gt;&lt;/script&gt;
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .registered-user #hello { display: none; }
</style>
</head>
<body>
  <script>
    if (document.location.href.indexOf('registered')>=0)
      $$('body')[0].addClassName('registered-user');
  </script>
  <p id="hello">Hello World</p>
</body>
</html>

Marcel Korpel 2010-02-28 17:19:19

hey thanks for the response :) any ideas how to fix ? i am not even sure if this is correct in prototype

Thomas 2010-02-28 17:22:31

@Thomas: Added correction.

Marcel Korpel 2010-02-28 17:23:34

thanks! one thing - this works now )) but when the page loads - it appears then the javascript kicks in.any way to use something like "document(ready)" or even when its not ready ? [not sure of such a function in prototype]

Thomas 2010-02-28 17:29:55

@Thomas: you mean the flickering (element is shown and immediately hidden)? You can only prevent that when you change some CSS rules *before* the mentioned element is drawn. I'll make an example.

Marcel Korpel 2010-02-28 17:38:47

thanks so much :) yeah basically the elements appears - "then" it is hidden

Thomas 2010-02-28 17:42:09

legend - thanks a lot for the great answer. really appreciate it!

Thomas 2010-02-28 17:59:16

@Thomas: Code was wrong, added ">=0"

Marcel Korpel 2010-02-28 18:01:31

noticed that :) - all round legend!

Thomas 2010-02-28 18:07:43

Answer 2

A:

Change

$$('#side-menu-right').hide();

to

$('side-menu-right').hide();

Hope this helps.

Reason
1) As you can see, JQuery uses CSS notation while Prototype is straight Javascript (so no #side-menu-right for div with an ID).

2) Struts and Prototype uses $ and not $$.

The Elite Gentleman 2010-02-28 17:22:16

hey thanks - i just keep getting $$('side-menu-right').hide(); is not a function ? i really not sure ? [ps - using both # and without]

Thomas 2010-02-28 17:25:51

ah my mistake :) was using $$ not $ - cheers. fixed that. ;)

Thomas 2010-02-28 17:31:17

Glad I helped, obviously with no votes... ;)

The Elite Gentleman 2010-02-28 21:36:09

ansaurus

tags:

views:

answers:

Hide/Show <div> according to URL in Prototype

related questions