Solved

How Does .affix work using Bootstrap CSS?

Posted on 2014-01-12
5
1,576 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
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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to get responsive video to always be centered 15 63
Element alignment and word wrapping 9 61
CSS Question 5 38
Remove lines by logo 2 22
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

910 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

20 Experts available now in Live!

Get 1:1 Help Now