www.webdeveloper.com
Results 1 to 7 of 7

Thread: Javascript to create a link

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    4

    Question Javascript to create a link

    Hello, I'm sorry for my English

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

    I have the link:

    HTML Code:
    <a href="#page.php" rel="history">PAGE LINK</a>
    I need something that call a javascript function, for example:

    HTML Code:
    <a href="javascript:pageURL('#page.php','history')>PAGE LINK</a>
    where call the function

    Code:
    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

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Something like this should work:
    Code:
    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:
    Code:
    <a href="page.php" rel="history" onclick="pageURL("#" + this.href, this.rel); return false;">PAGE LINK</a>
    Last edited by toicontien; 05-13-2009 at 03:52 PM. Reason: Clarifying code example

  3. #3
    Join Date
    May 2009
    Posts
    4
    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.:
    Code:
    <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

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    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?
    Code:
    /**
     * 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:
    Code:
    <a href="#" onclick="pageURL('url_here', 'rel_here'); return false;">LINK TEXT</a>

  5. #5
    Join Date
    May 2009
    Posts
    4
    I made exactly how you told me, but when I click on link nothing happens. The page, remains the same page.


  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  7. #7
    Join Date
    May 2009
    Posts
    4

    resolved

    Ok

    My html code and javascript are in the same page:

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles