Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post

    Switch Click Anywhere to Click on Button

    Hi there, I just downloaded the JS/Ajax Script with a drop down panel:
    http://www.javascriptkit.com/script/...ownpanel.shtml

    My problem is that I have a search box in my external file that drops down and that doesn't quite work for website users. When they go to put their cursor into the text area, the entire panel pulls up and closes. In short, people never get a chance to search for anything because the javascript code makes it that they can click ANYWHERE to close the box.

    How do I change the code below to make the box contract by clicking on an image in the external file only and not anywhere? If nobody knows, then does anyone know how the flashing pointer thingy can already be inside the text area so that my clients' customers don't need to click anywhere but instead just start typing their search terms?


    //Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com

    var jkpanel={
    controltext: '',
    $mainpanel: null, contentdivheight: 0,

    openclose:function($, speed){
    this.$mainpanel.stop() //stop any animation
    if (this.$mainpanel.attr('openstate')=='closed')
    this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
    else
    this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
    },

    init:function(file, height, speed){
    jQuery(document).ready(function($){
    jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
    var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
    var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
    $contentdiv.load(file, '', function($){
    var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
    $contentdiv.css({height: heightattr})
    jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
    jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
    $controldiv.css({cursor:'hand', cursor:'pointer'})
    })
    jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
    })
    }
    }

    //Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
    jkpanel.init('http://www.prioritywindows.com/catalog/Search-Top-sp-969.html', '129px', 500)
    The troubled website, by the way, is http://www.prioritywindows.com.

    Thank you.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    First, this has nothing to do with AJAX. It's a plain JS issue together with the framework you are using (jQuery).

    With that said, see if adding highlighted helps:
    Code:
    jQuery(document).ready(function($){
    			jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
    			var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
    			var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
    			$contentdiv.load(file, '', function($){
    					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
    					$contentdiv.css({height: heightattr})
    					jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
    					jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
    					$controldiv.css({cursor:'hand', cursor:'pointer'})
    			})
    			jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})		
    			$('.contentdiv').click(function(){return false;});
    		})
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thank you for the code. Unfortunately, it didn't work. While it did keep the page from sliding up when I clicked anywhere, it also made all the links in the external file unclickable.

    I apologize if I posted in the wrong thread. I don't really know what ajax is. I assumed this was ajax because that was the category I saw from the script's breadcrumbs.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    No need for an apology. Anyway, try this instead:
    Code:
    $('.contentdiv').click(function(){
    	$('a').click(function()
    		{
    			location.href=$(this).attr('href');
    		})
    	return false;
    	});
    Takes two click before the URL change, but maybe worth a try.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks, I will try to figure out your code as soon as I find more time.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •