SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What library are they using?

    I'm trying to find out what library is this site using for the Today's Events part where you can scroll to the left and right.

    http://newyork.going.com/

    any ideas?

    Thanks

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its actually quite easy but for some reason my brain isn't working tonight and I am unable to stop floated elements from wrapping.

    My example was going to consist on a div 100px by 50px. Then inside, there were 10 50px by 50px floated div's.

    Then with overflow set to hidden, it would only show two at a time.

    Then using javascript, I would change the padding or margin to move them.

    But because the containing div is correctly (but incorrectly in our case) wrapping the div's, you can move the first one but it wont do any further.

    if you can solve my brain fart, and manage to get all the div's to float side by side then this would work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                #content {
                    width: 100px;
                    height: 50px;
                    border: solid 1px #ccc;
                    overflow: hidden;
                    padding-left: -250px;
                }
                .el {
                    width: 50px;
                    height: 50px;
                    float: left;
                    background-color: #f5f5f5;
                }
            </style>
            <script type="text/javascript">
                function move(direction) {
                    var c = document.getElementById('content');
                    var curValue = parseInt(c.childNodes[0].style.marginLeft.replace('px',''));
                    if(direction) {
                        if(isNaN(curValue))
                            c.childNodes[0].style.marginLeft = '-50px';
                        else {
                            c.childNodes[0].style.marginLeft = curValue-50 + 'px';
                        }
                    } else {
                        if(!isNaN(curValue)) {
                            c.childNodes[0].style.marginLeft = curValue+50 + 'px';
                        }
                    }
                }
            </script>
        </head>
        <body>
            
            <div id="content">
                <div class="el">1</div>
                <div class="el">2</div>
                <div class="el">3</div>
                <div class="el">4</div>
                <div class="el">5</div>
                <div class="el">6</div>
                <div class="el">7</div>
                <div class="el">8</div>
                <div class="el">9</div>
                <div class="el">10</div>
            </div>
    
            <div><a onclick="move(true);">Left</a> | <a onclick="move(false);">Right</a></div>
    
        </body>
    </html>


  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, but I tried and it didn't work.

    I'm not sure what I'm doing wrong


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •