|
JavaScript - Can't Get Expanding Menu To Start Collapsed
Hi.
I am trying to learn how to make a Javascript menu for my webpage. I have made the menu and it works. I can collapse a submenu when I click on the menu header. I wan't it to start collapsed and then open a menu item when you click on it. I have figured out that it have something to do with the function Closeall(). But can't figure out what. Perhaps someone in here can help me or perhaps help me make a better menu. <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>IT-Menu</title> <script type="text/javascript" language="javascript1.3"> function closeall() { var divs=document.getElementsByTagName('div') for(var i=0; i<divs.length; i++) divs.style.display='none'; } function clicked(element) { var div=document.getElementById(element) if(div.style.display=='none') div.style.display='block'; else div.style.display='none'; return; } </script> </head> <body> <a href="#" onclick="clicked('MENU1')">MENU1</a><div id="MENU1"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> <br /> <a href="#" onclick="clicked('MENU2')">MENU2</a><div id="MENU2"> <a href="#">SUBMENU1</a> <br /> <a href="#">SUBMENU2</a> </div> </body> Similar TutorialsI'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Code:
function initMenu(){
var menus, menu, text, a, i, CurrentID;
menus = getChildrenByElement(document.getElementById("menu"));
CurrentID = document.getElementById("auto");
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
//CurrentID.showMenu; thought this would work but it doesn.t
}
I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet. I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this: Menu Item 1 [Click to expand] -Sub Item 1.1 [Click to expand] -Sub Item 2.1 [Click to get to page] Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please? URL: http://dinotamermeep.blogspot.com/p/blog-archive.html Thank you, -Meepski Hi All, My apologies if this is answered in a previous post but my searches didn't turn up a solution. I need an expanding, vertical menu, virtually identical to: http://www.dynamicdrive.com/dynamici...enu-glossy.htm but with one change. The menu subheaders, ie, "CSS Examples, CSS Drives" are currently just text and their background is defined in the CSS. I need to make these menu subheaders rollover graphics instead of text. It is easy to replace the submenu items themselves with rollover graphics instead of text, but the menu subheaders have defeated me. Is there a cunning solution to this? Regards Gary Hey, I'm having trouble with this site http://bit.ly/hL0u0w... If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections. This is the javascript Quote: <script type="text/javascript"> $(document).ready (function() { $('#link1').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); $(document).ready (function() { $('#link2').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); $(document).ready (function() { $('#link3').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); }); </script> and here is the html Quote: <div id="subnav4"> <ul class="navigation4 pagination"> <li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li> <li style="display: none;" class="dome slide"><a href="#">corporate id</a></li> <li style="display: none;" class="dome slide"><a href="#">branding</a></li> <li style="display: none;" class="dome slide"><a href="#">brochures</a></li> <li style="display: none;" class="dome slide"><a href="#">direct mail</a></li> <li class="tab4"><a id="link2" href="#">heading 2</a></li> <li style="display: none;" class="dome slide"><a href="#">email marketing</a></li> <li style="display: none;" class="dome slide"><a href="#">websites</a></li> <li class="tab4"><a id="link3" href="#">heading 3</a></li> <li style="display: none;" class="dome slide"><a href="#">advertising</a></li> <li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li> <li class="tab4"><a id="heading 3" href="#">exhibitions</a></li> </ul> </div> Hope someone can help with this! Many thanks! I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list. All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too. Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding! Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
with Code: var menu=new menu.dd("menu");
menu.init("menu","menuhover");
used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom I have the code below that gives the ability to open and collapse sections. I don't know too much javascript and found this code online. I tweaked it to serve my purposes but it doesn't do one thing. I would like all of the areas to be collapsed when the page is opened. How would I tweak the code below to do that? 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>
<title>Untitled Page</title>
<script type="text/javascript">
function ExpandCollapseTable1(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable2(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable3(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable4(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
</script>
</head>
<body>
<table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=red>
<tr onclick="ExpandCollapseTable1(this);" style='cursor:pointer;'>
<td> I</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightgreen>
<tr onclick="ExpandCollapseTable2(this);" style='cursor:pointer;'>
<td> A</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=yellow>
<tr onclick="ExpandCollapseTable3(this);" style='cursor:pointer;'>
<td> i</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightblue>
<tr onclick="ExpandCollapseTable4(this);" style='cursor:pointer;'>
<td> a</td>
</tr>
<tr>
<td bgcolor=orange> CONTENT CONTENT CONTENT</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
FYI, I've also posted this question at: http://www.tek-tips.com/submitpost.cfm?pid=216 http://www.webdeveloper.com/forum/sh...60#post1106660 Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } Hi, I am trying to do a FAQ section on a site. New to this stuff. What I would like to do is: 1.Question 2.Answer (Question and part of an answer are visible) 3. A button for expanding/collapsing. I am trying to do a button that changes on hover,and when text is expanded image changes, then on hover it changes again and if I press I collapse it to the original image). What I got so far is this: Code: <head>
<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
#test {background-color: red;}
</style>
<script language="javascript" type="text/javascript">
var divID = "MyDiv";
function CollapseExpand() {
var divObject = document.getElementById(divID);
var currentCssClass = divObject.className;
if (divObject.className == "divVisible")
divObject.className = "divHidden";
else
divObject.className = "divVisible";
}
function changeImage()
{
document.images["Button1"].src= "less.png";
return true;
}
function changeImageBack()
{
document.images["Button1"].src = "more.png";
return true;
}
</script>
</head>
<body>
<div id="test">
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div id="MyDiv" class="divHidden">
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
</div>
</div>
<A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" input id="Button1" type="button" onClick="return CollapseExpand()" ><img
name="Button1" src="less.png" width="81" height="42" border="0"
alt="javascript button"></A>
</body>
</html>
I tried different stuff but couldn't connect 4 images. (more.png, morehover.png, less.png, lesshover.png). Thnx in advance G. Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
};
Many thanks Liam Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options. I know the code will be straight forward, I can't work it out though. Thanks whoever can help = ) I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere. E.g. I have following declaration in the head section of html: <script language="javascript" type="text/javascript" src="java1.js" </script> My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as: var firstname="Tom"; I put document.write statement to the head of html section as: <script language="javascript" type="text/javascript" src="java1.js"> document.write; </script> ....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding. Hi all, I am looking to create this in JS/DHTML/CSS that I found in a flash script you can view he http://www.melodicmedia.com/dev/expa...ash_flash.html I want the red expanding and contracting circle to be on top of a image so it only shows the parts of the image that the circle is around. Any help you have would be much appreciated =) Thank you =) Light and Love and Healing to you, -Patrick Arden McNally http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. Hi all, I'm using the scripts from Dynamic Drive http://www.dynamicdrive.com/dynamici...edcollapse.htm to create a sliding collapsing/expanding div. I need to modify it slightly so instead of an image for the toggle, it has text hyperlink - changing from "Show More" to "Show Fewer". Can anyone help? Thanks Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with. Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it. The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK. The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible. I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction". I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish") Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function? Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL? I think option 1 sounds better..... Again, I need help on making this form pop up on each table row. Any help or direction would be greatly appreciated. Sample code follows: Code: <table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Email</th>
<th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
<td onclick="javascriptfunction(this)">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table title="myTable" style="margin: auto; display:hidden">
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
</tr>
<tr>
<td class="header">Some Field: </td>
<td class="selector"><select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
<tr>
<input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>
Any help would be greatly appreciated =) Hi guys I'm new to the forums here. I want to learn how to use Javascript and AJAX along with jquery or prototype to develop a dynamic website. For example, I like how www.dropbox.com works. Everything has a transition, and you can drag and drop things around which is what I like. Ultimately I hope to be able to develop a dynamic website with social networking elements. I know my goals are lofty, but where should I get started and what should I learn. I have some cursory programming experience with visual basic, fortran and html. Any particular books that would help me learn. Ideally a book would have some programming "challenges" or small projects that would give me some experience. Thanks hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming
Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe http://net.tutsplus.com/tutorials/ja...ck-navigation/ I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out. The problem I have is that I need the images to be transparent initially when they are in the stack. You can see the problem he http://bit.ly/cdelJu Here is the javascript for this: Code: $(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack2>img').toggle(function(){
var vertical = 0;
var horizontal = 90;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
vertical = vertical + 40;
horizontal = (horizontal+.75)*1.15;
});
$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingBottom: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingBottom: '35px'});
});
// Stacks additional animation
$('.stack2 li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});
and here is the css: Code: /* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute; }
.stack2 ul li img { border: 0; }
.stack2 ul li span { display: none; }
.stack2 .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}
#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }
/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }
annd the html: Code: <div class="stack2"> <img src="images/stacks/stack-down.png" alt="stack"/> <ul id="stack2"> <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li> <li><a href="#"><span>All Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li> <li><a href="example3.html"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li> <li><a href="example2.html"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li> <li><a href="index.html"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li> </ul> </div> Any help is greatly appreciated! |
|||||||