My new theme! Ajax & Vertical posts

  • Hi all

    I worked the last two days on my very own theme. I was tired of the long columns and all that scrolling at the frontpage. In my first attempt to write a vertical scrolling JavaScript i failed on all the bugs and browser issues. Also the whole design was buggy in IE cause i was using alot float-left/right, position etc..

    Frustrated, i was checking out the www.remarpro.com site once again and stumbled over that vertical scrolling in the a€?themesa€? section and thought: a€?hey, thata€?s exactly what i was looking for and yes, ita€?s crossbrowser compatiblea€?. that was the point for me to get started. I quickly put together some basic index loop and started testing. i had fast success. ita€?s now possible to navigate the last 10 posts vertical, using the links going from 1 to 10 above the frame.

    Since i needed to get rid of the ugly default scrollbars, i used overflow:hidden and put in a horizontal-scroll javascript on the left of that iframe with all the post in it. Problem solved, looking good, working on IE and FF. ??

    AJAX; I was impressed by that renovatio theme from a€?fxa€? and thought on how to implement that type of navigation into my kinda “static scrolling” thing (fixed width/height). the intention was the combination of both to get the most out of the new compact design. it worked out! I simply put my iframe + navigation into the AJAX container. This way it gets replaced if someone is using the normal AJAX links from the sidebar. ??

    The comment_popup_links within the iframe gave me a small headache. Of course i didna€?t want to load the comments in the iframe. Wild thoughtsa€| but then i remembered an HTML-tag called a€?BASEa€? and that was my solution. Instead of modifyin the wordpress functions i simply use [BASE target=a€?_parenta€?]. That way all plain HREF links are now targeting the container and not the frame.

    Where are all the other links like a€?categorysa€??
    I thought they are of not worth to be seen FIRST. Visitors mostly come for the new posts and not for the old ones. I put Archive, Categorys and Blogroll into a second & hidden sidebar, which makes my theme basicly consist of three columns. You can access that a€?old stuffa€? part by clicking on a€?morea€|a€? at the left sidebar.

    ENOUGH! ?? i will stop talking “binary” now.

    Please head over to my website located at https://www.m3nt0r.de/blog/ and tell me how you like it and if you enjoyed the navigation, colors, etca€|

    Thanks for your time in advance.

    If you wanna know more details, contact me at any time. I made a copy of this Topic on my Page with commments enabled: https://www.m3nt0r.de/blog/?page_id=191

    PS: i’m german, excuse typos etc.. ?? my site is in german aswell. i hope you get the feeling for it anyways.

Viewing 15 replies - 1 through 15 (of 24 total)

  • I like it a lot, especially that you’re trying something really new rather than just rearranging or using new colors and fonts.

    A couple of constructive comments:
    1. The vertical scroll within an entry is way too fast and I couldn’t figure out any way to make it slower.

    2. The Ajax implementation suffers from a major, and difficult, problem with browser history (i.e., The Back Button’s Broker). However, I can point you to a solution. Brad Neuberg is turning out some excellent code and tutorials on his Coding in Paradise blog:

    https://codinginparadise.org/weblog/

    I highly recommend it to anyone interested in developing complex Ajax implementations. Even though Brad uses Blogger for it.

    Again, really good job Mentor. I look forward to seeing you evolve the theme and perhaps others will take your concepts for a spin too.

    The only thing I really didn’t like about it is that it’s hard-coded for something just slightly larger than 1024×768.

    The problem with designing a site this way is that you need to size things vertically as well as horizontally. At 800×600 the site is nearly unusable, and because I get a vertical scroll-bar at 1024×768, I end up with a horizontal one as well. Narsty.

    My advice? Recode slightly so that Javascript will resize the elements to vertically fit whatever the available window height is. Simple CSS will take care of horizontal resizing.

    Aside from the sizing issues, that template is approaching serious coolness, and only a bit of graphic design away from severe coolness ??

    Wow, that’s very cool. Now I want it on my blog ?? Usability is surprisingly good, although I can see some room for improvements.

    I was thinking, being a theme developer, plugin developer, designer, and ajax coder, maybe we could collaborate on a sexy new theme, using yours as a base?

    Let me know. Thanks

    Thread Starter ment0r

    (@ment0r)

    thanks all.

    the actual input already made me think. the nifty graphics will follow as soon the base layout is more stable.

    ideas as a result of the input:
    – using jscript to autosize the iframe, making the horizontal controls surplus.
    – adding text-zoom controls. maybe mouse controlled (i.ex: doubleclick on post adds X to font-size.)
    – getting rid of those tables. they do what i needed and IE really likes them, but they are not part of what i define as nice xhtml code.
    – complete dragable layout. “that cookie swap-content thing got me started”
    – optimize scrolling. auto-size “inner” content (big one)
    – switching from iframe to div, since searchengines might not spider. If they spider, then write some jscript to prevent hotlinking to frame. (always wrap page)

    @jalenack: Sure, why not. Liked your Crimson theme :). But i wanna first make this one solid. The files are still “warm” ;).

    You shouldn’t need to use Javascript to resize the horizontal width of the content. With proper coding it can be entirely done in the CSS. You’ll need Javascript to control vertical sizing though.

    You don’t even need Javascript for vertical sizing either, but the non-JS code for it is a _very_ tricky bit

    True true. I hate to say this, but there comes a point where it’s easier/more reliable to do things in javascript. CSS is ultimately preferable.

    I don’t see why this needs an iframe. Could you explain it?

    Thread Starter ment0r

    (@ment0r)

    omg. i have too many tabs. currently removing tables from the theme.. whatta mess. heh.

    iframes why:
    iframes don’t have weird sideeffects in firefox compared to css-overflow. they are technically better embeded. in my first attempt i used “pixel waypoints” instead of calculating the innerHTML y-size. i simply used scrollLeft + the size of a post. it was “ok” but in FF the layer flickered above the other elements while moving. that looked pretty ugly…

    how to perform? these are possible ways (maybe there are more):

    • overflow + scrollLeft(-/+ ##px)
    • overflow + anchor (no js, guess with js it flickers)
    • iframe + scrollLeft & smooth
    • iframe + anchor & smooth (actual, solid)

    `
    what we could try to find out is, how to smoothscroll an overflow box while calling the (inner)anchor. i have a script which is filtering anchors and supposed to smoothscroll from one anchor to another, but afaik overflow boxes have no real body to make the js interact with… (i.o.words: no end, no startpoint, nothing to catch)

    but maybe i’m all wrong.

    couldn’t find good sources regarding this topic the web is full of text scrollers and what i need is not a smooth scrolling ovfl-newsticker ?? (google..waaaa!) .. anyways.. i think this hasn’t been done yet.

    masquerade: in all my experiments, I have yet to find good CSS-only code to handle vertical sizing that is based on the browser’s size. It’s either ignored, causes scroll-bars even with 0 for the margins and padding, or requires 3 different sets of rules for different browsers. So when I’ve needed to do it, I’ve used Javascript to resize the thing, but leaving the div full-height for graceful degrading.

    The limitations of that approach are definitely apparent though. If you wait until everything is displayed before resizing the div, it’ll show up full-sized first (with scroll-bars) before resizing. If you keep the content div hidden until it’s resized, you’ll violate a basic usability tenet (to wit: main content should appear quickly, if not first). And different browsers have different ways of figuring out what the actual dimensions of the available browser height is, so you need to do some client-sniffing (which you’ll have to do anyways if you use the AJAX techniques).

    But then, if you’re willing to put in the effort, you *can* do vertical browser-height based sizing solely in CSS, thus avoiding all of the above problems, with the exception, possibly, of having to use a hack or two so that different browsers (specifically, IE and IE/Mac) display the same (the Holly Hack and the Box Model Hack are the two biggies to learn if you’re heading into anything more than beginner-level CSS).

    In any case, good luck with it ??

    I praise your work, Mentor ??

    It has almost everything I have been yearning for.
    I share your feeling about the dullness and sameness of the 99% of blogs.

    Your design …. well, kind of “efficient” and more like “future technology” ??

    If you have not yet then please do have a look at Netvibes

    If I could trick you into implementing some of the features there ??

    I am dying for your theme !

    Thread Starter ment0r

    (@ment0r)

    Hi all. I just woke up and finished the version using no tables at all. It’s all fine in firefox. The content now wraps around the second sidebar. you can resize the window as much as you want. so far, so good.

    the only problem i have is that the internet explorer does not show ANYTHING at all! Only the header with description and logo.png.

    i have no idea why this happens. i am not using negative values to hide something etc… i only use some position absolute but with top:0 left:10, so no big deal. even IE should get this right.

    the page loads fine and the html-source is all there. i deleted my temp folder cause i thought he was using an outdated CSS, but that isnt the case. waaaa! i was about to get done :/

    any ideas? you can check out the theme on FIREFOX only. go to “more..” -> “themes” -> “dont-touch! / dev!”. If you switch on IE there is most likley no way back at the current state.

    PS: i would like to have a good on-the-fly css editor for IE like that EditCSS extension for FF. if you know one, plz share.

    ttfn. regards, mentor

    Cool theme!

    I wonder if Google is going to cry over this as Googlebot is Ajax illiterate.

    Just timidly chiming in:
    Is your headerimg div closed ?
    If I close it there is more content even though there are still problems.

    Thread Starter ment0r

    (@ment0r)

    Kassad: could you tell me where?

    i really kept an eye on the code. i commented every begin and end of a div, which makes the templates really easy to read (even the “view source” works ok).

    i wasn’t able to find a hole in the code. it validates fine aswell. i think this might be a css issue, but i also made commented sections there, using tabstops, etc…

    i just dont get it.
    please help!

    how to fix good looking code? ??

    Well, I am not sure about it but first I also tried to validate and there was one error. Then I just saved your page and looked for possible problem. The suspicious code:

    <div id="header">
    <div id="headerimg">
    <h1><a href="https://www.m3nt0r.de/blog"><img src="https://www.m3nt0r.de/blog/wp-content/themes/m3nt0r3/images/logo.png" title="m3nt0r.de - beyond the net" alt="m3nt0r.de - beyond the net" border="0"></a></h1>
    <div class="description">Technologie und das ganze drumherum</div>
    </div>

    I may be totally mistaken but after putting a div closing tag for the headerimg the content appeared.
    I am not a programmer just making guesses.
    Also, in Firefox the was some queer behaviour pressing the more button. Content did not show up.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘My new theme! Ajax & Vertical posts’ is closed to new replies.