JavaScript - Using Firebog To Track Unobtrusive Javascript Events?

in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial?

I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8.

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 ??

Hello,

I have a question about the cut and paste javascript events calendar
at http://www.javascriptkit.com/script/...calendar.shtml
Is there any way to add links to the event description that appears in the box below the calendar?

Thanks for your help.

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

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

Hi all,

I have this code:
Code:

<input type="hidden" value="update_cart" name="ca">
<input type="hidden" value="2" name="numcart">
<input type="submit" name="submit" value="Update Cart" class="inpSubmit">

I'd like to replace this:
Code:

<input type="submit" name="submit" value="Update Cart" class="inpSubmit">

with this:
Code:

<button>blabla<button>

How can I do?
I know something about unobtrusive javascript but I don't know how to do it.

Thank you very much

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?

First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site
http://www.collisionbodyworks.com/Pl...tic/index.html

Any help would be greatly appreciated. Thank you in advance

Hi,

Does anyone know how to make the cycle function in jquery unobtrusive?

I've got the following code and when I disable javascript, I get a nasty long list of images

Jquery code:

$(document).ready(function() {
$('.homepage-slideshow').cycle({
fx: 'fade',
befo onAfter,
pause: 1,
timeout: 0,
pager: '#nav'
});
});

function onAfter() {

var cycle_href = this.href;
var brokenstring = this.title.split(" :: ");

var cycle_title = brokenstring[0];
var cycle_descr = brokenstring[1];

$('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>');
$('#output-descr').html(cycle_descr);


}

Html code:

<div class="homepage-slideshow">
<a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a>

<a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a>




</div>
<div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div>
<div class="homepage-metadata">
<p id="output-descr"></p>
<h3 id="output"></h3>
</div>

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" -_-

Hi,

I am trying to create a small art project where I want to track real-time visitors on my site. I am not very good at coding at all and am really struggling to know how to go about this
To give you an idea of what I want to achieve; a basic example would be for every live visitor on my site, a circle would appear on the index page. I am aiming for the end product to be a very basic visualisation of live visitors on the site. So just a group of circles representing how many people are on the site.

I am really struggling to get to grips with the coding needed and would hugely appreciate your help.

Thank you very much for your time,

All,
Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks.

Is there anything wrong with the code below?
- it doesnt seem to track the links, (which it suppose to do inside img.php)

Code:

// IMAGERY SYSTEM
function Imagery(img) 
{
    ajax = ajaxFunction();
    var url = base_url+"application/imagery/img.php?img="+img;
    ajax.open("GET",url,true);
    ajax.send(null);
}

Link
Code:

<a href="http://google.com" onClick="Imagery('545');">

I've been playing around on my off time from other work to learn javascript better so I made this little php javascript game that randomly puts 10 boxes in different locations in a 10x10 table. The object is to close the boxes by clicking them and get timed on how long it takes to close all 10 boxes.

The problem is you can click the same box real fast and only have to click a couple boxes for the timer to stop. So what I'd like to know what is the best way to only accept one click for each box generated. Here is what I'm using so far for the click validation:

Code:

<script language="javascript">
var tovalidate = 10;
function validate()
{
tovalidate -= 1;
if(tovalidate === 9)
starttimer();
if(tovalidate === 0)
stoptimer();
}
</script>

And using Jquery to fade the boxes pretty after click and trigger the validator:

Code:

<script>
  $("#<?=$c;?>").click(function () {  /*where $c is id generated for each specific box */
  $("#<?=$c;?>").fadeOut("slow");
  validate();
  });
  </script>