Jump to content
Sign in to follow this  
dvallieres

Adding formstack lightbox to Pagelines Site

Recommended Posts

dvallieres

Hi I am trying to add this code to the side of my site.

<!-- Begin Lightbox --> <div id="fsLightbox1045453" class="fsLightbox" style="display:none;"> <div align="right" style="padding:5px;">[close]</div> <div style="height:450px; padding-top:20px; overflow:auto;"> </div> </div> <script type="text/javascript" src="http://www.formstack.com/forms/js.php?1045453-GeGWr2okiy-v2"></script> <script type="text/javascript" src="http://www.formstack.com/forms/js/lightbox.js"></script> <script type="text/javascript"> var fsLightbox1045453 = new FSLightbox({form: 1045453, handleText: "Client Form", handlePosition: "left", handleImage: "http://www.formstack.com/forms/lightboxHandle.php?str=Client+Form" }); </script> <!-- End Lighbox -->
I do not want to add it to the header or the the footer, but rather as an image that scrolls on the edge of the website. Should I expect a conflict with pagelines since it is running the javascript library instead of the jquery? Here is what I am trying to do: http://blog.formstack.com/2011/03/24/lightbox-option-online-forms-features/ Here is my website: http://www.tutordudes.com Thanks for the help guys!

Share this post


Link to post
Share on other sites
kastelic

You should have no problem running regular javascript. The only thing to make sure of is if you are using a jQuery file, which needs to be adjusted to not conflict in wordpress.

Share this post


Link to post
Share on other sites
dvallieres

Thanks Jimmy. I guess I am not sure where to add it. I have added it to the headers and footers "custom code" section and it pops up but it does not work properly. See the screenshot in the URL below. It is probably showing up in the "right" place, but there it seems non-functional. Additionally, only the side image should show up - not the form itself... Screen-shot-2011-04-15-at-9.45.01-PM.png

Share this post


Link to post
Share on other sites
kastelic

I tried this code in a plain html page and it still had the problem of being open and not closing when it should. Also this error:

Resource interpreted as Script but transferred with MIME type text/html.
	
	lightbox.js:99
	
	Uncaught TypeError: Cannot set property 'onclick' of null
	
	FSLightboxlightbox.js:99
	
	(anonymous function)test-js-form.html:19
	
	

Make sure you have all the code copied over correctly.

Share this post


Link to post
Share on other sites
dvallieres

I do notice some errors. How about this?

<!-- Begin Lightbox -->
	    <div id="fsLightbox1045453" class="fsLightbox" style="display:none;">
	    <div align="right" style="padding:5px;">[close]</div>
	    <div style="height:450px; padding-top:20px; overflow:auto;">
	    <script type="text/javascript" src="http://www.formstack.com/forms/js.php?1045453-GeGWr2okiy-v2"></script>
	    </div>
	    </div>
	
	    <script type="text/javascript" src="http://www.formstack.com/forms/js/lightbox.js"></script>
	    <script type="text/javascript">
	        var fsLightbox1045453 = new FSLightbox({form: 1045453, handleText: "Client Form", handlePosition: "left",
	            handleImage: "http://www.formstack.com/forms/lightboxHandle.php?str=Client+Form"
	        });
	    </script>
	    <!-- End Lighbox -->[/code]

Unfortunately, when I insert this into the header script nothing shows up. Is this a CSS issue?

Share this post


Link to post
Share on other sites
kastelic

I tried it again and its closed but refuses to open when I click it. Maybe still some errors? The reason you are seeing nothing is that some of this code are scripts which are fine to put in the headerscripts (or "head" section of the document) area but some of the code is html (the divs) which does not go in the head, it must go in the body (between the body tags). To do this you have to utilize a hook by adding a small function to functions.php with your code. Check here on how to do that: http://www.pagelines.com/docs/base-child-theme

Share this post


Link to post
Share on other sites
dvallieres

So I plugged in this script:

<!-- Begin Lightbox -->
	    <div id="fsLightbox1045453" class="fsLightbox" style="display:none;">
	    <div align="right" style="padding:5px;">[close]</div>
	    <div style="height:450px; padding-top:20px; overflow:auto;">
	    <script type="text/javascript" src="http://www.formstack.com/forms/js.php?1045453-GeGWr2okiy-v2"></script>
	    </div>
	    </div>
	
	    <script type="text/javascript" src="http://www.formstack.com/forms/js/lightbox.js"></script>
	    <script type="text/javascript">
	        var fsLightbox1045453 = new FSLightbox({form: 1045453, handleText: "Client Form", handlePosition: "left",
	            handleImage: "http://www.formstack.com/forms/lightboxHandle.php?str=Client+Form"
	        });
	    </script>
	    <!-- End Lightbox -->[/code]

	
	into an HTML demonstration page and the script works fine.
	
	I was also able to insert the code into the functions.php code of the platform base child theme after activating it on my site, but I am still not getting anything.
	
	I also tried to split the div section into the base.css file and the javascript into the functions.php file but I am still not getting the desired result.
	
	How should I split up this code into the two files and how can I ensure that they are linking to one another. I added a hook that looks like this:
	
	
[code]//LightBox Function add_action('pagelines_before_branding', 'add_lightbox'); function add_lightbox(){ ?> <script type="text/javascript" src="http://www.formstack.com/forms/js/lightbox.js"></script> <script type="text/javascript"> var fsLightbox1045453 = new FSLightbox({form: 1045453, handleText: "Client Form", handlePosition: "left", handleImage: "http://www.formstack.com/forms/lightboxHandle.php?str=Client+Form" }); </script> <?PHP
and then added this portion to the base.css file:
<div id="fsLightbox1045453" class="fsLightbox" style="display:none;">
	    <div align="right" style="padding:5px;">[close]</div>
	    <div style="height:450px; padding-top:20px; overflow:auto;">
	    <script type="text/javascript" src="http://www.formstack.com/forms/js.php?1045453-GeGWr2okiy-v2"></script>
	    </div>
	    </div>
	[/code]

Still nothing. Any advice on how to partition this code properly?

Share this post


Link to post
Share on other sites
kastelic

You can't put divs in your CSS file. That's HTML, not CSS. Try putting the HTML divs in your function, and your scripts in Custom Code -> Footerscripts.

Share this post


Link to post
Share on other sites
dvallieres

Hey thanks for the quick response Jimmy. Tried your suggestion in the header and footer section. Still nothing. Do I need to create a CSS element at all?

Share this post


Link to post
Share on other sites
timlinson

With the hook route, I think you'll want to literally put all of it inside the function. Also it might have just been cut off, but the function you posted is missing a closing brace. I can't really test it though, because I get the same thing as Jimmy. "Client Form" shows up on the left, but clicking it does nothing.. even on the demo site you linked. ` //LightBox Hook add_action('pagelines_before_branding', 'add_lightbox'); // Lightbox Function function add_lightbox() { ?>

[close]
<?php } `

Share this post


Link to post
Share on other sites
dvallieres

Hi Tim, So when i add the whole script inside the function, it makes the logo disappear. I have also tried before the primary navigation and it makes the navigation disappear as well. So the function is being read, but its preventing local elements from showing up. Any explanations for this?

Share this post


Link to post
Share on other sites
dvallieres

So I got the logo to not disappear, but still not getting anything to show up. I'm at a complete loss. Here is the latest version of the code I am using within the hook:

<!-- Begin Lightbox -->
	
	    <div id="fsLightbox1045453" class="fsLightbox" style="display:none;">
	    <div align="right" style="padding:5px;">[close]</div>
	    <div style="height:450px; padding-top:20px; overflow:auto;">
	    <script type="text/javascript" src="http://www.formstack.com/forms/js.php?1045453-GeGWr2okiy-v2"></script>
	    </div>
	    </div>
	
	    <script type="text/javascript" src="http://www.formstack.com/forms/js/lightbox.js"></script>
	    <script type="text/javascript">
	        var fsLightbox1045453 = new FSLightbox({form: 1045453, handleText: "Client Form", handlePosition: "left",
	            handleImage: "http://www.formstack.com/forms/lightboxHandle.php?str=Client+Form"
	        });
	    </script>
	
	    <!-- End Lightbox -->[/code]

You can also see its placement if you view the source on the site. For whatever reason when you plug this above code into the HTML demonstration page you get the box, but the link does not work. I would recommend copying and pasting the code from the site (via view source, just under the body tag) and copying that in to the demonstration link I included above. This should display a properly working lightbox.

Share this post


Link to post
Share on other sites
cmunns

It may not be working bc of the error you are getting with MailChimp embed form that you have in the head of your document. You need to use noconflict mode any of the `$` signs. Right after the opening script tag write: `var $j = jQuery.noConflict();` then replace all the `$` with `$j` This may clear up issues with scripts added after it.

Share this post


Link to post
Share on other sites
dvallieres

Thanks Adam - I removed the mailchimp script and tried the lightbox code to no avail. I also tried adding a no javascript version of the mailchimp embed form and adding the lightbox script but still nothing. MailChimp doesn't appear to be the problem (?). Maybe there is another plugin that is causing the issue? And did you want me to add that non-conflict script to the MailChimp code or the lightbox code? I do want to say that when I add the entire code to the headerscript custom code region, it doesn't pop up initially, but when I reload the page, I see it very instantaneously and then it disappears. It only happens on the first reload. It's very weird, I know. I'm not crazy I swear.

Share this post


Link to post
Share on other sites
cmunns

In the original example they enter it all in the WP page editor...did you try testing there first? I don't see why this is being so difficult. I tested and got it to show in the markup as well but not visibly or functionally.

Share this post


Link to post
Share on other sites
dvallieres

Tried that as well. Not really sure what's going on either. Seems pretty straight forward. I'm speaking with the formstack lightbox developer now and he thinks it may be a javascript issue. Is there a way to temporarily disable all of the javascript on the site?

Share this post


Link to post
Share on other sites
dvallieres

Hi everyone, So I think I know what the issue may be. A while back I changed the permalink structure for the site since I was seeing slow page loads and I wanted to make sure I wasn't overloading google with a messy structure so I changed it to a numerical structure. Would this URL rewrite prevent the .htaccess file from displaying certain js? I also tried inserting a carousel into a page, which should be fine, but this also did not show up which makes me think I have screwed up the infrastructure of my site. When I insert certain lines of code on the .htaccess file, I also see that the box shows up but that the rest of the site gets messed up - so I think this file may be the root of my issue. Does anyone know of a proper way to add code so that js runs ok? Everyone has been really great helping me with this and I really appreciate everything. Thanks for sticking with me here. Big Thanks!

Share this post


Link to post
Share on other sites
cmunns

For any jquery you have to do as I instructed using noconflict mode...for any straight JS it's best to create external files and link to them.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×