Results 1 to 5 of 5

Thread: How can I made JKmegamenu hold its position?

  1. #1
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How can I made JKmegamenu hold its position?

    Hi -

    I'm not sure whether this is a javascript or CSS question. I understand CSS a bit more than javascript (which I don't understand at all) so I posted it here.

    I'm playing with a jkmegamenu. I need it pretty wide and now (about 4 columns wide) it protrudes a bit on the right side of the layout's "container". This is not really a big problem - except that if the browser window is too narrow the dropdown megamenu div shifts to the extreme left - hiding the first few columns. This is an ugly problem. It's also unpredictable as to what browser window width triggers the nasty shifting behavior.

    I would like the megamenu to stay in the same position no matter how wide or narrow the browser window is. How can I make it do this?

    Thanks in advance.
    D2
    The page I'm working on isn't online but this one is the same layout WITHOUT the problem I've described. I hope that helps.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    297
    Thanks
    5
    Thanked 18 Times in 18 Posts

    Default

    Post all the code you have?

  3. #3
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Crazykld69 -
    Thanks for your reply.

    Here's the web page: to view the puzzle I'm trying to solve.

    I was going to isolate the menu but then I started to explain what I was looking for and got a little carried away... as you will see by the length of the explanation there.

    Thanks again.
    d2

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Looks like someone already edited the jkmegamenu.js file a bit in the function that controls this, but for the top position. This is the function from that script that we are concerned with for the positioning. For the left positioning, particularly the highlighted line:

    Code:
    alignmenu:function($, e, megamenu_pos){
    	var megamenu=this.megamenus[megamenu_pos]
    	var $anchor=megamenu.$anchorobj
    	var $menu=megamenu.$menuobj
    	var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
    	//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
    	var menutop=megamenu.offsety+megamenu.anchorheight  //get y coord of menu
    	$menu.css({left:menuleft+"px", top:menutop+"px"})
    	this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
    },
    To get what you want, change it to:

    Code:
    var menuleft=megamenu.offsetx //get x coord of menu
    BTW, for the top position, this works better in Firefox (others were already OK, but this doesn't hurt them):

    Code:
    	var menutop=$anchor.parents('div').eq(0).offset().top+$anchor.parents('div').eq(0).height()  //get y coord of menu
    So you're new function would look like so:

    Code:
    alignmenu:function($, e, megamenu_pos){
    	var megamenu=this.megamenus[megamenu_pos]
    	var $anchor=megamenu.$anchorobj
    	var $menu=megamenu.$menuobj
    	//var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
    	var menuleft=megamenu.offsetx //get x coord of menu
    	//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
    	//var menutop=megamenu.offsety+megamenu.anchorheight  //get y coord of menu
    	var menutop=$anchor.parents('div').eq(0).offset().top+$anchor.parents('div').eq(0).height()  //get y coord of menu
    	$menu.css({left:menuleft+"px", top:menutop+"px"})
    	this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
    },
    Last edited by jscheuer1; 09-16-2011 at 05:35 PM. Reason: add BTW and fulll code of altered function
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dzash2000 (09-20-2011)

  6. #5
    Join Date
    Oct 2006
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1 -

    Thanks for the detailed response. It works magnificently!

    I also appreciate your coming back with the "BTW" and providing such complete code.

    This is a great help. Thanks again.

    Josh

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •