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

Step by step javascript philosophy

Postby pcworks on Sat Apr 05, 2008 6:45 am

Can some one give me a code that I can insert in my html to achieve the kind of drop down button at the left side of this website http://www.weethet.nl/english/welcome.php When you click some of the buttons at the left it drops down giving you more options to choose from.
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Sat Apr 05, 2008 7:32 am

Basically, the net is a wide world to surf, you'll get plenty of tutorials around ;)

...But for now, this could be easily achieved through style.display manipulation on Javascript ;)

See this code for basic example:
Code: Select all
<!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">
<style type="text/css">
*{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;
}
</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="#">Lorem Ipsum</a>
         <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>


Get back if you're stumped :)

See if it helps ;)
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 05, 2008 6:52 pm

I must confess that u are a blessing to mankind.

Now I am faced with three problems
1. I want to remove the black boarder line so that i cn insert the drop down code between table tags <td>..................</td>

2. I want to make the shifting or the drop down displacement to be a little. That is the drop down items will have a little shift from the the main menu when it drops.

3. I wanted to play with the code by adding another drop down say at contact. I removed this code <a href="#">Contact</a> and replaced it with <a href="#" onClick="document.getElementById('hide').style.display=(document.getElementById('hide').style.display!='none')?'none':'block';return false;">Contact</a>
<div id="hide" style="display:none;">
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
</div> but it did not work. When I click it opens ''click me'' How then can I dd drop down to another tab say ''contact'' or ''blog''
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Mon Apr 07, 2008 12:40 am

I want to remove the black boarder line so that i cn insert the drop down code between table tags <td>..................</td>

Res: Remove this part in your nav div
Code: Select all
border: 3px solid #211E08;

I want to make the shifting or the drop down displacement to be a little. That is the drop down items will have a little shift from the the main menu when it drops.

Res: Shift to where? Left or right?, up or down?, the answer relies on showing your code instead ;)

For no. 3 question, I don't get it, it functions as expected.

See if it helps :)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Postby pcworks on Tue Apr 08, 2008 11:31 am

I must confess that you are a rare germ. I can defend it anywhere even at the sun.
Still on http://www.weethet.nl/english/welcome.php
For instance, click on
GSM / PDAs
will notice sub shifts to get these tabs
Compaq iPAQ,
PalmPilot and
Mobile phones
options. When you click on any of these three options you have a further vertical shift. I need some codes to achieve this.
Thanks

:?
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Wed Apr 09, 2008 12:40 am

Does this help ;)
Code: Select all
<!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">
<style type="text/css">
*{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;
}
</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; background: #fc0;width:118px;margin:10px;">
            <a href="#">Hellow</a>
            <a href="#">How are you</a>
            <a href="#">Rangana</a>
            <a href="#">Raymond Angana</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>


Click the Click Me buttons :)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top

Postby pcworks on Wed Apr 09, 2008 6:25 pm

You are a father.
I have moved another step and I have these problems

1. I want to carve out javascript or css aspect of the code and save it with javascript.js or script.css as the case may be while the remaining part of the code will go to the head section of my html.
2. I want to give the drop down a different colour (say blue) ie
Lorem Ipsum
Click Me
Hellow
How are you
Rangana
Raymond Angana
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
from the main menu.
Thanks a trillion times
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Thu Apr 10, 2008 12:01 am

For your first question....I don't really understand it.
I hope it's not <script type="text/javascript" src="javascript source"> that you mean ;)

...and <link rel="stylesheet" type="text/css" href="css reference">

For your second question...give the second drop down a class....and feel free to mess with the codes in CSS :)

...get back when you're stumped :)
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 5:12 am

In question 1, I want to have this
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script language="javascript" src="javascript.js"></script>
then other descriptions. In essence I want to separate the script from my html so that I can save it with the .js and .css extensions.

For question 2, Please I cannot separate the class u told me. I have not gone all that far in coding. I am still a growing kid in the coding world.
pcworks
 
Posts: 10
Joined: Fri Apr 04, 2008 5:59 pm
Location: Boswana
Top

Postby rangana on Thu Apr 10, 2008 6:33 am

1.Just save your CSS without <style type="text/css">, then call them externally having href as your CSS source. The same applies to JS with src instead.
...or I miss something else?..:)

2.I'll comment what i've added so you could have a good start to learn:
Code: Select all
<!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">
<style type="text/css">
*{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>
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines
Top
Next
Post a reply

Who is online

Users browsing this forum: No registered users and 6 guests