Solved

Javascript (jQuery) slide function

Posted on 2010-08-17
10
381 Views
Last Modified: 2012-05-11
I've got a little problem, I've got this script (not coded myself) that slides a DIV down with mouseover, and up if you leave the DIV.

So I've got 2 DIVs, first one is called "search" and the second "login", they're both wrapped in the DIV "options_wrapper".

Then I've got the following javascript code
function closeOptionsMenu() {
	jQuery("#options_wrapper div").filter(":visible").stop().slideUp(400, function() {
		jQuery("#options_wrapper").hide();
	});
}

(function($) {
	$.fn.pk_options_menu = function(options) {
		var defaults = {
			controls: "#options_menu li",
			easing: "easeOutExpo",
			speedIn: 400,
			speedOut: 100
		}
		
		var settings = $.extend({}, defaults, options);
		
		/**/
		
		return this.each(function() {
			var $root = $(this);
			var $menu = $(settings.controls);
			var $items = $("div", $root);
			var $new_item = null;
			
			$root.hide();
			
			$menu.each(function(i) {
				$(this).hoverIntent(function() {
					$new_item = $items.filter(":eq(" + i + ")");
					
					if($new_item.css("display") == "none") {
						if($root.css("display") == "none") {
							$root.show();
							$items.filter(":visible").slideUp(0);
							$new_item.slideDown(settings.speedIn);
						} else {
							$items.filter(":visible").slideUp(settings.speedOut, function() {
								$new_item.slideDown(settings.speedIn);
							});
						}
						$new_item.bind("mouseleave", function() {
							closeOptionsMenu();
						});
					}
				}, function(){});
			});
		});
	};
})(jQuery);

Open in new window


It works like a charm, but I want something else. I need the "search" DIV always visible.
So not just when you go over it with your mouse, but it needs to be open all the time.
0
Comment
Question by:Serellyn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33457196
does moving the search div outside the options_wrapper div fix the problem?
0
 
LVL 1

Author Comment

by:Serellyn
ID: 33457666
Tried that, but then it doesn't show at all anymore.
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33457697
is there a site you can link to?

There may be CSS or javascript that is setting the search screen to hidden by default, moving it outisde of options_wrapper should not make it invisible, it should make it show all the time, unless something else has it set to hidden.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Serellyn
ID: 33457773
okay right now it's uploading so it should be up any moment now. It's about the search box on the right top, move your mouse over the search icon then it appears. I just want it to be there all the time.
0
 
LVL 1

Author Comment

by:Serellyn
ID: 33457782
Lol and I forgot the address. www.nowandforever.eu/result.html
0
 
LVL 1

Author Comment

by:Serellyn
ID: 33458245
Nevermind, problem is fixed. Thanks for the troubles
0
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 33458534
I pulled the search outside of the menu.


                        <div id="search">
                              <form action="" method="get">
                                    <p>
                                          <input type="text" class="input_search" name="search" value="Search..." />
                                          <input type="submit" class="button_search" name="btn_search" id="btn_search" value="" />
                                    </p>
                              </form>
                        </div>
                  <div id="options_wrapper">
                        <div id="login">
                              <form action="" method="get">
                                    <p>
                                          <input type="text" class="" name="username" value="Username" />
                                          <input type="password" class="" name="password" value="Password" />
                                          <input type="submit" class="button_login" name="btn_login" id="btn_login" value="" />
                                    </p>
                              </form>
                        </div>
                  </div>
                  <!--[if !IE]>end option divs<![endif]-->
            </div>


And I updated style.css to make it show in the right spot


      #feed, #login{ display:none; position:absolute; width:360px; height:60px; }
      #search { position:absolute; margin:54px 0px 0px 580px; width:360px; height:60px; }


It makes it show all the time at the right location.

The menu itself doesn't expose any methods to allow an item to be the default option that is open all the time.  Although that is an interesting proposition.  It could be possible to add another option to the settings for default item.  And then modify the internals of the menu to always display that one when nothing else is being displayed.  At that point the default option will close when the login option displays.   It's a very interesting idea, but more difficult to implement.
0
 
LVL 1

Author Closing Comment

by:Serellyn
ID: 33458540
Thanks, already had it working but your solution is good
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33458546
Sorry that it took me a little bit to figure out where everything was at in order to update it.
0
 
LVL 1

Author Comment

by:Serellyn
ID: 33458558
Doesn't matter mate, I just said I already found it :) thanks for the trouble
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
javascript delete path 7 45
Where is this content coming from? 4 40
How to size popup in jquery mobile 4 63
Check for Numeric Phone Field 14 48
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 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