Quick Question Concerning jQuery

Posted: Fri Nov 05, 2010 8:07 am

Hey all-

Just a simple question this time. I'm adding a jquery contact form to my site but I want it to follow the user across all pages... which file(s) do I need to be looking at to accomplish this.

(similar to how nuken has the social bar following users across his/her site)

Thanks!

Posted: Fri Nov 05, 2010 8:40 am

I might suggest something like the tab slideout plugin
http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

there are a ton of these available, this one has worked for me in the past. If I remember right you can position it top,bottom,left, or right.. you'll just want to create a includes/addons/head-anynamehere.php to call your script/css and place your form in the hidden div as per his instructions Smile

Posted: Fri Nov 05, 2010 8:50 am

Perfect!! I looked around and found a similar one but I'm having all sorts of issues trying to position it to the right like they have done on the left. Thanks for the link and answer!!!

Posted: Fri Nov 05, 2010 11:57 am

Spastic-

When I do it this way... for a split second the hidden div shows above the header then disappears. To me this is no big issue as it's only there for about a second.. but some of my end users run slower machines and it may actually be on the screen longer than a second on their side.

Is there a way to either load it after the page is done rendering or preload it somehow? Thanks.

--------

I noticed nuken's social bar is delayed from showing on the screen for a few seconds so this "should" be a possibility somehow. Ohhhh nuken... where are you? Wink

Posted: Fri Nov 05, 2010 12:23 pm

not sure how your including the form and hidden div, but for mine I added it to the footer function of my theme. Never seen it flash on the screen but not sure I could scroll down fast enough if i tried Smile

you could also try adding the form to admin - preferences in one of the footers, if the editor doesn't mangle your code too much Wink

but basically, try loading the form later in the page.

also, as i think about this I'm pretty sure I had to place the slideout div inside a hidden div, not hide the slideout div. something like

<div style="display:none;">
<div class="slide-out-div">CONTENT_HERE</div>
</div>

not
<div class="slide-out-div" style="display:none;">CONTENT_HERE</div>

registered · Posted: Fri Nov 05, 2010 12:38 pm

You're right spastic, use display:none.

Posted: Fri Nov 05, 2010 12:38 pm

Gotcha... I'll give that a try. Basically what i've done is add this code to the head-mine.php

Code:

<?php





$contactcss = '<style>


      


      .slide-out-div {


          padding: 20px;


          width: 250px;


          background: #5a83a1;


          border: #29216d 1px solid;


        z-index: 1;


      }      


      </style>';


addCSSToHead($contactcss, 'inline');





addJSToHead('includes/jquery/jquery.tabSlideOut.v1.3.js', 'file');


$contact = '<script>


         $(function(){


             $(".slide-out-div").tabSlideOut({


                 tabHandle: ".handle",                              //class of the element that will be your tab


                 pathToTabImage: "images/contact_tab.gif",          //path to the image for the tab (optionaly can be set using css)


                 imageHeight: "122px",                               //height of tab image


                 imageWidth: "40px",                               //width of tab image    


                 tabLocation: "right",                               //side of screen where tab lives, top, right, bottom, or left


                 speed: 300,                                        //speed of animation


                 action: "click",                                   //options: "click" or "hover", action to trigger animation


                 topPos: "200px",                                   //position from the top


                 fixedPosition: false,                               //options: true makes it stick(fixed position) on scroll


          });


         });





</script>';


addJSToHead($contact , 'inline');





echo '<div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div>';





?>

Guess I could take the comments out but w/e for the moment. Wink

The reason I believe it's showing for that second is due to RN loading the addons first then the rest of the site. I guess I could add this code to the footer.php as a last resort. Thanks for the tips!!

---------

Edit***

Thanks for confirming nuken.

Posted: Fri Nov 05, 2010 12:54 pm

Ok.... tried adding the sytle=none (shortened) and it hid the entire thing... so that didn't seem to work right unless I'm misunderstanding it.

Code:

echo '<div style="display:none;">


       <div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div>


   </div>';

tried with & without the semi colon behind "none".

---------------------------

Edit***

Also tried adding the code to the footer.php but couldn't get it to work correctly, and because I'm playing with this on a "live" site ATM, I don't really want to fool with it to much testing different things within the footer. Thanks for y'alls help.

Posted: Fri Nov 05, 2010 1:24 pm

Try using it in the p

Code:




<p style="display:none;">Coming soon... Slide out contact form!</p>

Never mind. that will just hide your text.

Posted: Fri Nov 05, 2010 1:39 pm

you can't echo out content for the page from within one of the includes/addons/head-xyz.php files, as it is processed before the opening body tag of the webpage. i.e.

Code:

echo '<div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div>';

that's why you are seeing it at the top of the page. echo that content somewhere before the closing </body> tag and not from within the addons. Since you want site wide getting it in the footer is probably best. try adding to
themes/YOUR_THEME/theme.php - function themefooter
or if your theme uses a template for the footer you can add it there

OR you can create includes/custom_files/custom_footer.php
(not recommended for content that is displayed inline but since you won't be displaying it there..)

so wherever you put it, you will want

Code:

echo '<div style="display:none;"><div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div></div>';

Posted: Fri Nov 05, 2010 1:46 pm

spasticdonkey wrote:

you can't echo out content for the page from within one of the includes/addons/head-xyz.php files, as it is processed before the opening body tag of the webpage. i.e.

Code:

echo '<div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div>';

that's why you are seeing it at the top of the page. echo that content somewhere before the closing </body> tag and not from within the addons. Since you want site wide getting it in the footer is probably best. try adding to
themes/YOUR_THEME/theme.php - function themefooter
or if your theme uses a template for the footer you can add it there

OR you can create includes/custom_files/custom_footer.php
(not recommended for content that is displayed inline but since you won't be displaying it there..)

so wherever you put it, you will want

Code:

echo '<div style="display:none;"><div class="slide-out-div">


        <a class="handle" href="">Contact Us</a>


        <h3>Contact Us</h3>


        <br />


        <p>Coming soon... Slide out contact form!</p>


    </div></div>';

Now this makes sense to me. I'll give this one a go round. Thanks for the info!

------------

Edit***

Works like a charm!! Learn something new everyday. Thanks bud.

New Member Joined: Aug 18, 2010 Posts: 21

Good post!