-1

I am trying to create a quick search function on the menu of my website using jquery. The code is very simple, when a user clicks the "quick search" link that will be part of menu of every page, an input text field will appear and they can search for whatever they want quickly. My code works for one toggle, but not more. I have been trying to fix this for ever now and it is suppose to be simple so i'm frustrated. I was hoping someone on here can maybe help me figure this one out?

NOTE: My code works more than once, on jsfiddle, but not anywhere else. -_-

Markup

<a href="#"> Register</a>  |
    <a href="#">My Account</a>  |
    <span>
        <span id="quicksearch" style="cursor:pointer; color:blue;"><a href="#">Quick Search</a></span>
        <input id="quickbox" type="text" style="float:right; display:none; padding:2px 5px 3px 5px; border:2px solid #ddd; margin-left:-110px; position:absolute; margin-top:20px;"/>
    </span>

JQuery

<script type="text/javascript">
$(document).ready(function(){
    $("#quicksearch").click(function(){          
        $("#quickbox").toggle();
    });
});
</script>
AnchovyLegend
  • 12,139
  • 38
  • 147
  • 231
  • 1
    Can you post the full code for your site? It is appearing fine in jsfiddle. – Zack Tanner Jun 12 '12 at 00:20
  • theres not much to show, everything relevant is posted above. I will say that my jquery isn't in the header section of the markup (which shoudn't matter), instead it is in a menu file that is included in all the pages of my site. – AnchovyLegend Jun 12 '12 at 00:23
  • @MHZ, zack is right. You've said yourself the code works in jsfiddle, which makes the information provided for the question absolutely useless - you're asking people to debug working code. We need more context. – mowwwalker Jun 12 '12 at 00:25
  • 1
    If everything relevant was posted above, it would work ;) – Zack Tanner Jun 12 '12 at 00:26
  • Proof: Look and the proposed answer, the jsfiddle it contains, and the comments:) – AnchovyLegend Jun 12 '12 at 00:30
  • Are you by chance using jQueryMobile as well? – Brett H Jun 12 '12 at 00:41
  • why are people downvoting me? I asked a specific question that had an answer that consisted of modifying the code that I provided and nothing else?? – AnchovyLegend Jun 12 '12 at 00:44

3 Answers3

2

Your style is messed up.. Fix it and it should work. See DEMO: http://jsfiddle.net/ZAHsv/5/

You can position using .top and .left from the quicksearch link.. see below,

$(document).ready(function(){   
    $("#quicksearch").click(function(){
        var qsPos = $(this).position();
        $('#quickbox').css({
             'position': 'absolute', 
             'top': qsPos.top + 20, 
             'left': qsPos.left
         }).toggle();
    });
});

DEMO: http://jsfiddle.net/ZAHsv/7/

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
0

http://jsfiddle.net/5SQNP/

Calling .hide() and .show() are different than just changing display: block to display: none. Check out this cool test BTW: http://jsperf.com/jquery-css-display-none-vs-hide/2

It is good practice to use an if...else instead of an if...else if when there are only 2 possible cases (true, false). Also, use === over == when applicable.

Which equals operator (== vs ===) should be used in JavaScript comparisons?

Community
  • 1
  • 1
Brett H
  • 1,168
  • 10
  • 14
-1

*EDITED *

Is this what you want ?

http://jsfiddle.net/ZAHsv/8/

toggle() works fine, but you can try this instead:

$(document).ready(function(){
    var show = true;
    $("#quicksearch").click(function(){
        if ( show == true) {
            $('#quickbox').show();
            show = false;
        }else if ( show == false )
            $('#quickbox').hide();
            show = true;
    });
});

To fix the position, set the style in a CSS

void
  • 482
  • 3
  • 12