Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

Javascript (jQuery) slide function

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
Serellyn
Asked:
Serellyn
  • 6
  • 4
1 Solution
 
SRigneyCommented:
does moving the search div outside the options_wrapper div fix the problem?
0
 
SerellynAuthor Commented:
Tried that, but then it doesn't show at all anymore.
0
 
SRigneyCommented:
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!

 
SerellynAuthor Commented:
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
 
SerellynAuthor Commented:
Lol and I forgot the address. www.nowandforever.eu/result.html
0
 
SerellynAuthor Commented:
Nevermind, problem is fixed. Thanks for the troubles
0
 
SRigneyCommented:
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
 
SerellynAuthor Commented:
Thanks, already had it working but your solution is good
0
 
SRigneyCommented:
Sorry that it took me a little bit to figure out where everything was at in order to update it.
0
 
SerellynAuthor Commented:
Doesn't matter mate, I just said I already found it :) thanks for the trouble
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now