Shape 5

Joomla Templates => Sea of Glass - September - Club => : akerman September 25, 2008, 05:22:09 AM



: SOLVED! - Search field requires mouse pointer to stay on field?
: akerman September 25, 2008, 05:22:09 AM
Hi,

No big thing, just annoying enough for the user/visitor:

Clicking the magnifying glass in order to perform a site search, requires the mouse pointer to stay on the search field when typing in the search request. Otherwise the field will vanish.


It would be preferable to click, and fill out the field, not concerning of where the pointer is standing.


Regards
Akerman 


: Re: Search field requires mouse pointer to stay on field?
: paulmin September 25, 2008, 06:47:04 AM
It would be preferable to click, and fill out the field, not concerning of where the pointer is standing.

I agree!

The field also seems to run into the subtext on the right-most menu item and it is covered by it. Maybe, when the search field is active it should not be transparent and should stay on top to make it easy to read?

Paul


: Re: Search field requires mouse pointer to stay on field?
: jonahh September 25, 2008, 04:37:08 PM
Hello guys,

In order to change from mouseover to onclick please follow the below:

On line 549 of index.php look for:

:
			<div id="s5_search" onmouseover="s5_mouseopen();" onmouseout="s5_mouseclose();">
<div id="s5_searchbox" style="z-index:300;position:absolute;" onmouseover="s5_mouseopen();" onmouseout="s5_mouseclose();">

and replace with:   


:
	<div id="s5_search" onclick="s5_mouseopen();">
<div id="s5_searchbox" style="z-index:300;position:absolute;" onclick="s5_mouseopen();">
            
On line 73 of s5_effects.js look for:         
            
:
function s5_mouseopen() {
document.getElementById("s5_searchbox").style.display = "block";
}

function s5_mouseclose() {
document.getElementById("s5_searchbox").style.display = "none";
}
            
and replace with:      
            
:
var s5clicked_SOG = 0

function s5_mouseopen() {

if (s5clicked_SOG == 0 ){
document.getElementById("s5_searchbox").style.display = "block";
s5clicked_SOG = 1;
}

if (s5clicked_SOG == 1 ){
document.getElementById("s5_searchbox").style.display = "none";
s5clicked_SOG = 0;
}


}

Let me know if this doesn't work

As for making the image solid, you can edit the "s5_seg_search.png" image to do this.

Regards,


: Re: Search field requires mouse pointer to stay on field?
: akerman September 26, 2008, 10:56:35 AM
Tried the suggested alterations,

Not working I'm afraid, but then again, it could be me... (naa...  ;))

Changed 'index.php':
:
			</div>

<?php if($this->countModules('top')) { ?>

<div id="s5_search" onclick="s5_mouseopen();">

<div id="s5_searchbox" style="z-index:300;position:absolute;" onclick="s5_mouseopen();">

<?php if ($is_ie6 == "yes") { ?>

<div style="position:relative;width:170px;height:30px;">

<div style="position:absolute;z-index:300;">

.. and the 's5_effects.js'
:
/* changed search box behaviour from mouseover to click. index.php also changed to reflect this 080926 ROA */

var s5clicked_SOG = 0

function s5_mouseopen() {

if (s5clicked_SOG == 0 ){
document.getElementById("s5_searchbox").style.display = "block";
s5clicked_SOG = 1;
}

if (s5clicked_SOG == 1 ){
document.getElementById("s5_searchbox").style.display = "none";
s5clicked_SOG = 0;
}


}


The effect? Well the magnifying glass is clickable and shapes the mousepointer into the 'hand' in FF, so definitively the 'action' is there. However nothing happens when actually clicked.

Actually feel a bit ashamed for not being able to solve this myself... know what I mean?  :-\

Regards
Akerman


: Re: Search field requires mouse pointer to stay on field?
: akerman September 26, 2008, 11:38:18 AM
...shame can be a good motivator for learning!  ;D

Solved this. Jonah, if you have a better way to do this then please share, c'ause I'm no programmer...just stubborn.  ;)

Ok,

in 'index.php' (approx. around line 530-550):
:
			<?php if($this->countModules('top')) { ?>	

<div id="s5_search" onclick="s5_mousestate();">

<div id="s5_searchbox" style="z-index:300;position:absolute;" onclick="s5_mousestate();">

And in s5_effects.js (approx around line 70-80):
:
var s5clicked_SOG = 0

function s5_mousestate() {

if (s5clicked_SOG == 0 ){
document.getElementById("s5_searchbox").style.display = "block";
s5clicked_SOG = 1;
}

else if (s5clicked_SOG == 1 ){
document.getElementById("s5_searchbox").style.display = "none";
s5clicked_SOG = 0;
}
}

1. Clicking magnifying glass opens search field
2. Clicking inside search field gives input marker so you can fill it with your preferred search string: "Where is stuff X?"  ;)
3. Clicking the magnifying glass with open search field, closes the same.


Took me about 30 minutes to go from shame to fame! (Never hacked 'js' before, that's a first!)  ;D

Regards
Akerman


: Re: Search field requires mouse pointer to stay on field?
: cypresstw September 26, 2008, 11:47:54 AM
How can I make the search box always display? Without mouseover or popups.


: Re: Search field requires mouse pointer to stay on field?
: jonahh September 27, 2008, 09:57:18 AM
Nice work akerman! :)

cypresstw,

To do this, open up your template_css.css and at line 628 you'll see:

:
#s5_searchbox {
background:transparent url(../images/s5_seg_search.png) no-repeat scroll 0 0;
display:none;
height:31px;
margin-left:-170px;
position:relative;
top:19px;
width:207px;
z-index:7;
}

Take off the "display:none;" and then in your index.php file at about line 549 look for:

:
			<div id="s5_search" onmouseover="s5_mouseopen();" onmouseout="s5_mouseclose();">
<div id="s5_searchbox" style="z-index:300;position:absolute;" onmouseover="s5_mouseopen();" onmouseout="s5_mouseclose();">
      

And replace it with:

:
			<div id="s5_search" >
<div id="s5_searchbox" style="z-index:300;position:absolute;">

Regards,
      


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: crony November 10, 2008, 02:52:54 PM
Thanks for sharing Ackerman !
This template is really cool... :)


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: crony December 07, 2008, 07:05:39 PM
Hello,

This hack does not seems to work under...IE7... ::)

Is there a way to fix that ?
The url of the website:
http://geysse.com

The strange thing is you have to let your mouse clicked to be abble to writte a letter or 2...



: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: akerman December 08, 2008, 04:18:50 AM
Hi,

I tried the search function on your page with IE7 and it does not behave the same as mine does with IE7.

Like you said, the text 'recherce' (search) does not go away, but bounces, right back, render it impossible to write the search string. This does not happen on my site.

The PHP in your index.php looks OK, so please re-check the javascript once more.

Regards
Akerman


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: crony December 08, 2008, 09:02:49 AM
Hello,

Thanks for your post.
I tried unpublishing all modules and all plugins but search (plug and mod), and get the same result...
Checked the js file, it's okay...

I've never ran the sql script with the template, because my website was advanced while I discovered SOG, but I don't think it might the problem...

I don't get it...


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: akerman December 08, 2008, 04:28:39 PM
Ok,

the next step I would try is to temporarily shut off the Global News module and the other dynamic things on the page.

Why? Simply because one can suspect that IE7 has a problem with the interrupt for some other script and is indirectly effecting the template javascript. Even when managing to put the cursor in the search field it's blinking extremely fast. To me that is an indication of timing problems/priority inconsistency.

Just an idea...

regards,


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: crony December 08, 2008, 06:18:44 PM
Hi,

I really unpublished everything before... (locally ;) )
And why would that not work with other pages without no javascript ?

I restored the original files, without hack, and now it works...
I'm almost sure that it was working before on IE7...

So, I guess I may say I have a ghost on my computer making fun of me...

What else ?  ;D


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: akerman December 09, 2008, 02:44:51 AM
I too get that feeling sometimes  :D

However, in the end there always just been some code lurking around, or cache... still, sometimes things are very strange. Especially when it comes to IE. Expect to bump into more problems with that browser.

Oh, by the way, the different heights you have on left/right columns is solved. Answer is here:
http://www.shape5.com/component/option,com_smf/Itemid,75/topic,2421.0/ (http://www.shape5.com/component/option,com_smf/Itemid,75/topic,2421.0/)

regards,
 


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: crony December 09, 2008, 07:00:38 AM
I'll try again the hack after all the site is stable...

Sorry but what's my problem with my left/right columns ?
I read your post but didn't fully understand, my columns are equals, aren't they ?  ???


: Re: SOLVED! - Search field requires mouse pointer to stay on field?
: akerman December 10, 2008, 03:43:53 PM
Ehh, well no. I took this pic in FireFox (Linux) today.

regards,