JavaScript - Blinking Problem With Onmouseover

I would like to create a caret for a textarea like the one he
http://www.dynamicdrive.com/forums/s...4576#post74576

it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow:

Code:

<textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>

I don't see anything on the screen other than the blinking cursor

So i've written abit of code myself in order to do this:

I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop...

The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing.

This is how i started coding:

1 . 2 functions for playing/pausing a video tag
2 . Check how many <video> tags are on the page (after load)
3 . Add Event "mouseout" + function to each <video> tag

And the actual code:

Javascript:
Code:

/*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/

function speelFilmpje(){
    document.getElementById("filmpke").play();
}

function stopFilmpje(){
    document.getElementById("filmpke").pause();
}

window.onload = function(){
/*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/
    var video = document.getElementsByTagName('video');
    var videotags = video.length;
    //console.log(videotags);
    for(i=0; i<videotags;i++){
        video[i].addEventListener("mouseover", speelFilmpje,false);
        video[i].addEventListener("mouseout", stopFilmpje,false);
    }//einde van de functie
}

HTML:
Code:

<div id="right_column">
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                </div>

Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_-

Hey everyone,

I'm trying to make a sound by using the mouseover event on JS. The script works fine on my husband's computer (IE8, windows xp), but does not work on mine (IE8, Vista).

Click on the link below to give you an idea. Just mouseover the images and you should hear an elephant and duck sound. Mouseover the word "elephant" and it "should" make an elephant sound.

http://www.mypreciousarrival.com/Ani...oundtest4.html

I just need to find a script that will work with different operating systems (or at least windows xp and vista) and browsers (or at least IE)

Any suggestions are greatly appreciated. I would like to not resort to any macromedia or schockwave scripting.

Thank you!

So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped.

I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to show a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function:

Code:

function definitionRollover(){
	var j;
	var dfns = document.getElementsByTagName('dfn')
	for (j=0; j<dfns.length;j++){
		var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1);
		var definitionArray = new Array(term, dfns[j].title);
		dfns[j].onmouseover = function(){stm(definitionArray,Style[0])}
		
		dfns[j].onmouseout = function(){htm();};
	}
}

As you can see I am adding a onmouseover event to these <dfn> tags which calls another function (stm) with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one.

I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated.

Hi

Everyone, I am interested to create one neon light effect using javascript (let's call it a club logo animation),

Now I know, that I can achieve image blinking effect using javascript, but when I use this effect, the image blinks continuously. I would like to blink it only for 2-3 times. also I would like to blink four images, one after anohter, and sometimes two together.

I know it seems bit complicated, but not for experts like this forum have

Thanks in advance for your help.

Hi Community,

I am running simple web cam streaming to html. Let me explain how it works:
First C code grabs frame from web cam and PHP code send the image to the client where exists receiver php code. It saves the submitted image to disk and javascript updates image every 0.1 sec or less. it is working fine but there is blinking. So I changed Javascript to avoid blinking (changed to other script). In this case streaming is fine but after 2-5 sec it stops updating. here is script:

<head>
<title> Streaming</title>
</head>
<body>
<!-- <img name="frame" src="" border="0" /> -->

<img src="" id="webcam1" width="640" height="480" border="5" alt="Camera1"/>

<script language="javascript">

document.images.webcam1.src = "http://my_IP_address/img.jpg";
document.images.webcam1.onload = Start;

function LoadImage()
{
uniq1 = Math.random();
document.images.webcam1.src = "http://my_IP_address/img.jpg?"+uniq1;
document.images.webcam1.alt = uniq1;
}

function Start()
{
setTimeout("LoadImage();", 70);
}
</script>

</body>
</html>


Where is mistake? Why it stops updating after 2-5 seconds every time.

Please help!

Thank you

I have written a small code in Javascript which does the work of blinking all the content inside any tag with the name 'blink'

here is the code

<html>
<body>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>
<p name="blink" style="visibility: visible;">This text blinks using Javascript</p>

<script type="text/javascript">
function blinkText()
{
var x=document.getElementsByName('blink');
for(i=0;i<x.length;i++)
{
if(x[i].style.visibility=='visible')
x[i].style.visibility='hidden';
else
x[i].style.visibility='visible';
}
}
setTimeout('blinkText()',500);
</script>
</body>
</html>



I use a Ubuntu system and work on Mozilla 3.6.18
This hides the text successfully but does not display it again
What can be wrong here?

Can anyone please help me

Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script></script>
  <title>Javascript</title>
  <style type="text/css">
div
{
font-family: Georgia
}
  </style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>

Hi,

Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

http://www.javascriptkit.com/script/...ifferent.shtml

to use on my site.

Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?


If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

Thanks in advance

Script Below:


Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages(my images here)

</script>

For the Links:

<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>

For the Image:

<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

hi,

please ignore this thread..it is a duplicate of one already active.

MODS please delete.

apologies for my mistake.

I added this "show hint" script to my website. I submitted the URL in W3C's HTML validator. It says that XHTML doesn't support onMouseover, so I changed it to all lowercase: onmouseover.

When I refreshed the page, the little error warning showed up in my lower left corner. The JavaScript seemed to not be working because I changed it from onMouseover to onmouseover. Help?

Code:

<script type="text/javascript">
		
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&amp;&amp;!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie &amp;&amp; !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x &lt; dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie &amp;&amp; !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y &lt; dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) &amp;&amp; document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

</script>

Code:

<a href="#" class="hintanchor" onmouseover="showhint('Display hint here.', this, event, '150px')"><img src="/images/help.gif" alt=""/></a>

Hi Guys im new to javascript

but i have got this code so far to work

Code:

<script type="text/javascript">
	function do_something(e)
	{
	document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat";
	}
	</script>

and it works with this
Code:

<div id="flash">
          		<div id="imgholder">
                </div>
            	<div id="myController2">
                           <span class="jFlowControl2">No 1 </span>
                           <span class="jFlowControl2">No 2 </span>
                        </div>
                        <div id="mySlides2">
                           <div>
                           		<a onmouseover="do_something(this)"  class="vm" href="#" title="Vulnerability Management"></a>
                                <a class="grc" href="#" title="grc"></a>
                                <a  class="pci" href="#" title="pci"></a>
                                <a class="gcs" href="#" title="gcs"></a>
                                <a  class="pt" href="#" title="Penetration Testing"> </a>
                                 <span class="jFlowNext2  NextFlash">&nbsp;</span>
                           </div>
                           <div>
             
                               <span class="jFlowPrev2 BackFlash">&nbsp;</span>
                           </div>
                    	</div>
            </div>

Currently the background changes on the 1st link hover.

is it possible to have different images load on the hover of different a's?

any help would be appricated

Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help?

Code:

	/* <![CDATA[ */
		document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);}
	
		function slideRecord(disc)
		{
			var record = "disc"+disc;
			var y = 20;
			document.getElementById(record).style.top = y + 'px';
		}
		
		function unSlideRecord(disc)
		{
			record = "disc"+disc;
			var y = 0;
			document.getElementById(record).style.top = y + 'px';
		}
	/* ]]> */

I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?

Hi,

I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not, and figured JS should be able to take care of it. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great!

What i would like to do seems rather simple:

I have a calendar. I would it to do one of two things:
1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))).

2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar.

While fiddling with it this afternoon i figured i was close, but i am missing something...

Code:

<td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>

But this seems to be pulling information from an element whose id = 27...which is not what i'd like..

Thanks in advance,

Tsiqueira