WordPress.org

1. Ment0r
   Member
   Posted 6 years ago #

   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 wordpress.org site once again and stumbled over that vertical scrolling in the “themes� section and thought: “hey, that’s exactly what i was looking for and yes, it’s crossbrowser compatible�. that was the point for me to get started. I quickly put together some basic index loop and started testing. i had fast success. it’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 “fx� 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 didn’t want to load the comments in the iframe. Wild thoughts… but then i remembered an HTML-tag called “BASE� and that was my solution. Instead of modifyin the wordpress functions i simply use [BASE target=�_parent�]. That way all plain HREF links are now targeting the container and not the frame.

   Where are all the other links like “categorys�?
   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 “old stuff� part by clicking on “more…� at the left sidebar.

   ENOUGH! :) i will stop talking "binary" now.

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

   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: http://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.

2. billsaysthis
   Member
   Posted 6 years ago #

   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:

   http://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.

3. RustIndy
   Member
   Posted 6 years ago #

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

   The problem with designing a site this way is that you need to size things vertically as well as horizontally. At 800x600 the site is nearly unusable, and because I get a vertical scroll-bar at 1024x768, 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 :)

4. jalenack
   Member
   Posted 6 years ago #

   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

5. Ment0r
   Member
   Posted 6 years ago #

   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" ;).

6. RustIndy
   Member
   Posted 6 years ago #

   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.

7. masquerade
   Member
   Posted 6 years ago #

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

8. jalenack
   Member
   Posted 6 years ago #

   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?

9. Ment0r
   Member
   Posted 6 years ago #

   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.

10. RustIndy
    Member
    Posted 6 years ago #

    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 :)

11. Kassad
    Member
    Posted 6 years ago #

    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 :D

    I am dying for your theme !

12. Ment0r
    Member
    Posted 6 years ago #

    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

13. angsuman
    Member
    Posted 6 years ago #

    Cool theme!

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

14. Kassad
    Member
    Posted 6 years ago #

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

15. Ment0r
    Member
    Posted 6 years ago #

    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? :(

16. Kassad
    Member
    Posted 6 years ago #

    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="http://www.m3nt0r.de/blog"><img src="http://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.

17. Ment0r
    Member
    Posted 6 years ago #

    lol!!!

    i found that bug. I was wondering why my debugger didn't show all css elements/classes defined in the sheet. i put somewhere within the CSS a single quote (") after an closing semicolon. (doh!)

    ...padding:0px;
    background-color: #aaa;"
    font-size ...

    that broke everything below ..

    i found it by performing a "check css" in TopStyle and because it was suspicous that the links had the default blue color.

    argh! this hurts.. wasted the whole day on it. i should have installed that prog earlier.

    The header still needs an extra DIV tho. no idea why.. the div right after body is closed in the footer .. but now, since i close the page div right at the header i can remove it entirly. no use to have it there anyways.

    now it's time for making the css work in IE and then i will start adding more functions. (finally!) :|

    thanks kassad!!

18. Kassad
    Member
    Posted 6 years ago #

    Yes, it drives one crazy to chase just one character loosing hell, for two days. Firefox built-in tools are great and may help a lot but there is still missing a really good tool for the job.

    I have found an in-line CSS editor for IE. It is only a single dll.

    Inline Css Editor

    Just drop in system folder and register. Needs restart, though.

19. Ment0r
    Member
    Posted 6 years ago #

    Weee! i got it done!

    * UPDATE 25/09/05 *
    - No HTML Tables
    - No fixed width
    - No scrollbars

    You can even resize this to PocketPC size and its still usable. (of course not if you are on index + iframe)

    The second sidebar which is hidden in the first place now is included into the main content area so that full-text wraps around it. Beautiful!!

    Check out various Browsershots here:
    http://browsershots.org/website/375140/

    "no difference" equals "good job".
    Now it's time for some more AJAX :)

20. Kassad
    Member
    Posted 6 years ago #

    Mentor!
    What kind of screen resolution are you using ?
    I use 1024x768 and there are some anomalies.
    I put up two screenshots>

    Mentor Screenshots

    Perhaps, it would worth to make it an elastic design ?

21. Ment0r
    Member
    Posted 6 years ago #

    Heya. I fixed that by now. My size calculations were bad. sidbars are 170 each, thus 340 total and iframe was 650. i thought it was okay since this makes it below 1000. i always forget about that margin / padding sizes. :|

    my resolution was 1280x1024, but i used the resize function of the web-dev toolbar. humm.. mabye i shouldn't count on that this much. after reading your post i lowered my resolution to 1024 and the problem you described was still there.

    for the future:
    i will try to make the iframe autosize. the tricky part of that will be to "attach" the inner-post-widths to the width of the frame which gets resized by its parent.. *sigh* .. that will be hard to achieve, i think. if someone knows something about this already, gimme a shout. might need help there.

    ps: added some nice header and i found my so-called "final color theme".

    edit: the design is flexible/elastic .. but not on the startpage cause there is the only static content! if i can break that up also i think it will totally rock. lets see if it works out... normal text is wrapped and nothing is blocking the resizing. cept you reach with one sidebar the other.. but who has 400px screen ? ^_^

22. kiefpiet
    Member
    Posted 6 years ago #

    Looks great! I Love the scrolling buttons! :P

23. Kassad
    Member
    Posted 6 years ago #

    Whoah :)
    Close to perfection!

    Just to make you work harder :D :

    Could the top margin of the iframe in IE be increased ?
    The upper gray divider line is almost into the article numbers.

    Also, when there will be more articles the postnav will flow across the third column. It may be, perhaps, contained similarly in a horizontally scrolled iframe.
    The English Guy's Horizontal Theme has an interesting solution for this.

    Otherwise, I am near to orgasm :D

24. Ment0r
    Member
    Posted 6 years ago #

    the funny thing with that postnav issue is: It's only on IE! maybe i will just give it some width and height values to play around. mostly that solves problems in IE. hang on :)

    the postnav flow across:
    im not sure actually if that is really the case, but i think i forgot to adjust its own width to the new smaller value of the iframe. you said that it could happen once there are more posts, but: their wont be any more then the last 10 posts to navigate. the iframe is ment to be a replacement for the vertical scrolling of the recent 10, not more. i dont see problems in the future.

    i had a look at the english guy's theme but i simply didnt understand how he did it. since im not really good in javascript i couldnt follow the code behind the theme. maybe i just go ask him once.

25. Kassad
    Member
    Posted 6 years ago #

    Yep!
    "If I had a hammer" I would use it until there is one copy of that devilish IE in the world :D

    Yeah, recent posts. I withdraw :)

    "Archives" almost is meaningless for me. I never check them unless there is a specific link to it somewhere. It may be possible to list post titles when opening a monthly archives and/or return it to the iframe, I think, but it is fine tuning or personalization of the theme.

    The English Guy's Horizontal theme is a port of an original solution by 13thparalell.org. Nice work, really, but did not play well breaking the columns vertically.
    The navigation can include theoretically all posts.

    Well, there are people with hundreds of posts, there are others with few. They are different paradigmas.
    Still, I think that Archives are generally total wastes.

    Hm..., your work not just genuine but induces lot of thoughts, as well.

    So, congratulation for your work and I expect some more really nasty tricks with AJAX :D

Topic Closed

This topic has been closed to new replies.