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

Share this post


Link to post
Share on other sites

This is something we would find really useful too. Never did get the Frog 3 one to work well before we switched our website over.

Share this post


Link to post
Share on other sites

Come on @Graham Quince put that bacon sandwich down and get coding.....

Edited by ADT
  • Like 1

Share this post


Link to post
Share on other sites

Its on our student dashboard!!

Share this post


Link to post
Share on other sites

Its nothing flash...  I could probably find some code for a Google search bar in secs...  but it obviously has to look nice ish...

Share this post


Link to post
Share on other sites

Yep...  but it has to look nice....

Share this post


Link to post
Share on other sites

There is a way to create a nice custom google search....  that opens a pop up to show results...  but that's to search your own site!!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

That'll do pig...  that'll do.....

  • Like 1

Share this post


Link to post
Share on other sites

What for???  I was quoting from the film Babe!!

Share this post


Link to post
Share on other sites

Hold your horses....  I never called anyone anything....  you are merely putting two and two together...... :P

Edited by ADT
  • Like 1

Share this post


Link to post
Share on other sites

So how to I change the icon to be the one Ive just uploaded to somewhere on our Frog?

Share this post


Link to post
Share on other sites

Easy really!!! :P

  • Like 1

Share this post


Link to post
Share on other sites

That's better......

Google Bar.fw.png

Edited by ADT
  • Like 1

Share this post


Link to post
Share on other sites

@Graham Quince Erm...  that bar doesn't work in IE????  You cant type in it!!

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@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 :)

  • Like 1

Share this post


Link to post
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 

Share this post


Link to post
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...