• I was thinking of some way to make a fairly unique, or at least homegrown, layout for my site, and my first idea hit a snag. Here is what I’m trying to get at.

    My goal is to make it so that the content on the left bar is dynamic, changing whenever a user clicks on a link on the top row. For example, when the page loads it might contain a link list, a listing of categories, and some other general info or links. Once they click on the “archives” link, though, it would change into a list of all recent entries.

    Now I don’t know much about any of the scripting languages, so I’m wondering how this could be done. I abhor frames and as far as I’ve seen they aren’t used any longer anyway. I was thinking that I could use php to pass an argument to the index, causing it to include a different file where the sidebar content is located, but would this cause the entire page to refresh whenever a user clicked on a link?

    Also, if I had it my way, I’d include some sort of effect when the sidebar content changed, to draw attention to the action (such as fading or sliding) but I have absolutely no clue how it would be done.

    Any and all help, links, and advice would be appreciated, and thanks in advance!

Viewing 12 replies - 1 through 12 (of 12 total)
  • There are 2 ways to do this I can think of offhand, but both require that the client have Javascript enabled in their browser (and quite a lot of people don’t, so be warned).

    First way is to use iframe sections to hold the potentially changing content and use Javascript to change the src parameter of the frames as needed.

    Second way is to load all the content onto the page, use CSS to hide certain sections, and use Javascript to modify the hidden attributes as needed.

    Third way (OK, I lied) is to use Flash.

    Hmm…you are asking what is definitely an advanced question. DHTML might be a choice, or perhaps some JavaScript or even CSS rollovers.

    Here’s a link: https://www.dhtmlcentral.com/script/index.asp
    Just guessing, but I’ll bet Google has lots of links too! Now that you have some keywords, you might do some exploring.

    Are you aware of an existing site that already does what you are hoping to set up?

    Thread Starter moridin

    (@moridin)

    Thank you both for the quick responses. To reply to the Rusty, those all sound like workable solutions, although I would end up checking to see if the user has js enabled before executing any of them. That would probably just involve a simple php if statement which would either load up x.css and execute a script OR load up alt.css, right?

    NuclearMoose, I am not aware of any other sites implementing this, or I probably wouldn’t have asked, because I wanted to come up with something at least vaguely original :D. Also, I can’t think of ever seeing any site do this.

    Another question, though. Worst case scenario, would this psuedo-code work?

    User clicks on a link on the header bar.
    Link loads index.php and passes an argument based on the link clicked.
    index.php has an if statement bracketing the sidebar include which evaluates the arguments and decides which file to include.

    That would involve making several .inc files for the site, and I’d have to update all of them seperately whenever I wanted to change anything, but that would certainly be easier than the other methods. Would that work?

    Moose don’t code. It’s a law or something, I dunno, but I’ve asked if I can, and “they” say no.

    You might plead for a coder to build a plugin for you, or perhaps you have enough skill to do this yourself.

    Thread Starter moridin

    (@moridin)

    It wouldn’t really change any of the core files or even interact with them in any way. It’s actually just modifying a template as far as I know. See, the thing that sucks here is that I literally have zero coding experience, but I know some of the things that can be done and how the stuff works. This means that I can come up with cool ideas but I can’t use them because I can never get past pseudocode.

    One thing that piqued my curiosity was the flash. How exactly would that be done? I’ve always wondered about the application of stuff like that. It also helps that I just recently met someone who has a lot of flash experience :D.

    In a word, avoid da flash where possible. Search engines won’t crawl it, and it pisses some of us off mightily ?? Of course, it can be used sparingly for menus and other special applications – just not for entire websites. Unless the point of the website is to be a flash portfolio, of course. Even then….

    Anyways, you really wouldn’t really need any more files than a normal 1.5 theme (for example) already has. It’s just a matter of creatively coding the site ??

    Assume, for example, that when someone goes to the site, they see the top menu, the sidebar contains category links and the search thingy, and the main content area has only the most recent post listed (and possibly the previous 3 in excerpt form for convenience). The user clicks the “Archive” link in the top menu.

    In scenario #1 above (from my previous post here), a javascript would simply change the src parameter of the sidebar iframe to read sidebar.php?section=archive (for example). The sidebar.php file is simply a normal sidebar template file with switch blocks around each of the sections – if no section querystring is given, it defaults to “category”, otherwise it’ll display the named section. Benefit: less data to transfer to the client on any given page. Con: the iframe refreshes from the server.

    In scenario #2, the javascript would instead use the DOM to hide the “category” div and unhide the “archive” div. Benefit: speed – there is no refresh lag. Con: the content of all the sections must be downloaded to the client.

    In practice, it would work best to combine the two methods – use the DOM method for changing the sidebar, but use the iframe method to update the main content area if someone clicks a story or archive link.

    Kinky ??

    Thread Starter moridin

    (@moridin)

    As an addendum, while I’m interested in the Flash angle, I’m wondering if it will work given the consideration that at least one of the possible sidebars will have to be dynamically generated (entry listing).

    Thread Starter moridin

    (@moridin)

    Wow, made my post and didn’t see yours :(.

    Anyway, one thing that makes me leery of using iframes, especially for the content, is that I really don’t want to set any absolute values for anything except width.

    So, for the script using the css properties, would the page look something like this?

    <div id=”mainwrapper”>
    <div id=”defaultsidebar”>
    <!–defaultstuff–>
    </div>
    <div id=”archivebar”>
    <!–archivestuff–>
    </div>

    etc
    etc

    <div id=”content”>
    <!–contentstuff–>
    </div>
    <div id=”footer”><!–footerstuff–></div>
    </div>

    And then a script which will manipulate the display: properties of each sidebar div id?

    I also came up with a new question involving this approach as I thought about it more. If a user clicks any of the links, it would load a new page, obviously. The question then is how do I make sure that the sidebar they were looking at stays visible on the new page? Is it possible to check the status of the sidebar before moving to a new page, and pass that argument to the new page?

    My brain hurts.

    Thread Starter moridin

    (@moridin)

    I found this: https://www.bobbyvandersluis.com/articles/unobtrusiveshowhide.php

    This seems to be the best way to make what I’m thinking of work, except I’d need to have one of the sidebars instances already initialized, and the links would be on a horizontal bar. Thoughts?

    All the pages you’ll be using with 1.5 (unsure about 1.2) are connected – so if you do happen to need to refresh the index.php page for example, you can do it with index.php?section=archive (also for example) and use a bit of PHP in the header.php file to write the javascript so that the “archive” section is displayed and the other sections are hidden. Not too difficult in practice, but hard to explain clearly ??

    That link seems like what someone wishing to write a page like yours would want to have bookmarked ?? And it can operate just how you want simply by manipulating the initial states of the sections instead of hiding them all at once.

    To be honest, certain bits of your idea are in my soon-to-be-almost-completed theme (big fan of kink is me), though I wasn’t planning on going quite as “hardcore” as you want to be ??

    Thread Starter moridin

    (@moridin)

    Well I wouldn’t call it hardcore XD. All I want is a dynamic sidebar, but it seems I’m getting close. So now it seems that if I want the sidebar to stay how it is following a refresh, I’ll need to get php and javascript to work together o _o – I think I’m going to have to talk to a programmer with knowledge of both languages for this one.

    All in all, before I go through all this trouble, is it worth it? I already know that it will make the site easier to navigate, and free up sidebar clutter, but does the time spent outweigh the benefits?

    Thread Starter moridin

    (@moridin)

    I’m still kind of in the dark as to exactly how I would implement the “remember how the sidebar looks” part of the idea. Can anybody help me out? Just a general idea on how to make all the stuff play nice would be helpful.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to make this layout work’ is closed to new replies.