?
Solved

How Does .affix work using Bootstrap CSS?

Posted on 2014-01-12
5
Medium Priority
?
1,619 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 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39774854
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
ID: 39774860
I updated my HTML and posted it here:
http://therevolutionet.com/ION/BS3/affixMap_Ace.html

But, not fixed.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39774862
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
ID: 39774863
YEP!!  Thanks Ace!
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39774870
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month14 days, 9 hours left to enroll

840 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