Loading Profile...
Show/Hide widget/form.
I know I can hide/show blocks of test from a link or button using Javascript, but is it possible to do the same with something like a wufoo form widget? I really would like a form to only appear on the target page when requested, rather than it being there all the time or having jump to another location/page within the site.
Any help/pointers appreciated.
Rob.B
Any help/pointers appreciated.
Rob.B
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The company marked this question as answered.
-
Inappropriate?i will do this right now to see if it works. and if it does i will post it here for you!! -
Inappropriate?sometimes, the editor used to insert html codes such as a wufoo widget might accept the code, but you'll have to know how to insert them properly or the form might not show up. -
Inappropriate?i have got the code for you Rob.B i will post it up for you in a little while.
-
Inappropriate?<!--
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<script language="javascript"> function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } }</script> </div></div>
<SCRIPT type=text/javascript>
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</SCRIPT>
<SCRIPT language=javascript> function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img style="border:0px;" src="IMG SRC HERE">'; } }</SCRIPT>
<DIV></DIV>
<DIV></DIV>
<DIV style="DISPLAY: block; CLEAR: both" id=I307 class=HTML_Default>
<DIV id=I307_html>
<TABLE border=0 cellSpacing=5 cellPadding=5 width="100%">
<TBODY>
<TR>
<TD vAlign=top width="2%" align=left><A id=imageDivLink1 href="javascript:toggle5('contentDivImg1', 'imageDivLink1');"><img style="border:0px;" src="IMG SRC HERE"></TD>
<TD vAlign=top width="100%" align=left>
<DIV id=titleTextImg><FONT color=#003df5><FONT size=3><STRONG>wufoo form</STRONG></DIV>
<DIV style="DISPLAY: none" id=contentDivImg1>
TYPE, WUFOO FORMS AND ANYTHING YOU WANT TO SHOW UP!!
</div>
-->
here is the code for you!!
I’m happy to help
1 person says
this answers the question
2 Comments Add a comment
This answers the question
-
where you have got "IMG SRC HERE" put your image URL here and "TYPE, WUFOO FORMS AND ANYTHING YOU WANT TO SHOW UP!!" you can put anything in there between <!-- <DIV style="DISPLAY: none" id=contentDivImg1> and </div> --> -
Thanks Smithy!
Rob.B, I hope this answers your question. -
1 Comment Add a comment
This answers the question
-
you are very welcome rob.b jus come back if you have may more questions.
-
Inappropriate?Tried it but it messes up the format of a page (even a test page with nothing else in it) The yola link at the bottom moves to the left and white blocks appear, but not the form.
Even putting the code in with out the form code messes the page (have tried putting it through notepad) no different. Half the time the blasted HTML editor refuses to save it.
I hate that editor widget!
I’m working on it
-
Inappropriate?Got it to work with an image but not a form widget; I really hate that HTML widget!
Thanks for trying.
2 Comments Add a comment
This answers the question
-
have you taken <!-- and --> ??
-
and also can you share your URL so i can have a look plz?? ty
-
Inappropriate?Hello Rob
I'm sorry to hear that you are quite frustrated with the HTML widget. The problems that you're having though do not appear to be with the HTML widget itself as it seems to be working as it should since you were able to get the code working with your image.
This then suggests to me that the problem lies in trying to get your Wufoo form integrated with the code. Sometimes when you take two codes and mesh them together, it doesn't always work. I'm glad that you took precaution to try this on a test page.
If integrating a Wufoo form into the code is something that you'd like to try and do, it would be very helpful if you could post your Wufoo form code and I or someone else could try to see if they can get your codes to work together so that it doesn't break your page. -
Inappropriate?I admit the HTML widget is not this issue, but it is awful, unfreindly and it does not help!
-
Inappropriate?have you taken <!-- and --> ??
Yep
If you go to my site www.rtb2walks.co.uk then select test from the menu you will see what is happening.
1 Comment Add a comment
This answers the question
-
Hi Rob
Can you please post your Wufoo form code here? Then we can work at trying to get them to work. -
Inappropriate?As requested.
<!--
<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">
var z7x4z5 = new WufooForm();
z7x4z5.initialize({
'userName':'rtb2walks',
'formHash':'z7x4z5',
'autoResize':true,
'height':'604'});
z7x4z5.display();
</script>
-->
1 Comment Add a comment
This answers the question
-
thats the java script wufoo form. that won't work. i use the iframe 1 and that works fine with the code!!
-
Inappropriate?Hey Rob
I was unable to get Smithy's code to work. Perhaps he would be a better person to try and help you.
However, I was able to use a different code to achieve the same effect I believe. You will need to copy the iframe code though from your Wufoo form instead of using the script code.
If you're interested in using this please do the following:
Step 1:
Drag over an HTML widget and paste in the following code:
<script type="text/javascript">
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){ document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}
</script>
Step 2:
Drag over another HTML widget and paste in the following code:
<style type="text/css">
.expands{
width:100%;
cursor:hand;
cursor:pointer;
}
</style>
Step 3:
<div class="expands" onclick="showHideMe('div1')">Wufoo Form</div>
<div id="div1" style="display:none;border:1px solid #55AA55;width:100%">
YOUR IFRAME CODE GOES IN HERE</div>
You can change the following:
"Wufoo Form" - this is the title your visitor will see in the box containing the hidden form
border: 1px (thickness of border around your form)
#55AA55 - color of border
I hope that helps. -
Inappropriate?Thanks that did it. Smithy's code worked at first with an image, but never again! I don't think it likes the Style Sheet somehow. It looks as if it should do the job though.
Thanks for all your help and support.
I’m Impressed
-
Inappropriate?i got it to work on my test page. how wierd. ah i am going to do it again and see if it works!! i will post the link on here!!
-
-
Inappropriate?Hey Smithy
It's great that you were able to get it working, however, there does seem to be a small problem detected. It seems to break your Yola link. Please take a look at the screenshot below.
-
Inappropriate?that's pretty cool... I might place my newsletter form using that code.
-
Inappropriate?or contact us on the homepage, and the contact form won't show unless they want it to show :) sounds good!
-
Inappropriate?Smithy.
Glad it works, I think my problems are down to a conflict with the style template I have chosen. Although I am now able to hide the forms it is not quite as I had envisaged.
Never mind, you can't always have what you wish for.
-
Inappropriate?it looks ok on my littleus!! check it out.
3 Comments Add a comment
This answers the question
-
Hi Smithy, it breaks the link in Firefox... technically its against TOS to use the code, i would go with what Littleus shares above to achieve this effect.
-
im sorting it out now!!
-
does it break the link now duke in firefox?? it's http://time-to-chat.yolasite.com/test...
-
Inappropriate?Smithy.
Thanks for the feedback, had a look at your page, and copied the source, worked first time.
Wierd!
http://rtb2walks.yolasite.com/test2.php
Thanks again.
Rob (admin@rtb2walks.co.uk)
I’m Happy
1 Comment Add a comment
This answers the question
-
had a look on that site, my other 1 that i gace you the first time did work but borke the TOS of yola cos it broke the link on the yola footer thing and then i use the 1 that liitleus gave and that is the 1 that i use for the website.!!
happy site building -
Inappropriate?Finaly got a solution for my index page, the other solution is great for my site map page.
Rob.
I’m happy
EMPLOYEE
CHAMP
