HTML element that shows a piece of...

User 187934 Photo


Senior Advisor
20,181 posts

The script I'm using is watching for what is chosen in the dropdown. Not much different then what your doing with the conditionals within the formbuilder but is a cleaner way to show the example. You will never get away from having to do some kind of work to decide what shows but my script could be added all at once but still needs to be adjusted to meet the needs of the actual content your working with. My example is somewhat basic as I typically make the that way when I haven't seen a users actual form or it's not clear what they actual want. If it's something you want to pursue I can put the instructions for what I did on my form. Then you can try it and post back with questions and a link to the actual form.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2533807 Photo


Registered User
13 posts

Yeah, can I try that out and we'll go from there.
User 187934 Photo


Senior Advisor
20,181 posts

I put some instructions on the form.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,181 posts

I did a second drop down and altered the script to reflect the additional html elements tied to it.
If you want more drop downs simply add the selector select[name='poem_select3'] to the change event and add the addition item id selectors #item14 and item14
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2533807 Photo


Registered User
13 posts

So if I'm understanding this right I can add the poems anywhere in the form and they will show in a colorbox wherever the selector is. For example its a really long form and in one place they may choose poem 1 for bifolds then much later in the form they have to choose a poem for prayer cards and they choose poem 2 in the second dropdown and it will show a colorbox of poem 2 without me having to place the poems again?
User 2533807 Photo


Registered User
13 posts

Ok, I gave it my best effort, but I know just about nothing of coding or jquery and all of this is way over my head. I'm not sure to what extent i've done the instructions that you showed me but heres what I got.

https://www.dropbox.com/s/9kwmry7f59xnv6w/test.fb?dl=0
User 187934 Photo


Senior Advisor
20,181 posts

I'll get back to this tomorrow.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,181 posts

Sorry for the delay,
<link rel="stylesheet" href="http://eastgatemedia.coffeecup.com/colorbox-master/example1/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://eastgatemedia.coffeecup.com/colorbox-master/jquery.colorbox.js"></script>
<script>
var jQ = $.noConflict();
jQ(document).ready(function() {
jQ("#item4").css("display", "none");
jQ("#item8").css("display", "none");
jQ("#item9").css("display", "none");


jQ("select[name='poemselect']").change(function() {

var currentPoem = jQ(this).val(); // Grab select value :
if( currentPoem == "Afterglow"){
var showPoem = "item4";
jQ("#item4").css("display", "block");
}else if( currentPoem == "Alone With Jesus"){
var showPoem = "item8";
jQ("#item8").css("display", "block");
}else if( currentPoem == "The Best"){
var showPoem = "item9";
jQ("#item9").css("display", "block");
}
var cboxOptions = {
width: '95%',
height: '95%',
maxWidth: '400px',
maxHeight: '400px',
inline: true,
href:"#" + showPoem + "",
}

jQ.colorbox({
width: cboxOptions.width,
height: cboxOptions.height,
maxWidth: cboxOptions.maxWidth,
maxHeight: cboxOptions.maxHeight,
inline:cboxOptions.inline,
href:cboxOptions.href,
onClosed:function(){
jQ(cboxOptions.href).css("display", "none");
}
});


jQ(window).on('resize', function(){
jQ.colorbox({
inline:cboxOptions.inline,
href:cboxOptions.href,
width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height,
onClosed:function(){
jQ(cboxOptions.href).css("display", "none");
}
});
});

});


});</script>
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.