Jump to content
ADT

Google Search Bar!!

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...