JavaScript - Rollover Button With Looping Video Clip On Mouseover?

I've been looking for a solution to a dropdown menu problem where the button does not stay hovered when the list is navigated/as soon as the cursor leaves the button area.
At the moment the effect is setup using css sprites (locally) but I have seperate images also for the 2 states.

HTML
Code:

<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div id="mainnav1"></div></dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><li>
<a href="page1.html" class="underline">Products 1</a>
<a href="page2.html" class="underline">Products 2</a>
<a href="page3.html" class="underline">Products 3</a>
<a href="page4.html" class="underline">Products 4</a>
<a href="page5.html" class="underline">Products 5</a>
<a href="page6.html" class="underline">Products 6</a>
<a href="page7.html">Products 7</a>
</li></ul></dd></dl>

CSS
Code:

#mainnav1 {width:218px; height:50px; background:url(../images/root/mainnav1.png)} #mainnav1:hover {background-position:0 -50px;} #mainnav1 a:active {background-position:0 -50px;}
#mainnav2 {width:218px; height:50px; background:url(../images/root/mainnav2.png)} #mainnav2:hover {background-position:0 -50px;} #mainnav2 a:active {background-position:0 -50px;}
#mainnav3 {width:218px; height:50px; background:url(../images/root/mainnav3.png)} #mainnav3:hover {background-position:0 -50px;} #mainnav3 a:active {background-position:0 -50px;}
#mainnav4 {width:218px; height:50px; background:url(../images/root/mainnav4.png)} #mainnav4:hover {background-position:0 -50px;} #mainnav4 a:active {background-position:0 -50px;}

.dropdown {float:left;}
.dropdown dt {width:218px; height:50px; overflow:hidden;}
.dropdown dt:hover {background-position:0 -50px;}
.dropdown dd {position:absolute; overflow:hidden; width:218px; display:none; z-index:200;}
.dropdown ul {width:218px;}
.dropdown li {display:inline;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#747474; text-decoration:none; background:#efefef; width:218px;}
.dropdown a:hover {background:#757575; color:#dddddd;}
.dropdown .underline {border-bottom:1px solid #d9d9d9;}

JS
Code:

var DDSPEED = 1;
var DDTIMER = 1;

// Mouse Events //
function ddMenu(id, d) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearInterval(c.timer);
    if (d == 1) {
        clearTimeout(h.timer);
        if (c.maxh && c.maxh <= c.offsetHeight) {
            return
        } else if (!c.maxh) {
            c.style.display = 'block';
            c.style.height = 'auto';
            c.maxh = c.offsetHeight;
            c.style.height = '0px';
        }
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    } else {
        h.timer = setTimeout(function () {
            ddCollapse(c)
        }, 0);
    }
}

// Collapse //
function ddCollapse(c) {
    c.timer = setInterval(function () {
        ddSlide(c, -1)
    }, DDTIMER);
}

// Cancel Collapse During Dropdown Selection //
function cancelHide(id) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearTimeout(h.timer);
    clearInterval(c.timer);
    if (c.offsetHeight < c.maxh) {
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    }
}

// Expand & Contract //
function ddSlide(c, d) {
    var currh = c.offsetHeight;
    var dist;
    if (d == 1) {
        dist = (Math.round((c.maxh - currh) / DDSPEED));
    } else {
        dist = (Math.round(currh / DDSPEED));
    }
    if (dist <= 1 && d == 1) {
        dist = 1;
    }
    c.style.height = currh + (dist * d) + 'px';
    if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
        clearInterval(c.timer);
    }
}

I heard that it's something to do with the mouseover function but feel like I could be adding css and not changing some of the stuff already present governing the script, can anyone guide me?
Thanks!

Hi,

I have this button:
Code:

  <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/>

which changes from the play image to the pause image when clicked, using this function:

Code:

function togglePause(){
	if (paused){
		paused=false;
		document.getElementById('pauseBtn').src="pause.png";
		setTimeout("animate("+(continueStep)+")", tick);
	} else {
		paused=true;
		document.getElementById('pauseBtn').src="play.png";
	}
}

but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image

secondly, the button reverts to the pause image regardless of if it is in play or pause state.

I'm kind of lost - can someone throw me a line?

the page I'm working on is here if you want to have a look

on my website: http://www.mypubspace.com/default.php I am using the buttons from JQuery UI, as you can see on the example: http://jqueryui.com/themeroller/
there is a rollover effect on the button but not on my website?!

Greetings,
Does anyone know the code to create a function and form to make the position of a button change dynamically based on a mouseover event please?
Whereby a viewer's cursor will chase the button around an IE page for infinity!
I would prefer to do this without the need for any plugins if at all possible, and it does not need to be cross-platform, just IE is fine.

Many thanks

Hi all !

I was searching for this problem over and over in here adn other websites but coudn't find any solution. Ok here is the problem:

I made a video playlist in XML. Here is how it looks like:
Code:

<videotemplate>
	<videoblock>
		<video id="1">
			<title>test1</title>
			<src>sd.webm</src>
			<img>diagnoza.jpg</img>
		</video>
		<video id="2">
			<title>test2</title>
			<src>video.webm</src>
			<img>resident.jpg</img>		
		</video>
		<video id="3">
			<title>test3</title>
			<src>sd.webm</src>
			<img>resident.jpg</img>
		</video>	
	</videoblock>
	<videoblock>
		<video id="4">
			<title>test4</title>
			<src>video11.webm</src>
			<img>resident.jpg</img>
		</video>
		<video id="5">
			<title>test5</title>
			<src>video4.webm</src>
			<img>resident.jpg</img>
		</video>
		<video id="6">
			<title>test5</title>
			<src>video5.webm</src>
			<img>resident.jpg</img>
		</video>		
</videotemplate>

Them I am using this javascript + XLST to play next file:
Code:

<script type="text/javascript">
		function nextSrc<xsl:value-of select="@id" />() {
		var myvideo = document.getElementsByTagName('video')[0];
		myvideo.src="file://d:/cis/guide/<xsl:value-of select="videoblock/video/following::src" />";
		myvideo.load();
		}
</script>

When I use nextSrc function video flips to next xml record with <src> tag but it only does that once!

How to make it flip to next video every time ??

Please help !

I'm trying to set the clip of an image dynamically, but I cannot get the script to work at all. I've tried it with and without spaces, with and without the 'px', and with and without commas, but I can't get it to work. I tried just simply setting it without passing in the variable, and it still wouldn't work.

Here's what I'm using:

Code:

<script type="text/javascript">
var winW = window.innerWidth;

if (winW < 1200) {
     document.getElementById('pic').style.clip="rect(0px," + winW + "px,350px,0px)";
}
</script>
<style type="text/css">
#pic {
     position: absolute;
     top: 0; left: 0;
     overflow: hidden;
     width: 1200px;
     height: 350px;
}
</style>

I have a copy to clip board function in a page for short cut notes but currently it is enbeded with several copy to options ... hear is a part of the code ...
[code]
<html>
<head>
<title>Case Shortcut 1.0</title>
</head>

<SCRIPT language=JavaScript

src="xxxxxxx"></SCRIPT>

<BODY bgcolor=cccccc onload="loadPin('one')">

<table border="0" bordercolor="#000000" style="background-color:#FFFFCC" width="500" cellpadding="3" cellspacing="3">
<tr>
<td>
<SCRIPT LANGUAGE="JavaScript">


function ClipBoard1()
{
holdtext1.innerText = copytext1.innerText;
Copied1 = holdtext1.createTextRange();
Copied1.execCommand("Copy");
}

</SCRIPT>

<SPAN ID="copytext1" STYLE="height:*;width:300;background-color:White">
xxxxxx. I called and left message with callback number and pin. Callback Number: bbbbbbbbbbb PIN
<SCRIPT language=JavaScript src="http://doris/res/scripts/datePin.js"></SCRIPT>
<SPAN id=datepinHolder></SPAN></SPAN>

<TEXTAREA ID="holdtext1" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard1();">Copy Note</BUTTON>
<p>
<SCRIPT LANGUAGE="JavaScript">

function ClipBoard11()
{
holdtext11.innerText = copytext11.innerText;
Copied11 = holdtext11.createTextRange();
Copied11.execCommand("Copy");
}

</SCRIPT>

<SPAN ID="copytext11" STYLE="height:*;width:250;background-color:White">
5 Day Pending close Message Left on Voice Mail.
</SPAN>
<TEXTAREA ID="holdtext11" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard11();">Copy Note</BUTTON>
<p>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard10()
{
holdtext10.innerText = copytext10.innerText;
Copied10 = holdtext10.createTextRange();
Copied10.execCommand("Copy");
}

</SCRIPT>


<SPAN ID="copytext10" STYLE="height:*;width:250;background-color:White">
xxxxxx. Unable to leave Voice Mail will contact again on
</SPAN>
<TEXTAREA ID="holdtext10" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard10();">Copy Note</BUTTON>
<p>
[code]
Is there a way that I code not have to repate code ... can it be condinced.

Hi Friends,
I need a copy to clipboard functionality from a text area using javascript. I use Zclip for the purpose,
but it will not work as needed . I attach my working code along with this .. pls open index.html in browser
and try it . Do any one can pls give a javascript solution to copy textarea content to clipboard...

Thanks,
Anes

Hey guys,

Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer.

I'm trying to design myself an online portfolio; here's what I got so far...

http://www.gregorymstevens.com/testsite/site.html

As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page.

For instance, when the mouse rolls over a bird-- this image:



will turn into this image:



while maintaining the original "white bird" rollover.



Hopefully I'm explaining this correctly -- Any help greatly appreciated!

Hi,

I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded.

Thanks.

//Ana

hi there,

I need to ask my users to input some numbers via textbox(or prompt) using a DELIMITER (,) between each digit. Then The program will display(list) when clicking a button.
for this I will use three columns
in the first column I have (2,4,6,9) to prompt.

in the second column I have (3,4,7,10) to prompt.

in the third columns I have (5,6,11,14) to prompt
so the first lines should look like:

2,3,5
2,3,6
2,3,11
....
....
.... and the last line :
9,10,14

there should be 4x4x4=64 rows/lines

How can we achieve this ?

Thanks in advance

hi to all... good day to u all...

i have a noob question

i followed this instruction
Code:

for (count=1; count<11; count++) {
     javascript code here
}

at the bottom of my page i did this
Code:

<script type="text/javascript">
for (counter=1; counter<11; counter++) {
	var followTrigger+counter+a = new Spry.Widget.Tooltip('following'+counter+'a', '#followMe'+counter+'a', {followMouse: true});
}
</script>

what im trying to do is to make multiple of this
Code:

<script type="text/javascript">
var followTrigger1a = new Spry.Widget.Tooltip('following1a', '#followMe1a', {followMouse: true});
var followTrigger2a = new Spry.Widget.Tooltip('following2a', '#followMe2a', {followMouse: true});
var followTrigger3a = new Spry.Widget.Tooltip('following3a', '#followMe3a', {followMouse: true});
var followTrigger4a = new Spry.Widget.Tooltip('following4a', '#followMe4a', {followMouse: true});
var followTrigger5a = new Spry.Widget.Tooltip('following5a', '#followMe5a', {followMouse: true});
var followTrigger6a = new Spry.Widget.Tooltip('following6a', '#followMe6a', {followMouse: true});
var followTrigger7a = new Spry.Widget.Tooltip('following7a', '#followMe7a', {followMouse: true});
var followTrigger8a = new Spry.Widget.Tooltip('following8a', '#followMe8a', {followMouse: true});
var followTrigger9a = new Spry.Widget.Tooltip('following9a', '#followMe9a', {followMouse: true});
var followTrigger10a = new Spry.Widget.Tooltip('following10a', '#followMe10a', {followMouse: true});
</script>

i dont know why it wont work... any help pls...

I need to loop through an array like this one:

[1,2,4,8,8,16,32,64]

I don't really know how to do this, so a little guidance would be great.

Basically, I have 4 vars: a b c and d in the form of (ax + b)(cx + d)

inside the loop something like this:

i++
a = array[i]
If (a*b > Math.floor(a) && a*b < Math.ceil(a)){
then increment i again and do the loop again}
else{
break the loop and set leave a = array[i]
}

A code sample or something would be really nice (I don't know how to do the parts that are written out in text...

Thanks!
}

public static void main(String[] args){
int oddNo;
oddNo = getOdd();
}
public static int getOdd(){
int oddNo = 0;
Scanner sc = new Scanner(System.in);

while (oddNo % 2 == 0){
System.out.print("Enter an odd number : ");
oddNo = sc.nextInt();
System.out.println("Wrong input ! ");
}
if (oddNo % 2 !=0);
System.out.print("The odd number is : " + oddNo);
return oddNo;

}

however, the output:
Enter an odd number : 10
Wrong input !
Enter an odd number : 8
Wrong input !
Enter an odd number : 9
Wrong input ! (how to remove this?)
The odd number is : 9

We were given a task at school today. Basically we need to have a prompt box popup, and the user enters numbers 1-12 (1 for each month of the year). The prompt keeps popping up until the user types "stop". It will display the months that were entered.

Could anyone assist me with this, thanks.