JavaScript - I Can't Seem To Animate My Menu

I'm using the below code to expand and collapse a DIV on alternative clicks


Quote:
Code:

<script>
 function Tog(id){
var x=document.getElementById(id);
if(x) {
        if(x.style.display=='none') 
                                          { x.style.visibility='visible';
                                           x.style.display='block';
                                          }
          else{ x.style.visibility='hidden';
                  x.style.display='none';
               }
         }
                          }
</script>

<a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
<div id="togme">
Content inside this DIv will hide and show on alternative clicks
</div>

When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet.

I tried playing around with the below code

Code:

 
	 Quote:

	

	
		

			
				<script>
function show() {

var curheight=0;

var fullheight=document.getElementById("hidden").offsetHeight;
while(curheight<fullheight) {
curheight=curheight+10;
document.getElementById("hidden").style.height=curheight+"px";
document.getElementById("hidden").style.display="block";
// SET DELAY HERE FOR EVERY INCREMENT IN VALUE OF NEW HEIGHT
}
}
</script>
<i onclick="show()" >Click me</i>
<div id='hidden'  style="display:none;">
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
</div>
			
		

	
	

Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this

So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

My CSS for the images has this class for an invisible border:
Code:

border: solid 1px rgba(242, 112, 17, .0);

I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

Code:

$('.item li img').animate({'opacity' : 1}).hover(function() {
					$(this).animate({'borderOpacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 1});
				});

But I obviously am doing something wrong.

Any help would be greatly appreciated. Thanks!

Hi i have a code like this in my web site to slide a panel from left to right:
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {


$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;

e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

---CSS---

#panel {
width: 864px;
height: 369px;
position: absolute;
top: 195px;
left: -856px;/*-856*/
z-index: 200;
background:url('../images/bg_panel.png') no-repeat;
padding:20px 0 0 18px;
text-align:left;
}
#panel-tab {
width: 21px;
height: 371px;
position: absolute;
top: 9px;
left: 856px;
background:url(../images/panel-arrw-show.png) no-repeat;
text-decoration: none;
color: #FFFFFF;
text-indent:-999999px;
}

What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open..

Any help

Sam

I want to design my website so that when a page loads javascript will smoothly animate it from a reference point to the top of the page. I visited an Apple store recently and was looking at the encased ipods next to the displayed product and the one next to the iphone has a mini site and after pressing the compare button at the bottom of the page I saw this animation. Below is a link to the video i recorded showing what I am trying to achieve. Any and all help will be appreciated. I have found other script that animate on page load but none of which does it from a reference point like the following video. I'm not sure how the page loads at that point either. If someone could help with that as well I would greatly appreciate it. Thanks in advance.

http://demetriusmcclain.elementfx.co...pageScroll.MOV

Hey CF.

I'm not great with JS, but I'm trying to build something pretty simple and even that's out of my league. I have a layout with multiple fields that need to be filled randomly from an array on click.

I have an array with a bit of jQuery that randomly reloads one field on click, but I need multiple fields filled at once from the same item in the array.

Code is below. I grabbed it from a tutorial somewhere, and have made some modifications.

Code:

<Script>
$(document).ready( function() {
    var foodArray = [
        '1',
        '2',
        '3',
        '4',
        '5'
    ];
    $('.foodtype').loadText( foodArray, 10000 ); // ( array, interval )
});
// custom jquery plugin loadText()
$.fn.loadText = function( foodArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            obj.empty().html( random_array( foodArray ) );
            obj.fadeIn( 'slow' );
        });
        timeOut = setTimeout( function(){ obj.loadText( foodArray, interval )}, interval );
        // reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
        $("#text-reload").click( function(){
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( foodArray, interval );} // animation check prevents "too much recursion" error in jQuery
        });
    });
}
//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

</script>

That outputs one of the array items into a <span class="foodtype">. What I need is another value next to say "1", eg '1, Blue' and print "Blue" to another span.

Can anyone help?

The other issue I have is the divs are snap resizing, is there a way set them to animate smoothly? The total height will be variable depending on the combinations that display.

Cheers guys, hope someone can help.

Hey,

I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below).

I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown.

Code:

var descurrent = ($('div#description ul li.show')?  $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;

Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown

HTML CODE:
Code:

<div id="description">
					<ul>
						<li class="show" id="1">blahblah
						</li>
						<li id="2">
etc
						</li>
					</ul>

The jQuery i'm trying to get to work is:
Code:

//Hide the current image
		descurrent.animate({opacity: 0.0}, 1000)
		.removeClass('show');
	
		//Show new image
		
		$(desclass).addClass('show')
		.animate({opacity: 1.0}, 1000);

Note: the class "show" has a higer z-index

Thanks in advance,
Hope this can be resolved soon, been giving me headaches!
Cheers,
John

Hello,
I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2
from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2.
I am new to HTML/javascript programming I really appreciate your help

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.

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

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

? how would i make it for a menu so you could press it and it would go down to click on a link.

Hi there,

I am trying to create "sideways" sub menus off of my main vertical menu images.
(Something like this example: http://netweblogic.com/demos/ddm/vddm-nomoo.htm
but in the place of Menu Item 1, Menu Item 2, Menu Item 3 there would be roll over images.)

The main vertical menu items I have are rollover images.
I would like the sub menu to appear when you hover over the main menu item.

When I attempt this using the above example, all of my other CSS and JS does not work.

Any help on how to link my rollover menu images to the sub menu would be greatly appreciated! Thanks in advance!

Here is the code for my menu (I have only included 2 menu items here, if you need more info please let me know):


Code:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">

<div id="wrapper">
<div id="header">
<h1>&nbsp;</h1>
</div>


<!-- Main content -->
<div id="content">
<div style="text-align:center">
       <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
   </div>

   <script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>

<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>

Here is my CSS code for the menu, not sure if this is where the issue is?

Code:

/* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0; 
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}

#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}

#navcontainer a
{
display: block; /* achieves rollover */

width: 250px; /* list width */

text-decoration: none;

}

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks