Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Pure Menu looks like it's faulty. Why use it if you get what you want without it?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Pure Menu looks like it's faulty. Why use it if you get what you want without it?
    Hi sunfighter,

    Because I need a dropdown menu like that and I don't have a better solution and I do not have the skill to build it from scratch.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    This is from Son of Suckerfish Dropdowns
    You should add some color (style):
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Dashboard</title>
    <style type="text/css">
    #nav, #nav ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    #nav a {
    	display: block;
    	width: 10em;
    	text-decoration:none;
    }
    #nav li {
    	float: left;
    	width: 10em;
    }
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    #nav li:hover ul {
    	left: auto;
    }
    </style>
    </head>
    
    <body>
    <div id="demo-horizontal-menu">
    <ul id="nav">
    	<li><a href="#">Menu ▼</a>
    		<ul>
                <li><a href="#" onclick="changeIt('images/1.jpg','image-dash');">Dashboard 1</a></li>
                <li><a href="#" onclick="changeIt('images/2.jpg','image-dash');">Dashboard 2</a></li>
                <li><a href="#" onclick="changeIt('images/3.jpg','image-dash');">Dashboard 3</a></li>
    		</ul>
    	</li>
    </ul>
    </div>
    
    <div id="image-dash">
    <img src="1.jpg" border="0">
    </div>
    
    
    <script>
    function changeIt(imageName,objName){
    	var obj = document.getElementById(objName).innerHTML = "<img src='"+imageName+"' border='0' />";
    	//var imgTag = "<img src='"+imageName+"' border='0' />";
    	//obj.innerHTML = imgTag;
    	return;
    }
    </script>
    </body>
    </html>
    The down arrow next to the word menu is done by this with out the space &#96 60;
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks... I will give it a try.


  •  

    Posting Permissions

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