CODEWITHSUNDEEP
javascriptjqueryhtmlcssabsolute
Ash
Ash

Reputation: 258

Apply position absolute style using JavaScript / jQuery

I am building a site with a right aligned nav.

The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.

I am trying to create a solution for my menu below.

jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/

I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js. I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover. There maybe a better css only solution, but i couldn't find one.

Any help is appreciated! :D

Edit: updated explanation.

Upvotes: 4

Views: 238

Answers (3)

Oerd
Oerd

Reputation: 2313

As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.

But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:

<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">

Then change your javascript to:

// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");

// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));

// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()

// show/hide
// ...

You can also do the offset calculations in javascript and only specify position in your templates

Fiddle at: http://jsfiddle.net/cYsp6/7/

Upvotes: 1

Shail Paras
Shail Paras

Reputation: 1163

You have already calculated the left of your last menu, why didn't you use?

$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
    $("#last-menu-item").mouseenter(function(){
        $("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
    });
    $("#last-menu-item").mouseleave(function(){
        $("#last-menu-item-drop-down").css({'display':'none'});
    });

});

Check Here

Upvotes: 1

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

I cant Make with css 

$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
 $("#last-menu-item-drop-down").css('position','absolute').css('left',a);
 $("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
   $("#last-menu-item-drop-down").hide();
});

Updated Fiddle:

Fiddle

Upvotes: 0

Related Questions