HTML - Looking For This Dhtml Object

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.

Lets say I create a DHTML menu in a third party app and applied it to about 10 pages (htm)...

Lets say I want to change the menu, such as the color and also add to the submenu...

Will it apply to every page?

How is this possible?

Thanks a LOT.

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 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

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

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

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

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!

Hello,

I am wondering if something is possible.. and if it is, how I would go about accomplishing the desired result..

This is a sample page to illustrate the problem
http://comp.uark.edu/~bcagnin/test/index.html

Is there a way to resize the object from a link that is within the website being displayed in that very same object??

Also, I am willing to use iframe if there is a solution that can be found with that... Thanks!!

Tyrick

I am using another persons code for our band's MySpace.( With some of my own) I am trying to display the shows section and the music player. When i insert the shows section the music player always displays behind the shows section.

It is displaying the music player within the limits of the shows section. How do i make the music player seperate?


Here is the code for the entire site with the music and show sections bolded.

Code:

<i class=i>!--START CODE IN BAND MEMBERS --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbS8=">
myspace code tutorials by Eileen</a>
!-Close 3 layers of cell/row/table. This puts our Div ONE table deep.
</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<i class=i>!-Create and size our div. We will never close this div. It will close when the containing table closes-! </i> 

<i class=i>!!! MODIFY width to the SAME width as your core image !!!</i>

<div class="myCoreDiv" style="position:relative; top:0px; width:799px; height:auto; border:2px green solid;"> 

<i class=i> when DONE editing CHANGE the border:2px to border:0px or change the magenta to the color you want your border.----!</i>

<i class=i> !----START CUSTOM CONTENT BLOCK 1----!</i>

<img src=http://i42.tinypic.com/16iz2j5.jpg>
<img class="grid" src="http://i11.tinypic.com/4pczehk.gif" style="position:absolute; top:0px; left:0px;">


<span class="off">!-START COMMENT FORM-!</span>
<div class="myCommentFormD">
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="445328869" type="hidden"/> 
<textarea name="f_comments" class="myFormBox"></textarea>
<center>
<input type="submit" value="Post Comment" class="myPostCommentButton"/>
<input type="reset" value="Clear" class="myClearButton"/>
</center>
</form>
</div>
<span class="off">!-END COMMENT FORM-!</span>



<i class=i> !----END CUSTOM CONTENT BLOCK 1----!</i>

<i class=i>!-Open 3 layers of table/row/cell-!</i>
<i class=i>!-IF do NOT want any content from my Right side, I can use i instead of L1-!</i>
<table class="L1" ><tr><td>
<i class=i>!-The below class i hides the remainder of the general table-!</i>
<table class="i"><tr><td>
<table class="i"><tr><td>
<style>.i {display:none}</style>
<i class=i>END CODE IN BAND MEMBERS</i>




<i class=i>!START code in Influences !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9iYW5kLWhpZGUtYWxs">MySpace Band Hide Everything</a>
</i>
<style>
.i, div.clearfix i i i {display:none}
{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}

{! restore any images displayed inside our div.  You may want to use block instead of inline for some images. !}
table td div.myCoreDiv img, table td div.myCoreDiv table td img, 
table td div.myCoreDiv div img {display:inline;}

{!OPTIONAL restore image on maroon nav bar, we could  use a.navbar  img!}
div table td a.navbar img {display:block;}

{! removes most content and the space it occupied !}
table table table {display:none}

{! minimize the remaining main page content that can not be removed without effecting the ad and menus !}
table table td { height:0px; margin:0px; padding:0px;}

{! restore my div. !}
table div.myCoreDiv {display:block;}
{! restore div with Comments !}
table div.myCoreDiv div.myDclassFC {display:block;}
table div.myCoreDiv div {display:block;}

table table br {display:none;}
table table table br {display:block;}

{! OPTIONAL decrease space between bottom and bottom menu, and between bottom menu and cc thing !}
{! does not work in Safari !}
table div br {line-height:4px;}
{! reverse effect on custom div !}
table div.myCoreDiv br {line-height:11px;}

{! remove default background coloring !}
table table, tr, td {background-color:transparent !important}

{! ONLY if you want to remove the blue behind the ad banner AND the maroon !}
div.profileWidth table, div.profileWidth td {background-color:transparent !important}
div table {border-bottom:none !important;}

{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}





<style>
{!- shows -!}
table table td.text div {position:absolute; width:440px; height:130px; overflow:scroll; overflow-x:hidden; top:30px; left:415px;}
{!- UnDo effect on Div in Friend and Comment spaces -!}
table table td.text table div {position:static; height:auto; overflow:hidden}
table table td.text div.commentlinks {display:none;}
table table td.text div table {display:block}
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table table td.text div table td, table table td.text div table {width:425px;}
table table td.text div table table {width:100% !important}
{!-adjust below value as needed-!}
table table td.text div table table table {width:40% !important}
</style>

<style>
{!-music player-!}
table table td.text div object {position:absolute !important; top:196px !important; left:100px}
table table td.text div object object {position:static !important;}
</style>

Here's the link to my test web page with a short slideshow embedded in it.
http://www.prestigekitchensandbaths.com/test/index.html

The slideshow movie is in FLV format, and it works fine in FF, Opera and Safari. Funny thing is that it works fine in IE when I test it on my desktop (Windows XP), but it won't work at all when I test it in IE on my laptop (Windows 7). Any idea why that would be?

I'm using the FLV Player to play my video, as it gives me nearly all the parameters I was looking for, it doesn't require any scripting, and it's open source. Also, it seems to work with all the major browsers while not forcing me to use the EMBED tag, which is deprecated now and shouldn't be used. But it still boggles my mind why it would work in IE on one of my computers but not on the other.

I have an object (swf animation). Now, i would like to have an image directly under that object (touching each other).

Im getting an error in line 44 of my code, my body tag with upload in it. The error says object expected. Any advice?

Code:

<HTML>
 <HEAD>
 
  <TITLE> **** </TITLE>
<SCRIPT type="text/javascipt">
var Color= new Array(9);
Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";
Color[8] = "88";
Color[9] = "77";
Color[10] = "66";
Color[11] = "55";
Color[12] = "44";
Color[13] = "33";
Color[14] = "22";
Color[15] = "11";
Color[16] = "00";
function fadeIn(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0000";   
where -= 1;
setTimeout("fadeIn("+where+")", 15);
} else {
setTimeout('fadeOut(1)', 15);
   }
}
function fadeOut(where) {
if (where <=16) {
document.bgColor="#" + Color[where] +"0000";
where += 1;
setTimeout("fadeOut("+where+")", 15);
} else {
setTimeout("fadeIn(16)", 15);
   }
}
</SCRIPT>
 </HEAD>
<body onLoad="fadeIn(16)">
<p></p>

</body>
</HTML>