SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: event listeners

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post event listeners

    Having the Javascript Anthology as (only) basic knowledge I have faced an iteration problem with Eventlisteners.

    Background: A list of e-cards, the text 'send an e-card' can be clicked, a pop-up appears. Each pop-up menu calls a different php file which is actually a send-to-a friend form for that specific e-card. I use a basic code for the pop-up menu (see below). How can I write a Javascript function that iterates through the ID's instead of using seperate functions? I tried several solutions with for(var i = 0; etc....) and Arrays but couldn't move the DOM a bit!

    The HTML code for a list of e-cards:
    <ul id="sendacard">
    <li><img alt="" src="e-card1.gif" /><a href="e-card.php" id="cardlink">
    Send this e-card!</a></li>
    <li><img alt="" src="e-card2.gif" /><a href="e-card2.php" id="cardlink">
    Send this e-card!</a></li>
    etc..
    </ul>

    The Javascipt code that works (but with all seperate functions, which i know is not particular clean scripting).

    addLoadListener(init);
    addLoadListener(init2);
    addLoadListener(init3);
    addLoadListener(init4);
    addLoadListener(init5);
    addLoadListener(init6);

    function init()
    {
    document.getElementById('cardlink').onclick = function()
    {
    var cardform = makePopup(this.href, 640, 550, 'scroll');

    return cardform.closed;
    };
    }
    function init2()
    {
    document.getElementById('cardlink2').onclick = function()
    {
    var cardform = makePopup(this.href, 640, 550, 'scroll');

    return cardform.closed;
    };
    }

    ......and so on for init3 until 6....

    function makePopup(url, width, height, overflow)
    {
    if (width > 640) { width = 640; }
    if (height > 550) { height = 550; }

    if (overflow == '' || !/^(scroll|resize|both)$/.test(overflow))
    {
    overflow = 'both';
    }

    var win = window.open(url, '',
    'width=' + width + ',height=' + height
    + ',scrollbars=' + (/^(scroll|both)$/.test(overflow) ? 'yes' : 'no')
    + ',resizable=' + (/^(resize|both)$/.test(overflow) ? 'yes' : 'no')
    + ',status=yes,toolbar=no,menubar=no,location=no'
    );

    return win;
    }

    function addLoadListener(fn).... etc....

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This takes an array of id's and creates images. These images will open a window when clicked, and provide the e-card.php the id of the e-card.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
        <script type="text/javascript">
            function loadCards() {
                var parent = document.getElementById('parentDiv');
                var ids = new Array(1,2,3,4,5,6,7,8,9,10);
                for(var i = 0; i < ids.length; i++) {
                    var tmp = document.createElement('IMG');
                    tmp.src = 'e-card' + ids[i] + '.gif';
                    tmp.onclick = function(i)
                    {
                        return function()
                        {
                            window.open('e-card.php?id=' + ids[i], '', 'width=640; height=540; scrollbars=no; resizable=no; status=yes; toobar=no; menubar=no; location=no;'); 
                        }
                    }(i);
                    parent.appendChild(tmp);
                };
            }
            window.onload = loadCards;
        </script>
     
     </HEAD>
    
     <BODY>
    
     <div id="parentDiv">&nbsp;</div>
      
     </BODY>
    </HTML>


  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem solved!

    Thanks for the quick reply 'groberts sitepoint wizard'. I already saw it friday but wanted to check out things first before replying. I liked the solution but did not want the list creation be dependent on javascript. I suddenly realized I got to focused on the standard pop-up script in the Javascript Anthology using id's. I changed the code to using classes (a class="popup")and added the external Javascript which 'listens' to the Class "popup". It works!

    The HTML:
    <ul>
    <li><img alt="" src="../images/e-card1.gif" /><a class="popup"
    a href="..ecard1.php">Send this E-card.</a></li>
    <li><img alt="" src="../images/e-card2.gif" /><a class="popup" a href="../forms/ecard2.php">Send this E-card</a></li>
    etc..
    </ul>

    The external Javascript (excerpt):

    addLoadListener(initEvents);

    function initEvents()
    {
    var popupLinks = getElementsByAttribute("class", "popup");

    for (var i = 0; i < popupLinks.length; i++)

    {
    attachEventListener(popupLinks[i], "click", doPopup, false);
    }

    return true;
    }

    function doPopup(event) {

    if (typeof event == "undefined")
    {
    event = window.event;
    }

    var target = getEventTarget(event);

    while(target.nodeName.toLowerCase() != "a")
    {
    target = target.parentNode;
    }

    var href = target.getAttribute("href");

    var sendafriend = makePopup(href, 640, 550, 'scroll');

    stopDefaultAction(event);

    return false;
    };

    function makePopup(url, width, height, overflow)
    {
    if (width > 640) { width = 640; }
    if (height > 550) { height = 550; }

    if (overflow == '' || !/^(scroll|resize|both)$/.test(overflow))
    {
    overflow = 'both';
    }

    var win = window.open(url, '',
    'width=' + width + ',height=' + height
    + ',scrollbars=' + (/^(scroll|both)$/.test(overflow) ? 'yes' : 'no')
    + ',resizable=' + (/^(resize|both)$/.test(overflow) ? 'yes' : 'no')
    + ',status=yes,toolbar=no,menubar=no,location=no'
    );

    return win;
    }

    function stopDefaultAction(event)
    {
    event.returnValue = false;

    if (typeof event.preventDefault != "undefined")
    {
    event.preventDefault();
    }

    return true;
    }


Bookmarks

Posting Permissions

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