Hide/Show <div> according to URL in Prototype_问答_开发者

Hide/Show <div> according to URL in Prototype

开发者 https://www.devze.com 2022-12-21 17:33 出处：网络

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

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开发者_Python百科) { $$('#side-menu-left').hide(); }

});

Love some help ?

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

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>

Change