Don't use iframes to begin with, if you have the playlist, just pop it into an ordered list and voila.

If you must use an iframe though - you can set it's width and height properties.

www.w3schools.com

<iframe width=x height=y> Why in gods name am i using iframes</iframe>

Right, but that's not the problem. Working with an wordpress page so I want to have everything width wise without scrolling a left to right.

Scrolling up/down is what I want however.

working with this currently,

<iframe src="serato.com width="1000" height="430" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9)></iframe
>

Just to clarify, I'm referring to the serato playlist page.

I use a plugin by Rocket Themes that is free called RokBox to display another site with a lightbox effect, within my site. I lose less traffic by doing it this way. It may not be embedded, but it's the next best thing imho.

Check it out in action on my homepage at alikat.ca (Click on the Serato Live Playlist link in the sidebar)

PS, Hi JPrime! :P

Hi AliKat,

This is exactly what I tried to do using just the lightbox effect but it didn't work in the Dance Floor theme.

Right now I'm just doing this, but having a width problem.

www.djquartz.ca

or you can just export your history as txt/csv and use jquery to load that text in your website

code-tricks.com

I don't think transform will work like that inside an iframe. Useful info from StackOverflow:

stackoverflow.com

'Inside an IFrame the browser automatically renders the website page as if it were in a separate page, it behaves in the same manner as if for example you resized the browser... the web page will be displayed as it was designed whether that is a fluid design on fixed dimensions or whatever... you cannot force a different rendering behavior on the site. You could however programmatically modify the page's markup'

You could use a PHP cURL call to collect the data inside the elements you want, mark it up how you want, and stuff it into a DIV or whatever.

I have a wordpress site and can mess around with it for fun...

If there was a way we could pull the info directly or maybe we should make a widget or something.

I did approach Serato webmaster on this and they mentioned something is in the pipe as well.

A js include for width / height / color / etc settings, a php file to pull the data from a url....should be straightforward.

Omigod, why don't you in just increase the width of your container using CSS

.post-wrapper-full {width:1000px;}

dummies

I do this as well using a plugin... called TablePress

you can see an example of my imported playlist here:
alikat.ca

Just click on the "Download Link & Playlist" url to see the playlist

Omigod, why don't you in just increase the width of your container using CSS

.post-wrapper-full {width:1000px;}

Doesn't work, that was the first thing I tried.

Far from a dummy, miss

I wasn't calling you a dummy, I was calling Jprime one. We've known one another for years.

And you're probably doing it wrong. You need to increase the width of the wrapper too. I didn't mention that because I thought it was fairly obvious.

Make me a login and I'll do it for you in less than 5 minutes.

Gotcha, my apologies.

Well what I'm going to do is the lightbox effect because I originally wanted to do it that way I just had to get some other things fixed before I could come back to it.

Or I might just wait for the widget from Serato if they make one.

lol Ali. I was under the impression he wanted to shrink the contents to fit his smaller sized div


not increase the div to fit the contents. Completely different scenario. correct me if I am wrong please OP.

I found a technique to shrink it and I didn't like the results.

I think what I would like to do is not have playlists display on a page but directly pop up a light box with the playlist site instead.

Alikat's link has the perfect example of what I would like to do instead just never had the time to play around yet.

cool, it takes about 5 minutes to set up the plugin, its a simple shortcode.

good luck, drop us a line when you get yourself sorted. :D

I'm going to update it this morning.

I'm assuming I should be able to put the shortcode in the page and it should trigger when you click on the playlists menu link.

Got the plug-in just looking for docs on how to use the shortcode.

Ah I see. Yeah that sounds like childs play ;)

Got it working already with the test code, just need the auto trigger on click now.

Thanks for the tip Alikat, it looks so much better and much more elegant of a solution compared to what I was doing previously.

auto trigger on click???

the shortcode is simple, you can find it here: (Mouse over features on the main menu and then click on RokBox)
demo.rockettheme.com

the shortcode I use is:

[rokbox size="75% 90%" text="Serato.com Live Playlist"]serato.com[/rokbox]

Right, that makes a link for you to click which I was testing with.

What I need to do is having that code launch when playlists is clicked instead of loading the page in order and having the user click an actual hyperlink.

Know what I mean?

Mine works nicely at 85%, no horizontal scroll bar.

?

'Your playlists' page just has a facebook link now for me :/

I was changing the code, it's back now

"What I need to do is having that code launch when playlists is clicked instead of loading the page in order and having the user click an actual hyperlink."

toss a function call into your JS?

$('#myPlayslistsMenuID').click(function(e){
//do whatever code you want
});

Or better, bind it on your main page

$('#myPlayslistsMenuID').live("click", function(e){
//do whatever code you want
});

No, Sorry I don't really understand what you mean.

Looks like Jprime does tho.

ok, i think I know what you mean, and I would just enter each playlist link manually on my webpage with the shortcode. Takes a lot more up keep tho.

for me, all i really want to display is my Serato Live Playlist when i am broadcasting my radio show. By default it shows all my playlists when I am not streaming a Live playlist.

Anyhow, I'm not sure I can be much more help from this point. Jprime is highly skilled, respected Programmer. He has experience with numerous languages and platforms. so you're in good hands. I suggest you take his advice as he will steer you in the right direction.

Once again I wish you good luck!

I was looking in the wordpress menus to see if I could do something custom from there.

@ Alikat,

To clarify what I was saying, you see how you have a link for your pop up window.

What I'm attempting to do is have the window launched when you click the playlists control in my menu bar instead.

I have a link currently on there but I think I might have a creative way to do this as well.

I'm going to use icons for now because I will want to have more that one playlist category eventually.

I didn't like how that looked so I scrapped that idea.

Need some assistance, almost there,

<body>
<script type="text/javascript">
function simulateClick(control)
{
if (document.all)
{
control.click();
}
else
{
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
control.dispatchEvent(evObj);
}
}
</script>

<a rel="rokbox[85% 90%]" title="" href="serato.com id="playlist" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','serato.com]);" class="rokbox-image"></a>

<script type="text/javascript">
simulateClick(document.getElementById('playlist'));
</script>
</body>

This causes the playlist url to open full screen, I just need to figure out how to get it into the rokbox window.

Ignore this line... <a rel="rokbox[85% 90%]" title="" href="serato.com id="playlist" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','serato
.com]);"class="rokbox-image"></a>

The code is wrong!

Correct code...

<a rel="rokbox[85% 90%]" title="" href="serato.com id="playlist" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','serato.com]);" class="rokbox-image"></a>

^ Never mind I see what it did. I forgot the forum code changes the displayed url.

So the problem with the above code is it will only open in full screen vs in the rokbox window.

Where is this code that I can see it in action?

nm, found in on your site.

Works fine in Firefox and Chrome. What's your issue?

No no,

I changed it back so you have to click on the serato playlist pic.

I had it opening automatically yesterday when you click on playlist but it only opens fully screen.

I'll change it back right now so you can see what I mean.

Just changed it back to the above code.

You'll see that the autoclick works because it launches the playlist page but not inside the rokbox window.

That's what I need to fix.

Why not inject the code into the playlist menu item on page load like this instead:


$(document).ready(function(){

$('#menu-item-30').html(
'<a rel="rokbox[85% 90%]" title="" href="serato.com onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','serato.com]);" class="rokbox-image" id="playlist">Playlists</a>'
);

});

^^remembering to escape the single quotes of course :P

Couldn't figure it out, didn't know how to do it yet.

I tried doing this the other day by place such code between

1. 

but it didn't work.

code /code is what that should say above ^

Try plopping this near the top of your code:


$(document).ready(function(){

$('#menu-item-30').html(

'<a rel="rokbox[85% 90%]" title="" href="serato.com id="playlist" onclick="javascript:_gaq.push([\'_trackEvent\',\'outbound-widget\',\'serato.com\']);" class="rokbox-image">Playlists</a>'

);

});

oh ffs, wrong bit:

$(document).ready(function(){

$('#menu-item-30').html(

'<a rel="rokbox[85% 90%]" title="" href="serato.com id="playlist" onclick="javascript:_gaq.push([\'_trackEvent\',\'outbound-widget\',\'s
erato.com\']);"class="rokbox-image">Playlists</a>'

);

});

Just figuring out where it needs to go. Thanks

Some reason I can't get that code to work.

However, the previous code does launch the playlist url but only in fullscreen.

'<a rel="rokbox[85% 90%]" title="" href="serato.com onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','serato.com]);" class="rokbox-image" id="playlist" id="playlist"></a>'

Am I calling it incorrectly?

pm ;)

there ya go, its probably easier to just give jprime access and let him have at 'er.

ta boys.

:-*