Solved

Javascript (jQuery) slide function

Posted on 2010-08-17
10
377 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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…

929 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

12 Experts available now in Live!

Get 1:1 Help Now