Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: Order DIVs via DOM scripting

Bottom of Page

1 to 3 of 3

  1.  
  1.  permalink
    I need the counsel of one of our local JS/DOM wunderkinds once more (BIG thanks to JohnRiv for his advice on my thickbox issue) as I near the completion of the online culture/style magazine that I've been working on for the past few months...

    Some background:

    • The site features content, published weekly, in 6 primary categories/sections. Feel free to poke around the site to get a sense--it's still under development.

    • The backend is PHP/MySQL and powered by Expression Engine (I HIGHLY recommend this CMS to any interested parties).

    • Expression Engine (EE) calls each of these six categories blogs.


    The functionality/layout I'm trying to achieve:

    • Each week, a snippet/teaser of the latest entry in each of the six sections/blogs will appear on the homepage; these six snippets are stacked on top of each other in a column.

    • The client has requested that she be able to feature one of the six articles; this featured article should be placed at the top of the column.


    The issue:

    • Each of the six snippets is being pulled into a hard-coded DIV

    • I am able to assign a class of "featured" to the featured article through the CMS, but I am not sure how to dynamically arrange the DIVs so the featured snippet is on the top of the stack

    • You can see a very stripped down version of the homepage on my dev server to get a sense of what the code currently looks like.


    Help! How do I render the DIVs so the one with class="featured" will always be on top? I'm up for rearranging the code--changing the DIVs to list items if that would make things easier to script. Thoughts?
    •  
      CommentAuthorJohnRiv
    • CommentTimeMar 5th 2007
     permalink
    Your dev server is offline so I can't see the code, but do you have enough control to be able to do something like this via CSS?

    CSS:
    #snippets {
    position: relative;
    padding-top: 95px;
    }
    #snippets div {
    width: 300px;
    height: 80px;
    background: #ddd;
    margin: 0 0 15px 0;
    }
    #snippets .featured {
    background: #f60;
    position: absolute;
    top: 0;
    left: 0;
    }

    HTML:
    <div id="snippets">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class="featured">5</div>
    <div>6</div>
    </div>
  3.  permalink
    Thanks John,

    I did try a CSS solution, but I was having an issue with clearing the absolutely positioned div. I was able to come with a DOM scripting solution that rearranges the divs once it discovers the div with the ID of "featured". You can see it in action here: http://www.misstropolis.com/index.php/home/

1 to 3 of 3

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page