JavaScript - Can You Do Something Like This With Javascript...(onmouseover Events And Other)

Hi I am using httpXmlRequest object to call a xml web service. In order to successfully perform a task there are couple steps need to happen.

1 you have to request for a session (cookie)
2 with the cookie, we need to authenticate with the server
3 then perform other actions

snippet of my code looks something like this. Basically here i am trying to get the cookie, login and then logout once logged in.

function connect() {
document.myForm.elements['myTextArea'].value += "connecting to teh server.\n";
try {
xhttp.open("GET",urlStr + commonInfoParam, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
if(xmlDoc.readyState == 4) {
var resultsTag = null;
resultsTag = xmlDoc.getElementsByTagName("results");

if(resultsTag != null) {
for(i=0;i<resultsTag.length;i++) {
var commonTag = resultsTag[i].getElementsByTagName("common");
for(j=0;j<commonTag.length; j++) {
cookie = commonTag[j].getElementsByTagName("cookie")[0].childNodes[0].nodeValue;
break;
}
}
}
if(cookie != null) {
document.myForm.elements['myTextArea'].value += "cookie found: " + cookie + "\n";
login();
}
}
};
} catch(e) {
document.myForm.elements['myTextArea'].value += "Exception occurred at connect: " + e.message + "\n";
}
}




function login() {
var loginRequestURL = "http://testconnect.com/api/xml?action=login&login=" + username+ "&password=" + password + "&session=" + cookie;
try {
xhttp.open("GET", loginRequestURL, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert('in loginResponseHandler');
if(xmlDoc.readyState == 4) {
try {
loginStatus = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(loginStatus == 'ok') {
alert("login is good: " + loginStatus);
logout();
} else {
}
} catch(e) {}
}
};
} catch(e) {
}
}




function logout() {
alert("in logout");
try {
xhttp.open("GET", logoutRequestURL + cookie, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert("in logoutResponseHandler");
if(xmlDoc.readyState == 4) {
try {
status = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(status == 'ok') {
alert(status);
}
} catch(e) {}
}
};
}
catch(e) {}
}


so when I run my code in the browser, all my alert stages give me proper message as expected. But at the final alert, it hangs. I just could not figvure out what am i doing wrong. can any one pin point this out for me please?

Thanks in advance.

KM

Hello

I need help regarding capturing page events(mouse click ,navigation) etc on web pages and write them into a text file (using javascript). One way is using javascript events and writing them into text file. Is there be a better way of doing this ??

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?

Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..

HTML TARGET:

Code:

<div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;">
		<img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div>
</div>

I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider

Heres my current project table:

http://bit.ly/dbwH23

I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure.

I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work?

Hi,
what I want to do is create a menu with rollover buttons but each button also changes the background image of a div.

I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong.

I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference).


Code:

<body onload="addHandlers()"> 

<script type="text/javascript" language="javascript">  

 function addHandlers(){  

 var allMenus = document.getElementById("services_menu").getElementsByTagName("li");  

 for(var k = 0; k < allMenus.length; k++)
	{
	  allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
	allMenus[k].setAttribute('onmouseout', 'Reset()'); 
	}

 }  

 </script> 



<script type="text/javascript">  

 function ChangeContentBg(i)  

 {  

 var Num = parseInt(i);  

 var ContentDiv = document.getElementById("content");  

 switch(Num)  

 {  

 case 0:  

 ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';

 break;  

 case 1:  

 ContentDiv.style.backgroundColor = 'red';  

 break ;  
 
 case 2:  

 ContentDiv.style.backgroundColor = 'purple';  

 break ;  
 
  case 3:  

 ContentDiv.style.backgroundColor = 'green';  

 break ;  
 
  case 4:  

 ContentDiv.style.backgroundColor = 'yellow';  

 break ;  


 /*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/  

 }  

 }  

 function Reset()  

 {  

 document.getElementById("content").style.backgroundColor = '';  

 }  

</script>

JavaScript

Code:

window.addEvent('domready',function(){
	//SAMPLE 8
	var handles8_more = $$('#handles8_more span');
	var nS8 = new noobSlide({
		box: $('box8'),
		interval: 5000,
		autoPlay: true,
		items: $$('#box8 h3'),
		size: 900,
		handles: $$('#handles8 span'),
		handle_event: 'mouseenter',
		addButtons: {
			previous: $('prev8'), 
			play: $('play8'), 
			stop: $('stop8'), 
			playback: $('playback8'), 
			next: $('next8') 
		},
		onWalk: function(currentItem,currentHandle){
			//style for handles
			$$(this.handles,handles8_more).removeClass('active');
			$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
			//text for "previous" and "next" default buttons
			$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
			$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
		}
	});
	//walk to item 0 witouth fx
	nS8.walk(0,false,true);
});

html

Code:

		<div class="slider sample8">
			<p class="buttons" id="handles8">
				<span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span>
			</p>
			<div class="mask1">
				<div id="box8">
					<div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();">
					</div>
				</div>
			</div>
			<p class="buttons">
				<span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
			</p>

			<p class="buttons">
				<span id="playback8">&lt; Playback</span>
				<span id="stop8">Stop</span>
				<span id="play8">Play &gt;</span>
			</p>
		</div>

All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again.

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Is it possible to set onmouseover only in js file without running the function on html code?

P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive).

Thank you very much

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>

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?


Any help would be greatly appreciated,

Cheers,

Drew.

hi,

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

MODS please delete.

apologies for my mistake.

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>

i have a link that references: <a href="My_Video.asx">video</a>. when you click, video will open in the "windows media player" and the parent window goes blank.

how can i prevent the parent window from going blank?

thank you for help
julio