Thoughts? Too Distracting?

RaseCidraen
RaseCidraen
edited October 2010 in General Archive
Hey there! I'm hoping I could get some feedback on a new development I've put into my campaign: I call it the "sidebar":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/sigil

It's a bit different from your ordinary sidebar: I don't know if anyone's successfully implemented it, or if it's annoying, or if it even works on your particular flavor of web device. I know it behaves differently at various resolutions and zoom levels, but I'd love to hear some feedback!
24

Comments

  • RaseCidraen
    RaseCidraen
    Posts: 890
    I just need to test the coding insertion of the forum...


    Bolded Text Goes here?

    Bold
  • RaseCidraen
    RaseCidraen
    Posts: 890 edited October 2010
    OKAY! Here goes nothing. My advice: Stuff this code at the very bottom (Many Enter lines worth) of the Edit page, so you can continue to edit the rest of your page in a manner that is quite nice. The nice thing about the code is you can just insert it as you create pages, and it'll stay current. It's a pain if you ever want to change things up, though, because you have to go through and change every instance.








    Main Page
    Timeline
    House Rules
    Legends
    Quotes
    REFERENCES
    People
    * Cast
    * Groups
    * Factions


    Places
    * Sigil
    * Planes
    ** Outer
    ** Inner


    Weaponry
    * Planar Weapons
    * Artifacts
    Post edited by RaseCidraen on
  • Curufea
    Curufea
    Posts: 161
    Yes, sadly you don't get php includes or HTML iframes (or even frames) to make the maintenance of headers, footers or navigation menus simpler :(

    It could potentially be abused - although a form of membership for OP that allows it might be an idea. Spam - or the linking to spam sites - are less likely to occur in subscription sites such as OP. Even more so if privileges or special memberships must be earned somehow and the member runs the risk of banning.

    On a side note, however - some wikis (such as dokuwiki) use templates that treat headers, footers and sidebars as wiki pages. It's a bit like a CMS that way - in that a single page shown on a browser is made of multiple sub parts. Possibly in the future, OP may integrate such a template.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    I think that that kind of template integration would be incredible. But I suppose we have to hack together what we can until such a thing comes to pass.
  • DarkMagus
    DarkMagus
    Posts: 425
    That looks amazing, I don't know how you did it. I see the above code you posted but it just looked like this to me : "MAGIC!", yeah.
  • ChainsawXIV
    ChainsawXIV
    Posts: 524 edited October 2010
    Nice work Rase! To me, it's only distracting when it hangs over the content of the page, so I'd suggest draping it off the left side of the content, which is pretty easy. Replace the first line of the code above with the two below, and add an extra tag to the end of the code to close things up, and it will always hang out just to the left of the page in the margin area, "like so":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/hanging-sidebar.
    Post edited by ChainsawXIV on
  • Curufea
    Curufea
    Posts: 161
    DSTs are currently including in character wiki pages, something similar could be done for the main wiki pages. I've been pondering the use of jquery for navigation of the main wiki :)
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Chainsaw, that's amazing! I couldn't figure out how to get it to stay in that spot, so it got relegated to a % from the left. I'm cobbling this HTML stuff together as I go. Thanks for the refinement!
  • ChainsawXIV
    ChainsawXIV
    Posts: 524
    Sure thing. Nesting _fixed_ elements inside _relative_ elements to position them is pretty counterintuitive, but it works. I use a similar sidebar on my own personal page, so I have the advantage of having solved the problem before. :)
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Oh man, did I just reinvent the wheel? :)
  • ChainsawXIV
    ChainsawXIV
    Posts: 524
    The tech may be a known quantity, but the _application_ is where the value is. :)
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Hooray for proper application! I've just gone and updated every last tidbit of my site to include your much appreciated addition!
  • Grokkit
    Grokkit
    Posts: 23 edited October 2010
    Great idea! Simple but effective. Too bad there are no file includes... I just updated my site with this handy nav as well... though I dread the update process :(

    Thanks!

    p.s. Got an update from one of my players. It looks like this code does not play nice on some mobile devices because the left side of the page is cropped. Hey Chainsaw, any ideas on this one? I don't think we can do browser detection... so, my guess is mobile users are just S.O.L.?

    "Return of the Lich Queen":http://www.obsidianportal.com/campaigns/eberron-return-of-the-lich-queen
    Post edited by Grokkit on
  • JonathonVolkmer
    JonathonVolkmer
    Posts: 114
    Well that just looks awesome! Thanks to you Rase for coming up with this brilliant application, and to you Chainsaw for refining it to perfection.

    "The Blood of Life":http://www.obsidianportal.com/campaign/the-blood-of-life/wikis/home-page
  • RaseCidraen
    RaseCidraen
    Posts: 890 edited October 2010
    No problem JonVol! I'm glad to contribute to the site! I'm not sure how The Blood of Life looks on your screen, but it seems a bit low on mine (IE9, 1280x800). I'm glad to see so many people implementing it. I've been trying to develop things to get them featured on the tips posting, and to help everyone else on the site :) Not necessarily in that order.

    Edit: Yeah, I just checked my site, and that's too low as well. Must be a resolution thing. If only this code could be made universally awesome. But I'm more than enthralled with it as it is.
    Post edited by RaseCidraen on
  • Grokkit
    Grokkit
    Posts: 23
    Hi Rase,

    I have been browser testing your slick nav as well today. It appears to work fine in IE 8 and Firefox, however, as I mentioned above, it does gak on some mobile devices (Blackberry Curve for sure). The issue isnt with the code per se, its because the mobile browser crops the left side of the pages leaving no place for the nav to go except over the wiki page itself.

    Otherwise, the contribution is great. Now we just need a feature request to get support for include files! :)

    Thanks again for the good stuff!
  • ChainsawXIV
    ChainsawXIV
    Posts: 524
    You can adjust the height by reducing the _top_ value in the second _div_ to whatever you like. The value I set there is meant to align the top of the sidebar with the bottom of the campaign banner image, and there's no reason not to change it. It definitely won't fit well on smaller resolution screens.

    As for the mobile browsers, I haven't worked out a good solution. Ideally, I'd place a div in the page that's wide and to the left, so the page width allows for the side bar, but unfortunately I don't think I can do that from within the content space of the wiki because of the way that block elements are positioned by the browser.
  • Curufea
    Curufea
    Posts: 161
    I'd put the navigation on the right - out of first view of the mobile browser. Page content is more important IMHO.

    It would be good to see a variant of a print stylesheet for mobiles though.
  • ChainsawXIV
    ChainsawXIV
    Posts: 524
    In my opinion, putting it on the right isn't near as nice from a layout standpoint, since all of OP's own sidebar controls are there too. If it is on the right however, you _can_ force the page width at least, thought the technique is hacky, by adding the following before or after the code (adjust width to taste):
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Hacky or not, that could be very useful. I've been toying around with some silly ideas, one of which being adding a tacky looking scroll bar to the Menu, for large content menus, which should be as simple as adding a vertical overflow scroll to the first div (I think). "overflow:scroll;" would pry do it. I know my menu doesn't need it, but others might. I think my favorite part about the menu was the hacky way I matched the background tone. Turns out, 202020 is the new black.

    Gentlemen, I think we are entering the territory of doing things OP is quite capable of, but never expected to be able to do.
  • JonathonVolkmer
    JonathonVolkmer
    Posts: 114
    You were right Rase, that menu was considerably lower than I intended it to be - I couldn't tell until I got home last night, though, because our monitors at work are flipping tall, and I usually hover my mouse in the lower half of the screen. I've moved them all up a ways, though not as high as you originally had them - I just like to get low.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Swanky! I definitely am digging it. I'm wondering if the background image I have on mine is too much, or if it needs something else. Any thoughts?
  • JonathonVolkmer
    JonathonVolkmer
    Posts: 114
    Huh, you know, I saw the code line for the background image, but I never actually noticed it until just now. I dropped it on mine, but it doesn't really interfere with the functionality of yours at all. It's just hard to see.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    I didn't want it to interfere with the text, so I didn't wanna make it too terribly bright. My imaging software is not being particularly smart: it won't recognize the shape for me to take it out, so that was one of the only ways I could get the background to 202020.
  • gaaran
    gaaran
    Posts: 740
    I realize I've been quiet of late (been very busy), but I love the look of this tool bar. I really want to go through and update my campaign pages again, I'm getting sick of looking at the same thing over and over again, but it's going to be a big project. I might work this in somehow though, I like it.
  • gaaran
    gaaran
    Posts: 740
    Oh, and just so you know Rase, in my browser (newest firefox) on your Outer Planes page, the nav bar shows up on the far left.
  • arsheesh
    arsheesh
    Posts: 850 edited November 2010
    Nice job on this Rase!

    Like Gaaran I'm planning on doing an overhaul on my _Age of Legends_ site. I'd actually experimented with the idea of adding a wiki drop down menu. However, after looking at several HTML and CSS tutorials on the subject, realized that either the code needed to create such a menu is not supported by the Portal, or else my meager coding skills just weren't up to the challenger (probably the latter). At any rate, in lieu of a drop down menu, I think that I just might go with your sidebar idea. I'm currently still working on the new site layout but, here's a "_sneak preview_":http://www.obsidianportal.com/campaign/age-of-legends/wikis/campaign-setting of a page displaying the new site banner, a new parchment background template, and your sidebar.

    Cheers,
    -Arsheesh
    Post edited by arsheesh on
  • Curufea
    Curufea
    Posts: 161
    CSS for the pseudo classes must be declared in the head area of a page - this includes things like the hovering, visited and activated subclasses for links.

    So it's not coding - it's lack of access to anything other than the body of a page.
  • Curufea
    Curufea
    Posts: 161
    However, that being said - HTML5 may be a viable option if OP changes the schema declaration at the start of each page.
  • arsheesh
    arsheesh
    Posts: 850
    Thanks for that clarification Curufea, I'm sort of a rank amateur when it comes to coding.
Sign In or Register to comment.