Hoping for some help! I have a site setup with a search on the homepage which has a toggle setup to show & hide the search using the below javascript, this is working great in Chrome, IE but not in Firefox and not sure why?
Does seem an odd issue, ive just tried that version and get the same problem not working in Firefox, whats even stranger is that the example on the w3schools site works in Firefox??
Just checked your source and you include jquery in the head section. In general it's better to place javascript before the </body> to optimize load time of the website since javascript can block loading of other assets, which need to be in order before it can be executed.
Perhaps you could also try to update to jquery 1.9.1 and see what happens.
The toggle parts are about half way down the source you will see div class homesearch which is the box that needs to open/close and the buttons are just above.
I tried referencing 1.9.1 but didnt make any difference so took it back out as my js are minimized for performance, i know what you mean about loading the js in the right place i just plonked it on to try and get it working heh heh.
So what is supposed to happen when I click the "more" link?
Should it then display the form at the top? I'm not sure it's working in my version of Chrome since the search bar is present when I'm loading the page.
When you load the page its the 'Check availability & search' which is the search form, above and to the right is the 'opne/close' button which shows then hides the form when clicked.
Javascript ToggleTabs not working in Firefox
Hi all,
Hoping for some help! I have a site setup with a search on the homepage which has a toggle setup to show & hide the search using the below javascript, this is working great in Chrome, IE but not in Firefox and not sure why?
Anyone have any ideas?
Thanks
Pete
<input type="button" value="Open Search" class="villaformopen"/>
<input type="button" value="Close Search" class="villaformclose"/>
<div class="homesearch" id="homesearch">
<umbraco:Macro Alias="SearchFormHorizontal" runat="server"></umbraco:Macro>
</div>
<script type="text/javascript">
function toggleTabs(){$("#homesearch").toggle();$("#villaformopen").toggle();$("#villaformclose").toggle();}
$(".villaformopen").click(function(){toggleTabs();});
$(".villaformclose").click(function(){toggleTabs();});
</script>
Hi Peter
Do you get any error message in the browser consoles in Firefox or Internet Explorer?
/Jan
Hi Jan,
The only JS error thats appears is --
[11:24:10.771] Use of attributes' specified attribute is deprecated. It always returns true. @ https://apis.google.com/js/plusone.js:21
But that's nothing to do with the toggletabs
Thanks
...Besides I think you should be able to complete your goal by just toggling the input field when one button is clicked like shown in this example.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle_speed
Hope this helps.
/Jan
Does seem an odd issue, ive just tried that version and get the same problem not working in Firefox, whats even stranger is that the example on the w3schools site works in Firefox??
The site im working on is http://lanzarote.i-pro2.co.uk/
Thanks
Hi Peter
Where can I see the toggle stuff?
Just checked your source and you include jquery in the head section. In general it's better to place javascript before the </body> to optimize load time of the website since javascript can block loading of other assets, which need to be in order before it can be executed.
Perhaps you could also try to update to jquery 1.9.1 and see what happens.
/Jan
Hi Jan,
The toggle parts are about half way down the source you will see div class homesearch which is the box that needs to open/close and the buttons are just above.
I tried referencing 1.9.1 but didnt make any difference so took it back out as my js are minimized for performance, i know what you mean about loading the js in the right place i just plonked it on to try and get it working heh heh.
Thanks
Pete
Hi Pete
So what is supposed to happen when I click the "more" link?
Should it then display the form at the top? I'm not sure it's working in my version of Chrome since the search bar is present when I'm loading the page.
/Jan
Hi Jan,
When you load the page its the 'Check availability & search' which is the search form, above and to the right is the 'opne/close' button which shows then hides the form when clicked.
Thanks
Pete
Hi Peter
Sorry for being blind :)
I just tested in Firefox and it actually works...however I think it's because I'm trying while the console window is open.
Could you try to uncomment every console.log() you have in your code and then test again? This could be the issue.
/Jan
is working on a reply...