JavaScript - How To Extract Target Of An Anchor Under Mouse Pointer

Hi,

I'm pretty new to javascript and ajax and need some help.

I want to create a form that has an advanced search page which changes the search fields that appear, depending on what the user clicks.

For example, at the top there are three buttons:
1. Search images 2. Search videos 3. Search audio

As a user clicks these I want different search fields to be shown on the page.

I have tried searching for a way to do this via Google, with no luck. Can someone point me in the correct direction (via a demo or tutorial) on how to do this?

I don't just want the answer as I really want to learn how to get this to work!

Thanks

I've wanted to add a hint pointer on my form but it is clearly not working as proposed...

Javascript:
Code:

<style type="text/css">


/* All form elements are within the definition list for this example */
dl {
	font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}


/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function prepareInputsForHints() {
	var inputs = document.getElementsByTagName("input");
	for (var i=0; i<inputs.length; i++){
		// test to see if the hint span exists first
		if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
			// the span exists!  on focus, show the hint
			inputs[i].onfocus = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
			}
			// when the cursor moves away from the field, hide the hint
			inputs[i].onblur = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	}
	// repeat the same tests as above for selects
	var selects = document.getElementsByTagName("select");
	for (var k=0; k<selects.length; k++){
		if (selects[k].parentNode.getElementsByTagName("span")[0]) {
			selects[k].onfocus = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
			}
			selects[k].onblur = function () {
				this.parentNode.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	}
}
addLoadEvent(prepareInputsForHints);
</script>

HTML Code:
<br><dl><dt><label><strong>Special requirements:</strong></label></dt>
<br><dd><textarea name="special_requirements" cols="60" maxlength="300"></textarea>
<span class="hint">e.g. Allergies, Disabilities, Parking, etc.<span class="hint-pointer">&nbsp;</span></span>
</dd></dl>

Any help is appreciated, thanks!

So i've written up the code to do a lightbox esque overlay image gallery. everything is working smooth and fine. The only concern is that I have the following:

lets say that I have a page that has multiple galleries. Obviously I would have to make each literal array with the gallery data different names, ex:

Code:

var _gallery1 = {
	'images': [
		{ 'id' : 1, 'src' : "" }
	]
}

var _gallery2 = {
	'images': [
		{ 'id' : 1, 'src' : "" }
	]
}

or would it be easier to do it multi dimensional?

Code:

var gallery_data = {
	'gallery1': [
		'images': [
			{ 'id' : 1, 'src' : "" }
		]
	]
	'gallery2': [
		'images': [
			{ 'id' : 1, 'src' : "" }
		]
	]
}

regardless of which direction I use... my main question is this:

I have two variables which are the following:

Code:

galVariable = (i = location.hash.match(/#set=(.+)&photo=(\d+)/)) ? i[1] : null;
galArray    = _gallery2.images;

I'm unfamiliar with a way of doing something along the lines of this, and having it actually work:

Code:

galVariable = (i = location.hash.match(/#set=(.+)&photo=(\d+)/)) ? i[1] : null;
galArray    = galVariable.images;

obviously "galVariable" would be undefined... as i'm trying to get "_gallery2.images" but trying to use "galVariable" to point to "_gallery2"

I'm familiar with solving a problem like this in PHP, not so much javascript. is there a JS function that can be used to ensure that it's using whatever "galVariable" equals to, and then that array's content is? Or is there a different way to go on about this.

thanks in advance. if anyone needs some more clarification. please feel free to ask, and I'll respond asap.

Hey guys,

I'm trying to obtain the object of the element on the page that is clicked, but my code is unable to set the target. Here's what I have.

The JavaScript
Code:

   function show_info(e){
                        //get the targeted element.
                        var targ;
                        if (!e) var e = window.event;

                        if (e.target) targ = e.target;
                        else if (e.srcElement) targ = e.srcElement;
                        
                        if (targ.nodeType == 3) targ = targ.parentNode;

                        alert (targ); //FAIL!
                        

                    }

The Form
Code:

<form action="#" method="post">

<input type="hidden" name\"id" value="" />
<input type="submit" name="submit" value="Info" onclick="show_info()"/>
 </form>

What I want to do is get the target element(the submit button) so that I can get its sibling(it contains a unique ID). But it's not working.

Hi guys I was wondering if its possible in javascript to do something like this:

Code:

document.getElementById('div').children('img').style

This is my code with int value I can target children is this also possible with a string like img?

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" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<script type="text/javascript">
	window.onload=function()
	{	
		var d		= document; 
		var e                   = d.getElementById('t');
		
                          e.children[0].style.border = "solid black 1px";
	}
	</script>

</head>
<body>

<div id="t">
	<img width="120" height="80" src="./images/full6.jpg" alt="" />
	<img width="120" height="80" src="./images/full6.jpg" alt="" />
	<img width="120" height="80" src="./images/full6.jpg" alt="" />
	<img width="120" height="80" src="./images/full6.jpg" alt="" />
</div>

</body>
</html>

Hoping someone can help a simple soul!!

I am trying to work out if there is a way that I can use a target url as a simple password (or even username) at a log in screen.

Essentially I want to be able to send people to a different URL depending on their login details but without having to do anything too complicated or secure.

Hoping someone can help

Thanks in advance!

tested this only on FF.

Code:

target = this.parentNode.parentNode.getElementsByClassName('help')[0]; 
target.style.display = (target.style.display=='none')?'inline':'none';

-->Error: target.style is undefined




In next two codes what is red is different,
all the rest as above.
Code:

 var  target = this.parentNode.parentNode.getElementsByClassName('help')[0];
target.style.display = (target.style.display=='none')?'inline':'none';

--> works.


Code:

 xxx  = this.parentNode.parentNode.getElementsByClassName('help')[0];
 xxx .style.display = ( xxx .style.display=='none')?'inline':'none';

--> works.


Why is that ?

I have a few banners and forms that I wish to open in a new tab not the same window or a new window.
I have tried the deprecated
Code:

target="_blank"

but even that opens a new window.
I have done some research on google and came up with CSS code:
Code:

form[target] {
	target-name: new;
	target-new: tab; 
}

a[target] {
	target-name: new;
	target-new: tab; 
}

This however does not work and opens in the same window. When using the CSS I remove the inline target.

Any Ideas on how to fix this?

Need help adding var target to this form action

Would This be correct?

var form = inp.form;
form.target = "_self";


Code:

<html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
    var form = inp.form;

    form.action = op + ".php";
    
    var temp = inp.id.split(",");
    form.id.value        = temp[0];
    form.FirstName.value = temp[1];
    form.LastName.value  = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">

<input type='image' id='show,me,data' onclick=formop(this,'add');    src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'edit');   src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'delete'); src='static/icon16/delete.jpg'>
</form>
</body>

Hi all,

I've a set of similar elements (to display thumbnails) having style attributes like
Code:

style="background:#ddd url('/images/photos/thumbs/89625045.jpg') top center no-repeat;"

Code:

style="background:#ddd url('/images/photos/thumbs/708905  copy.jpg') top center no-repeat;"

etc.

I need to get the background-image urls from the style (and then remove the part thumbs). My intention is to dynamically create an img element corresponding to each thumbnail image.

I was thinking to use a substr() to get the urls and replace() to remove "thumbs", but the property style.backgrounImage gives a string like
Code:

url("/images/photos/thumbs/4923face.jpg")

in FF3, where as in FF2 and IE6 it gives Code:

url(/images/photos/thumbs/4923face.jpg)

.

How can I proceed with this?

Any help would be apreciated.
Thanks.

I am working on a simple movie database to practise my JavaScript and have encountered difficulty extracting information from the xml file. Let me explain my scenario. Sorry if it gets a bit long-winded!

The interface I have created has three columns which each serve the following functions:

Column 1 -> The user selects a film of their choice.

Column 2 -> Once the user has selected a film in Column 1 then more information about the film appears in this column. This includes title, director and cast. The user has the option of then selecting a cast member to find out information about them.

Column 3 -> Once the user has selected a cast member in Column 2 then their name and a picture of them appears in this column (using the <img> tag). This information in this column also includes the film title, film artwork (applied <img> tag).

But the difficulty I have encountered is as follows - I have a rough idea of how to update column 2 in real time to reflect the changes in Column 1.

The method I am using for acquiring the relevant information in Column 2 is creating an array then using the indexOf to retrieve a the details of a specific film. I know this method is wrong and it would be better to pull the relevant information from the xml file.

How do I use the idx from the Column 1 selection to pull out the relevant information to put in Column 2 and 3?

Here is what I've done so far:

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function XMLload() {
    jQuery.post(url, function(data) {getxml(data)}, 'xml');
}

function dataFromTag(node, t) {
    var d = node.getElementsByTagName(t);
    if (d.length == 0) return ('');
    return (d[0].firstChild.nodeValue);
}

jQuery(document).ready(function() {XMLload();});

var url = 'movie.xml';

var xmlMovies;
var aryMovieList = [];
var xmlActors;
var aryActors = [];
var iframeOpen = '<html><head><\/head><body>'
var iframeClose = '<\/select><\/form><\/body><\/html>'

function getxml(xmldoc) {
    xmlMovies = xmldoc.getElementsByTagName('movie');
    var hstr = iframeOpen;
    hstr += '<select size="' + xmlMovies.length + '" onchange="parent.actors(this.selectedIndex);">';
    for (var MovieID = 0; MovieID < xmlMovies.length; MovieID++) {
        aryMovieList[aryMovieList.length] = dataFromTag(xmlMovies[MovieID], "title");   
        xmlActors = xmlMovies[MovieID].getElementsByTagName("actor");

        for (var ActorID = 0; ActorID < xmlActors.length; ActorID++) {
            aryActors[aryActors.length] = dataFromTag(xmlMovies[MovieID], "director") + "/" + dataFromTag(xmlMovies[MovieID], "title") + "/" + dataFromTag(xmlActors[ActorID], "name");
        }

        hstr += '<option>' + aryMovieList[MovieID] + '<\/option>';
    }
    hstr += iframeClose;

    // test for aryMovieList
    // alert(aryMovieList);
    // test for aryActors
    // alert(aryActors);

    with(document.getElementById('movies').contentDocument) {
        open();
        write(hstr);
        close();
    }
}

function actors(idx) {  
    var hstr = iframeOpen;
    var selectActor = [];
    hstr += 'title: ' + dataFromTag(xmlMovies[idx], 'title');
    hstr += '<br>';
    hstr += 'director: ' + dataFromTag(xmlMovies[idx], 'director');
    hstr += '<br>';

    for (var i = 0; i < aryActors.length; i++) {
        var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
        if (aryActorList >= 0) {
            selectActor[selectActor.length] = i;
        }
    }

    // alert(selectActor);

    hstr += '<select size="' + selectActor.length + '" onchange="parent.info(this.selectedIndex);">';

    for (var i = 0; i < aryActors.length; i++) {
        var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
        if (aryActorList >= 0) {
            hstr += '<option>' + aryActors[i].substring(aryActors[i].lastIndexOf("/") + 1) + '<\/option>';
        }
    }

    hstr += iframeClose;

    with(document.getElementById('actors').contentDocument) {
        open();
        write(hstr);
        close();
    }
}

function info(idx) {
    var hstr = iframeOpen;
    hstr += '';
    hstr += iframeClose;

    with(document.getElementById('info').contentDocument) {
        open();
        write(hstr);
        close();
    }
}
</script>
</head>

Here is the XML file in use:

Code:

<movies>
    <movie>
        <title>Match Point</title>
        <director>Woody Allen</director>
        <image>Match-Point.jpg</image>
        <actor>
            <name>Scarlett Johansson</name>
            <image>Scarlett-Johansson.jpg</image>
        </actor>
        <actor>
            <name>Brian Cox</name>
            <image>Brian-Cox.jpg</image>
        </actor>
        <actor>
            <name>Matthew Goode</name>
            <image>Matthew-Goode.jpg</image>
        </actor>
        <actor>
            <name>Penelope Wilton</name>
            <image>Penelope-Wilton.jpg</image>
        </actor>
    </movie>
    <movie>
       <title>Inception</title>
        <director>Christopher Nolan</director>
        <artwork>Inception.jpg</artwork>
        <actor>
            <name>Leonardo DiCaprio</name>
            <image>Leonardo-DiCaprio.jpg</image>
        </actor>
        <actor>
            <name>Ken Watanabe</name>
            <image>Ken-Watanabe.jpg</image>
        </actor>
        <actor>
            <name>Joseph Gordon-Levitt</name>
            <image>Joseph-Gordon-Levitt.jpg</image>
        </actor>
        <actor>
            <name>Marion Cotillard</name>
            <image>Marion-Cotillard.jpg</image>
        </actor>
        <actor>
            <name>Ellen Page</name>
            <image>Ellen-Page.jpg</image>
        </actor>
        <actor>
            <name>Tom Hardy</name>
            <image>Tom-Hardy.jpg</image>
        </actor>
    </movie>
    <movie>
        <title>Blade II</title>
        <director>Guillermo del Toro</director>
        <artwork>Blade-II.jpg</artwork>
        <actor>
            <name>Wesley Snipes</name>
            <image>Wesley-Snipes.jpg</image>
        </actor>
        <actor>
            <name>Kris Kristofferson</name>
            <image>Kris-Kristofferson.jpg</image>
        </actor>
        <actor>
            <name>Ron Perlman</name>
            <image>Ron-Perlman.jpg</image>
        </actor>
        <actor>
            <name>Leonor Varela</name>
            <image>Leonor-Varela.jpg</image>
        </actor>
        <actor>
            <name>Norman Reedus</name>
            <image>Norman-Reedus.jpg</image>
        </actor>
    </movie>
    <movie>
        <title>Pulp Fiction</title>
        <director>Quentin Tarantino</director>
        <artwork>Pulp-Fiction.jpg</artwork>
        <actor>
            <name>John Travolta</name>
            <image>John-Travolta.jpg</image>
        </actor>
        <actor>
            <name>Samuel L Jackson</name>
            <image>Samuel-L-Jackson.jpg</image>
        </actor>
        <actor>
            <name>Uma Thurman</name>
            <image>Uma-Thurman.jpg</image>
        </actor>
        <actor>
            <name>Harvey Keitel</name>
            <image>Harvey-Keitel.jpg</image>
        </actor>
    </movie>
        <movie>
        <title>Avatar</title>
        <director>James Cameron</director>
        <artwork>Avatar.jpg</artwork>
        <actor>
            <name>Sam Worthington</name>
            <image>Sam-Worthington.jpg</image>
        </actor>
        <actor>
            <name>Zoe Saldana</name>
            <image>Zoe-Saldana.jpg</image>
        </actor>
        <actor>
            <name>Stephen Lang</name>
            <image>Stephen-Lang.jpg</image>
        </actor>
        <actor>
            <name>Michelle Rodriguez</name>
            <image>Michelle-Rodriguez.jpg</image>
        </actor>
    </movie>
</movies>

Many thanks in advance!

If I wanted to extract certain parts of the URL... how can I do this? I know how to extract the entire URL or just the search query but what if i want to do this


/boxscore.asp?w=2&s=4&yr=


Just extract the numbers 2 and 4 from the url. I want to make a new link for this site I am on to plug those 2 numbers into here

/game.asp?gnum=2&gslot=4

That's basically what i want the new window to read.

I have a php page which uses the following javascript code to open another page (The users profile page) and alos carry over the userID (dUid)

Code:

var userProfileUrl = chatProfileUrl+dUid.replace(/_/gi,"");		

		document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/zoom.png> View Profile</span></br>";

I wanted to add to the menu another image link so I copied the same coding, but I do not know where to place the URL target that I want opened. I know I want the userID (dUid) also to follow this link as well. If I want the coding below to act in the same manner as the coding above, but instead open a page called /gift.php, where do I set the Url?

Code:

document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/gift.png> Send Gift</span></br>";

Anyone familiar enough with pikachoose to help me out here? Using a pikachoose slideshow inside an iframe and for some reason adding a url target of _top or _parent is not working. It just opens up the link in the iframe window no matter what i do. Anyone with an idea of how to fix this?
I'm working on it in the staging area of my site- http://staging.susanb.com/
You can see when you click on one of the images it doesnt fill the entire window

This just creeped up on me at the end of a project so im hoping its not a deal breaker
thanks in advance!!

I have an ajax tabbed site which loads the content in the div below it.

I made a drop down link so that the user could select one of 3 on one tab but this is outside of the script.js. I'm wondering if there's a way to get the target of these drop down links to open in the div below instead of a new tab?

http://voiceprocess.net/script.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Improvement Survey Process</title>
<link href="../../../voiceprocess.ico" rel="shortcut Icon">
<link rel="stylesheet" type="text/css" href="../styles.css" />
<link href="../dropdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main" style="float:left">

<table width="991" border="0" cellpadding="0">
<tr>
<td width="649"><ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul></td>
<td width="75" style="padding-bottom:43px"> <div id="centeredmenu" style=" width:0px; height:0px"> <ul > <li style="padding-left:0px"><span class="sears"><a href="#')">&nbsp;</a></span>
<ul style="padding-top:2px"> <span class="space"></span><span class="space"></span>
<li><a href="pages/sears_refacing.html" target="_self">Cabinets Refacing</a> <div>
<li><a href="pages/sears_hvac.html">HVAC </a></li>
<li><a href="pages/sears_windows.html"></a>New Windows </a></li>
</ul>
</li>
</div></td>
<td width="241"><a href="upsell.php" target="_blank"><img src="../u.png" alt="" width="26" height="37" border="0" style="padding-bottom:5px"/></a>&nbsp;<a href="../data.html" target="_blank"><img src="../s.png" alt="" width="29" height="37" border="0" style="padding-bottom:5px"/></a><img src="../../../images/logosm.png" alt="" width="158" height="42" hspace="10" /> </td>
</tr>
</table>
<div id="tabContent">
<div id="contentHolder">
<!-- The AJAX fetched content goes here -->
</div>
</div>
</body>
</html>