JavaScript - Keyword Target In Firefox

I'm looking at building an interactive desktop gadget for our company computers that functions similar to Clippy (less annoying though).

The idea is for users to be able to type in keywords or questions and have the gadget present links to pages on our intranet. So similar to a search engine but more focused on answering questions as opposed to just returning a hundred results.

I've got a moderate understanding of java so I know I could do something like IF "Textbox" EQUALS "Keyword" THEN DO "THAT". Need a little more sophistication though, it should be able to accept multiple keywords and weigh the search results accordingly. I'm sort of picturing an updatable XML table like this:

KEYWORD This is the result
KEYWORD This is the result

Or an array in a separate .js file.

Maybe there's a better way than that actually but it's what I know. Has anyone got some advice on this? Thanks.

Hello all,

Sorry if this may seem like a silly question, I have searched but not really to sure how to word what I am searching for as I don't know if I am going the right way around it!

Basically, I am looking to insert a keyword in to a javascript alert box when someone visits my website, so say they came from codingforums.com, it would say "Welcome, CodingForums.com Visitor".

My keyword will be passed from the ad platform I am working with and shows up correctly in the tracking, so I'd imagine it's just a case of having the snippet of code for it to show in the alert, correct?

If there is no keyword, I would just like it to say "Welcome Visitor" or something.

How do I go about this?

Thank you in advance for any help.

Code:

this.delete = function(obj)
{
..

Is that it ? I can't have delete ? Or can this be written in some other way, including delete ?

Hi

I need to develop a simple keyword search in external html files(having traversing in directories ability).

Is this possible?
(in this case php can be used)

Please guide me

Thanks

I am confused about what the return keyword is actually returning when returning an object, a primitive, or a function.

My confusion is compounded by the fact that I'm not sure if a function is an object or not.
According to the book JavaScript Programmer Reference it is:
"All functions in JavaScript are first class objects , meaning they can be passed around like any other object reference. In fact, regardless of how they are created, functions are instances of a global object named (aptly) Function."

However, someone else states that a function is not an object. An object is a set of primitives and references. A function is executable code. Functions become objects through the use of the new operator. Yet, in the book I mentioned, it says you don't need the new keyword to execute the function as an object, as it already inherits from the object Function when the function keyword is used:
Code:

function functionName([argname1 [, ...[, argnameN]]])
{
statements;
}

So there's one source of contradiction.

Now the bigger issue is what is going on when the return keyword is used. Notice the Validation() function returns an object as its last expression. This technique is common, where you return an object which contains functions in form of object notation. I believe this is done so that we create a closure so that when the intepreter exits the Validation() method, since we created a closure by returning an object, which contains the inner functions addRule and getRule, the local variables of Validation() are not destroyed, given that we can reference them through the two inner functions that make use of the local variables of the outer function. So when we use the return keyword on an object literal, and then exit the function, when we call one of the inner functions as we do later:
Code:

var rule = $.Validation.getRule(types[type]);

essentially getRule() is called, passes an argument, which is received by the inner function as parameter we call name:
Code:

getRule : 
function(name) {  

                return rules[name];
            }

First, note that the return {} is written in object notation, therefore making getRule a local variable and, thus, private function only accessible through the namespace of Validation().

Validation() declares the rules local variable and because of the closure, we can access the rules local variable through the getRule() inner function.

*****Here's the part that really thows me off. We return rules[name]. So let's say name is equal to email. This is an associative array so email (held in name) is a property of rules. So here we return the object's property:
Code:

return rules[name];

And then assign it to a local variable called rule:
Code:

var rule = $.Validation.getRule(types[type]);

So when we return an object rules[name], do we return a reference to an object or a value? In other words, by returning rules[name], where name is equal to email, are we then returning a reference to the following object literal:
Code:

email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            }

And if we are returning a reference, by returning a reference, are we essentially pointing to this object when we assign it to rule? In other words, the variable rule is just pointing to the object literal?

And is that the reason we can then access the check function or msg local variable through rule using dot notation, because rule points to the email object literal?

Now the ultimate brain twist for me is that if a function is an object, then why when return a function, it returns a value, such as a boolean, if an object only returns a reference and not the value?

Code:

//Validation is a local variable as it is in a self-executing anonymous function. The purpose of the said anonymous function is to pass the jQuery object as a parameter $ so the $() function will be in scope of the anonymous function and not interfere with other libraries that make use of the same function technique - in the global scope. 
(function($) {
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value); //The test() method is built into javascript
        }
        return {
            
            addRule : function(name, rule) {  

                rules[name] = rule;
            },
            getRule : function(name) { 

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

Thanks for any response.

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.

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

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?

Not sure if I even ask correctly. Excuse the poor PHP man for not knowing javascript. I need to add a check to this code.

It picks up an image when you click on it, then puts it down when you click again.

What it needs is another check WHERE (on what) have you clicked to put it down. If it's a particular DIV then OK. If not (if elsewhere) don't put it down and don't change the click counter.

Code:

<html>
<head>
    <style type="text/css">
        .drag
        {
            position: relative;
            height:56px;
            width:56px;
            background-color:#FF0000;
            color:White;
        }
    </style>

    <script type="text/javascript">
        
        var _startX = 0;            // mouse starting positions
        var _startY = 0;
        var _offsetX = 0;           // current element offset
        var _offsetY = 0;
        var _dragElement;           
        var _oldZIndex = 0;         // we temporarily increase the z-index during drag
        var _debug;    
        var _countClick = 0;
        InitDragDrop();
        function InitDragDrop() {
            document.onclick = OnMouseClick;
            document.onMouseClick = OnMouseClick;    
        }

        function OnMouseClick(e) {
            debugger;
            _debug = $('debug');
            // if first click this is zero
            if (_countClick == 0) {
                // IE
                if (e == null)
                    e = window.event;

                // IE uses srcElement, others use target
                var target = e.target != null ? e.target : e.srcElement;

                _debug.innerHTML = target.className == 'drag'
        ? 'draggable element clicked'
        : 'NON-draggable element clicked';

                // for IE, left click == 1
                // for Firefox, left click == 0
                if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') {
                    // grab the mouse position
                    _startX = e.clientX;
                    _startY = e.clientY;

                    // grab the clicked element's position
                    _offsetX = ExtractNumber(target.style.left);
                    _offsetY = ExtractNumber(target.style.top);

                    // bring the clicked element to the front while it is being dragged
                    _oldZIndex = target.style.zIndex;
                    target.style.zIndex = 10000;

                    // set _dragElement for next click
                    _dragElement = target;

                    // tell our code to start moving the element with the mouse
                    document.onmousemove = OnMouseMove;

                    // cancel out any text selections
                    document.body.focus();

                    // prevent text selection in IE
                    document.onselectstart = function() { return false; };
                    // prevent IE from trying to drag an image
                    target.ondragstart = function() { return false; };
                    
                    //set click count to 1 so we know next click is to release
                    _countClick = 1;
                    // prevent text selection (except IE)
                    return false;
                }

            }

            if (_countClick == 1) {

                if (_dragElement != null) {
                    _dragElement.style.zIndex = _oldZIndex;

                    // we're done with these events until the next OnMouseDown
                    document.onmousemove = null;
                    document.onselectstart = null;
                    _dragElement.ondragstart = null;

                    // this is how we know we're not dragging      
                    _dragElement = null;

                    _debug.innerHTML = 'mouse up';
                }
                
                //set click count back to 0 so next we know it's first click again
                _countClick = 0;
            }

        }

        function OnMouseMove(e) {
            if (e == null)
                var e = window.event;

            // this is the actual "drag code"
            _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
            _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

            _debug.innerHTML = '(' + _dragElement.style.left + ', ' +
        _dragElement.style.top + ')';
        }

        function ExtractNumber(value) {
            var n = parseInt(value);

            return n == null || isNaN(n) ? 0 : n;
        }

        // this is simply a shortcut for the eyes and fingers
        function $(id) {
            return document.getElementById(id);
        }

        function OnMouseUp(e) {

        }
    </script>

</head>
<body>

    <div id="thediv" class="drag" style='background: url(shield.gif) no-repeat center top;'></div>
    <pre id="debug"> </pre> 
    
    <div id="slot1" class="dropon" style='position: absolute; height:28px; width:28px; top: 200px; left: 200px; background-color:#FF0000; color:White;'></div>
    <div id="slot2" class="dropon" style='position: absolute; height:28px; width:28px; top: 200px; left: 230px; background-color:#FF0000; color:White;'></div>

</body>
</html>

I have an array of all links on a page (see var wa_links = document.links; below). How do I determine if the target of a link is set to "_blank"? I need to do this because currently with my code below, when a link has target="_blank" it ends up adding the Google Analytics code to the parent window and also opening a new window (so basically the new page opens in both the parent and target window instead of just the target window as expected).

Code:

/*Regex list of on-site domains, pipe and backslash delimited. */
var wa_onsiteDomains = /mydomain\.com|my2nddomain\.com|my3rddomain\.com|javascript/i;

//Display-friendly domain and path name
var wa_displayDomain = location.hostname.replace("www.","").toLowerCase();
var wa_displayPathname = location.pathname.toLowerCase();

/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
   var old = (element[event]) ? element[event] : function () {};
   element[event] = function () {fn(); old();};
}

function wa_crossDomainLink(i) {
	return function () { 
		var thisLink = decodeURI(wa_links[i]);
		if (typeof(_gaq) == "object")
			_gaq.push(['_link', thisLink]); return false;
	};
}

var wa_links = document.links;
if ( wa_links ){
	for(var i=0; i<wa_links.length; i++) {
		if( wa_links[i].href.match(wa_onsiteDomains) && !wa_links[i].href.match(location.hostname)){
		unobtrusiveAddEvent( wa_links[i], 'onclick' , wa_crossDomainLink(i));
		}
	}
}

With jquery I could just do something like...

Code:

if (jQuery(link).attr('target') == "_blank")

...but how do I do this in plain old JavaScript?

Thanks!

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

I've been doing some searching and I can't seem to find what I am looking for. I hope someone can help. I am trying to target a link to an iframe window. The catch is that I need to use an onClick function in a TD tag...

Here is an example:

<TABLE HEIGHT="40" WIDTH="780" CELLSPACING="0" CELLPADDING="0" BORDER="1">
<TBODY>
<TR>
<TD ALIGN="CENTER">HEADER 1</TD>

</TR>
<TR>
<TD OnClick="location='http://www.ophil.com'" BGCOLOR="#FFFFFF">Ophil</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td><a name="bidframe">
<IFRAME SRC="bid_item_instructions.html" TITLE="IFRAME" SCROLLING="no" NAME="bidpage" WIDTH="100%" HEIGHT="450" ALIGN="center" FRAMEBORDER="yes" >
</IFRAME>
</a></td>
</tr>
</table>

</CENTER>
</BODY>
</HTML>


I need the results of that onclick to appear in the iframe window I have called bidframe... Any ideas?