SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bookmarklet to show/hide a div

    The control panel for our CMS is in a div on a web page. I'm trying to write a bookmarklet which looks for the div in the page by its id; if it finds it and the div is hidden, it should show the div. If the div is showing, it should hide it.

    I've come up with this:

    javascript: function switchConsole() { if(document.getElementById('cmsConsole')) { if (document.getElementById('cmsConsole').style.display == 'none') document.getElementById('cmsConsole').style.display = 'block'; else document.getElementById('cmsConsole').style.display = 'none'; }; return false; }; switchConsole();

    It works if I put an alert() in after changing the style. But without the alert it makes the change then goes to an all-white page with "false" on it. Does anyone know how I can get it to work without the alert()?

    It needs to work in IE, because our CMS only works in IE.

    Thanks.

  2. #2
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to throw "return false" away.

  3. #3
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I only put return false in there in the first place to try to fix it.

    I've found a workaround though. After setting the display property, set the focus to something on the page. I've gone for a div tag which is part of our page template. No idea why it works, but it does:

    javascript: if (document.getElementById('cmsConsole') && document.getElementById('tTrail')) { document.getElementById('cmsConsole').style.display = (document.getElementById('cmsConsole').style.display == 'none') ? 'block' : 'none'; document.getElementById('tTrail').focus(); }

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try typing this into your browser's address bar:

    javascript:false

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A javascript: url cannot have any statements that return a value or else a new page will load with the return value in the body. If any statements in your javascript: url have a return value, then you have to use the void() operator on the statement. The void() operator returns undefined and won't cause a new page to load in the window.

    An assignment operator actually has a return value. For instance,

    var a=10

    assigns 10 to a and returns the value 10. Try executing:

    alert(a=10);

    That is why you can chain assignments together:

    var a=b=c=10;

    So, if you enter javascript: a=10 into the your browser's address bar, you will see a new page load. That means all your assignment statements return a value, and the last value returned overwrites the others and gets displayed. So, use void() on your last assignment statement, and it will return undefined and overwrite any other earlier return values.

    In IE6, I couldn't duplicate the behaviour you described: when I put in an alert() just before the return false line, an alert() displays, and then a new page with false on it loads in the window just like before, which seems like the correct behaviour.
    Last edited by 7stud; Feb 2, 2005 at 04:32.

  6. #6
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great - a solution rather than a workaround. Thanks 7stud.

    I ended up with this:

    javascript: if (document.getElementById('cmsConsole')) { void(document.getElementById('cmsConsole').style.display = (document.getElementById('cmsConsole').style.display == 'none') ? 'block' : 'none'); }

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can shorten that whole thing up by doing this:

    var div = document.getElementById('cmsConsole').style; if(div) void(div.display=(div.display=="none")? "block":"none")

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...or maybe even remove void() and just return undefined at the end:

    var div = document.getElementById('cmsConsole').style; if(div) div.display=(div.display=="none")? "block":"none"; return undefined

  9. #9
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    a special one for 7stud
    Code:
    if( (div=document.getElementById("Obj"))&&true){
    	with(div.style){display=(display =='none')? 'block':'none';}
    I know you love them ...

  10. #10
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think

    &&true

    does anything: if the first term is true, the whole thing is true, and if the first term is false, the whole thing is false.

  11. #11
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are right, it was just to be sure to retrieve true or null instead of [object]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •