Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript (jQuery) slide function

Posted on 2010-08-17
10
Medium Priority
?
383 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
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 
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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

670 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