JS onKeyUp and display

Salvatos

Member
Prime Account
Messages
562
Reaction score
1
Points
18
Howdy. I'm helping vrufusx65v with his site, it's going well so far but I'm having trouble with JavaScript.

What we're trying to achieve: replace the News section of the page (http://shotsoundstudios.net/index.php) with search results from the custom Google search bar. The results are in a div that gets populated automatically as soon as one types into the bar, although as far as I can tell that's handled on Google's side.

My approach: Wrap the News section into a certain <div style="display: "> and use the onKeyUp event on the search bar to call a function (hide()) that changes the div's display to "none" (I've used this previously).

Problem: While it works on the demo I made with the same code, on the actual page it does nothing and even breaks the existing onBlur event.

I'll post the most relevant bits of code, feel free to request the entire thing.

HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Shot Sound Studios • Home</title>
<link href="http://shotsoundstudios.net/css/main.css" rel="stylesheet" type="text/css">
<!--<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/text.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slidedeck.skin.css" rel="stylesheet" type="text/css">
<link href="css/slidedeck.skin.ie.css" rel="stylesheet" type="text/css">
<link href="css/gcse-default.css" rel="stylesheet" type="text/css" />-->
<script type = "text/javascript">;
    document.createElement('footer');
    document.createElement('nav');
</script>
<script src="http://shotsoundstudios.net/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://shotsoundstudios.net/js/slidedeck.jquery.lite.pack.js" type="text/javascript"></script>
<script src="http://shotsoundstudios.net/js/login.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAAWNcRqwAAfa2RdK3eaE-oDBQSW--Y6bYue6XXOpUg85iw9nufCRTF1CytQioOEa9VDA4jRxDzn9PdYg" type="text/javascript"></script>
<script type="text/javascript">
    google.load('search', '1', {language : 'en'});
    google.setOnLoadCallback(function() {
    var drawOptions = new google.search.DrawOptions();
    drawOptions.setInput(document.getElementById('query'));
    var customSearchControl = new google.search.CustomSearchControl('008835135225647814369:bg7vtsjoucg');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    options.setAutoComplete(true);
    customSearchControl.draw('results', drawOptions);
    }, true);
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"> 
function hide(hideme, search) { 
    if((search.value == 'Search SS Studios...') || (search.length == 0)){ 
        hideme.style.display = ""; 
    } 
    else{ 
        hideme.style.display = "none"; 
    } 
} 
</script>
</head>
<body>

(...)

<form id="gcse" action="" method="post">
<input type="text" id="query" onClick="if(this.value == 'Search SS Studios...') this.value='';" onBlur="hide(hideme, this.value); if(this.value.length == 0) this.value='Search SS Studios...'" onKeyUp="hide(hideme, this.value)" value="Search SS Studios..." />
</form>

(...)

<div id="hideme" style="display: ">
stuff
</div>
I really don't know much about JavaScript, but the same method works on another page I made to test it - same function, same input, same div - so I don't know what's going on here. I'm thinking Google's script may be messing things up, but I really don't know where to look.

Thanks in advance for any help.

Here's the demo I mentioned, for comparison's sake (that's mostly it, I didn't even bother with html, body, etc. tags):
HTML:
<script type="text/javascript"> 
function hide(hide, search) { 
    if((search.value == 'Search SS Studios...') || (search.length == 0)){ 
        hide.style.display = ""; 
    } 
    else{ 
        hide.style.display = "none"; 
    } 
} 
</script>

<form id="gcse" action="" method="post">
<input type="text" id="query" onClick="if(this.value == 'Search SS Studios...') this.value='';" onBlur="hide(hideme, this.value); if(this.value.length == 0) this.value='Search SS Studios...'" onKeyUp="hide(hideme, this.value)" value="Search SS Studios..." />
</form>

<div class="genmed" style="line-height:160%; display: " id="hideme">
stuff
</div>
 
Top