dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: [JS / YUI / Pure] Onclick event working and not working on the same code

Hybrid View

  1. #1
    Join Date
    Jun 2014
    Posts
    1

    Wink [JS / YUI / Pure] Onclick event working and not working on the same code

    I have this page where I have a menu (using Pure) and I have some links taht when clicked run a javascript to change a picture on the page. For some reason, when the code is inside the Pure menu, it does not run. When it is outside the menu it runs without a problem.

    Any ideas why this is happening or any tips for a more elegant solution?

    Code:
    <html>
    <head>
    <title>Dashboard</title>
    
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    
    <script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
    
    <script>
    YUI({
        classNamePrefix: 'pure'
    }).use('gallery-sm-menu', function (Y) {
    
        var horizontalMenu = new Y.Menu({
            container         : '#demo-horizontal-menu',
            sourceNode        : '#std-menu-items',
            orientation       : 'horizontal',
            hideOnOutsideClick: false,
            hideOnClick       : false
        });
    
        horizontalMenu.render();
        horizontalMenu.show();
    
    });
    </script>
    
    <script>
    function changeIt(imageName,objName)
    {
    var obj = document.getElementById(objName);
    
    var imgTag = "<img src='"+imageName+"' border='0' />";
    
    obj.innerHTML = imgTag;
    
    return; 
    }
    </script>
    
    </head>
    <body>
    
    <div id="demo-horizontal-menu">
    <a href="#" class="pure-menu-heading">Site Title</a>
        <ul id="std-menu-items">
    
            <li>
                <a href="#">Menu (Not Working)</a>
                <ul>
    
                    <li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
                    <li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
                    <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>
    
                </ul>
            </li>
        </ul>
    </div>
    
    <div id="image-dash">
    <img src="1.jpg" border="0">
    </div>
    
    <p>These links here will work for some reason..</p>
    <ul>
    <li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
    <li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
     <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>
    </ul>
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,595
    I would ask in the other forum for frameworks like the one you have requested help on.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

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

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