Hide/Show <div> according to URL in Prototype

StackOverflow https://stackoverflow.com/questions/2351788

Question

I am trying to use the prototype framework to hide a '< div >' based on a particular URL. I don't have access to server side - so I have no choice but to do this using prototype [restriction of platform using prototype].

Wondering if someone could tell me how to do this in prototype framework ?

i.e. I tried to do this but doesn't work

Event.observe(window, 'load', function() {

var url = document.location.href;

if (url.indexOf('registered') >= 0) {
$$('#side-menu-right').hide(); }

if (url.indexOf('login') >= 0) { $$('#side-menu-left').hide(); }

});

Love some help ?

P.S - Never used Prototype [jQuery man right here yo!]

Was it helpful?

Solution

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"></script>
<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>

OTHER TIPS

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 $$.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top