HTML - Html & Dhtml?

So, Im looking for some code that acts like dhtml tabs. I have a webpage that I want to add a column on the right that has like 5 tabs. Clicking on each tab you get different content without leaving the actual page.

Like this I suppose:
http://www.cnn.com/

In the "Watch Video" section. You can tab between Most Popular and Best Video. thats the idea.

Any good solutions.

The current solution I have works, but is sloppy. Im hoping for some better code.

Any help would be appreciated.

Thanks, Mac

I have been trying to piece something together with a traditional DHTML show hide, but i cannot get it to work properly, so i trashed it.

What I'm trying to do seems very simple. I have 2 videos I want to have on 1 page. I don't want to stack them, I just want to give the user a text link choice on which to choose. So the page would load with a generic looking video player. Which would switch out once you picked a video.

HTML Code:

<strong>Select: </strong><a href="#">video 1</a> | <a href="#">video 2</a> 
<div id="generic">generic page</div>
<div id="video1">vid1</div>
<div id="video2">vid2</div>

I kinda got it to work in an earlier version, but it wasn't perfect. It would end up showing video1 properly, but when you clicked on video 2 it would show both. It wouldn't hide video 1.

any help would be much apprecaited.

Hello everyone. I have a web page that contains a long form. One of the fields, "Show Date", has a <button> that triggers a DHTML Date Selector widget I downloaded. However, the formatting on the selector is not as desired--I recently placed the following line of CSS code in my shared CSS file:
Code:

div { background-repeat: no-repeat; position: absolute; visibility: visible; }

I know for a fact that this line is responsible for the formatting bug, but since I have hundreds of div's that I need formatted with the no-repeat, absolute positioning, and visible attributes, this messes up my date selector (just the absolute).

So basically my question is this: Is it possible to keep my single line of super-formatting all my DIVs while retaining the desired look for the Date Selector? (Possibly a line of CSS for the selector??)

Any help would be greatly appreciated.

Thanks!

I have a general question about something I'm trying to incorporate into a site. I don't have a link to show since I haven't figured out a good way to do this yet.

I have a page (page.html) with a button. The button brings up a layer with j01.html in it. I want to be able to click "next" in j01.html and have it call up j02.html in the same window. A next button in j03.html will bring up j04.html and so on, for about 15-20 pages. A "back" button will go backwards through the same sequence, and an "index" button will bring up an index of those pages within that popin. Basically, it will be like a minisite within the grander site for that little area. What's a good way to do this?

I'm hoping there's an easy way to code the link so that j02.html will replace j01.html in the same layer and so forth, leaving the page.html alone and that it won't require some super huge scary amount of scripting. This is the first time I'm trying to figure any of this out and it makes my head hurt. Thanks in advance for your replies.

-dd

Hey guys I am build ing a site and wanted to no the best solution for a drop down menu system.

I read somewhere that 10% of people of javascript disabled so they would not be able to use the javascript dropdown.

Is the best option to use dhtml for this so it will work in all browsers old and new.


Matt

HELLO ALL! I'm new here. Thank you in advanced.

I have a dthml menu on my main page. I would like to apply this same menu to all my other web pages with making one update. Currently I have the same code pasted and and script on all my product pages. If I have any changes to make to the menu I have to go and update all 20+ pages with the changes of the drop down menu.

on each of my product pages is there any way to reference this one dthml menu to use...I'm hoping this is making sense? I'm using dreamweaver CS3 and I used Sothink's DHTML MENU creator.

I'd like it that when I make a change to the dhtml menu it would apply to all my product pages.

Thank you

Chris

I have this menu to rollover... and I cant seem to get the positioning correct. All I want to do is shift it to the right about 100px so that it doesnt cover up the rest of the menu items.

I will paste the CSS, javascript, and html code here... I have tried positioning it via CSS and thats not working :/ Is there a way to do it in the java code? Or if you want you can say how you would do it in CSS... maybe I just was doing it wrong.


CSS
Code:

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ 
color:#000000;
background-color: #cc0000;
}

JAVA
Code:

<script type="text/javascript">

var menu1=new Array()
menu1[0]='<a href="group.html">About (group)</a>'
menu1[1]='<a href="officers.html">Current Officers</a>'
menu1[2]='<a href="officerjoin.html">Become an Officer</a>'

var menu2=new Array()
menu2[0]='<a href="meetings.html">Meetings</a>'
menu2[1]='<a href="alumniday.html">Alumni Day</a>'
menu2[2]='<a href="industryday.html">Industry Day</a>'
		
var menuwidth='165px'
var menubgcolor='lightyellow' 
var disappeardelay=50  
var hidemenu_onclick="yes" 


var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(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;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

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

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

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

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

HTML
Code:

<li><a href="events.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Events</a> </li>

Any help would be appreciated! Thanks!

Hi,

I created a new website that works great in Internet Explorer. When I tried it in Firefox I had a few problems: my layer widths appeared differently and I was unable to click on any links on the page.

I was able to fix the widths of the layers by using conditional comments, however I am unable to fix the problem with the hyperlinks.

I think the problem is caused by the DHTML vertical dropdown menu covering up the other layers--because when I hide the menu layer and test it in firefox I am able to click on the hyperlinks and use my overflow scrollbars, etc.

If I move the menu behind the other layers, the menu becomes hidden.

Is there a solution to this problem that will allow me to keep the DHTML menu without covering up the other layers on the page?

All help is appreciated.

Thanks,

James

I have been considering using some DHTML to make an expandable/collapsable block of text.. see:: http://kilbad.com/DEVELOPMENT/expand.php

This page does validate at the w3c, when set to strict, as xhtml strict (I think the code has transitional right now), which I am happy about. However, what percentage of browsers will support this feature? I don't know much about dhtml.

How do you xhtml purists feel about this code in general??

Thank you so much in advance!!

Brendan

I am trying to make a page that has a DTML (dynamic expanding links), and a right hand column - Below is my code.

I want to make the right hand colunm (most common questions grey area) a fixed height.

It seems to be the length of the page as if all the menus are clicked on and opened even if they are closed.

How can I make it a fixed height regardless of how many links (dhtml) are opned or not so that most common questions are no longer than say 500 pixles.

Any suggestions would be handy. I can send code / page as its to long to paste here!


Thanks,
Ryan

My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 2
Case 2

Fiddler Home Page
Author:
Date: 2-16-2011

Filename: home.htm
Supporting files: fiddler.jpg

-->
<title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title>
</head>

<body>
<div>
<img src="fiddler.jpg" alt="Fiddler on the Roof" />
<hr />

<a href="home2.htm"><img src="home.jpg" alt="home" /></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a>
<a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a>
<a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a>
<a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a>

<br />

<a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a>
<a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a>
<a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a>
<a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a>
<a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a>
<a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a>
</div>
<hr />

<div>
<img src="slide1.jpg" alt="slide1" />
</div>
<blockquote>
<p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p>
</blockquote>

</body>

</html>

I just upgraded all my .HTML pages to .PHP . But now I noticed that when my pages pull up in the search engines like Google, Yahoo, and MSN. They still show the old .HTML links?? When they click on the webpages from the search engines results you get error 404 page cannot be found.

How can I update the search engines or add code to my page so the search engines will reflect the new .PHP pages. Also it's been over a good week since I've update to .PHP

Thank you all in advanced!!

Hi, so I'm trying to make this e-mail newsletter. It's entirely images, tables and text. So no javascript, just plain stuff. I tried attaching it as a signiture file and I had trouble sending it. It also didn't come out right.

I'm trying to avoid using a software. Its basically just a block of HTML I need to show up as the only content in an email. If you just put HTML into a email text field, it just shows the HTML code in the email as text. Any ideas?

As the title states I've been using Microsoft Word 2000 to create my web page but now want to make a simple no frills html HTML document. Is there a simple and quick way to do it ? I know I can simply create a new HTML document and then just copy and paste the links but is there a utility that can do this ?

Many thanks

Hi everyone,

I've been searching around the web trying to find out how I can send using Outlook a html and text email newsletter automatically.

I am quite happy creating html only newsletters, and text ones for that matter, but I have been digging and believe that by using multi-part code I can send to both and the recipients email client "allows" whichever version to be displayed - does this sound right?

I'm hoping to simply create the html with the relevent mime references and boundaries (dont know what they are but have seen them on enough Google'd pages to know that they mean something!) and then copy and paste into Outlook - the newsletter is only going out to a few people at a time.

Any suggestions or advice would be very greatly appreciated.

Regards

Allan