PDA

View Full Version : Ok...I really need help



FleetAdmiralO
07-15-2007, 09:45 PM
Hey guys...please help

First Off...Complete Novice

I run Frontpage 2000(kinda old but i got nothing else) and I wanna put in those cool drop tabs for my website..the ones with the DHTML code and cascading style sheets. I downloaded the scripts from the website...but now what...

1. Where do i put them?
2. How do i get any of this to work.

Hey thanks guys really really appreciate it.


FleetAdmiralO

Twey
07-15-2007, 10:17 PM
I run Frontpage 2000(kinda old but i got nothing else)Presuming you're a Windows user, you've got Notepad. That's superior.
I wanna put in those cool drop tabs for my website..the ones with the DHTML code and cascading style sheets. I downloaded the scripts from the website...but now what...Open the page in a text editor (such as Notepad) and insert the code as instructed on the page. If you intend to open the page in FrontPage again, there's some additional code you have to insert to prevent FrontPage mangling it, but I suggest you don't. In fact, I strongly recommend you rewrite the whole page from scratch, since the excuse for code that FrontPage churns out is worse than worthless in most cases.

FleetAdmiralO
07-15-2007, 10:35 PM
Yeah but i dont know any DHTML for one, and second i opened it in Notepad and i see no instructions....third where exactly on the html portion of frontpage do i put it? AHHHHHHH SOOOOO CONFUSING!!!



Fleet

Twey
07-15-2007, 10:56 PM
i dont know any DHTML for oneAnd you're making websites? That's like being a mechanic without knowing what a screw is :p I suggest you learn.
second i opened it in Notepad and i see no instructionsThe instructions that came with the script. I assume you're talking about a pre-built script?

FleetAdmiralO
07-15-2007, 11:20 PM
Yeah, but im using Frontpage, which you don't technically need to know DHTML, and i took an HTML class a couple years ago, so im not totally dumb, and yes im talking about the pre-built scripts. Here, please respond as if you were talking to a 5 year old, simple.....very very simple.

thanks

fleet

Twey
07-15-2007, 11:23 PM
Yeah, but im using Frontpage, which you don't technically need to know DHTMLTrue. You don't need to know DHTML in order to sit a trained monkey in front of a text editor either, though, and the monkey would probably produce a better site.
and i took an HTML class a couple years ago, so im not totally dumbEven less reason to still be using FrontPage.
yes im talking about the pre-built scripts.And I was talking about the instructions that came with them.

alexjewell
07-15-2007, 11:25 PM
Yeah, come on Twey, some of those out-of-the-box "custom" cars work great...except you shouldn't take them on the freeway.

Pshhh. I need to stop being so sarcastic.

Fleet, you'll have to link us to the code or post it in here before we can help. (PS - if you're not completely stupid, we wont talk to you like you're 5...)

FleetAdmiralO
07-15-2007, 11:29 PM
Ok....look i dont have any of those fancy softwares like Dreamweaver or anything else....so for starters...tell me what software you guys recommend ok.


Now.

This is the pre-built script:

Sliding Doors:

.slidetabsmenu{
float:left;
width:100%;
font-size: 12px;
line-height:normal;
border-bottom: 1px solid gray;
}

* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
}

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

.slidetabsmenu a{
float:left;
background:url(media/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 5px;
padding:0 0 0 9px;
text-decoration:none;
}

.slidetabsmenu a span {
float:left;
display:block;
background:url(media/slide-right.gif) no-repeat right top;
padding:2px 13px 2px 4px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}

.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -125px;
}

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -125px;
}

html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}





OK. Here the JavaScript that came with it:

//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
obj2.parentNode.className="selected"
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null){ //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
this.previousmenuitem.parentNode.className=""
}
}
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
this.showhide(this.dropmenuobj.style, e, obj)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
this.positionshim() //call iframe shim function
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu(obj2)
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu(obj2)
},

delayhidemenu:function(obj2){
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},

hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)
},

init:function(menuid, dselected){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))
}
}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
menuitems[i].parentNode.className+=" selected default"
var setalready=true
}
else if (parseInt(dselected)==i)
menuitems[i].parentNode.className+=" selected default"
}
}

}




Thanks,

Fleet

alexjewell
07-15-2007, 11:36 PM
Alright, both of those would be put in the <head> section of the document. So you would switch to Frontpage's HTML view, and insert them as so:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>pweenfwpeowpeowepowed (whatever your title is...)</title>

<!-- any other styling or scripting here -->

<style type="text/css">
// put the css here
</style>

<script type="text/javascript" src="sliding.js"></script>
<!-- I suggest pasting the JavaScript into Notepad and saving it as "sliding.js", that way it's an external script and can be edited in one place, as well as stay out of the way in the html... -->

</head>
<body>

<!-- content here, they described how to use it in the content on the dynamic drive page you got it from. If you need help here, ask. -->

</body>
</html>

alexjewell
07-15-2007, 11:43 PM
Found the script on DD and it does have instructions...

http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

They also have a demo page where you can view the source and see how they used the codes and where they put them:

http://www.dynamicdrive.com/dynamicindex1/dropdowntabsdemo.htm

Twey
07-15-2007, 11:44 PM
Ok....look i dont have any of those fancy softwares like Dreamweaver or anything else....so for starters...tell me what software you guys recommend ok.I already said Notepad would do you fine.

FleetAdmiralO
07-15-2007, 11:49 PM
Ok yeah i need help in the content part...is this where i define what exactly is in the drop down menus?

FleetAdmiralO
07-15-2007, 11:59 PM
Ok if i use the developer's view thing and put in exactly what I see(gotta type it all out cause Frontpage garbles it)in exactly the right places it should all work right?

Do i need to define what goes in the drop-down boxes?

what about these weird "meta" lines that appear after the title? Do i ignore them?

thanks

fleet

alexjewell
07-16-2007, 12:00 AM
Yes, the styling and scripting goes in the head, whereas the actual menus themselves go in the body.

If you want me to give you an example, tell me which menu you're using on this page (http://www.dynamicdrive.com/dynamicindex1/dropdowntabsdemo.htm), #1, #2, #3, #4, or #5?

EDIT: Which meta tags are you referring to?

FleetAdmiralO
07-16-2007, 12:10 AM
here are the metas:
<meta name="ProgId" content="FrontPage.Editor.Document">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="Microsoft Theme" content="boldstri 000, default">
<meta name="Microsoft Border" content="tlb, default">

And i am using sliding doors at the moment.

Question: Do i need to add more code if there are more links than what is in the examples, because the examples have 2 drops, mine need 3?

Thanks,

fleet

FleetAdmiralO
07-16-2007, 12:10 AM
I guess that sliding doors is five?

alexjewell
07-16-2007, 12:16 AM
About the meta tags, lets get the menu working first, then we can worry about other page elements, ok?

Now, if you understand where to put the css and javascript, then you'll want to put those where they belong (like I showed before). Then, in the <body>, where you want the menu, you'll put the code I'll write for you once I get more details. What are the pages and drop down menu titles you want?

FleetAdmiralO
07-16-2007, 12:24 AM
Thanks man...lifesaver you are!

Ok the tabs i have that need the dropdown menus say:
News
Original Productions
Fan-Based Productions

In News: I want One tab to say About Us
I want one tab to say newest offerings
In Original Productions: I want one tab to Of Kings and Time Travelers
Is there a way to leave room for others?

In Fan-Based Productions: I want one tab to say Star Trek: DAW
One tab to say Andromeda
Again is there a way to add extra tabs?

I am starting my own audio theater hobby.......

thanks,

fleet

FleetAdmiralO
07-16-2007, 12:27 AM
Hey dude, thanks for this...and:

I want to be able to do this myself in the future, any resources you recommend to get me started to learning DHTML?

thanks,
fleet

alexjewell
07-16-2007, 01:10 AM
Alright, you'll put this in the <body> where you want it to appear:



<div id="slidemenu" class="slidetabsmenu">
<ul>
<li>
<a href="news.html" title="News" rel="newsdrop">
<span>
News
</span>
</a>
</li>
<li>
<a href="orig.html" title="Original Productions" rel="origdrop">
<span>
Original Productions
</span>
</a>
</li>
<li>
<a href="fans.html" title="Fan-Based Productions" rel="fansdrop">
<span>
Fan-Based Productions
</span>
</a>
</li>
</ul>
</div>

<br style="clear: left;" />
<br class="IEonlybr" />

<!--NEWS DROP DOWN MENU -->
<div id="newsdrop" class="dropmenudiv_c">
<a href="news/about.html">About Us</a>
<a href="news/newest.html">Newest Offerings</a>
</div>
<!-- END NEWS DROP DOWN MENU -->



<!-- ORIGINAL PRODUCTIONS DROP DOWN MENU -->
<div id="origdrop" class="dropmenudiv_c">
<a href="orig/kings.html">Of Kings and Time Travelers</a>
</div>
<!-- END ORIGINAL PRODUCTIONS DROP DOWN MENU -->



<!-- FAN BASED PRODUCTIONS DROP DOWN MENU -->
<div id="fansdrop" class="dropmenudiv_c">
<a href="fans/star.html">Star Trek: DAW</a>
<a href="fans/andromeda.html">Andromeda</a>
</div>
<!-- END FAN BASED PRODUCTIONS DROP DOWN MENU -->

<script type="text/javascript">
tabdropdown.init("slidemenu")
</script>


Now, to add to the drop down menus, just add more links to each div. You'll also want to change the url's in the links, too, as I didn't know the exact url's. If you have any questions, feel free to ask.

Twey
07-16-2007, 01:13 AM
any resources you recommend to get me started to learning DHTML?http://www.howtocreate.co.uk/

FleetAdmiralO
07-16-2007, 01:20 AM
So do i need to do this to every page of my website...or only the index?

alexjewell
07-16-2007, 01:22 AM
every page that you want the menu on.

FleetAdmiralO
07-16-2007, 01:37 AM
THANK YOU GUYS SO MUCH! really..you guys helped so much..alex moreso, but T thanks too.

Fleet

FleetAdmiralO
07-16-2007, 02:07 AM
For some reason its not working...i typed in basically what you wrote(some of the hyperlinks needed changing of course). There is an error saying that

tabdropdown is undefined


also the code creates new hyperlinks...is there a way to incorporate the drop down menus with the ones created by Frontpage themes?

thanks

Fleet

alexjewell
07-16-2007, 01:31 PM
can you upload the file so I can see the full page?

FleetAdmiralO
07-16-2007, 10:29 PM
how do i do that exactly....here i can give you the full code of that page:



<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">


<title>Giant Gnome Audio Productions</title>
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

/******************************************
*Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (dynamicdrive.com)
*This notice MUST stay intact for legal use
*Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
****************************************/

</script>

<!--CSS for Drop Down Tabs Menu #1-->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/slidingdoors.css"/>


<meta name="ProgId" content="FrontPage.Editor.Document">





<meta name="GENERATOR" content="Microsoft FrontPage 4.0">


<meta name="Microsoft Theme" content="boldstri 000, default">
<meta name="Microsoft Border" content="tlb, default">
</head>


<body >
<div id="slidemenu" class="slidetabmenu">
<ul>
<li>
<a href="news.htm" title="News" rel="newsdrop">
<span>
News
</span>
</a>
</li>
<li>
<a href="products.htm" title="Original Productions" rel="productsdrop">
<span>
Original Productions
</span>
</a>
</li>
<li>
<a href="services.htm" title="Fan Based Productions" rel="servicesdrop">
<span>
Fan-Based Shows Productions
</span>

</ul>
</div>

<br style="clear: left;" />
<br class="IEonlybr" />

<!--NEWS DROP MENU -->
<div id="newsdrop" class="dropmenudiv_c">
</a>
<a href="news/about_us.htm">About Us</a>
<a href="news/newest_offerings.htm">Newest Offerings</a>
</div>
<!--END NEWS DROP DOWN MENU -->


<!--Original Productions DROP MENU -->
<div id="origdrop" class="dropmenudiv_c">
<a href="orig/new_page_2.htm">Of Kings and Time Travelers</a>
</div>
<!--END Original Productions DROP DOWN MENU -->


<!--FAN BASED PRODUCTIONS DROP MENU -->
<div id="newsdrop" class="dropmenudiv_c">
<a href="services/serv02.htm">Star Trek: DAW</a>
<a href="services/serv01.htm">Andromeda</a>
</div>
<!--END FAN BASED PRODUCTIONS DROP DOWN MENU -->

<script type="text/javascript">
tabdropdown.init("slidemenu")
</script>

<p>&nbsp;</body>

</html>






i dont know how to attach.....sorry

alexjewell
07-17-2007, 02:19 PM
For some reason, the following lines were messed up. Change them to:



<!--NEWS DROP MENU -->
<div id="newsdrop" class="dropmenudiv_c">
</a>
<a href="news/about_us.htm">About Us</a>
<a href="news/newest_offerings.htm">Newest Offerings</a>
</div>
<!--END NEWS DROP DOWN MENU -->


<!--Original Productions DROP MENU -->
<div id="productsdrop" class="dropmenudiv_c">
<a href="orig/new_page_2.htm">Of Kings and Time Travelers</a>
</div>
<!--END Original Productions DROP DOWN MENU -->


<!--FAN BASED PRODUCTIONS DROP MENU -->
<div id="servicesdrop" class="dropmenudiv_c">
<a href="services/serv02.htm">Star Trek: DAW</a>
<a href="services/serv01.htm">Andromeda</a>
</div>
<!--END FAN BASED PRODUCTIONS DROP DOWN MENU -->


See, the id of the drop menu itself must match up with the rel of the link that goes with that drop menu. Make sense?

FleetAdmiralO
07-17-2007, 06:02 PM
Hold, on *looking up in books from the library* hmmm. I think so, let me get back to you....

FleetAdmiralO
07-18-2007, 07:16 AM
Yeah, I made the changes....but that didn't fix the script problem....it says that tabdropdown is not defined....help please.

By the way...totally cool that your 15 and you know this code soo well...awesome website too.

alexjewell
07-20-2007, 05:58 PM
Can you link me to the page so I can see the error and code and everything?

And thanks. I've been doing it since I was 12. :)

FleetAdmiralO
07-22-2007, 09:34 AM
yeah.....can't....the site's not up yet....give me your email or something on pm and i can send you the file? I decided to save money on my part and not putting up the file on the net until I got a podcast to put up there...since the podcasts tend to take like a month to finish up properly.....if you catch my drift........

Sliight
07-22-2007, 10:38 AM
FleetAdmiral,

I use Front Page 2000. I decided to create a site for my business. My complete and total past experience with creating a website was 10 years ago using front page, and knowing no HTML. I only knew from looking at source.

Now, this is only going to help if you're willing to invest a 4-8 hours to learn from these tutorials. These tutorials took me from a hideous website created by front page, to this. http://www.usejeff.com (note my forum join date is July - I gained access to these tutorials and built the website this month)

One thing I will say, is that I still continue to use front page. However I only use it for the HTML editor, and publishing the pages to the web. I completely ignore the preview window, and normal windows. One other key side note, is that if you copy code from a website like this one. First copy the code into notepad, "then" copy it into the HTML editor of front page. If you don't do this, you'll get a bunch of jumbled crap.

Now if you're willing to learn, start here: http://www.echoecho.com/school.htm You'll want to do the entire HTML tutorial, and you could quickly browse through the javascript one to get familiar with it.

Once you get familiar with this (go through the entire HTML tutorial), then move on this this CSS tutorial: http://www.westciv.com/style_master/house/index.html

You will want to download the "Style Master demo" while you learn your CSS. The tutorial to me was outstanding, and the hands on tutorial really helped. CSS is cascading style sheets. Really the benefit to this is being able to place anything anywhere, and control how things look inside this placement. I payed the $60 for the program to use in the future, but I felt inclined to buy it just from how great the tutorial was.

I'll leave it to you how much time you wish to invest, or how detailed you want your site to be.

Good luck!

FleetAdmiralO
07-22-2007, 11:35 AM
Thanks man, I took a simple glance through them (going to back to learn for sure!!!!!) and man, they looked really helpful....thanks alot!

FleetAdmiralO
Giant Gnome Productions