Javascript to create a link

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Fabiano

Hello, I'm sorry for my English

I need to creat a link via javascript that pass the attribute rel:

I have the link:

<a href="#page.php" rel="history">PAGE LINK</a>

I need something that call a javascript function, for example:

<a href="javascript:pageURL('#page.php','history')>PAGE LINK</a>

where call the function

function pageURL(url, rel){

}

I don't know how to create in this function, I need creat the link with the href and rel attributes inside this function, and that in it same function execute the link automatically.

I need to do it, because I have to call it in the getURL of my flash menu, because the getURl don't suport the attribute rel.

Somebody can help me??

Thank's

toicontien

Something like this should work:

var el = document.createElement("a");
el.rel = "history";
el.href = "page.php";
el.onclick = function () {
  pageURL("#" + this.href, this.rel);
  return false;
};

Actually, something like this:

<a href="page.php" rel="history" [B]onclick="pageURL("#" + this.href, this.rel); return false;"[/B]>PAGE LINK</a>

Fabiano

I am grateful for your answer friend... but I not yet understood very well.

I must call the function through my onclick to create the link, and on the same function executes the link created automatically.

Explaining:

my link should be only with the onclick, because I want to make a function that creates the link and executes it automatically. Because I will use this function on getURL of the flash that not support to pass the rel attribute.

Ex.:

<a href="#" onclick="pageURL('page name','rel attribute');">PAGE LINK</a>

So I need the function that create the link with the href and rel attributes, and after executes it automatically.

I believe that is more or less as you showed in first case but I am not achieving to do it work...

Thank's

toicontien

When this link is created, where in the Document Object Model (created from the HTML document) should the link appear? It's one thing to create a link, but it's not really useful unless you append it to the DOM. For what you are asking, the following steps are recommended:

1) Call the pageURL() function.

2) The pageURL() function creates an <a> element

3) The new <a> element is appended to the DOM (Document Object Model)

4) Call the click() method of the new <a> element.

Maybe this function will help?

/**
 * Creates a link and clicks it
 * @param string href The link's href attribute value
 * @param string rel The link's rel attribute value
 * @return void
 */
function pageURL(href, rel) {
  // Create new <a> element
  var el = document.createElement("a");

  // Assign attributes passed to function
  el.rel = rel;
  el.href = href;

  // Append new link to document
  document.getElementsByTagName("body")[0].appendChild(el);

  // "click" the link
  el.click();

  // Nullify the reference to this DOM node to prevent memory leaks
  el = null;
}

And to use:

<a href="#" onclick="pageURL('url_here', 'rel_here'); return false;">LINK TEXT</a>

Fabiano

I made exactly how you told me, but when I click on link nothing happens. The page, remains the same page.

toicontien

Can you post the HTML and JavaScript you are using? Remember, the script I posted adds the link to the very end of the web page. I need to see the HTML and JavaScript source code to help you further.

Fabiano

My html code and javascript are in the same page:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MY SITE</title>
<link href="css/stle.css" rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>

<script type="text/javascript">

/**
* Creates a link and clicks it
* @param string href The link's href attribute value
* @param string rel The link's rel attribute value
* @return void
*/
function pageURL(href, rel) {
	// Create new <a> element
	var el = document.createElement("a");

	// Assign attributes passed to function
	el.rel = rel;
	el.href = href;

	// Append new link to document
	document.getElementsByTagName("body")[0].appendChild(el);

	// "click" the link
	el.click();

	// Nullify the reference to this DOM node to prevent memory leaks
	el = null;
}

</script>

<!-- SCRIPT OF THE JQUERY HISTORY -->
<script type="text/javascript">

//hash = url;
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
    // hash doesn't contain the first # character.
    if(hash) {
        // restore ajax loaded state
        $("#col-right").load(hash);
    } else {
        // start page
        //$("#load").empty();
         $('#col-right').load("home.php"); // abre a pagina inicial ao abrir o site
    }     
};

//start: function(elementLink){

$(document).ready(function(){
    // Initialize history plugin.
    // The callback is called at once by present location.hash.
    $.historyInit(pageload);

    // set onlick event for buttons
 //  if((elementLink.getAttribute('rel') == 'history')){

   $("a[@rel='history']").click(function(){
        //
        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $("#col-right").html('<div class="tarjaTit"><img src="imagens/ajaxloader.gif"></div>');
        // moves to a new page.
        // pageload is called at once.
        $.historyLoad(hash);
        return false;
   });
});

</script>

<!-- END -->

<!-- SCRIPT TO INSERT FLASH
<script type="text/javascript">
	var flashvars = { 
		page: "<? echo page; ?>"
	};

var params = { 
	scale: "noscale",
	salign: "t",
	wmode: "transparent"
};

var attributes = {
};

swfobject.embedSWF("flash/menu.swf", "menu-flash", "210", "211", "8", "flash/expressInstall.swf", flashvars, params, attributes);
</script>

</head>

<body>
	<div id="content">
		<div id="col-left">
                        <a href="#" onclick="pageURL('#home.php','history');">HOME</a> | 
			<a href="#" onclick="pageURL('#contact.php','history');">CONTACT</a> 
	        </div>
                <div id="menu-flash"><!-- Here goes the flash menu --></div>
       </div>
       <div id="col-right">
          <!-- Here goes the content of the other pages -->
       </div>
    </body>
</html>

It is my code:

Explaining: My original link isn't <a href="#" onclick="pageURL('#home.php','history');">HOME</a> but:
<a href="#home.php" rel="history">

The rel attribute is necesssary to the jQuery history function. So you can see, I will use the function pageURL in the flash that don't support the attribute rel of the link.

I need tha this function when clicked in the flash button, create a the link and execute it, opening the page with the jQuery history.

Thank's!