Switch Click Anywhere to Click on Button

[stanfordrep]

Hi there, I just downloaded the JS/Ajax Script with a drop down panel:
http://www.javascriptkit.com/script/script2/dropdownpanel.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.

[rangana]

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:

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;});
})

[stanfordrep]

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.

[rangana]

No need for an apology. Anyway, try this instead:

$('.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.

[stanfordrep]

Thanks, I will try to figure out your code as soon as I find more time. :)