javascript breaking css

Posted on 2011-10-21
Last Modified: 2012-05-12
I am using the following to hold a menu in place vertically but not horizontally:

<script type='text/javascript'>
    var $win = $(window);
    $('#widget_sp_image-53').css('left', 0 -$win.scrollLeft());
	$('#nav_menu-6').css('left', 0 -$win.scrollLeft());
	$('#nav_menu-5').css('left', 0 -$win.scrollLeft());

Open in new window

It works purfect, unless I maximize my screen and scroll down  then the three divs land 100% justified left on the edge of my screen.

I'm using this example  and it breaks when I use it.
Question by:rgranlund
    LVL 10

    Accepted Solution

    Are you trying to subtract win.scroll left from 0? which results in a negative number. Should it be 20 - $win.scrollleft as shown in jsfiddle?

    LVL 11

    Expert Comment

    It would be interesting to know which browser does this behavior. In the jsfiddle the first box lands as you change the css values to 0 top 0 and the second box left 0 on maximizing. This is because of the css values you changed to 0 instead of 20 in the jsfiddle example.

    This is in Firefox 6. Which browser do you use? Do you use the example in another context, then post the context.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Suggested Solutions

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    731 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

    16 Experts available now in Live!

    Get 1:1 Help Now