HTML - Dhtml Dropwdownmenu Hides Firefox Layers

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.

What's up all,

I just downloaded the Suckerfish HoverLightbox Redux DHTML drop down menu files and I am not sure where to put them or how to edit them?

I am an ecommerce guy and while a do know a tiny bit of html code you could say I am html challenged. I really need to get this menu up and running. If someone could help me figure out how to configure these files I would really appreciate it.

Thanks,

J

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

Hello,

I'm looking for a DHTML script that will combine a floating menu with a slide in menu.

Here's an example of a floating menu: http://www.dynamicdrive.com/dynamici...staticmenu.htm

Here's an example of a slide in menu: http://www.dynamicdrive.com/dynamici...lideinmenu.htm

Does anybody know where I can get a menu that combines these features?

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

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

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!

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!

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

Theoretically, a webpage is made up of layers, of which some things can go on top - or bottom - of others. Does anyone here know if it is possible to change the position of them?

Thanks

hello all..

i am pretty new to web creation, so this question might be pretty studpid..

Anyhow, I am using layers in my website. But everytime i view it on a browser (safari, firefox, ie) they are all over the place... Sometimes its just a small displacement or something.. but the layers just dont stay where i specify them in dreamweaver.

I was wondering if anyone would be able to help me fix this problem? or if there is workaround to this..

thanks

http://www.zouklambada.com/eventsNew.asp

This is the page I'm working on. Basically i need it to work in the following way.

When you click on all the images at the moment, it is working fine (sort of)- each time you click, a layer comes up over the three small ones - BUT i need the small images to stay in position and these big images to go ontop (ie. you dont see the small images in that same row - they should not jump to the bottom. There will be more rows. When a big image is displayed in first row, the second row must slip underneath.

Hope this makes sense!
Please help!

Hello, I have an image that I want to make "float" above a small green bar, so that it sticks out above it. I have been able to achieve the effect with the <layer> tag, but the problem is that it only displays correctly in Firefox and not in IE. Also, I want to avoid the layer tag since it is not universally supported.

Here is an example with the layers: http://dqnmusic.googlepages.com/indexenlayer.html

Here is what it looks like when I try to avoid layers:
http://dqnmusic.googlepages.com/indexen.html

Is there away around the layer tag that can still achieve the effect I want?