Activity Stream
Quick Links
48,167 MEMBERS
64815 ONLINE
Register Now
besthostingforums On YouTube Subscribe to our Newsletter besthostingforums On Twitter besthostingforums On Facebook besthostingforums On facebook groups

Results 1 to 9 of 9
  1. 19th Sep 2011, 11:17 PM
        
    #1
    Kedzi is offline
    OP
    Kedzi
    Member
    Website's: 
    
takeashotatlife.com
allnewbeats.com
xavierkedzierski.com

    Default jQuery Infinite Scrolling

    Hey guys, I have a website where I post images everyday, and I don't want to make multiple pages, just one.

    But now I have about maybe what 40 images on the same page? And I tried multiple times to implement jQuery Scrolling in it (Kind of the same thing as the tumblr infinite page thing)

    Here's the source code:

    http://plugins.jquery.com/project/endless-scroll

    Example:

    http://www.beyondcoding.com/demos/endless-scroll/

    Can anyone help me?

    Here's my html:

    PHP 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" xml:lang="en" lang="en"> 
    <    head> 
        <    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     
        <    title>Take a Shot at Life</title> 
        
     <    meta name="keywords" content="life quotes, love quotes, quotes, personal quotes, take a shot at life, friendship" /> 
        <    meta name="description" content="Share quotes that means something to me at the moment. In other words, it reflects my state of mind" /> 
     
     
        <    link rel="stylesheet" type="text/css" href="tsl/style.css" /> 
        
    </    head> 
     <    body>
     
     <    div id="header-container">
            <    div id="header">
             <    div id="logo">
             <    IMG class="logo" src="/tsl/logo.png" alt="/index.html">
                
                </    div>

        <    div id="container"> 
            <    div id="sidebar">            
                <    ul id="navigation"> 
                    <    li><a href="/index.html">Home</a></li> 
                    <    li><a href="/journal">Journal</a></li>  
                    <    li><a href="/about.html">About</a></li>      
                    <    li><a href="/contact.html">Contact</a></li>  
                    <    li><a href="https://www.facebook.com/pages/Take-a-Shot-at-Life/160377524041869?sk=wall">FaceBook</a></li> 
                </    ul> 

            </    div>         </div> 
         
         
           <    ul id="images">
           <    li><IMG class="quotes" src="/Quotes/ididntthought.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ijustwantto.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/dowhat.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/maybeill.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/whenwe.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ihateyour.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/iwonder.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/icaninsult.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/neverlookback.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/icanttell.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/iwishyou.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/sometimeswhen.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ijustwant.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/peoplesay.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/youknowwhat.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/sometimesweexpect.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/lifeisabout.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ifijust.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ireallyhate.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/fallinlove.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/theresalways.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/sometimesyouneed.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/silence.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/sometimes.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/youdeserve.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/dowhatmakes.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ifyouwant.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/doyoueverthink.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/icanbechanged.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/thegreatest.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ifeellike.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/nevergiveup.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/ifsomeone.png" alt="/"></li>
           <    li><IMG class="quotes" src="/Quotes/peoplecry.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/itstruethat.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/neverregret.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/apologizing.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/whenim.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/thesaddest.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/neverallow.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/askyourself.png" alt="/"></li>               <li><IMG class="quotes" src="/Quotes/forgetall.png" alt="/"></li>                <li><IMG class="quotes" src="/Quotes/boysifyou.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/dontthink.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/itsnota.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/youhugher.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/stayfar.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/aguyand.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/ilikeit.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/youarefar.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/thedrunkmind.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/idontwishto.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/thetruthis.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/idontknowhowto.png" alt="/"></li>
            <    li><IMG class="quotes" src="/Quotes/ifyoudontgo.png" alt="/"></li>
        <    li> <IMG class="quotes" src="/Quotes/missingsomeone.png" alt="/"></li>
        <    li><IMG class="quotes" src="/Quotes/it'shardtowait.png" alt="/"></li>
     <    li> <IMG class="quotes" src="/Quotes/ismileand.png" alt="/"></li>
             
                            
      </    ul>
       

            
            <    div id="footer"> 
            <    img src="/tsl/separator.png"/>
                <    p>Take a Shot at Life publish existing quotes, we do not own any of them.
                   <    br /> 
                        Copyright 2011
                    </p> 
            </    div> 
        </    div> 
        
        </    div> 
    </    div>
    </    body> 
    </    html> 
    Thank you!
    Kedzi Reviewed by Kedzi on . jQuery Infinite Scrolling Hey guys, I have a website where I post images everyday, and I don't want to make multiple pages, just one. But now I have about maybe what 40 images on the same page? And I tried multiple times to implement jQuery Scrolling in it (Kind of the same thing as the tumblr infinite page thing) Here's the source code: http://plugins.jquery.com/project/endless-scroll Example: Rating: 5
    AllNewBeats.com - Free Music, Good Music
    Reply With QuoteRegister To Reply Ping this articlePing

    2.   Sponsored Links

  2. 21st Sep 2011, 07:38 PM
        
    #2
    Kedzi is offline
    OP
    Kedzi
    Member
    Website's: 
    
takeashotatlife.com
allnewbeats.com
xavierkedzierski.com
    No one?
    AllNewBeats.com - Free Music, Good Music
    Reply With QuoteRegister To Reply
  3. 21st Sep 2011, 07:48 PM
        
    #3
    Putin is offline
    Putin
    Member
    By the looks of things the script repeats the images - causes an endless scroll... how do you think this will help your 40 images on one page?

    Made by Envee :P
    Reply With QuoteRegister To Reply
  4. 21st Sep 2011, 08:58 PM
        
    #4
    Kedzi is offline
    OP
    Kedzi
    Member
    Website's: 
    
takeashotatlife.com
allnewbeats.com
xavierkedzierski.com
    Quote Originally Posted by Mp3Drug View Post
    By the looks of things the script repeats the images - causes an endless scroll... how do you think this will help your 40 images on one page?
    He wanted to show the the features, he didn't wanted to make 100 images, he just used the same.

    The code is there, I just can't get it working
    AllNewBeats.com - Free Music, Good Music
    Reply With QuoteRegister To Reply
  5. 21st Sep 2011, 09:45 PM
        
    #5
    mRAza is offline
    mRAza
    Respected Developer
    there are more ways but here is one simple for you to understand:
    First off keep images only you wants to display on page load, so lets assume you wants only 10 images, so your html will look like this
    PHP Code: 
    <ul id="images">
           <    li><img class="quotes" src="/Quotes/ididntthought.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/ijustwantto.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/dowhat.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/maybeill.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/whenwe.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/ihateyour.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/iwonder.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/icaninsult.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/neverlookback.png" alt="/"></li>
           <    li><img class="quotes" src="/Quotes/icanttell.png" alt="/"></li>
    </    ul> 
    Now when page loads it has 10 images, next add this code before </head> , ofc include jquery libraray and this libraray as well, now read comments in the code which starts with double slash on how to use it.
    PHP Code: 
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
      <script type="text/javascript" charset="utf-8">
        $(function() {
          $(document).endlessScroll({
            bottomPixels: 500,
            fireDelay: 10,
            callback: function(i) {
            // how many images you wants to add? after page stop , you have 30 more to display so add 30 images, after reaching 30 it should stop so add 31 below.
            if(i == 31) { ceaseFire(); }        
            // ok lets add first image, image name is stones.png so i gave just stones, and dont forget alt ;)
            if(i == 1) { var image = 'stones'; var alt = 'alt here';}        
            // lets add second image, image name is lotus.png i gave lotus 
            if(i == 2) { var image = 'lotus'; var alt = 'lotus alt here'; }
            // lets add third image
            if(i == 3) { var image = 'other'; var alt = 'other alt';}        
            // just repeat as above if(i == 4) with image names in img directory and alt you need how many you need
            
            // now time to display, 
              $("ul#images li:last").after('<li><img src="/Quotes/' + image + '.png" alt="' + alt + '" />' + i + '</li>');
            }
          });
        });
      </script> 
    Bots Development | Web Development | Wordpress Customization | PSD Conversion

    Life has many twists and turns in it, you have to take what you are given and use it for the best.
    Reply With QuoteRegister To Reply
  6. 21st Sep 2011, 11:39 PM
        
    #6
    Kedzi is offline
    OP
    Kedzi
    Member
    Website's: 
    
takeashotatlife.com
allnewbeats.com
xavierkedzierski.com
    Thanks a lot for the answer. But if I understand what you wrote, everytime I add a picture I have to add another
    if(i==x) { var image = 'other'; var alt = 'other alt';} right?
    AllNewBeats.com - Free Music, Good Music
    Reply With QuoteRegister To Reply
  7. 21st Sep 2011, 11:41 PM
        
    #7
    mRAza is offline
    mRAza
    Respected Developer
    right, if you have 30 more images to add, then add 30 those lines with image names.
    Bots Development | Web Development | Wordpress Customization | PSD Conversion

    Life has many twists and turns in it, you have to take what you are given and use it for the best.
    Reply With QuoteRegister To Reply
  8. 23rd Sep 2011, 10:40 PM
        
    #8
    Kedzi is offline
    OP
    Kedzi
    Member
    Website's: 
    
takeashotatlife.com
allnewbeats.com
xavierkedzierski.com
    Thanks a lot mRAza, I tried but it didn't work I don't know why
    AllNewBeats.com - Free Music, Good Music
    Reply With QuoteRegister To Reply
  9. 23rd Sep 2011, 10:41 PM
        
    #9
    mRAza is offline
    mRAza
    Respected Developer
    post your code here please
    Bots Development | Web Development | Wordpress Customization | PSD Conversion

    Life has many twists and turns in it, you have to take what you are given and use it for the best.
    Reply With QuoteRegister To Reply
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. [C#] Scrolling Label Function
    By dcrew in forum Web Development Area
    Replies: 0
    Last Post: 15th Sep 2012, 10:55 AM
  2. scrolling backround.
    By AJ Blacklisted in forum IP.Board
    Replies: 12
    Last Post: 8th Jun 2012, 11:22 AM
  3. Need scrolling updates/latest threads mod for vB
    By click2down in forum Web Development Area
    Replies: 7
    Last Post: 3rd Nov 2011, 03:38 PM
  4. [Selling] Scrolling Ads $1 a Month
    By SᴩiDᴇЯ in forum Completed Transactions
    Replies: 2
    Last Post: 26th Mar 2010, 05:13 PM
  5. [Selling] Scrolling Banner on all pages
    By SᴩiDᴇЯ in forum Completed Transactions
    Replies: 0
    Last Post: 23rd Mar 2010, 01:48 AM

Tags for this Thread

BE SOCIAL
FAQ | SITEMAP
Copyright ® 2008 - 2015 besthostingforums.com
Copyright © 2013 vBulletin Solutions, Inc. All rights reserved.
BestHostingForums.com is a great place to learn about Internet Marketing Online, SEO Techniques, Search Engine Marketing and resources for Web Development.