Jump to content


Photo
- - - - -

Adding formstack lightbox to Pagelines Site


  • Please log in to reply
17 replies to this topic

#1 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 15 April 2011 - 11:29 PM

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;">

Please Login or Register to see this Hidden Content

</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:

Please Login or Register to see this Hidden Content



Here is my website:

Please Login or Register to see this Hidden Content



Thanks for the help guys!

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 16 April 2011 - 01:07 AM

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.

#3 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 16 April 2011 - 01:49 AM

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...

Please Login or Register to see this Hidden Content



#4 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 16 April 2011 - 04:09 AM

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:

Please Login or Register to see this Hidden Content


Make sure you have all the code copied over correctly.

#5 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 16 April 2011 - 07:56 PM

I do notice some errors. How about this?

Please Login or Register to see this Hidden Content


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

#6 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 16 April 2011 - 09:06 PM

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:

Please Login or Register to see this Hidden Content



#7 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 17 April 2011 - 10:43 PM

So I plugged in this script:

Please Login or Register to see this Hidden Content


into an

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content


and then added this portion to the base.css file:

Please Login or Register to see this Hidden Content


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

#8 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 17 April 2011 - 10:46 PM

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.

#9 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 17 April 2011 - 10:52 PM

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?

#10 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 18 April 2011 - 03:12 AM

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() { ?>

#11 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 18 April 2011 - 12:35 PM

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?

#12 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 18 April 2011 - 03:13 PM

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:

Please Login or Register to see this Hidden Content


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.

#13 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 18 April 2011 - 08:15 PM

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.

#14 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 18 April 2011 - 11:40 PM

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.

#15 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 19 April 2011 - 07:22 PM

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.

#16 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 19 April 2011 - 09:20 PM

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?

#17 dvallieres

dvallieres

    Member

  • Members
  • PipPip
  • 10 posts

Posted 20 April 2011 - 04:11 PM

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!

#18 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 20 April 2011 - 07:01 PM

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.