How this is done?!!! Please HELP!!!

Discussion in 'Programming' started by mioo, Nov 30, 2007.

0
  1. #1
    Hi everyone! I', finishing my new blog (WordPress), I have everything almost done, but I just need to know how this is done: On this site, well in this theme: http://www.premiumnewstheme.com/, one the part where it says: "FEATURED ARTICLES" you have like a content-box with image and a small excerpt of the article, below you have like 4 thumbnails, well, each time you click in a thumbnail, the content-box "switches" the content and the image, that's my question, how do you do that? using which script viewing the source code of the site I can't see any related script, please help me.

    BTW I already have the content-box and the four thumbnails below.

    Thanks!
     
    mioo, Nov 30, 2007 IP
  2. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    After looking at the source code, I believe you've stumbled onto a pretty neat little css/html trick ;) I have never seen this before and it is quite simple yet cool and amazing!

    What it is doing is it has the div's for all of the pictures with the snippets of each article (most likely prepared by a little php script or something) and they are all the same div id they just cover each other. Therefore all the others are hidden until they are clicked on. It's kind of like ajax effects without the javascript.

    I am going to try and replicate the effect and I'll let you know what I come up with (probably do a bp on it or something but I'll let you know)

    Hope that helped!
     
    jmhyer123, Nov 30, 2007 IP
  3. mioo

    mioo Banned

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks! jmhyer123, I really hope you or someone else can help me because I'm really desperate. :)
     
    mioo, Nov 30, 2007 IP
  4. dman_2007

    dman_2007 Peon

    Messages:
    1,259
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    0
    #4
    man that made me waste a lot of my time trying to figure out what html+css trick this site uses to achieve this effect, in the end it turned out that the site uses javascript to do this, i should have checked that first, instead of taking your word for it. Anyway, disable javascript in your browser and then visit the site, you'll see for yourself, it includes a couple of javascript files in the end, i am sure one of them does it.
     
    dman_2007, Dec 1, 2007 IP
  5. maiahost

    maiahost Guest

    Messages:
    664
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #5
    maiahost, Dec 1, 2007 IP
  6. nishanthe

    nishanthe Peon

    Messages:
    121
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Its DHTML.. you might be able to find a similar script from dynamicdrive.com
     
    nishanthe, Dec 3, 2007 IP
  7. mioo

    mioo Banned

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Well I realize that it is not a script, it is the four posts contained inside one 200px high div (overflow
    is hidden), and uses #post-ID# to display them in the container. Nut now the problem is that each time I click a thumbnail, it auto-scrolls I really don't know how to stop this. any ideas?
     
    mioo, Dec 5, 2007 IP