Forum user: djclothier

Hi Alex,

I found some time during the week to have another look at this issue... landed up banging my head against a wall until I googled 'wordpress contact modal'.... I had to chuckle at the results as I found a very popular (although I'd never heard of it!) plugin that does exactly what I was looking for! Although a slight cop out in that I didn't solve the root of the issue I posted about, it seems a perfect workaround.

The plugin itself is SimpleModal Contact Form (SMCF) http://wordpress.org/extend/plugins/simplemodal-contact-form-smcf) and to be honest, it's so simple, it's perfect!

Just thought I would let you know...

Thanks again for your help on this,
David

Thanks Alex,

Coming to the same conclusion myself! Will leave it for a day or two and look again for any possible solutions... Will post back if lucky! Otherwise I'll do it the old fashioned way and use a HTML form, and post that to a php mailer in the background.

Thanks for your help however, very much appreciated!
David

Hi Alex,

The overlay is being initiated via a button within a page (not post).

I tried the suggestion in your previous message, so that the resulting code looks like:

<div class="apple_overlay" id="sjcontact_us">
<div class="sj_contact">
<?php echo do_shortcode('[contact-form 1 "Contact form 1"]'); ?>
</div>
</div>

I can confirm that when the overlay is invoked in this case, there is no rendering of either the contact form itself, nor the echo of the shortcode - I guess this falls in line with your comments about WP blocking PHP code from being run within the page/post?

Hi Alex,

Thanks for getting back to me. I don't have this on the Net yet as it's still sitting within my MAMP environment locally but I'll try and run through the set up - let me know if you need more information.

I have three overlays being called on the page - two of them just contain HTML (terms & conditions, and a privacy policy) which work fine. the third is set up exactly the same way, so I know the jQuery overlay tool is set up ok (for rendering HTML anyway!), but the third overlay is the one giving me trouble.

I have a plugin installed called Contact Form 7, which generates a shortcode for you to use in pages/posts/widgets - which renders the contact/email form. I have tested the form out on a page/post and can confirm this works as it should.

What I'm am trying to do, is get the shortcode to work in an overlay and render the contact form instead of simply echoing the shortcode itself.

So, the HTML calling the overlay (it's being called from a button):

<div id="cta">
  <a href class="btn" rel="#sjcontact_us">EMAIL US NOW</a>
</div>

The jQuery tool setup (as per the basic instructions from this site):

<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script> 
<script> 
$(function() {
		$("a[rel]").overlay({mask: '#222', effect: 'apple'});
});
</script>

The jQuery above is the code calling all three overlays of course.

The HTML for the contact form (that is hidden until invoked naturally):

<div class="apple_overlay" id="sjcontact_us">
<div class="sj_contact">
[contact-form 1 "Contact form 1"]
</div></div>

As mentioned, the shortcode above ([contact-form 1....]) does work ok from a standard post page etc.

With reference to your trick about getting the shortcode into my functions.php - the shortcode is driven out of shortcodes.php which is part of the Contact Form 7 plugin; and I surmised that as the form itself works on pages/posts, it is being handled/initialised correctly on page load? Or would I need to someone pull that into my normal functions.php as a reference of some sort?

Any ideas are greatly appreciated - I think I'm missing something fundamental here, but can't quite put my finger on it...

Thanks,
David

Hi there,

Although possibly not a jQuery Tools issue, has anyone successfully implemented a tool (such as the overlay tool from this site) and also managed to have a wordpress shortcode run from within it?

For instance, I have a contact form that works fine, via a shortcode, on a normal page or post in Wordpress, but as soon as I try and use that shortcode from within an overlay, it simply renders the shortcode on the screen, and not the form the shortcode is supposed to fire up.

Is there a trick to doing this correctly that someone is willing to share please?

Thanks in advance,
David

Hi Zickboy,

I am still hunting for the resolution to the first issue I mentioned above, but I solved the second by setting the width of the parent container holding the 'panes' divs to the exact width of the panes combined (in other words, no space for a blank pane to exist.)

Hope this helps a little, but would love to find the answer to the hashtag issue!

Thanks,
David

Ok, have done some more work on this today.

I added the link to #sitemap in the top navbar, but set the display to hidden.

I then replicated the top navbar in the footer (same class= as in the topbar, used in navi:), but reversed the display hidden on all elements so that only the #sitemap link is shown.

This appears to have cleared up the blank pane appearing as above in previous posts within this thread.

However, when I now click on the #sitemap link visible in the footer, the 1st pane (i.e. #home) appears. It would seem that in the footer, because the other links are set to hidden, when I click on #sitemap it thinks I am after the first page as it's the first link within that new navbar 'ul' in the footer.

So am nearly there - just need the #sitemap link in the footer to show the correct page now - strange how it is not showing the corresponding #?

Is there another way of doing this - such as assigning unique ID's to the 'a' tags and getting the panes to match up when clicked to both ID and #?

Hi again,

Tried that a minute ago - same effect. I also tried enabling circular: true to see if that helped, but still the same effect. I noticed that when I click on Contact Us, and it had finished flying past it and also the sitemap page to the blank pane; if I then clicked on Contact Us again, it kinda reversed itself and found it ok the second time around.

Quite strange!

Interestingly enough, if I disabled the 7th nav item in the top nav bar (so, the hidden one) - I get the same result.

If then disable the bottom #sitemap item in the footer, the same result again when I click on Contact Us.

If I comment out the code for the sitemap pane altogether, the problem ceases to exist.

I think the problem may be there - I'll look again tomorrow morning and let you know (it's 00:30 here..)

Thanks for your help so far though, much appreciated!
David

:) explains why it wasn't helping me then! Thanks for clarifying.

Ok, so I've made the changed and enabled History within the setup, and presto, it works now....

...but it's introducing a new issue :) (of course!)

The top nav bar has 6 items, and then the sitemap link is now in the footer. The 6th item on the top navbar is Contact Us. With history: true, if I load the page and then click on Contact Us, it flies past that pane, past the sitemap pane (which is after the Contact Us pane in the code) and lands on a blank pane which does not exist in the HTML anywhere?

Using Firebug, I can't seem to figure out why it's not stopping on the #contact pane where it should.

Am I missing something here; didn't think enabling history would have that effect?

Sorry, perhaps my sentence structure was a little out on that one.... when I mentioned global config statement, I meant a config statement that included the word 'global' - so we landed up with globalNav: true

It was suggested to quite some time ago, hence why I can't find the post for it here - but I did some searching on this site using global as the keyword and found another post I had read a while ago:http://flowplayer.org/tools/forum/35/35049

You're right, it's not in the documentation, but it does work - I think it was supposed to be taken out in v1.2.0 but perhaps was added back in? See Miscellaneous changes (about half way down the page) at:http://flowplayer.org/tools/release-notes/1.2.0/index.html

Anyways.... back to my problem at hand - any ideas?

Thanks,
David

More to add...

Ok, so I found the Global config statement I was looking for:

globalNav: true

(to be used when the navigation items are not in the same containing DIV as the scrollable items)

I added this to the js config, but has not provided the solution - so am back to square one as per my original post above, but I can discount Q1 now.

Is there a way to have the navigation items in separate DIVs, but still function correctly?

Thanks,
David

I've set up a 'one page' website using the Scrollable tool within jQuery Tools; using a standard navigation across the top of the page etc. I've been asked to move one of the navigation items into the footer (a link to the sitemap); but would still like to keep the functionality that currently exists.

Within the tool's config in the js, I have set the navi property to 'navi: ".flowtabs",' (changed from ID to Class).

However, if I move the trigger element into the footer and assign the class to it's DIV wrapper, it stops all navigation working completely; both at the header and footer of the site.

I remember I had a similar issue some time ago with this and the answer had something to do with adding a Global config statement so that the .js listened for other triggers outside of the current parent container (GlobalNav = 'true', or something similar) - I've looked and looked and can't find the post anymore (not in my inbox or on this forum)...

Q1. Does anyone know what that Global statement should be (Heikki?)
Q2. Is there a way to config the .js to listen for other classes at the same time as .flowtabs?
Q3. Am I looking at this wrong and if so is there an easier way to do this?

Thanks,
David

Hi there,

I'm doing some testing on a website I'm building and am using jQuerytools (scrollable) as my navigation method. I was testing a separate sitemap.html file on the same site that points to the various pages set up within the scrollable area, and while setting the url to #whateverthepageis works fine, it seems to set that page as the 'home' page within the scrollable area?

In other words, on the navbar is a Home button/link, which contains (as you would well imagine) the home page etc. But if I browse to #contact in the URL, it shows the Contact Us page - again as you would expect, except that then clicking on the Home button/link does nothing as it thinks that it already is there (remember it's actually on the #contact pane) - if I then click on the Contact button/link it scrolls to a blank pane (i.e. far to thr right of the actual Contact Us pane).

Has anyone had similar issues using the # tags of the panes in URLs, and if so are there any workarounds or configurations I'm not seeing please?

Thanks in advance,
David

Hi Fran,

I came across this when looking up a different issue I'm having.

I *may* be over-simplifying this, but in your <form> code you have not specified an action="something" within the tag?

So at the moment, using only the code above, the form will validate (if filled in correctly) once the link is clicked, but then it's not being told what to do with the user input - i.e. what's the next step?

Hope this helps,
David

Thanks Heikki, much appreciated.