Home/ Questions/Q 8514285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T04:49:18+00:00

having what I imagine is probably a simple problem. Although I’ve set alerts in

  • 0

having what I imagine is probably a simple problem. Although I’ve set alerts in my on click “toggle” function, they never appear. I presume the trouble is somehow with adding the event handlers, but I really don’t know. Any thoughts would be greatly appreciated! Many thanks.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Men With Arms</title>
        <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
        <script type="text/javascript" src="scripts.js"></script>
        <style type="text/css">
            body { margin: 0; padding: 0; background-color: #111; color: #FFF; text-align: center; font-family: "Helvetica Neue Light", Helvetica, sans-serif; }
            #yall { position: absolute; width: 100%; height: 100%; }
            #content { position: absolute; margin: -225px 0 0 -400px; padding: 0.15em; top: 50%; left: 50%; background-color: #FFF; }
            #front { margin: 0; padding: 0; width: 800px; height: 451px; background-color: #000; }
            #lloyd, #dad, #martha { width: 800px; height: 451px; display: none; border: 0; }
            h1 { margin: 0; padding: 0.25em 0 0 0; }
            ul { list-style-type: none; margin: 0; padding: 0.5em 0 0 0; }
            li { padding: 0 0 0 0.5em; display: inline; }
            a:link, a:active, a:visited { color: #FFF; text-decoration: none;  }
            a:hover { color: #FFF; text-decoration: none; border-bottom: 1px solid #FFF; }
            .bottom { position: absolute; left: 40.5%; bottom: .75em; font-size: 11px; padding: 5em 0 0 0; }
            .ltr { unicode-bidi: bidi-override; direction: rtl; }
            /*@font-face { font-family: "Helvetica Neue Light"; src: url('/font/HelveticaNeueDeskUI.ttc'); font-weight: 200; }*/
        </style>
    </head>
    <body>
        <div id="yall">
            <div id="content">
                <div id="front">
                        <h1>MEN WITH ARMS</h1>
                        <ul id="menu">
                            <li><a href="#">LLOYD</a></li>
                            <li><a href="#">DAD</a></li>
                            <li><a href="#">MARTHA</a></li>
                        </ul>
                        <span class="bottom">&copy; mothers favorite pictures 2012<br />
                            <span class="ltr">moc.smrahtiwnem&#64;mom</span>
                        </span>
                </div>
                <iframe id="lloyd" src="http://player.vimeo.com/video/28292168?title=0&amp;byline=0&amp;portrait=0&amp;color=e813c8"></iframe>
                <iframe id="dad" src="http://player.vimeo.com/video/28253343?title=0&amp;byline=0&amp;portrait=0&amp;color=e813c8"></iframe>
                <iframe id="martha" src="http://player.vimeo.com/video/28388076?title=0&amp;byline=0&amp;portrait=0&amp;color=FF7788"></iframe>
            </div>
        </div>
     </body>
 </html>

scripts.js:

function toggle(e) {
    alert('click!');
    alert(get_source_element(e).tagName);
    if (get_source_element(e).tagName=='a') {
        document.getElementById(get_source_element(e).innerHTML.toLowercase()).style.display='block';
        document.getElementById('front').style.display='none';
        return false;
    }
    else {
        alert('hide!');
        var frames = document.getElementById('content').getElementsByTagName('iframe');
        for (i = 0; i < frames.length; i++) {
            frames[i].style.display='none';
        }
        document.getElementById('front').style.display='block';
    }
}
// return event source
function get_source_element(e) {
    var targ;
    if (!e) e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    return targ;
}
function load() {
    document.getElementById('yall').addEventListener('onclick', toggle, false);
    document.getElementById('content').addEventListener('onclick', toggle, false);
    var as = document.getElementById('menu').getElementsByTagName('a');
    for (i = 0; i < as.length; i++) {
        as[i].addEventListener('onclick', toggle, false);
    }
}
document.addEventListener('DOMContentLoaded', load, false);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When calling addEventListener, you should drop the on prefix. So just click.

    Additionally, to allow support for browsers that use attachEvent, try this:

    var elem = document.getElementById('yall');
(elem.attachEvent || elem.addEventListener)('click',toggle,false);
    • 0