# Help with webpage search box



## howard.a.s (Jul 22, 2005)

I am trying to get the search function to work on a template that I am currently working with. The html for the search is as follows:


[*]


Go



What I need to do is to include the following block of code (which works on my other site) into the above:

Please note that I have changed the form action web address, and also the input type value, for the purposes of this post.

If anyone reading this can explain how I would so about embedding the second section of code into the first section so as to make the form field active and linked to the required web address, I would be very grateful.

I have tried several attempts, but nothing seems to work for me


----------



## JiminSA (Dec 15, 2011)

Try ...

```
<!-- Search Block -->
<li>
<i class="search fa fa-search search-btn"></i>
<div class="search-open">
<div class="input-group animated fadeInDown">
<!--<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn-u" type="button">Go</button>
</span>-->
<form action="http://www.example_website.com/cgi-bin/sgx2/asearch.cgi" method="post">
<input type="hidden" name="a" value="XXXX!search">
<input name="query" value="" type="text" size="11">
<input type="submit" name="submit" value="Search"></form> 
</div>
</div>
</li>
<!-- End Search Block -->
```


----------



## howard.a.s (Jul 22, 2005)

Hi Jim,

Thanks for the advice.

I have tried the following:


[*]






also adding the placeholder="Search" so as to be able to add some ghost text into the search field, which disappears when a user enters their own search text. The good news is that this does actually seem to work okay. 

My next question is, can the existing styling to create the templates matching search bar and button (currently commented out) be integrated, so as to override the rather boring looking default search bar and button?

I've had endless attempts at doing this, with the end result being that the templates styled search box and button show up above, below, over the top of, or in place of the default box and button, but never does it actually work when a search term is entered and the button clicked. Obviously I am not applying the styling to the necessary parts of the existing form, but how and where to add these is proving a real headache. 

Any further suggestion would be very welcome, before I pull out my last remaining hair.


----------



## JiminSA (Dec 15, 2011)

Yes, you can do it like so, methinks ...

```
<!-- Search Block -->
<li>
<i class="search fa fa-search search-btn"></i>
<div class="search-open">
<div class="input-group animated fadeInDown">
<form action="examplesite.com/cgi-bin/sgx2/asearch.cgi" method="post">
<input type="hidden" name="a" value="XXXX!search">
<input name="query" value="" type="text" size="34" placeholder="example text">
<span class="input-group-btn">
<button class="btn-u" name="submit" type="button">Search or Go</button>
</span></form> 
</div>
</div>
</li>
<!-- End Search Block -->
```
But you may have a problem with type="button", so just try type="submit" and hope that the button styling stays the same ... else revert to type="button" and hopefully it will submit, depending upon your browser ...


----------



## howard.a.s (Jul 22, 2005)

Hi again,

I've tried the approach you describe and just so long as I stick to using "submit" the search box works fine.

I now have a green search button that matches the theme of my template.

However, the search field itself still stubbornly remains the default rectangle, which isn't that much of a problem, although it would be nice to make this also look a little more stylish. Is there any way for me to add styling to make the corners of the search field rounded? I could try border-radius, but where in my code would I insert this styling?

By the way, in order to get the search button to position to the right and next to the search field I've had to add a float and margin to the input-group-btn span class. I'm not sure if this is the right way to achieve it, but this renders okay in Firefox Responsive Site Checker. Without this additional positioning the button remains aligned left and under the search field.


[*]


Search



If you can offer any further advice regarding the rounded corners issue, I'd be grateful.


----------



## JiminSA (Dec 15, 2011)

You could put something like this at the end of your current css sheet:

```
input[type=submit] {padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: 10px 10px 5px #888888; }
```
 - that would give rounded corners and a shadow effect which you can tinker with ...


----------



## howard.a.s (Jul 22, 2005)

Thanks Jim, I really do appreciate all your input.

You suggest the following code be added to my website css.

input[type=submit] {padding:5px 15px; background:#ccc; border:0 none;
cursorointer;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: 10px 10px 5px #888888; }

I am confused, as I placed this code, as-is, between in the head of the page on which my search bar appears and there is no apparent visual difference.

Is this code added in an external style sheet, or can I place it between style tags in the head of the page?

Or, would I add this new code (inline) to the existing block of code for the search box, as I did with the float positioning that I mentioned previously. If so, where would I insert it?

If the code does go in an external doc, or between style tags in the head of the page, how does this actually influence the visual appearance of the search bar, because it is not prefixed with a # or . to signify ID or Class, and I am not adding div id or div class to the search field, so how does the browser know how or where to apply the styling?


----------



## JiminSA (Dec 15, 2011)

Sorry Bro, just do it inline like so

```
<button style="-webkit-border-radius: 5px; border-radius: 5px; box-shadow: 10px 10px 5px #888888;" class="btn-u" name="submit" type="submit">Search or Go</button>
```
 That way it will override default ...


> because it is not prefixed with a # or . to signify ID or Class


input[type=submit] tells it to apply the styling to all submit input tags ...


----------



## howard.a.s (Jul 22, 2005)

Thanks. This all kinda makes more sense to me, especially taking into account my rather sketchy understanding of such matters. I am going to give this a try first thing in the morning, as the temperature here in my office is now soaring to an amazing U.K summer high temperature of 26 degrees, and it feels like I'm melting! But joking part, we just aren't used to more than about 20 degrees here in good old blighty - although I expect it gets much hotter than this in your part of the world. Anyway, I'll report back with how I get on inserting the styling in the morning.


----------



## howard.a.s (Jul 22, 2005)

Hi again,

Just to let you know that I added the code you suggest - and it works  - only problem is that it adds styling to the wrong part 

I suspect perhaps the reason for this technical glitch is down to my rather confused way of describing what I am trying to achieve, which is not actually adding rounded corners to the search/go button, but instead to the search field itself - the part where the user would actually enter a search query. So, apologies for my poor explanation. 

At present, the part where the user would type their search query is just a plain old default and fairly boring looking standard rectangular form field, whereas before I inserted my own code it appeared more in keeping with the overall template design: http://wrapbootstrap.com/preview/WB0412697. Is there any way for me to make the default search field a little larger height wise, even if it's not possible to apply styling to it directly  Or, can I just somehow reapply the original styling for the search field by inserting my code into the relevant place


----------



## JiminSA (Dec 15, 2011)

Sorry Howard my bad for not discerning that! You could adjust the styling to your search box like so:

```
<input style="width:200px !important; height:30px !important; font-size: 14px !important; -webkit-border-radius: 5px; border-radius: 5px;" name="query" value="" type="text" placeholder="example text">
```
 (I took out the box-shadow) and put in the !important, so as to override the default.


----------



## howard.a.s (Jul 22, 2005)

Thanks once again. I have inserted the code you suggest and am pleased to report that the desired result is now achieved 

Before I go (for now!) are you able to recommend a free, simple to install, self hosted EU Cookie Law plugin for my website. I have tinkered with a few, but don't seem to be having much luck at making them work.


----------



## JiminSA (Dec 15, 2011)

> EU Cookie Law plugin for my website


Why not a direct link? or are you after something that pops up on click?


----------



## howard.a.s (Jul 22, 2005)

Something like this would do:

http://www.primebox.co.uk/projects/jquery-cookiebar/

I downloaded the source and having placed all the required files including the css, jquery.js, and jquery.cookiebar.js in a folder to which I have then linked, I played around with a test page. The bar works perfectly, and I even managed to position it at the bottom of my page using the setting in the jquery.cookiebar.js. When I transfer the whole working code block and necessary files to my actual page (unify template index) and position it just before the closing head tag, the bar refuses to work at all. I have checked the path to all relevant scripts and css necessary for the bar to work, and all appear okay. All I could think of was that the code won't work with a responsive design? Or, that I need to set the z index in order for the bar to stack over the main content, but nothing I tried works. I have suffered the same kind of issues with a few others I've tried. Any suggestions?


----------



## JiminSA (Dec 15, 2011)

It may be that you don't have a link to jquery.js script? This is the main library by which all jquery interfaces ...


----------



## howard.a.s (Jul 22, 2005)

Here is the exact code I used on my working test page:

When copying and pasting this to the exact same position on my unify page, it refuses to work. No bar appears at top or bottom. Not even a trace of it. I made certain that I preserved the exact same path to the scripts and css. If I click on the link to each, they open in my Topstyle Pro editor.

I can't see why this shouldn't work. Perhaps I need a little lie down!


----------



## howard.a.s (Jul 22, 2005)

Just one thing that came to mind is that the cookiebar uses the

$(document).ready(function()

and I have read in the past that using more than one $(document).ready(function() on the same page can cause issues. 

I checked down the page and found that the Jssor slider I am now using also includes $(document).ready(function().

However, even if I remove the entire code for the slider, the cookiebar still refuses to appear, so guess this probably isn't the answer either?


----------



## JiminSA (Dec 15, 2011)

You're absolutely certain that the route from your unify page to assets/etcetera is correct? Because, you're using an unedited, newly downloaded library structure which must work if it's finding what it needs. Best double-check ...
Sorry but that's all I can think of.


----------



## howard.a.s (Jul 22, 2005)

Thanks for the reply. 

I've checked and triple checked, but you know how sometimes you just can't see something for looking. Happens to me all the time  

Think I'm going to call it a day and take a look again with fresher eyes in the morning. I will let you know how I get on. 

Thanks for all your help so far. 

You are a star!


----------



## JiminSA (Dec 15, 2011)

It may also help if you could post the html page concerned ...


----------



## howard.a.s (Jul 22, 2005)

Hi again and apologies for my delay in reply.

I have been doing my best to try to solve this problem by myself, but have so far been unsuccessful. However, I can confirm that if I remove the html from the start of Jssor Slider to the closing body tag, the Cookiebar does then appear. I guess some form of conflict is obviously the reason for its failure to otherwise function as intended.

I have identified multiple instances of Jquery being called.

Line: 39

Jquery-1.10.1.min.js


Line: 779 (start of Jssor code)

Jquery-1.9.1.min.js


Line 1304: 

Jquery.min.js


Line 1305:

Jquery.migrate.min.js


Also, several instances of $(document).ready, at line 42, line 786 (Jssor slider), and line 1319.

In addition, at line 1310, 1311, scripts for Parallax slider are being called, which I have now replaced by Jssor Slider, so presumably I can remove these?

I am reluctant to post the entire page source here, just in case I somehow infringe the terms of the template license. Would you mind me sending this to you by means of the email link provided in your profile?


----------



## JiminSA (Dec 15, 2011)

I am confident that the reason for the problem is your multiple links to jquery.min.js (quite conflicting) and not the multiple document.ready calls (quite legal). 
So one should either remove superfluous links or resolve the conflicts with '.noConflict(true)' calls.
Also, you can safely remove any parallax coding ...


----------



## howard.a.s (Jul 22, 2005)

And many thanks for that.

How do I know which version of Jquery to link to when removing all the other instances from my page? Is it a matter of trial and error, or should I just go look for the very latest version, then link to it externally, or place it in my js folder before placing a single link to it somewhere on my page, and then just trust that all the various parts that need it to work properly will be backwards compatible?

I do have a few other related questions if you do not mind sparing just a few more moments of your time to possibly give me some answers. I understand if you can't, as you've been very helpful already. Anyway, if you can, then I'll post here again in a couple of hours.


----------



## JiminSA (Dec 15, 2011)

Yes Howard, just Google latest jquery and download/link to it. Before version 1.11.1 you could use a link like so

```
<script src="http://code.jquery.com/jquery-latest.min.js""></script>
```
But the powers that be no longer keep it up to date - it's stuck on 1.11.1


> I do have a few other related questions


I don't mind in the least, but I'm wondering if the moderators might? This thread is a little large ...
Maybe you could post a General Help Please thread?


----------



## howard.a.s (Jul 22, 2005)

Okay, so based on the information you posted most recently, I have removed all links to scripts for Parallax Slider. I've also removed all but one single link to jquery.

In order for my page to continue to work as intended, I have found it necessary to place the single link to jquery just before the closing tag of my page, as placing it back in the block of other jquery links located towards the bottom of my page results in the slider stubbornly refusing to function.

I have also discovered that in order for all those elements of my page requiring jquery to run successfully, I need to use jquery-1.11.3.min.js, because linking to the very latest version jquery-2.0.0.min.js seems to stop everything from working altogether. 

As for the cookiebar, this actually began to work, but with all of the other page content scrolling up and down over the top of it. After first reading this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index, and by changing the z index setting in the cookiebar script to a value of '1', therefore stacking it in front of the rest of the page content, it now displays as intended. 

Seems like I might be getting somewhere. 

Also, presumably I should keep the link: as my understanding is that the purpose of this is to help integrate newer versions into the page. 

This being the case, please can you suggest why my page won't function properly with the latest version of jquery. 

Anyway, I'll continue to move forward and will post back here with updates over the next few days.


----------



## JiminSA (Dec 15, 2011)

> Also, presumably I should keep the link


Try leaving it out and see what effect it's exclusion has - if none then fine, else keep it there,


> This being the case, please can you suggest why my page won't function properly with the latest version of jquery.


There may have been some deprecated routines left out of the most up to date version, which your set up requires.


----------

