CSS Left Frame Layout Script with SCMplayer.net Script

**northwestduckfan** · 08-08-2015, 07:30 PM

1) Script Title: CSS Left Frame Layout

2) Script URL (on DD): http://www.dynamicdrive.com/style/la...-frame-layout/

3) Describe problem: http://trailingpdx.x10.mx/projects/scmplayerdemo/

Hi,

I'm trying to use the css left frame layout script with a script from scmplayer.net and not sure why the page doesn't function correctly on mobile devices, I can get the css left frame layout test page to display with the scmplayer from scmplayer.net to display fine on desktop but for some reason the scmplayer script won't display at all on mobile if I use the css left frame layout together with the scmplayer script but will display on mobile without the two together and I'm assuming there is some kind of conflict going on between the two scripts when used together on mobile and was wondering if anybody might have any Idea why it doesn't display correctly on mobile when used together?

Any help would be greatly appreciated, I'd like to make a simple site for chatting and streaming tunes with friends, Thanks.

Here's the project page: http://trailingpdx.x10.mx/projects/scmplayerdemo/

And here's the code:

Code:

<!--
<!--Force IE6 into quirks mode with this comment tag-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Dynamic Drive CSS Left Frame Layout Demo</title>

<style type="text/css">



body{

margin: 0;

padding: 0;

border: 0;

overflow: hidden;

height: 100%; 

max-height: 100%; 

}



#framecontent{

position: absolute;

top: 0;

bottom: 0; 

left: 0;

width: 333px; /*Width of frame div*/

height: 100%;

overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/

background: #000000;

color: #ffffff;

}



#maincontent{

position: fixed;

top: 0; 

left: 325px; /*Set left value to WidthOfFrameDiv*/

right: 0;

bottom: 0;

overflow: auto; 

background: #000;

}



.innertube{

margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/

}



* html body{ /*IE6 hack*/

padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/

}



* html #maincontent{ /*IE6 hack*/

height: 100%; 

width: 100%; 

}



</style>


</head>



<body link="#00ff00">



<div id="framecontent">

<div class="innertube">

 <font color="#fff">

<center><h1>[LOGO]</h1>

<h3>chat box</h3></center>



</div>

</div>





<div id="maincontent">

<div class="innertube">



<h1>Dynamic Drive CSS Demo</h1>



 <center><img src="1.jpg"></center>

<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>



</div>

</div>

<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js" 
data-config="{'skin':'skins/black/skin.css','volume':69,'autoplay':false,'shuffle':false,'repeat':0,'placement':'bottom','showplaylist':true,'playlist':[{'title':'Studio 54 Disco Music Paradise','url':'http://50.7.77.179:7000/stream'},{'title':'MMR Radio - EDM CH1','url':'http://199.189.111.28:8205/live'},{'title':'MMR Radio - EDM CH 2','url':'http://199.189.111.28:8205/stream'},{'title':'Real House Radio from London','url':'http://realhouseradio.out.airtime.pro:8000/realhouseradio_a'},{'title':'BeatOne Electro from Austria','url':'http://beatonefm.ice.infomaniak.ch/beatoneelectro-128.mp3'},{'title':'ABradio Groovy House Czech Republic','url':'http://ice.abradio.cz/ghouse64.mp3'}]}" ></script>
<!-- SCM Music Player script end -->

</body>

</html>
-->

**Beverleyh** · 08-08-2015, 08:58 PM

From what I can see, the SCM player page you linked to doesn't appear to work on mobile - not for me here on iOS anyway. The website is horrible to use on mobile so I haven't searched for any docs to confirm this. What are your experiences on mobile of the script on the source site? What browsers, devices and OS is it supposed to be compatible with? To me, it's just a control bar that doesn't do anything, so from my perspective as an iOS user, it wouldn't matter that it doesn't show on mobile (probably better that way as it's less confusing). Another plus for it *not* working on mobile is that it wouldn't waste my data package - something that some users might not be aware of - and save me the cost of unecessary/excessive data usage fees.

**northwestduckfan** · 08-08-2015, 10:39 PM

Originally Posted by Beverleyh

From what I can see, the SCM player page you linked to doesn't appear to work on mobile - not for me here on iOS anyway. The website is horrible to use on mobile so I haven't searched for any docs to confirm this. What are your experiences on mobile of the script on the source site? What browsers, devices and OS is it supposed to be compatible with? To me, it's just a control bar that doesn't do anything, so from my perspective as an iOS user, it wouldn't matter that it doesn't show on mobile (probably better that way as it's less confusing). Another plus for it *not* working on mobile is that it wouldn't waste my data package - something that some users might not be aware of - and save me the cost of unecessary/excessive data usage fees.

Hi, thanks for the reply.

Yes I agree the website and player is dated and the website scmplayer.net displays horribly on my mobile as well (i'm an android user) but the player does work on my mobiles (android) without combining the two, css left frame layout script and scmplayer code, as far as iOS I have no Idea I don't have one and never used one. Desktops (windows) are fine and I can use the player to live stream media on both I just can't figure out how to get the css left frame template and scmplayer to work correctly together for mobile but using a mobile android scmplayer.net works fine without the css layout but the website itself is far from responsive, and since the player was open source I was just going to see if I could get it to function on both and then maybe download the source and take a stab at running a custom version of it from a paid vps for fun.

Anyway I'm more confused now and No big deal, I also won't be doing a deep dive into it I was just hoping somebody more skilled than I might see a simple fix that this (ME

novice missed.

Thanks,
Duckfan
PS: I take no sides, I am just an Android and Windows guy, easier for tards like me

Thanks again