Solved

Javascript (jQuery) slide function

Posted on 2010-08-17
10
376 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
  • 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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)

758 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

22 Experts available now in Live!

Get 1:1 Help Now