Home : Forums : Graphics and Design : Scroll effect

Scroll effect

You are currently not logged in. You can view the forums, but cannot post messages.

21-Feb-11 12:50

Delete

Edit

psolomon

No stars yet

Posts: 17

From: Seattle, WA, USA

Greetings all,

So, I'd been digging around for information on how to finagle this effect on my site for a while. I finally found somewhat of a tutorial, but I'm not sure how to apply the code. I mean, I know how to link css in html, but I'm not certain how to apply this effect to my twitter feed (http://philipos.com).

Info about effect: http://jqueryfordesigners.com/fixed-floating-elements/


 <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 10,
      interval: 6000,
      width: 220,
      
      height: 250,
      theme: {
        shell: {
          background: '#a30000',
          color: '#cfcfcf'
        },
        tweets: {
          background: '#e6e6e6',
          color: '#423542',
          links: '#9c0e0e'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: false,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('pysolomon').start();
    </script>

As always, must appreciated!

Philip
http://philipos.com

21-Feb-11 23:28

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Hi Philip,

It looks like you just need to wrap your Twitter code inside their #comment div:


<div id="commentWrapper">
  <div id="comment">

      <!-- your twitter code here -->

  </div>
</div>

Matt

[Edited by matt on 21-Feb-11 23:28]

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

22-Feb-11 10:48

Delete

Edit

psolomon

No stars yet

Posts: 17

From: Seattle, WA, USA

Hey Matt,

After seeing your message, I tried it out, but my twitter feed still remains fixed....

Where did I go wrong?


<style>
/* required to avoid jumping */
#commentWrapper { 
  left: 10px;
  position: absolute;
  margin-left: 0px;
  margin-right: 0px;
  width: 230px;
}

#comment {
  position: absolute;
  top: 0;
  /* just used to show how to include the margin in the effect */
  margin-top: 0px;
  padding-top: 0px;
}

#comment.fixed {
  position: fixed;
  top: 0;
}
</style>

<div id="commentWrapper">
  <div id="comment">
    <form>
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 10,
      interval: 6000,
      width: 220,
      
      height: 250,
      theme: {
        shell: {
          background: '#a30000',
          color: '#cfcfcf'
        },
        tweets: {
          background: '#e6e6e6',
          color: '#423542',
          links: '#9c0e0e'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: false,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('pysolomon').start();
    </script>
    </form>
  </div>
</div>

Philip
http://philipos.com

22-Feb-11 20:21

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Hi Philip,

You certainly don't want those <form> and </form> tags in there.

Other than that I'm not sure. Try checking your browser error console for any error messages.

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

01-Mar-11 22:53

Delete

Edit

psolomon

No stars yet

Posts: 17

From: Seattle, WA, USA

Unfortunately, it didn't work.

However, I think there may be another solution - http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

"Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element."

But the question is, how do I deploy it? And apply this effect to my twitter feed?


 <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 10,
      interval: 6000,
      width: 220,
      
      height: 250,
      theme: {
        shell: {
          background: '#a30000',
          color: '#cfcfcf'
        },
        tweets: {
          background: '#e6e6e6',
          color: '#423542',
          links: '#9c0e0e'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: false,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('pysolomon').start();

Philip

02-Mar-11 02:50

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@psolomon: I've never used that plugin. But it looks like you'd just do something like this:


<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>

<script src="../waypoints.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  ('#twitterContainer').waypoint(function(event, direction) {
		$(this).parent().toggleClass('sticky', direction === "down");
		event.stopPropagation();
	});
});
</script>

Presumably 'sticky' is a CSS class that sets the container to position: fixed.

Again, check your browser error console for problems.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/