It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ JavaScript Forum

Step by step javascript philosophy

Post a reply

Postby pcworks on Thu Apr 10, 2008 7:47 am

I can not finish saying thank you. You liberated me. I am really grateful
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Thu Apr 10, 2008 8:10 am

No problem, you're completely welcome ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Postby pcworks on Thu Apr 10, 2008 3:05 pm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
*{margin:0;padding:0;}
#nav {
width: 260px;
padding: 20px;
border: 3px solid #211E08;
margin:20px auto;
text-align:center;
}
#hide
{
width:50px;
text-align:center;
margin:auto;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
margin: 1px;
padding: 0px;
width: 100px;
text-align: right;
}

#nav a {
width: 100px;
display: block;
background: #222;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #9999cc;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #cfcfcf;
line-height:30px;
}
#nav a:hover {
text-decoration:underline;
}
/***********************************
this is the part to make the second column unique */
#hide2 a{
background:#36f;
width:80px;
display:block;
border:0px;
}
/**********************************/
</style>
</head>
<body>
<div id="wrap">
<div id="nav">

<a href="#">Home</a>
<a href="#" onclick="document.getElementById('hide').style.display=(document.getElementById('hide').style.display!='none')?'none':'block';return false;">Click Me</a>
<div id="hide" style="display:none;">
<a href="#">Lorem Ipsum</a>
<a href="#" onclick="document.getElementById('hide2').style.display=(document.getElementById('hide2').style.display!='none')?'none':'block';return false;">Click Me</a>

<div id="hide2" style="display:none;width:118px;margin:10px;">
<a href="#" class="unique">Hellow</a>
<a href="#" class="unique">How are you</a>
<a href="#" class="unique">Rangana</a>
<a href="#" class="unique">Links</a>
</div>

<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
</div>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">Links</a>
</div>
</div>
</body>
</html>


I guess this is the css so I saved it with stylesheet.css and did this
<link href="stylesheet.css" rel="stylesheet" type="text/css"> but it did not work. I am suspecting that I did not identify the css well.
Please still asist. Sorry for my disturbance am still learning.
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby pcworks on Thu Apr 10, 2008 5:59 pm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>it is good to be good</title>
<SCRIPT language=JavaScript>
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i] = makeArray.arguments[i];
}

function getFullYear(d) {
var y = d.getYear();
if (y < 1000) {y += 1900};
return y;
}

//var zone = "EDT";
var days = new makeArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var months = new makeArray("January","February","March","April","May","June","July","August","September","October","November","December");

function format_time(t) {

var Day = t.getDay();
var Date = t.getDate();
var Month = t.getMonth();
var Year = t.getFullYear();

timeString = "";
timeString += days[Day];
timeString += ", ";
timeString += " ";
timeString += months[Month];
timeString += " ";
timeString += Date;
timeString += ", ";
timeString += " ";
timeString += Year;

return timeString;
}
</SCRIPT>
<style type="text/css">
<!--
.style4 {
color: #FF3333;
font-family: Georgia, "Times New Roman", Times, serif;
}
.style13 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
body {
background-color: #FFFFFF;
}
-->
</style>
<style type="text/css" media="all">
<!--
@import url("file:///K|/SITE/infoenginners/styles.css");
.style24 {color: #000000}
.style27 {color: #000000; font-size: 12px; }
.style28 {FONT-FAMILY: Arial, Helvetica, sans-serif; line-height: normal;}
-->
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" height="24%" width="100%">

<tr>
<td width="969" height="90" valign="top" bgcolor="#C6FFE2"><table width="992" height="97" border="0">
<tr>
<td width="258" rowspan="3" bgcolor="#C6FFE2">&nbsp;</td>
<td width="715" height="21" align="center"><table width="310" border="0" align="right">
<tr bgcolor="#FFFFFF">
<td width="100" align="center"> <script language=JavaScript>
<!--
d = new Date();
document.write(format_time(d));
// -->
</script> </td>

</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="41">&nbsp;</td>
</tr>

</table>
<table width="100%" height="20" border="0"align="center" cellpadding="4" cellspacing="0">
<tr>
<td height="20" align="center" bgcolor="#FF9900" class="sidelink style4"><span class="mod">HOME | SERVICES | PRODUCTS | SUPPORT | POLICY | CONTACT US | RECOMMEND US </span></td>
</tr>
</table></td>
</tr>
</table>
<table height="356" border="0">

<tr>
<td width="278" height="135" valign="top"><p>Hellow rogana</p>
<p>I inserted the drop down buttons here but it always widen this position more than it is now. I have tried to make it resize to the table properties of this potion but to no avail. Please help me to insert the button here according to the last code u gave me </p>
<p>&nbsp;</p>
<p>I AM DESIGNING WITH MACROMEDIA DREAMWEAVER </p>
<p>&nbsp;</p></td>
<td width="637" valign="top" class="style13"><table width="637" height="25" border="0">

<tr>
<td width="631" align="center"><span class="style24">HOME PAGE </span></td>
</tr>
</table>
<blockquote>
<blockquote>
<div align="justify" class="style24"></div>
</blockquote>
</blockquote>

</td>
<td width="280" valign="top"><p>Please rogana, I need a code to insert vetically moving images here. The image will move from the bottom of the page and disappear at the top.</p>
<p>&nbsp;</p>
<p>Thanks </p></td>
</tr>
</table>
<table width="102%" height="63" border="0">
<tr>
<td width="968" align="center" bgcolor="#C6FFE2"><br />

<div align="center"></div></td>
</tr>
</table>
</body>
</html>

Copy and save the file with .html extension so that u will understand what i want. I wrote my question at the parts where i need them.
Please I sked u a question before this one hooked me in my post before this.
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Fri Apr 11, 2008 1:28 am

This is the CSS:
Code: Select all
*{margin:0;padding:0;}
#nav {
width: 260px;
padding: 20px;
border: 3px solid #211E08;
margin:20px auto;
text-align:center;
}
#hide
{
width:50px;
text-align:center;
margin:auto;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
margin: 1px;
padding: 0px;
width: 100px;
text-align: right;
}

#nav a {
width: 100px;
display: block;
background: #222;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #9999cc;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #cfcfcf;
line-height:30px;
}
#nav a:hover {
text-decoration:underline;
}
/***********************************
this is the part to make the second column unique */
#hide2 a{
background:#36f;
width:80px;
display:block;
border:0px;
}
/**********************************/



Save this as stylesheet.css ;)

This is the javascript:
Code: Select all
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i] = makeArray.arguments[i];
}

function getFullYear(d) {
var y = d.getYear();
if (y < 1000) {y += 1900};
return y;
}

//var zone = "EDT";
var days = new makeArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var months = new makeArray("January","February","March","April","May","June","July","August","September","October","November","December");

function format_time(t) {

var Day = t.getDay();
var Date = t.getDate();
var Month = t.getMonth();
var Year = t.getFullYear();

timeString = "";
timeString += days[Day];
timeString += ", ";
timeString += " ";
timeString += months[Month];
timeString += " ";
timeString += Date;
timeString += ", ";
timeString += " ";
timeString += Year;

return timeString;
}


Save it for example myjs.js.

...So in your page, I should only see:
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>it is good to be good</title>
<!-------------This is what I edited (rangana, Raymond Angana)---------------------->

<script type="text/javascript" src="myjs.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="stylehseet.css">

<!-----------------------End of final touch ------------------------------------------------->

<style type="text/css">
<!--
.style4 {
color: #FF3333;
font-family: Georgia, "Times New Roman", Times, serif;
}
.style13 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
body {
background-color: #FFFFFF;
}
.style24 {color: #000000}
.style27 {color: #000000; font-size: 12px; }
.style28 {FONT-FAMILY: Arial, Helvetica, sans-serif; line-height: normal;}
-->
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" height="24%" width="100%">

<tr>
<td width="969" height="90" valign="top" bgcolor="#C6FFE2"><table width="992" height="97" border="0">
<tr>
<td width="258" rowspan="3" bgcolor="#C6FFE2">&nbsp;</td>
<td width="715" height="21" align="center"><table width="310" border="0" align="right">
<tr bgcolor="#FFFFFF">
<td width="100" align="center"> <script language=JavaScript>
<!--
d = new Date();
document.write(format_time(d));
// -->
</script> </td>

</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="41">&nbsp;</td>
</tr>

</table>
<table width="100%" height="20" border="0"align="center" cellpadding="4" cellspacing="0">
<tr>
<td height="20" align="center" bgcolor="#FF9900" class="sidelink style4"><span class="mod">HOME | SERVICES | PRODUCTS | SUPPORT | POLICY | CONTACT US | RECOMMEND US </span></td>
</tr>
</table></td>
</tr>
</table>
<table height="356" border="0">

<tr>
<td width="278" height="135" valign="top"><p>Hellow rogana</p>
<p>I inserted the drop down buttons here but it always widen this position more than it is now. I have tried to make it resize to the table properties of this potion but to no avail. Please help me to insert the button here according to the last code u gave me </p>
<p>&nbsp;</p>
<p>I AM DESIGNING WITH MACROMEDIA DREAMWEAVER </p>
<p>&nbsp;</p></td>
<td width="637" valign="top" class="style13"><table width="637" height="25" border="0">

<tr>
<td width="631" align="center"><span class="style24">HOME PAGE </span></td>
</tr>
</table>
<blockquote>
<blockquote>
<div align="justify" class="style24"></div>
</blockquote>
</blockquote>

</td>
<td width="280" valign="top"><p>Please rogana, I need a code to insert vetically moving images here. The image will move from the bottom of the page and disappear at the top.</p>
<p>&nbsp;</p>
<p>Thanks </p></td>
</tr>
</table>
<table width="102%" height="63" border="0">
<tr>
<td width="968" align="center" bgcolor="#C6FFE2"><br />

<div align="center"></div></td>
</tr>
</table>
</body>
</html>


...Hope that helps you ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Postby pcworks on Sat Apr 12, 2008 4:25 pm

<!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">
<head>
</style>
<style type="text/css">
*{margin:0;padding:0;}
#nav {
width: 0px;
padding: 0px;
margin:0px left;
text-align:left;
}
#hide
{
background:#6699CC;
width:220px;
text-align:left;
margin:left;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
margin: 1px;
padding: 0px;
width: 100px;
text-align: right;
}

#nav a {
width: 200px;
display: block;
background: #FF9933;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #FF9933;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #FF9933;
line-height:28px;
}
#nav a:hover {
text-decoration:underline;
}
/***********************************
this is the part to make the second column unique */
#hide2 a{
background:#6699CC;
width:218px;
display:block;
border:0px;
}
.style33 {font-family: "MacBeth Hollow Bold"}
.style35 {font-family: "MacBeth Hollow Bold"; font-size: 36px; }
</style>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" height="24%" width="100%">
<tr>
<td width="969" height="90" valign="top" bgcolor="#C6FFE2"><table width="992" height="97" border="0">
<tr>
<td width="258" rowspan="3" bgcolor="#C6FFE2">&nbsp;</td>
<td width="715" height="21" align="center">&nbsp;</td>
</tr>
<tr>

<td>&nbsp;</td>
</tr>
<tr>
<td height="41">&nbsp;</td>
</tr>
</table>
<table width="100%" height="20" border="0"align="center" cellpadding="4" cellspacing="0">
<tr>

<td width="77%" height="30" bgcolor="#FF9900" class="sidelink style4"></td>

<td width="23%" align="center" bgcolor="#FF9900" class="sidelink golden"><script language=JavaScript>
<!--
d = new Date();
document.write(format_time(d));
// -->
</script></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td width="222" height="135" valign="top"><table width="200" border="0">

<tr>

<td height="213"><div id="wrap">
<div id="nav">

<a href="#" class="golden style23 style23">HOME</a>
<a href="#" class="golden"style23 style23">ABOUT US</a>
<a href="#" class="golden style23 style23">mold</a>
<a href="#" class="golden style23 style23">care</a>
<a href="#" class="golden style23 style23">Hospitalite</a>
<a href="#" class="golden" onclick="document.getElementById('hide').style.display=(document.getElementById('hide').style.display!='none')?'none':'block';return false;">polite</a>

<div id="hide" style="display: block;">
<a href="#">automatic</a>
<a href="#">educational</a>
<a href="#">rapid</a>
<a href="#">Economy</a>
<a href="#">action</a>
</div>


<a href="#" class="golden style23 style23">SUPPORT</a>
<a href="#" class="golden"style23 style23">POLICY</a>
<a href="#" class="golden style23 style23">CONTACT US</a>
<a href="#" class="golden style23 style23">RECOMEND US</a>
</div>
</td>
</tr>

</table>
<table width="222" height="810" border="1">

<tr>
<td width="100%" height="804">&nbsp;</td>
</tr>
</table></td>
<td width="100%" height="100%" valign="top" bgcolor="#FFFFFF" class="style13"><blockquote>
<blockquote>&nbsp;</blockquote>

<blockquote class="style24">&nbsp;</blockquote>
</blockquote></td>
<td width="238" valign="top">&nbsp;</td>
</tr>

</table>
<table width="102%" height="63" border="0">
<tr>
<td width="968" align="center" bgcolor="#C6FFE2"><br />
<div align="center"></div></td>

</tr>
</table>
</body>
</html>


In this script, I want to change the colour of the 1st drop down button(#hide) but i couldn't achieve the colour change for the tabs. Rather the background chnged when I did the tab colour change. Please help me change the colour of the drop down button #hide.
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Tue Apr 15, 2008 1:05 am

First off, you had some errors:
Code: Select all
<a href="#" class="golden"style23 style23">ABOUT US</a>

also:
Code: Select all
<a href="#" class="golden"style23 style23">POLICY</a>


align,bgcolor,width are few among the deprecated attributes that you are using

YOu haven't created a rule for your CSS with what you aimed. Add this:
Code: Select all
#hide a {
width: 200px;
display: block;
background: #69c;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #FF9933;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #FF9933;
line-height:28px;
}


Hope that helps ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top
Previous
Post a reply

Who is online

Users browsing this forum: No registered users and 3 guests