IPB

Willkommen, Gast ( Anmelden | Registrierung )

 
Reply to this topicStart new topic
> [JS] Appending Query String to links on a document
Wertung 5 V
jan
Beitrag Nov 7 2008, 12:28 PM
Beitrag #1


Administrator
***

Gruppe: Admin
Beiträge: 552
Mitglied seit: 1-June 05
Wohnort: germany, hassia, bickenbach
Mitglieds-Nr.: 1



So kann man Parameter aus dem Query-String an alle Links in einem Dokument anhängen. Gibt sicher Situationen, in denen so etwas nützlich ist. Kann durch diese Zeile auf Links innerhalb eines Containers mit beliebiger Id beschränkt werden.

CODE
allTipps = document.getElementById('o2').getElementsByTagName('a');


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=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
//IMPORTANT FUNCTIONS
function $(docId){return document.getElementById(docId);}
function $$(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

//TOOLTIPS
function setUp_Tooltips(){
    var str = location.href.substr(location.href.indexOf("?foo="));
    allTipps = document.getElementById('o2').getElementsByTagName('a');
    for(i=0; i< allTipps.length; i++){
        // assign the query string to all links        
        allTipps[i].href += str;
        // tooltips
        if(allTipps[i].title){
            allTipps[i].innerHTML = allTipps[i].innerHTML + '<span>' + allTipps[i].title +'</span>';
            allTipps[i].onmouseover = function(){
                    var span = this.getElementsByTagName('span')[0];
                    span.style.display = 'block';
                    /* this loop applies the class tooltip link to the tooltips on that have the class tooltip link
                     * this way we can style them differently as it is required sometimes
                     */
                    if(span.parentNode.className == "tooltip link")
                    {
                        span.className = 'textTooltip';
                    }
                    span.innerHTML = this.title.substr(0,20);
                }
            allTipps[i].onmouseout = function(){this.getElementsByTagName('span')[0].style.display = 'none';}
        }
    }
}
</script>
</head>

<body onload="setUp_Tooltips();">
<div id="o2">
    <a href="http://google.de" title="tooltip">I'm a link</a>
</div>
</body>
</html>


Angehängte Datei  foo.html ( 2.01KB ) Anzahl der Downloads: 0



--------------------
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

Collapse

> Similar Topics

  Thema Replies Topic Starter Views Last Action
No New Posts Links
Entry- bis Advanced Level
0 jan 46,304 28th August 2008 - 10:29 AM
Last post by: jan
No New Posts Pinned: Links zu guten Seiten
Blogs, Guides, etc..
3 jan 22,794 25th April 2007 - 12:10 PM
Last post by: jan
No New Posts Topic has attachmentsLinks / Style
Paypal-Webseite Style
0 jan 12,370 23rd August 2005 - 12:03 PM
Last post by: jan
No New Posts Links / MouseOver
von ZALMAN Webseite
0 jan 11,820 11th August 2005 - 12:47 PM
Last post by: jan


 

- Vereinfachte Darstellung Aktuelles Datum: 23rd September 2020 - 01:49 AM