JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Putting an iframe in a slide-out tab

Alright this question is inspired by ning's new ustream extension. I am already using Livestream which I feel is a better application. I would like to be able to put a slide-out tab in my sidebar for my Livestream channel. I don't need a red dot or green dot, just the tab that has the iframe embedded when it it slides out.

I am already using the slide-out code below, which you can see in action on my network. I replaced the code between
<div id="slideout"> </div> with some different iframe code from Livestream. I actually got it to work when the iframe code for the video player was really huge and peeked outta the sidebar. I could click on the piece peeking out and the video player would slide the rest of the way out. But I haven't figured out how to inject the tab that will slide out to the player.

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class toggle_body
$(".toggle_body").hide();
//toggle the content with class toggle_body
$(".toggle_head").click(function()
{
// 200 is good for fast, and 600 for slow open
$(this).next(".toggle_body").slideToggle(200);
});
});
</script>


<div id="slideout"><a href="http://www.sportscampinabox.com/editions/"><img src="http://i187.photobucket.com/albums/x172/billvasko/Coachbook_Ad-3.png" /></a></div>

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on June 10, 2011 at 11:49am

I'll try to look later, away from desk a lot today.

Permalink Reply by Bill Vasko on June 10, 2011 at 12:23pm

Thanks Jen....this is the iframe code I tried putting in the div:

I think the iframe will work. Jus not sure how to put the image for the tab in there so there is something to get it to slide out.

Permalink Reply by Bill Vasko on June 12, 2011 at 10:09am

Jen--will the Livestream iframe code work in your new "Now Showing" slide out tab?

Permalink Reply by JenSocial on June 12, 2011 at 10:57am

Hi Bill,

You have to stay below a certain height, or the box won't be visible at bottom, on lower resolutions. Your dimensions should work great. But, when I tested it, I kept receiving "widget too small". I went to the site and recaptured the code, so not sure if I have the right thing. Anyhow, it appears to be working fine.

Best,

Jen

Permalink Reply by Bill Vasko on June 12, 2011 at 11:26am

Thanks Jen....looks good! I will sign u for the VIP group later this week. Is the slide out box dimensions adjustable to make it bigger?

Permalink Reply by JenSocial on June 12, 2011 at 11:49am

Here are a few notes from the tip - don't need to exceed 350 in height:

350 in height. I have tested this for weeks, and +350 is an issue.
In one of my tests: I pushed the width up to 507 pixels on a 3 column layout, and it's working fine in 4 browsers. But seriously, please don't push the height.

What happens Bill is - - the box goes down too far on page for lower resolutions. And those members would have terrible user experience. So after weeks of testing I suggest, 350 in height max, and approx. 500 in width (but can be pushed up).

With all the code lifting and tip ideas being taken from here, I removed the link above since I add special code to that site.

Best,

Jen

RSS

Welcome to
JenSocial: Social Web Directory and Ning Tips

Sign In