Forum Support

Shape 5
March 29, 2024, 12:50:05 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: SOLVED! - Search field requires mouse pointer to stay on field?  (Read 1125 times)
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« on: 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 
« Last Edit: September 30, 2008, 12:51:04 PM by akerman » Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
paulmin
Jr. Member
**
Offline Offline

Posts: 70



« Reply #1 on: 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
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #2 on: 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:

Code:
<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:   


Code:
<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:         
            
Code:
function s5_mouseopen() {
document.getElementById("s5_searchbox").style.display = "block";
}

function s5_mouseclose() {
document.getElementById("s5_searchbox").style.display = "none";
}
            
and replace with:      
            
Code:
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,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« Reply #3 on: September 26, 2008, 10:56:35 AM »

Tried the suggested alterations,

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

Changed 'index.php':
Code:
</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'
Code:
/* 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?  Undecided

Regards
Akerman
Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« Reply #4 on: September 26, 2008, 11:38:18 AM »

...shame can be a good motivator for learning!  Grin

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

Ok,

in 'index.php' (approx. around line 530-550):
Code:
<?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):
Code:
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?"  Wink
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!)  Grin

Regards
Akerman
« Last Edit: September 26, 2008, 11:43:30 AM by akerman » Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
cypresstw
Jr. Member
**
Offline Offline

Posts: 9



« Reply #5 on: September 26, 2008, 11:47:54 AM »

How can I make the search box always display? Without mouseover or popups.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #6 on: September 27, 2008, 09:57:18 AM »

Nice work akerman! Smiley

cypresstw,

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

Code:
#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:

Code:
<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:

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

Regards,
      
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
crony
Jr. Member
**
Offline Offline

Posts: 46



« Reply #7 on: November 10, 2008, 02:52:54 PM »

Thanks for sharing Ackerman !
This template is really cool... Smiley
Logged
crony
Jr. Member
**
Offline Offline

Posts: 46



« Reply #8 on: December 07, 2008, 07:05:39 PM »

Hello,

This hack does not seems to work under...IE7... Roll Eyes

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...

Logged
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« Reply #9 on: 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
Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
crony
Jr. Member
**
Offline Offline

Posts: 46



« Reply #10 on: 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...
Logged
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« Reply #11 on: 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,
Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
crony
Jr. Member
**
Offline Offline

Posts: 46



« Reply #12 on: December 08, 2008, 06:18:44 PM »

Hi,

I really unpublished everything before... (locally Wink )
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 ?  Grin
« Last Edit: December 08, 2008, 06:21:54 PM by crony » Logged
akerman
Jr. Member
**
Offline Offline

Posts: 225



WWW
« Reply #13 on: December 09, 2008, 02:44:51 AM »

I too get that feeling sometimes  Cheesy

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/

regards,
 
« Last Edit: December 09, 2008, 02:46:52 AM by akerman » Logged

http://stolt-akerman.com - Webdesign & Designer Agency
http://www.akermanscove.com - Designer Portfolio
http://www.infoclip.se - Bookshop for used and antique books.
Work with:
Web Design JoomFish Contributor,  Translations of Open Source, Design, Logotypes, Photography, Illustrations, eCommerce, SEO & Print
crony
Jr. Member
**
Offline Offline

Posts: 46



« Reply #14 on: 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 ?  Huh
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.