Jump to content

Google Search Bar!!


ADT

Recommended Posts

Probably a dead easy thing to do...  we used to have a Google search widget on Frog 3...  I assume it would be dead easy to find some code that I could slap into a HTML widget....   but thought it just as easy to ask here if people have already done it!! :D

Link to comment
Share on other sites

 

<style>
/* Adding some styling to the overall search */
.googleSearchContainer {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+94,bababa+100 */
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 94%, #bababa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 94%,#bababa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 94%,#bababa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
padding:10px;
border-radius:10px;
}

</style>
<!-- This is a simple form which opens a Google search, target="_blank opens it in a new tab -->
<form method="get" action="http://www.google.com/search" target="_blank">

<div class="googleSearchContainer">
<!-- to add a Google logo, we need an image source.  I've uploaded one to the community site, but you might want to make your own. -->
<img width="84" alt="Google Search" style="float:left; margin-right:20px; display:inline-block;" height="42" src="https://www.frogcommunity.com/app/file/asset/B86E8730200307B938CE4FD07643260F91C219AC171C65DC.png"> 
<table align="center">
<tr>
  <!-- This search box has a width of 200px, you can adjust that to fit your layout -->
<td style="height:30px;"><input type="text" style="width:200px;" name="q" size="17" maxlength="200" value="" /></td>
<!-- using bootstrap classes btn and btn-danger to make a red button -->
<td style="height:30px;" valign="top"><button class="btn btn-danger" type="submit">Search</button></td>
</tr>
</table>
</div>
    


</form>

Capture.JPG

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...

After much searching...still not got a permanent solution, but... if you click near (or on) the text box then hit the tab key, the input retains focus and allows you to type.   

Also, for some reason the original code i posted had the Search set up wrong.  It needs to be a submit button.  i've edited the original entry to reflect this.

Link to comment
Share on other sites

 

8 minutes ago, Graham Quince said:

After much searching...still not got a permanent solution, but... if you click near (or on) the text box then hit the tab key, the input retains focus and allows you to type.   

Also, for some reason the original code i posted had the Search set up wrong.  It needs to be a submit button.  i've edited the original entry to reflect this.

Bloody rogue programmers......... :OP

Link to comment
Share on other sites

8 minutes ago, Chris.Smith said:

@Graham Quince @ADT Disappointed with you both for not spotting the FrogOS Global Search box lighting up... See me after class.


<script type="text/javascript">
    this.element.find('input').on('click', function(ev) {
        ev.stopPropagation();
    });
</script>

Stick this at the bottom of @Graham Quince's code and you should be golden :)

Its not the fact I didn't notice... I just didn't say I noticed........ :P 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...