Log in

View Full Version : Drop Down Tabs not quite working- please help, thanks


Rejang
02-25-2008, 06:19 AM
1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I have try this cool code and effect on my still-born blog. I am not a coder at all so I am trying to do what I think is the right approach. I uploaded the css and js codes as well as the media (gif) files which I obtained from the link into a googlepages site where I can then link to in the html codes of my blog.
After changing the links & putting in the codes, I managed to get the header but they are not wrapped in the DIV. Furthermore they are at the bottom of the blog instead of at the top, below the header- please see bottom of http://testing-new-layouts.blogspot.com/

I have pasted the codes of my blog here- can someone please advise where/what did I do wrong??
I apologise if this is not the right way to ask questions here. Thanks.

---------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad" value="#99aadd">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="descriptioncolor" description="Blog Description Color"

:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
<title>Dynamic Drive DHTML Scripts- DD Tab Menu Demo</title>

<script type="text/javascript" src="http://highlyinteractive.googlepages.com/dropdowntabs.txt">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.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="http://highlyinteractive.googlepages.com/ddcolortabs.css" />

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}


:
:

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
:
:

]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing new layouts (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar_right' preferred='yes'>
<b:widget id='Text1' locked='false' title='Disclaimer' type='Text'/>
</b:section>
<p><a href='http://www.blogcrowds.com/'>Blogcrowds Blogger Template</a></p>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
:
:
</div>

</div></div> <!-- end outer-wrapper -->
<div class='ddcolortabs' id='colortab'>
<ul>
<li><a href='http://testing-new-layouts.blogspot.com'>Home</a></li>
<li><a href='http://testing-new-layouts.blogspot.com' rel='dropmenu1_a'>1st Galleries</a></li>
<li><a href='http://testing-new-layouts.blogspot.com' rel='dropmenu2_a'>2nd Galleries</a></li>
</ul>
</div>

<div class='ddcolortabsline'/>
<!--1st drop down menu -->
<div class='dropmenudiv_a' id='dropmenu1_a'>
<a href='http://testing-new-layouts.blogspot.com/search/label/closeup'>closeup</a>
<a href='http://testing-new-layouts.blogspot.com/search/label/crowd'>crowd</a>
</div>


<!--2nd drop down menu -->
<div class='dropmenudiv_a' id='dropmenu2_a' style='width: 150px;'>
<a href='http://testing-new-layouts.blogspot.com/search/label/person'>person</a>
<a href='http://testing-new-layouts.blogspot.com/search/label/temple'>temple</a>

</div>

<script type='text/javascript'>
//SYNTAX: tabdropdown.init(&quot;menu_id&quot;, [integer OR &quot;auto&quot;])
tabdropdown.init(&quot;colortab&quot;, 3)
</script>
</body>
</html>
ddadmin
02-25-2008, 07:00 AM
Well, the positioning of the tabs are simply based on where the HTML for them are placed on your page. Right now, somehow, they're at the bottom, hence that's where they appear. You need to move this chunk of code to the head where desired.

The real problem right now though is how the tabs don't work (drop down). This is because of this chunk of code on your page:


<script type="text/javascript" src="http://highlyinteractive.googlepages.com/dropdowntabs.txt"></script><!-- CSS for Drop Down Tabs Menu #1 --><link rel="stylesheet" type="text/css" href="http://highlyinteractive.googlepages.com/ddcolortabs.css" />

The surrounding code is a real mess frankly, but to the issue itself, try reuploading drodowntabs.js, and preserve its extension, so it's not .txt:


http://highlyinteractive.googlepages.com/dropdowntabs.js

If that doesn't work, it's highly possible googlepages.com has disabled hot linking of .js and .css files called from another host. You should try uploading these two files directly to your own server (on blogspot.com), and change the references above to match.
Rejang
02-25-2008, 07:47 AM
Hey,
Thanks for the prompt reply. I guess the problem could be the googlepages not allowing hotlink. Can I then put the codes in the .js and .css files in the blog codes itself- ha, will be more messy!!

To do so, I simply change the reference to the location of the codes?

Thanks very much.
ddadmin
02-25-2008, 08:08 AM
Well, yes, you can actually copy the entire code from the two external .js and .css file, and paste them onto your page directly. Just be sure to wrap the .js file contents in <script></script> tags, and the .css file, in <style></style> tags.
Rejang
02-25-2008, 09:46 AM
yes- another question. I supposed to upload those gif files in the media folder as well? I cannot see any links in the codes to them cos if they are, I need to change the links too. Thanks.
Rejang
02-25-2008, 04:49 PM
OK- finally resolved the .js and .css files and able to host them elsewhere. But I am still trying to figure out the media (gif) files- whether I need to upload them and link them somewhere? Help- thanks.
ddadmin
02-25-2008, 10:18 PM
Regarding the images for the script, yes, you'll need to upload them to a server as well, then inside the .css file, find all references to them, and update the paths accordingly. For example:


.ddcolortabs a{
float:left;
color: white;
background: black url(http://mysite.com/media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(http://mysite.com/media/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

"
"
Rejang
02-26-2008, 02:00 AM
Great!! Now I have all the elements together. I will sit down to try my hands again on this over the next couple of days.
Thanks to ddadmin for all your valuable contributions. Will update progress after trying.