[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kfm-devel
Subject:    more info on www.cnn.com/videoselect/
From:       Vadim Plessky <lucy-ples () mtu-net ! ru>
Date:       2001-01-30 16:27:33
[Download RAW message or body]

I have deleted original *browser type detection* code from testcase, 
commented/deleted all Alert()'s, and forced example to use IE4.css

For some reason, JavaScript was turned Off on my computer after upgrade to 
KDE 2.1 Beta2. I found it by occasion.
(it was On on Beta1 and Jan15th CVS which I had before; dunno why Beta2 RPM 
deleted default setting)
So, conclusion: 
 *****  
  if you have Javascript turned Off globally, most likely you will see:
  "CNN Videoselect requires Cascading Style Sheets.
  Please turn them on in your preferences."
  on www.cnn.com/videoselect/ site
 *****
Of course, it should be written "Turn JavaScript on in your preferences"  :-)

You will see after running example on screen that -
"you were forced to Browser= ie4 Platform= win CSS table"
And no this stupid warning! So, it works with Konqi.

Surprisingly, this method (stylesheet, platfrom) works for Mozilla M18 and 
Netscape 6 - if you look through original code, CNN's webmaster is not aware 
of it. :-)
So, Mozilla can use successfully MS IE4 CSS, as well as Konqi.

To be sure that end-user will be not confused by that warning, I added to 
testcase section
 <NOSCRIPT>
        <P>Your browser doesn't support scripting.<P>
 </NOSCRIPT>

After all, you will see detailed instruction in this example - even which 
menu you should look at in Konqi :-)

What do you think - can we in some way influence CNN webmaster to add 
<NOSCRIPT> to their site ?

-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
http://kde2.newmail.ru/index_rus.html  (Russian)
Do you have Arial font installed? Just test it!
http://kde2.newmail.ru/font_test_arial.html


["CNN_com_Videoselect-TestCase3_force_IE.html" (text/html)]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=http://www.cnn.com/videoselect/ -->
<HTML><HEAD><TITLE>CNN Videoselect</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>

<SCRIPT language=Javascript>
//   *****************************************************************************************
 //   Put  TestMode = true;
//   below (instead of  TestMode = false; )
//  then testcase will ignore UserAgent and come through
//   This is added by me, Vadim Plessky

// var TestMode = false;
 var TestMode = true;

//Browser Detection
// Valid values are ie3, ie4, ns3, and ns4

var browser = "";
var browsername = navigator.appName;
var browserversion = parseInt(navigator.appVersion);
var ua = navigator.userAgent;

// Check for Macintosh platform
myplatform=navigator.userAgent;

if (myplatform.indexOf('Mac') !=-1)
{
	platform='mac';
}
else
        {
            platform = "win";
        }

/*  paths to CSS and JavaScripts were changed to local HDD
 */

// browser = "ie3";

  browser = "ie4";
//  browser = "ns4";
//  browser = "ns5";
//  platform= "mac";
  platform = "win";

// alert("Browser ="+browser+" platform= "+platform);

if (browser == 'ie4')
{
  // MS Internet Explorer
     if (platform != "mac")
     {
         // Windows platform
	if (screen.height <= 600)
                {
		document.write('<link rel="stylesheet" href="800.600.ie4.css" type="text/css">');
	}
                else {
		document.write('<link rel="stylesheet" href="ie4.css" type="text/css">');
	}
  } else
      {  // it is on a mac
  	document.write('<link rel="stylesheet" href="ie4mac.css" type="text/css">');
      }
}

if (browser == 'ns4') 
{
	if (screen.height <= 600)
	{
		document.write('<link rel="stylesheet" href="800.600.ns4.css" type="text/css">');
	} 
	else {
		document.write('<link rel="stylesheet" href="ns4.css" type="text/css">');
	}
}


// End Browser Detection
</SCRIPT>

</HEAD>

<!--   we don't need fu*cking OnLoad for our TestCase
<BODY bgColor=#000000 onload=initchoice()>
  -->
<BODY bgColor=#000000>

<DIV id=styletest>
<H1><FONT color=white>CNN Videoselect requires Cascading Style Sheets.<BR>Please
turn them on in your
preferences.</FONT>
</H1>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
 </DIV>

<TABLE bgColor="#FFFFFF" border=0 cellPadding=0 cellSpacing=0 width=600>
  <TBODY>
  <TR vAlign=top>
    <TD align=left width=130><A
      <H2>You should see this text in any case - even when you do not have CSS table \
linked in JavaScript code above</H2>  <P>Tip:  you disabled JavaScript, or have wrong \
UserAgent</P>

   <SCRIPT language=Javascript>
      document.write("<P>you were forced to Browser= "+browser+" Platform= \
"+platform+" CSS table</P>");

   </SCRIPT>
   <NOSCRIPT>
        <P>Your browser doesn't support scripting.<P>

        <P>If you are running Konqueror web browser on KDE2, please check
        menu Settings - Configure - Konqueror Browser dialog, select Javascript tab \
                (Java/Javascript in KDE 2.0),
        and <B>Enable JavaScript globally</B> in <I>Global Settings</I></P>
        </NOSCRIPT>

     </TD>
    </TR>
 </TABLE>
<DIVv id=hosting>
<A href="http://www.akamai.com/"><IMG alt="Live Video Delivered by Akamai" border=0
height=31 src="CNN_com Videoselect - Jan29_files/akamai.gif" width=176></A>
</DIV>
</BODY>
</HTML>


["ie4.css" (text/plain)]

#styletest { position:absolute; 
          width:650px; 
          height:500px; 
          z-index:0; 
          left: 0; 
          top: 0; 
          visibility: hidden}
          
#banner { position:absolute; 
          width:650px; 
          height:120px; 
          z-index:1; 
          left: 38; 
          top: 0; 
          visibility: visible}
          
#navnews { position:absolute; 
           width:256px; 
           height:1200px; 
           z-index:1; 
           left: 38; 
           top:147; 
           visibility: visible; 
           background-color: #3333CC; 
           overflow:hidden; 
           clip:rect(0 256 307 0);
           padding-left: 5px; 
           padding-top: 10px; 
           padding-right: 5px; }
           
#navshows { position:absolute;
 			width:256px;
 			height:800px;
 			z-index:1; 
 			left: 38; 
 			top:147; 
 			visibility: hidden; 
 			background-color: #3333CC; 
 			overflow:hidden; 
 			clip:rect(0 256 307 0);
            padding-left: 5px; 
            padding-top: 10px; 
            padding-right: 5px; }


#hosting { position:absolute; 
 				visibility: visible; 
				width:176px; 
				height:31px; 
				z-index:4; 
				left: 507; 
				top: 459 }


#streamchoice { position:absolute; 
				width:185px; 
				height:108px; 
				z-index:3; 
				top:346; 
				left: 307; 
				background-color: #3333CC; 
				visibility:hidden; 
				overflow:hidden; }

#realchannel { position:absolute; 
				width:185px; 
				height:108px; 
				z-index:2; 
				top:346; 
				left: 307; 
				background-color: #000000;
				color: #FFFFFF;
				visibility:hidden; 
				overflow:hidden; }

#navigationtab { position:absolute; 
				 width:246px; 
				 height:20px; 
				 z-index:1; 
				 left:38; 
				 top:128; 
				 visibility: visible }

#navigationtabshows { position:absolute; 
				 width:246px; 
				 height:20px; 
				 z-index:0; 
				 left:38; 
				 top:128; 
				 visibility: hidden }

#navigationup { position:absolute; 
				width:14px; 
				height:14px; 
				z-index:2; 
				left:281; 
				top:145; 
				visibility: visible }

#navigationdown { position:absolute; 
				  width:14px; 
				  height:14px; 
				  z-index:2; 
				  left:281; 
				  top:440; 
				  visibility: visible }

#video { position:absolute; 
		 width:185px; 
		 height:200px; 
		 z-index:2; 
		 left: 309; 
		 top:128; 
		 background-color:#000000; 
		 visibility:visible }

#infoup { position:absolute; 
		  width:14px; 
		  height:14px; 
		  z-index:4; 
		  left:704; 
		  top:146; 
		  visibility: visible }

#infodown { position:absolute; 
			width:14px; 
			height:14px; 
			z-index:4; 
			left:704; 
			top:440; 
			visibility: visible }

#playerchoice { position:absolute; 
				width:253px; 
				height:21px; 
				z-index:4; 
				left: 38; 
				top: 459 }

#navcolor { position:absolute; 
			width:236px; 
			height:800px; 
			z-index:0; 
			left: 38; 
			top:147; 
			visibility: visible; 
			background-color: #3333CC; 
			overflow:hidden; 
			clip:rect(0 256 312 0); }

#cnn { position:absolute; 
	   width: 140px; 
	   height:700px; 
	   z-index:5; 
	   left: -128; 
	   top: 0; 
	   visibility: visible}

.navheader {  font-family:Arial, Helvetica, sans-serif; 
			  font-size: 14px; 
			  font-weight:700; 
			  color: #FFFFFF;
			  border-style: none;}

.smalltext {  font-family: Arial, Helvetica, sans-serif; 
			  font-size: 9pt; 
			  font-weight: bold; 
			  color: #FFFFFF; 
			  text-align: center}

.unnamed1 {  font-family: Arial, Helvetica, sans-serif; 
			 font-size:14px; 
			 font-weight: 700; 
			 color: #ffccff; 
			 text-decoration: underline; 
			 text-indent: 15pt}

.navbox { margin-left: 20px}

.navtext {  font-family: Arial, Helvetica, sans-serif; 
		    font-size: 12px; 
		    font-style: normal; 
		    line-height: normal; 
		    color: #FFFFFF;
		    font-weight: bold}

.navtext2 {  font-family: Arial, Helvetica, sans-serif; 
			 font-size: 12px; 
			 color: #FFFFFF;}

P {  font-family: Arial, Helvetica, sans-serif;}

LI {  font-family: Arial, Helvetica, sans-serif; 
	  color: #FFFFFF}

LI A{  font-family: Arial, Helvetica, sans-serif; 
	   color: #FFFFFF}

#navnews A { color: #FFFFFF }

#navshows A { color: #FFFFFF }

#navspecials A { color: #FFFFFF }

.choosetext { color: #FFFFFF }

.blue {color: #3333CC}

.navbox { padding-left: 5px; 
		  padding-top: 10px; 
		  padding-right: 5px;}

#infobox { position:absolute; 
		   width:210px; 
		   height:307px; 
		   z-index:4; 
		   left:507; 
		   top:147; 
		   background-color: #CCCCCC; 
		   overflow:visible; 
		   clip:rect(0 210 307 0) }

.infoheader {  font-size: 20px; 
			   font-weight:800; 
			   color: #000000; 
			   border-style: none; 
			   border-left-width: 20px}

.launch { font-size: 12px; 
			font-weight:300; 
			color: #000000;}

.guest { font-size: 15px; 
		 font-weight:800; 
		 color: #000000;}

.infotext { font-size: 15px; 
			font-weight:300; 
			color: #000000;}

.infolink { font-size: 12px; 
			font-weight:800; 
			color: #000000; 
			font - family: helvetica, arial; }

LI .infolink { font-size: 12px; 
			   font-weight:800; 
			   color: #000000; 
			   font - family: helvetica, arial; }

LI A .link{  font-size: 12px; 
			 font-weight:800; 
			 color: blue; 
			 font-family: helvetica, arial; }

.link{  font-size: 12px; 
		font-weight:800; 
		color: blue; 
		font-fam


[prev in list] [next in list] [prev in thread] [next in thread] 

Configure | About | News | Add a list | Sponsored by KoreLogic