www.webdeveloper.com
Results 1 to 2 of 2

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

  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,507
    I would ask in the other forum for frameworks like the one you have requested help on.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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