Pop Up Footer with jQuery. Full Tutorial Inside

[JP]

I wanted to showcase some of my discussions from Ning Creators over on my website without using up valuable space on my front page.

My idea worked around a pop up footer. I did some searching and found a jQuery version shared by Paul Robinson from Return-True. You can visit the "Plugin Page" for more information.

I had an issue with some custom divs that I placed inside the pop up footer. I posted on the Plugin page and Paul replied with an answer that pointed me in the right direction and helped solved the issue. It's always great to find a developer who supports their code.


You can see the modified version, live on my Ning Powered Website. Click on the ""Open Featured Tuts" tab on the bottom right of your browser window.

Note:

I am trying to make my Tutorials less complicated for others to use and easier for me to share with everyone. In order for you to have a pretty good head start on getting this to work, the code I am sharing with you contains absolute paths to images that are hosted on my Ning Powered website.

I feel confident that you will remove those URL's when you have customized it to your liking. Please do not leave them there. If you do, you will be sharing my bandwidth and I do not wish to have an issue with my site using more bandwidth than allowed by Ning.

If I see too much traffic from these URL paths, I will just have to upload those images again and get new paths. If I have to do that, then this Tutorial will become a little more difficult to enjoy without the sample photos.

Getting this to work on your Ning Powered Website.

Open the file below and copy the code. Paste that code in your custom code box.

htmlfandscript4puf.txt

Next,

Open the file below and copy the code. Paste that code inside your advanced css area.

css4puf.txt

Modify the HTML and CSS to your specifications.

Last Words:

If this does not go off without a hitch, please don't get upset. I may have left something out. Reply below if you need help.

Don't forget to share with us all how you used this tip and any modifications you may have made to make it work on your Ning powered website.

**Please remember that this jQuery Plugin is copyright by a Third Party. Sharing this code with others and not giving credit back to the creator of jQuery Pop Up Footer V2 and myself for coding it to work with a Ning powered website, is a no no and will hurt my feelings. Enjoy!

[solo]

Sweet

[JP]

Thank you

[solo]

@ questions.. how do you modify or change the html..

and how do i get the tab that say open or close feature hut to be raised a tad bit over the chat bar

thanks

[solo]

i found out how to change the html.sweet code

[JP]

That's great to hear. Please share with us all how your Pop Up Footer looks when your finished with it.

Have a great night! 

[JP]

Hello Solo,

You could change the CSS and have the tab on the left.

Where you see this:

#footerSlideButton {
background: url(urlpathtoimage) top left no-repeat transparent;
position: absolute;
top: -28px;
right: 20px;
width: 300px;
height: 32px;
border: none;
cursor: pointer;
}

Change right:20px to instead, show left 20px. Let me know if that worked out better for your application.

[solo]

Hey anthony yes got it to work,,but when on other members profile..it doesnt show up and when the member scroll down their page it is at the bottom below the footer ad

[JP]

I would need to see your website in order to help you. Can you share the URL here, or PM me and I will take a look.

[JP]

I checked the profiles and see it working on them accept for the one is at the top of the member leader boards. I am not sure why it is that way. I last looked at leader board member # 3 and all appeared just fine.

I checked my site and it shows on member profiles. 

[solo]

maybe because she used her own background lay out on her profile,,but thank you so much