Solved

How Does .affix work using Bootstrap CSS?

Posted on 2014-01-12
5
1,565 Views
Last Modified: 2014-01-12
I am trying to use Bootstrap to affix the map image on the left when the user scrolls 230px.  It isn't working at all.  Any ideas how to use .affix?  Here is the example:
http://therevolutionet.com/ION/BS3/affixMap.html
0
Comment
Question by:TrevorTomato
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Change
<div data-spy="affix" data-offset-top="230">
to
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">

I have it working here http://jsbin.com/eZAKiDA/1/

Instructions with and without js http://getbootstrap.com/javascript/#affix
0
 

Author Comment

by:TrevorTomato
Comment Utility
I updated my HTML and posted it here:
http://therevolutionet.com/ION/BS3/affixMap_Ace.html

But, not fixed.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
Looks like the real issue is you forgot to add jquery

Please see the link I have that contains all the files.
0
 

Author Comment

by:TrevorTomato
Comment Utility
YEP!!  Thanks Ace!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Doh!

I noticed the next issue is the image expands to original size when you scroll and it goes under the right side.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now