SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    creating a jquery dialog

    Hi,
    I am using wordpress to have few lines of code to show up in dialog box but till now no success. I tried .show() of jQuery and its working but doesn't work if i change it to .dialog() or popup(), anyone got any idea how its not working and what should i do to make it work.? here is Fiddle
    All those who wander aren't lost.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Are you trying to display a contact form in a Lightbox?

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes, i have some other things too in div, i just want a lightbox or dialog to work.
    All those who wander aren't lost.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I had to do something similar a while back.
    I wrote it up in this blog post.
    Maybe that'll help you.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Does formlightbox have a do_shortcode?, as you see in my fiddle that i have using it my template in php echo statement
    All those who wander aren't lost.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nofel View Post
    Does formlightbox have a do_shortcode?
    Sure:

    Code:
    [formlightbox title="Send me a message" text="Contact me"]
      [contact-form-7 id="401" title="Contact form 1"]
    [/formlightbox]

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here is my code
    Code PHP:
    echo do_shortcode('[formlightbox title="Send me a message" text="Contact me"]')
         echo do_shortcode('[contact-form-7 id="36" title="Contact Attorney"]')
            echo do_shortcode('[formlightbox]')
    The light box work but it doesn't display contact form, instead its showing on the page, whereas i want it to open when i click the button, am i doing something wrong?
    All those who wander aren't lost.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Try putting everything in one statement:

    PHP Code:
    <?php echo do_shortcode('[formlightbox title="Send me a message" text="Contact me"][contact-form-7 id="36" title="Contact Attorney"][/formlightbox]'); ?>

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It worked! thanks a ton! but like i said i wanna have some html side by side the form, now how do it do it?
    All those who wander aren't lost.

  10. #10
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is there any documentation for the lightbox? now i am trying to have a button that is clicked upon to have the lightbox opened but the button between shortcodes display in popup, where as i need the one outside to work
    Code PHP:
    <button id="contact">Contact Us</button> 
         <?php echo 
         do_shortcode('[formlightbox"]
             <input type="button" value="Contact Us">
         [contact-form-7 id="36" title="Contact Attorney"]
         [/formlightbox]');
         ?>
    sorry to ask again, i am not good in php
    All those who wander aren't lost.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Contact Form 7 wraps its content in a div with a class of "wpcf7".

    I would first of all try to append something to that.

    e.g.

    Code JavaScript:
    $(".wpcf7").append("<p>Hello</p>");

    When you get that working, put your content in a template div like so:

    Code:
    <div id="template">
      Lots of content to go next to the form
      ...
    </div>
    
    $template = $("#template");
    $(".wpcf7").append($template);
    HTH

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Contact Form 7 wraps its content in a div with a class of "wpcf7".

    I would first of all try to append something to that.

    e.g.

    Code JavaScript:
    $(".wpcf7").append("<p>Hello</p>");

    When you get that working, put your content in a template div like so:

    Code:
    <div id="template">
      Lots of content to go next to the form
      ...
    </div>
    
    $template = $("#template");
    $(".wpcf7").append($template);
    HTH
    Only problem is i don't know where to put these and make it run
    All those who wander aren't lost.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nofel View Post
    Only problem is i don't know where to put these and make it run
    Oh dear!

    Could you then post a link to your page?

  14. #14
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    here, nothing fancy. just using get_template_part above that code to make the page come together,
    here are 2 issues,

    1. I need to make the button open the lightbox
    2. I will be doing a div where one div will float left containing the contact form and second div run side by side to run some text, so its like parallel.
    All those who wander aren't lost.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Sorry, don't you have a link to the page you are developing using WordPress?

    The reason for needing this, is that JSFiddle will not evaluate the shortcode, whereas Wordpress will.
    It will then add a bunch of divs etc to the source code which we can target with jQuery.

  16. #16
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have it on localhost only
    All those who wander aren't lost.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well try adding it to your document just before the closing body tags.
    To be on the safe side wrap it in a call to document.ready(), although this probably isn't necessary.

    Code:
        <script>
          $(".wpcf7").append("<p>Hello</p>");
        </script>
      </body>
    <html>

  18. #18
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    didn't work, here is my code
    Code JavaScript:
    jQuery('document').ready(function(){
          jQuery(".wpcf7").append("<p>Hello</p>");    
        });
    your right, i was able to do it in do_shortcode but too many divs. Is it possible to open the lightbox with click on a button, instead of hyperlink ?
    All those who wander aren't lost.

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nofel View Post
    Is it possible to open the lightbox with click on a button, instead of hyperlink ?
    Not sure.
    On the form-lightbox project page, they have an example (no. 7) using an image to open the lightbox on click.
    I would think you could probably adapt that to use a button instead.

    http://www.myphpmaster.com/form-lightbox-demo/

  20. #20
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Not sure.
    On the form-lightbox project page, they have an example (no. 7) using an image to open the lightbox on click.
    I would think you could probably adapt that to use a button instead.

    http://www.myphpmaster.com/form-lightbox-demo/
    i tried that but the button displays inside the form. any idea how to fix it? I assume i am echoing the shortcode, that is why it is inside the dialog.
    All those who wander aren't lost.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    It's a simple as this:

    Code:
    [formlightbox_call  title="Contact form 1" class="7"]<button>Click me now!</button>[/formlightbox_call]
    [formlightbox_obj id="7"][contact-form-7 id="401"][/formlightbox_obj]
    I've set up a demo page for you so you can see it in action.

    N.B. I will take this offline after a few days.

  22. #22
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    It's a simple as this:

    Code:
    [formlightbox_call  title="Contact form 1" class="7"]<button>Click me now!</button>[/formlightbox_call]
    [formlightbox_obj id="7"][contact-form-7 id="401"][/formlightbox_obj]
    I've set up a demo page for you so you can see it in action.

    N.B. I will take this offline after a few days.
    Thanks a million mate! i hate myself for not being able to do it myself. i am a web designer but yet a lousy one. really wish i could become good at programming
    All those who wander aren't lost.

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem.
    Everyone has got to start somewhere and now, at least you'll know for next time

  24. #24
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I got the part of jQuery too! i used append and prependTo to get what i want. now a layout issue has poped up. not sure it this is the right forum to post it in. if you see www[dot]newdaybankruptcy[dot]com and click the button which says contact our attorney. when it pops up. it has a text which is moving further in relation to or div ad out of the pop up.
    All those who wander aren't lost.

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,086
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    I had a look at the page you link to and when I click on the button, I see the contact form and a sign saying "give us a call".
    There also appears to be the "R" of the word "OR" behind one of the inputs.

    What exactly is not working as desired?
    If you want to make the contact form a little less wide, just apply a width declaration to all of its input elements.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •