Learn VBA & Macros in 1 Week!

JavaScript - Making A Javascript Hover Menu?

Full Excel VBA Course - Beginner to Expert

Making A Javascript Hover Menu?	View Content

Hi there,

I am looking to make a javascript hover menu. Like the main hover menus at websites like...

http://www.godaddy.com

and

http://www.mediatemple.com

How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ?

Full Excel VBA Course - Beginner to Expert

How To Change My Javascript / Css Drop-down Menu From Hover To Onclick?

Similar Tutorials

View Content

Hi guys,

I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is ....

I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead.

Here is my code:

Javascript

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

HTML

Code:

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

CSS

Code:

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated!

Thanks in advance!

Adding Javascript Menu Hover Effect To Joomla Template

Similar Tutorials

View Content

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Making Another Div Appear Above The Menu Bar.

Similar Tutorials

View Content

Hello, I'm un-sure on what I should have called this topic so sorry for the possibly mis-leading topic name.

Firstly, my menu bar is attached to the top of the clients screen as seen here.

Secondly, I've been wondering how could I make it so when a button is pressed another div around 40px in height would appear above it(that div is also attached to the clients screen). For example I saw http://9gag.com/, when you click on search button in the top right hand corner the search bar appears ontop of the menu bar.

My JavaScript knowledge is very limited, I know how to make a div appear with the click of a button, but how can I make it be attached to the top of the clients browser and the menu bar in under it?

Codes

Menu bar
Code:

<ul id="menu">
	<li><a href="index.php">Home</a></li>
	<li><a href="Online.php">Server</a>
		<ul>
			<li><a href="Online.php">Server</a></li>
			<li><a href="Bans.php">Bans</a></li>
			<li><a href="Search.php">Search</a></li>
			<li><a href="rules.php">Rules</a></li>
		</ul>
	</li>
	<li><a href="http://thepilotslife.com/forums">Forums</a></li>
	<li><a href="Donate.php">Support Us</a>
		<ul>
			<li><a href="Donate.php">Support Us</a></li>
			<li><a href="Donate.php">Donate</a></li>
			<li><a href="Ad.php">Advertising</a></li>
		</ul>
	</li>
	<li><a href="Highscores.php">Highscores</a></li>
	<li><a href="Airlines.php">Airlines</a></li>
	<li><a href="Forms.php">Forms</a>
		<ul>
			<li><a href="">Forms</a></li>
			<li><a href="">Report Player</a></li>
			<li><a href="BanAppeals.php">Appeal Ban</a></li>
		</ul>
	</li>
	<?php
	echo "<li><a href='Help.php'>Help</a>";
		echo "<ul>";
			echo "<li><a href='Help.php'>Help</a></li>";
			echo "<li><a href='Help.php'>Topics</a></li>";
			echo "<li><a href='Help.php?submit=1'>Submit</a></li>";
			if(isset($_SESSION['username']))
			{
				if($_SESSION['Admin'] == 5) 
				{
					echo "<li><a href='ViewHelp.php'>New Topics</a></li>";
				}
			}
		echo "</ul>";
	echo "</li>";
	if(isset($_SESSION['username']))
	{
		echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a>";
		echo "<ul>";
		echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a></li>";
		echo "<li><a href='logout.php'>Logout</a></li>";
		echo "</ul>";
	}
	else
	{
		$path = $_SERVER['SCRIPT_NAME'];
		echo "<li><a href='login.php?path=$path'>Login</a></li>\n";
	}
	?>
</ul>

Menu bar CSS code.
Code:

#menu {
	height: 34px;
	position: fixed;
	width: 100%;
	z-index: 15;
	top: 0;
}

#menubar {
	color: #B4B4B4;
	border-top: 1px solid #363636;
	border-bottom: 1px solid #363636;
    background: #292929;
	background-image: -moz-linear-gradient(top, #292929, #333, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
	background-repeat: repeat;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubarcont {
	width: 900px;
	height: 34px;
}
#menubarcont ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menubarcont ul li {
	display: block;
	position: relative;
	float: left;
}
#menubarcont li ul { display: none; }

#menubarcont ul li a {
	  display: block;
	  text-decoration: none;
	  white-space: nowrap;
}
#menubarcont li:hover ul {
	display: block;
	position: absolute;
}
#menubarcont li:hover li {
  float: none;
  font-size: 11px;
}

#menubar ul li {
	display: inline;
}
#menubar ul li a {
	float:left;
	line-height: 34px;
	font-size: 12px;
	width: 100px;
	margin: 0 0 0 0px;
	text-decoration: none;
	font-family: 0.75em/1.5 'Lucida Grande', sans-serif;
	color: #B4B4B4;
    background: #292929;
	background-image: -moz-linear-gradient(top, #292929, #333, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
	background-repeat: repeat;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubar ul li a:hover
{
	color: #FFFFFF;
	background: #222;
}

Thanks for reading and hopefully somebody can point me in the right direction.

Help With Menu Hover Effect

Similar Tutorials

View Content

Help,

I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item.

Here is my code:

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" xml:lang="en" lang="en">
    <head>
        <title>hello</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <script src="hoverIntent.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {

            $("#nav a").append("<em></em>");
            $("#nav a").hoverIntent(function () {
                $(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
                var hoverText = $(this).attr("title");
                $(this).find("em").text(hoverText);
            }, function () {
                $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
            });

              
        });
        </script>

<style type="text/css">

body {
    margin: 0px;
}
#nav 
{
    border-top: 2px solid #000;
    border-bottom:2px solid #000;
	width: 100%;
	height: 36px;
    line-height: 36px;
	float: left;
	background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
	list-style: none;
	width: 900px;
	margin: 0 auto;
	padding: 0;
	position:relative;
}
#nav li {
	float: left;
}
#nav li em {
	background: url(images/home.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -43px;
	left: 0px;
	padding: 20px 12px 10px;
	z-index: 1;
	display: none;
}
#nav li a {
	font-family:"Georgia", "Sans-Serif";
    display: inline-block;
    text-decoration: none;
    font-size:medium;
    padding: 0px 5px;
	text-align:center;
	color: #000;
    width:110px;
    height: 36px;
    line-height: 36px;
	background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
	font-family:"Georgia", "Sans-Serif";
    display: inline-block;
    text-decoration: none;
    font-weight:bold;
    font-size:medium;
    padding: 0px 5px;
    width:110px;
    height: 36px;
    line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li><a href="#">Item3</a></li>
		<li><a href="#">Item4</a></li>
	</ul>
</div>
</body>
</html>

Thank you!

Making A Dhtml Menu/form With Js - Im Stuck.

Similar Tutorials

View Content

Hey guys!

First of all I dont want anyone to do it all for me, tho if u want to sure!
"Else please help me out with just saying where I should start."
I have done some simple dice games etc with JS and thats about it.

Anyways, Im trying to do a DHTML menu/form with JS, if u click on one option only the menu it self should change so u dont get into another HTML file coz I wanna put it all on the same file ( exept for the "SEND" link ).

(Check the pictures I uploaded)

If u press "contact" the menu it self should get larger with the contact adress bellow, And if u press SEND u should get into another contact form where u have to fill out ur information.
And when u filled out ur name the contact form should get even bigger with more questions to fill out. - Once again check the pictures I uploaded if u dont know what im talking about

pic1: http://i403.photobucket.com/albums/pp115/kyth1/send.jpg
pic2: http://i403.photobucket.com/albums/p...yth1/send2.jpg

Thx - / Jul

Dropdown Hover Menu Based On Scrolling Position

Similar Tutorials

View Content

Sorry if I'm describing this wrong. But I was wondering if there was any premade dropdown menu which opens based on what position you are on the page.

For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up.

I hope I explained that right or at least if it sounds right to someone. Any help would be greatly appreciated. If you could direct me to a resource you may know of.

Thank you for your time.

Javascript Div:hover

Similar Tutorials

View Content

Hi guys.

How would I implement this css:

Code:

.story-wrap:hover .dates

This obviously allows the .dates div to react when I hover over the .story-wrap div.

How would I select the same in javascript with this code:

Code:

$(".story-wrap .dates").hover(function () {

Because currently it just reacts when .dates is hovered over.

Cheers!

Problem With Javascript And Css :hover

Similar Tutorials

View Content

I'm working on a sliding panel menu in Javascript, there are just text items that have a different background when hovered over that is controlled in CSS, When the menu item is selected the background is changed to a blue button in Javascript and turned off when clicked again.

The first problem I encountered was the :hover pseudoclass not working, I managed to fix that with the !important attribute, but now whenever I hover back over the now selected button the :hover effect kicks back in and replaces the background for the button.

I've tried something along the lines of ul li:selectd :hover {backg...} with no luck, so far I haven't found a way to do it inside javascript.

I hope that explains it well enough, any advice is much appreciated.

Javascript Knocks Out Css:hover

Similar Tutorials

View Content

Hi everyone - im trying to make the left Product Categories background position "rollover" menu work on this page:

http://www.jaybrand.co.uk/p1.html

at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect.

i put some javascript to set the background position permantly to the roll over on click (so the user can see which one they are on) but then this knocks out the roll over effect on all other categories - it knocks out the CSS hover:

onclick="setStyle('c1','backgroundPosition','0px 0px');

it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE.

So how can i write something in Javascript to also say:

onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');

......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?

Javascript Fade Hover

Similar Tutorials

View Content

I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/.

I have found some javascript which looks like it will do the trick.

But being a graphic designer and not a web developer or anything it just doesn't work. lol

Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve.

This is my very first attempt at Javascript

here is the html:

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

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

</head>
<body>
<div style="margin:20px;" class="modules">
  <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
</div>
</body>

And the CSS:

Code:

.modules {
	margin:0px -20px 20px;
	background-color:#9999CC;
	min-height:100%;
	width:100%;
}
.single_module {
	border:solid 1px #000000;
	background-color:#000000;
	height:160px;
	padding:0;
	margin:-1px 0px 0px -1px;
	width:240px;
	float:left;
}
.toggleopacity img {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity:1;
}

And the Javascript:

Code:

$("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});

Game Making With Javascript?

Similar Tutorials

View Content

can u like make games like pong wikth javascript? my friend said he did, but i dont think u can.

Need Some Insight On A Javascript I'm Making

Similar Tutorials

View Content

hey guys, new to the forum here but i think i may be staying here for the long haul

i've lurked around here a while but recently i havent been able to find a solution to something i'm having trouble with.

i need to create a script that allows me to take an image and a button and apply it to the page

the button will have a value of "Start" and when the "onClick" event is triggered the image will begin to reposition itself towards the right side of the page (as if it were panning towards the right, like if it were on wheels). once it reaches the end of the window i have get it to come back to the starting position and just keep on looping.

the trickiest part (imo) is getting the value of the button to change to "stop" and onClick it needs to reset everything back to neutral.

now i am a HUGE javascript "nub" and i dont want someone to do the code for me, i just want some help. i need to learn this. i'll post what i have so far in post #2. if anyone can help with this ASAP i would love you forever. thanks!

Making A Ticker With Javascript

Similar Tutorials

View Content

Right now, I am trying to use this widget from widget box to figure stuff out but its not working.
I want to make a moving ticker The text would be from a rss
This is what there source was:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('23bf7f48-242e-489d-99b9-4a1ac7b47eac');</script>

And inside it is this... (http://cdn.widgetserver.com/syndicat...nsertWidget.js)
Code:

//
//
//
if(!window.WIDGETBOX){(function(){var D=false;var C=function(){WIDGETBOX.setPageLoaded();};var B=function(){WIDGETBOX.setPageUnloaded();};WIDGETBOX={libs:{},version:"41509",urls:{runtimeBaseUrl:"http://widgetserver.com/syndication",galleryBaseUrl:"http://www.widgetbox.com",cdnRuntimeBaseUrl:"http://cdn.widgetserver.com/syndication",cdnGalleryBaseUrl:"http://pub.widgetbox.com",metricsBaseUrl:"http://t.widgetserver.com/t",proxyBaseUrl:"http://p.widgetserver.com/p",markupRuntimeBaseUrl:"http://widgetserver.com/syndication",mobileSiteRuntimeBaseUrl:"http://m.wbx.me",linkbarBaseUrl:"http://l.wbx.me/l",imageProxyBaseUrl:"http://i.widgetserver.com"},globals:{token:"",tokenTime:0,widgets:[],widgetCount:0,pageLoaded:false,pageUnloaded:false,eventListeners:[],pageLoadListeners:[],pageUnloadListeners:[],panels:[],panelCount:0,showPanelMarks:true,suppressGetWidget:false,disableGetWidget:false,suppressQuantcast:false,enableLogging:false,disableHitTracking:false,log:"",trustedPage:false,disableInstallerMenu:false,renderInstallerMenuInline:false,anchorEl:null,vid:null,startTime:new Date().getTime()},init:function(){if(!D){D=true;if(window.WIDGETBOXLOADLISTENERS){for(i=0;i<WIDGETBOXLOADLISTENERS.length;i++){A.addPageLoadListener(WIDGETBOXLOADLISTENERS[i]);}}A.addEvent(window,"load",C);A.addEvent(window,"unload",B);if(window.WIDGETBOXINITLISTENERS){for(i=0;i<WIDGETBOXINITLISTENERS.length;i++){try{WIDGETBOXINITLISTENERS[i]();}catch(E){WIDGETBOX.logMessage(E);}}}}},namespace:function(G){G=G.replace(".","/");if(G.indexOf("WIDGETBOX/")===0){G=G.substr(10);}if(G.indexOf("POSTAPP/")===0){G=G.substr(8);}var E=G.split("/");var I=WIDGETBOX;if(E){var H;for(var F=0;F<E.length;F++){H=E[F];if(!I[H]){I[H]={};}I=I[H];}}return G;},logMessage:function(E){if(A.globals.enableLogging){A.globals.log+=E+"\n";}},newLibInfo:function(G){G=G.replace(".","/");var J=G;var H="";var F=G.lastIndexOf("/");if(F>=0){H=G.substr(0,F);J=G.substr(F+1);}H=A.namespace(H);G=H+"/"+J;var I=G.replace("/","_").toLowerCase();var E={ns:H,name:J,path:G,id:I,status:null,callback:null};return E;},load:function(I,H,J){var G=A.newLibInfo(I);if(!WIDGETBOX.libs[G.id]){WIDGETBOX.libs[G.id]=G;G.status="loading";if(H){if(!G.listeners){G.listeners=[];}G.listeners.push(H);}var E=document.createElement("script");E.id="widgetbox_lib_"+G.id;E.type="text/javascript";E.setAttribute("async","true");if(!J){E.src=WIDGETBOX.urls.runtimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}else{E.src=WIDGETBOX.urls.cdnRuntimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}var F=document.documentElement.firstChild;if(!F||(F.nodeName&&F.nodeName.toLowerCase().indexOf("comment")>-1)){F=document.getElementsByTagName("head")[0];}F.appendChild(E);}else{G=WIDGETBOX.libs[G.id];if(H){if(G.status=="ready"){try{H(G);}catch(K){WIDGETBOX.logMessage(K);}}else{if(!G.listeners){G.listeners=[];}G.listeners.push(H);}}}},ready:function(F){var E=A.newLibInfo(F);if(!WIDGETBOX.libs[E.id]){WIDGETBOX.libs[E.id]=E;}E=WIDGETBOX.libs[E.id];return E.status=="ready";},setReady:function(G){var F=A.newLibInfo(G);if(!WIDGETBOX.libs[F.id]){WIDGETBOX.libs[F.id]=F;}F=WIDGETBOX.libs[F.id];F.status="ready";if(F.listeners){var E=0;for(E=0;E<F.listeners.length;E++){var H=F.listeners[E];try{H(F);}catch(I){WIDGETBOX.logMessage(I);}}}},addEvent:function(I,H,F,E){if(I.addEventListener){I.addEventListener(H,F,E);return true;}else{if(I.attachEvent){var G=I.attachEvent("on"+H,F);return G;}else{alert("Handler could not be attached");}}},removeEvent:function(H,G,F,E){if(H.removeEventListener){H.removeEventListener(G,F,E);return true;}else{if(H.detachEvent){return H.detachEvent("on"+G,F);}else{alert("Handler could not be removed");}}},addEventListener:function(E,G){if(G){if(!A.globals.eventListeners){A.globals.eventListeners={};}if(!A.globals.eventListeners[E]){A.globals.eventListeners[E]=[];}var F=A.globals.eventListeners[E];F[F.length]=G;}},notifyEventListeners:function(F){if(!A.globals.eventListeners){return ;}var G=A.globals.eventListeners[F];if(!G){return ;}for(var E=0;E<G.length;E++){var H=G[E];try{H(this);}catch(I){WIDGETBOX.logMessage(I);}}},addPageLoadListener:function(E){if(E){if(!A.globals.pageLoaded){A.globals.pageLoadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},addPageUnloadListener:function(E){if(E){if(!A.globals.pageUnloaded){A.globals.pageUnloadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},setPageLoaded:function(){if(A.globals.pageLoaded){return ;}A.globals.pageLoaded=true;A.removeEvent(window,"load",C);var F=A.globals.pageLoadListeners;var E;for(E=0;E<F.length;E++){try{F[E]();}catch(G){WIDGETBOX.logMessage(G);}}},setPageUnloaded:function(){if(A.globals.pageUnloaded){return ;}A.globals.pageUnloaded=true;A.removeEvent(window,"unload",B);var E=A.globals.pageUnloadListeners;for(i=0;i<E.length;i++){try{E[i]();}catch(F){WIDGETBOX.logMessage(F);}}},generateGUID:function(H,E){var I=(H)?H:Math.random;var K=(E)?36:32,M="0123456789abcdef".split(""),F,G=[];if(E){G[8]=G[13]=G[18]=G[23]="-";G[14]="4";}for(var J=0;J<K;J++){if(!G[J]){F=0|I()*16;G[J]=M[(J==19)?(F&3)|8:F];}}var L=G.join("");if(!WIDGETBOX.globals.vid){WIDGETBOX.globals.vid=L;}return L;},generateProxiedImageUrl:function(E,H,G,F){var I=E;I=this.urls.imageProxyBaseUrl+"/ip/origin=="+encodeURIComponent(I);if(H){I+="&&w=="+Math.round(H);}if(G){I+="&&h=="+Math.round(G);}if(F){I+="&&type=="+F;}I+="?token="+WIDGETBOX.globals.token;return I;},createElement:function(F,E){if(E){return E.ownerDocument.createElement(F);}else{return document.createElement(F);}}};POSTAPP=WIDGETBOX;var A=WIDGETBOX;A.init();})();}
//

//SOF: subscriber/InsertWidget.js
//
    //support rendering a widget in an element by supplying and id to the element
    WIDGETBOX.renderWidgetInElement = function(appId, parentNodeId) {
        return WIDGETBOX.renderWidget(appId, false, parentNodeId);
    },
    WIDGETBOX.renderWidget = function(appId, mode, parentNodeId) {
        if (!parentNodeId) {
            parentNodeId = "widgetbox_widget_parent_" + WIDGETBOX.globals.widgetCount++;
            document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"></div>");
        }
        function libReadyCallback() {
            var parentNode = document.getElementById(parentNodeId);
            if (!parentNode) {
                document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"><span style=\"visibility:hidden\">-</span></div>");
                parentNode = document.getElementById(parentNodeId);
            }
            WIDGETBOX.subscriber.Main.insertWidget(appId, null, parentNode, mode, null, null);
        }
        WIDGETBOX.load("subscriber.Main", libReadyCallback, true);
    };
//
//EOF: subscriber/InsertWidget.js

What do i change and do to make this work?

Making Quiz With Javascript!

Similar Tutorials

View Content

Hi! I need to make my own web page with quiz on it! Something like this
http://www.javascriptkit.com/script/popquiz.htm

The main problem - how to calculate scores? I need to make, for example, pop up box that shows, how many answers are right/wrong. What should I use for that?

Javascript Enlarge And Image Hover Over

Similar Tutorials

View Content

HI,

I am looking to enlarge an image when its hovered over, can anyone give me the code for this?

Thanks

Javascript Hover Add Image Layer?

Similar Tutorials

View Content

Ok. Basically, I will have images, about 150x100 that are all different.

They will be displayed on a page in groups of 4.

I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha.

To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered.

I know this part of the code, but I don't know what to put inside it:

Code:

$(document).ready(function(){
	$("img").mouseenter(function(){
		//add image on top of this image
	})
	$("img").mouseleave(function(){
		//remove covering image
	})
})

What should I replace the comments with?

Thanks

Making A Javascript Music Player

Similar Tutorials

View Content

so i am trying to make a music player where you select a song from a drop down list and then click submit. it then brings up the audio controls with the HTML5 "<audio>" tags and then you can click play and it should work. i am having trouble actually doing this though. the html is

Code:

<html>
<head>
<title>Music Player</title>
<script language="javascript"  type="text/javascript" src="popup.js">
</script>
</head>
<body bgcolor="000000">
<font color="lime" size="6">
<div align="center">
<u>The Mighty Peacock Music Player</u>
</font>
<br>
<br>
<font color="red" size="5">

<select id="convert_to" name="convert_to">
<option value="danza" id="danza">Danza Kuduro by Dan Omar</option>
<option value="iron" id="iron">Iron by Woodkid</option>
<option value="boot" id="boot">Das Boot by Vat19</option>
</select>
<br>
<input type="submit" value="submit" onClick="dispResults(convert_to)">
<p>The song selector is not functioning yet. Sorry for the inconvinence.</p>
<br>
<br>
<div class="music_box" id="music_box">
<audio src="/music/Danza Kuduro.mp3" controls="controls">
</audio>
</div>
</div>
</body>
</html>

and the javascript is

Code:

function dispResults(convert_to) {

    if (id == "danza") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/Danza Kuduro.mp3"      controls="controls"></audio> + "</p>";
    }
    
    if (id == "iron") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/woodkid.mp3" controls="controls"></audio> + "</p>";
    }

}

any help would be greatly appreciated. Thanks

Making Text Appear After Javascript Function Has Run

Similar Tutorials

View Content

I followed the tutorial below and got my image fade to work:
http://clagnut.com/sandbox/imagefades/

Now I want to have text become visible once the fade is done. I can't get it to work.

style portion:

.enhanced {
visibility:hidden;
}

javascript functions:

<script language="javascript">
document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()};
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150);
}
if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}
}
}
</script>

I have added this to the last function:

if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}

But the text appears instantly.

Youtube Api, Javascript Not Making Sense

Similar Tutorials

View Content

Alright, I am going to post the sections that matter, and then post the full JS at the bottom.

Alright, so youtube allows you to pull videos using javascript. here is the what I am using

Code:

function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

alright, and here is the HTML code.

Code:

<div id="youtubeDivFavs" align="center">
</div>
<script>
insertVideos('youtubeDivFavs','favs','lancxeon','5',0);
</script>

<div id="youtubeDivUser" align="center">
</div>
<script>
insertVideos('youtubeDivUser','user','lancxeon','5',0);
</script>

Now as you can see there are two here. the second one "user" pulls from the url

http://gdata.youtube.com/feeds/users/lancxeon/uploads
It works fine on my website.

the second one pulls from

http://gdata.youtube.com/feeds/users/lancxeon/favorites

It does not work. It makes no sense as you can see both of the urls work fine.

I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work.

It truly makes no sense to me why it does not work, if one works why will the other not work?

Here is the full JS file

Code:

<!--
var cleanReturn = 1; //do you want a full youtube return, or just an image list
var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo

var timer;
var i =0;
var youtubediv = new Array();

function clearList(ul){
	var list = document.getElementById(ul);
	while (list.firstChild) 
	 {
	    list.removeChild(list.firstChild);
	 }		
}

function hideOverlay(){

	var overlay = document.getElementById('youtubeoverlay');
	overlay.style.display = 'none';
	overlay.innerHTML = "";
}

function videoOverlay(id){
	var objBody = document.getElementsByTagName("body").item(0);
	if(objBody){
    var video = document.createElement('div');
	video.setAttribute('id', 'youtubeoverlay');
	video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>';
	objBody.insertBefore(video, objBody.firstChild);
	}else{
		alert('no body element. please add');
	}

}

function mousOverImage(name,id,nr){

	if(name)
		imname = name;
	//make border orange
	imname.style.border = 	'4px solid orange';

	imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
	nr++;
	if(nr > 3)
		nr = 1;
	timer =  setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);

}


function mouseOutImage(name){

	if(name)
		imname = name;
	//make border back to greyish
	imname.style.border = 	'4px solid #333333';
	if(timer)
		clearTimeout(timer)

}

function getVideoId(url){

    var match = url.lastIndexOf('=');
    if (match) {
      id = url.substring(match+1);
      return id;
    }
}

function getId(string){

    var match = string.lastIndexOf("'s Videos");
    if (match != -1) {
      id = string.substring(0,match);
      return id.toLowerCase();
    }

    var match = string.lastIndexOf("query");
    if (match != -1) {
      id = string.substring(match+7);
      return id.toLowerCase();
    }

}
function listVideos(json,divid) {
  divid.innerHTML = '';
  var ul = document.createElement('span');
  ul.setAttribute('id', 'youtubelist');
  if(json.feed.entry){
	  for (var i = 0; i < json.feed.entry.length; i++) {
	    var entry = json.feed.entry[i];
	
	    for (var k = 0; k < entry.link.length; k++) {
	      if (entry.link[k].rel == 'alternate') {
	        url = entry.link[k].href;
	        break;
	      }
	    }
   	

   	var thumb = entry['media$group']['media$thumbnail'][1].url;


    var li = document.createElement('span');

    li.setAttribute('id', 'youtubebox');
    if(cleanReturn == 1){

		if(inlineVideo == 1){
        	li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'"  onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';

		}else{

        	li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
		}
    }else{
        li.innerHTML = entry.content.$t;
    }

    ul.appendChild(li);
	}
  }else{
  	divid.innerHTML = 'No Results Found';

  }

  document.getElementById(divid).appendChild(ul);
}

function youtubeInit(root) {
  //this hacks the layer for mutiple json queries
  id = getId(root.feed.title.$t);
  listVideos(root, youtubediv[id]);

}


function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

//-->

Making Event Feed In Javascript

Similar Tutorials

View Content

hey, i am trying to add events to my website...i have all the events stored in my google calender and i am trying to show only four events at the time for example:

10/01/2011 - John's Birthday
12/01/2011 - Party

i found this example on google however i am having problems...the problem i am having is that it works fine on my computer however when i look at it on another computer nothing appears http://gdata-javascript-client.googl...le_sample.html

thanks