Beefy Boxes and Bandwidth Generously Provided by pair Networks
The stupid question is the question not asked

Nodelets on the left?

by Argel (Prior)
on Nov 07, 2006 at 01:48 UTC ( #582540=monkdiscuss: print w/replies, xml ) Need Help??

Code wrapping issues have been driving me crazy lately. Different browsers, different screen resolutions, etc. all mean one thing -- if auto-wrapping is on I have to scroll to the right to see the nodelets. Turn it off, and then I get to see those annoying red '+' signs in code -- argh!! Cthulhu would be proud!! So, crazy thought -- why not give us an option to put the nodelets on the left? That would greatly reduce the need for horizontal scrolling.

Thanks for your consideration!

P.S. In case it matters, I'm using the excellent looking Perl-Blue theme.

Update: For those looking for a Firefox and Internet Explorer 6 friendly workaround/solution check out node 583256 (based on node 583254). It's the combined work of ikegami, Aristotle, and pKai (listed in order of posting). Thanks guys!!!! And thanks also to Corion and blokhead for their contributions!!!

Replies are listed 'Best First'.
Free Nodelet Hack: Nodelets on the left
by ikegami (Patriarch) on Nov 07, 2006 at 02:01 UTC

    Until (if ever) such a feature is added to PerlMonks, you can use JavaScript to manipulate the DOM objects to attain the desired effect. Add the code following to your Free Nodelet. Make sure your Free Nodelet is being displayed.

    <script type="text/javascript"> // ======================================== // Move nodelets to the left side. function move_nodelets() { for each (var td in document.getElementsByTagName('td')) { if (td.className != 'nodelets') continue; var tr = td.parentNode; var main = tr.firstChild; tr.insertBefore(td, main); } } move_nodelets(); </script>

    Tested successfully in FireFox
    Tested unsuccessfully in IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519, although I'm sure it could be made to work by someone more knowledgable.

    Update: Clarified Until => Until (if ever).
    Update: Title change.
    Update: An updated version of this code found in Re^9: Free Nodelet Hack: Nodelets on the left. The core logic has been simplified and it has extra logic to delay execution to a safe time (allowing it to work in IE).

      Instead of the loop, I prefer XPath queries to extract elements from the DOM:

      var query = "//td[@class='nodelets']"; var nodesSnapshot = document.evaluate(query, document, null, XPath +Result.ORDERED_NODE_SNAPSHOT_TYPE, null ); for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) { var elt = nodesSnapshot.snapshotItem(i); // handle elt };

      No need for a loop there, just retrieve the element you want directly.

      <script type="text/javascript"> ( function() { var td = document.getElementById( 'nodelet_container' ).parentNode +; var tr = td.parentNode; tr.insertBefore( td, tr.firstChild ); } )(); </script>

      Makeshifts last the longest.

        Looks like IE6 is blowing up on the insertBefore -- I get a pop-up message saying the page cannot be displayed (either that or we have some software that thinks the script is doing something dangerous). Anyone have any ideas how to get this to work with IE? Or why ikegami's works (node 582545) but this one fails? I tried googling for answers and various code tweaks but I never really made any progress. :-(

        Update:Ooops! By "work" I meant why does his not blow up in Interent Explorer? In other words, what's different about his insertBefore? You're right -- it doesn't move the nodelets. Sorry for the confusion!!!

      That's really nice! FWIW, I approve. ;-)

      Those interested in scripting/styling their PerlMonks experience may also be interested in the various other Free Nodelet Hacks.

      In the context of this thread, I point out (at the risk of flogging my own work) Free Nodelet Hack: Hide/Display Nodelet Bar On Demand. I've verified that it works just fine in conjunction with ikegami's code above.

      We're building the house of the future together.
      Thanks!! That's really nice!!! I still hope we get a real option, but until that happens this is a great work around!

        It's not just a workaround, it's a solution.

        Considering how powerful CSS styling is for configuring one's view of PerlMonks, I really don't see why pmdev should implement changes such as this. (The same could be said for Node ids by node titles, but someone went and implemented it without really giving much thought to the wider ramifications.) If anything, pmdev should probably be looking at ways of enhancing PerlMonks' stylability and scriptability.

        We're building the house of the future together.
Re: Nodelets on the left?
by blokhead (Monsignor) on Nov 07, 2006 at 02:10 UTC
    I can't address your question about moving the nodelets, but I can suggest an easy compromise with your code wrapping peeves. In Display Settings, turn code wrapping off and add this to your site CSS:
    .code { overflow: auto; }
    This will give your code blocks a horizontal scrollbar if they are too wide. It has worked pretty well for me (in Firefox 1.5.* at least)!


      Thanks! Looks like IE6 ignores it (which is a good compromise).
Re: Nodelets on the left?
by Argel (Prior) on Jan 18, 2007 at 01:17 UTC
    FYI, looks like it works with IE7 and Firefox 2 as well. Anyone tested this with other browsers?

Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://582540]
Approved by GrandFather
Front-paged by Old_Gray_Bear
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others wandering the Monastery: (2)
As of 2022-07-01 23:06 GMT
Find Nodes?
    Voting Booth?
    My most frequent journeys are powered by:

    Results (102 votes). Check out past polls.