Wednesday, March 26, 2014

jQuery & JavaScript: Clear/Show Google CSE Logo with Certain Condition

This is the "enhancement" of my earlier post about using "Results Only" template for Google Custom Search Engine (GCSE) for your blog. You can read it, step by step on how to implement the GCSE : Results Only, right there.
This post is focused on controlling the input element text and GCSE logo, nothing more

I'm gonna show you how to clear the text and the background image if the input element is being clicked (and focused) by user and all the thing you saw on standard website. Like, wut? Yeah man, my blog isn't standard. Haa.

Anyway, this needs some short front-end script.
I wrote two examples, one for jQuery (if you use jQuery library on your page) and the other is using JavaScript (without any library, vanilla).


jQuery
First of all, define the input HTML element (wrapped with form element and a div). This one is a nonworking search input. You can read some more how to make it work on the post link above. This one is only for customizing the input element behavior.
The input ID is monkeyOne.


Then, style the input with CSS (basic styling), like so :


The last, jQuery script:



JavaScript
The HTML elements placement is the same, I only change the ID for the input element. I named it monkeyTwo.
The styling CSS is exactly the same, no changes.
Let's just see the script :



The demo of the two inputs, controlled with script


Update
If you do not want to automatically clear the text
Only clearing the image background on input


jQuery



JavaScript



The demo

No comments:

Post a Comment

Tell me what you think...