AdrianPC Posted December 19, 2012 Share Posted December 19, 2012 (edited) So I'm pretty new with all this and have just been learning xml, javascript, html5 and css3 over the last week or so to work on this idea. I've got a lot of the background stuff in a rough draft and set up in place, and for the most part I'm working on just displaying it all now. I have a side column (nav) which I'm using a transition to slide on and off the page, with an arrow "button" attached to do this. The arrow is an embeded SVG on a <div> tag with an absolute position to the nav column, so when the column.left property is slid off screen the arrow slides with it. The issue though is that the div tag is not firing the onclick event I have setup calling the javascript to change the .left property. Initially as I was first building it I just activated the script by clicking on the nav and it worked fine until I started implementing the arrow. I've tried a few options and I think I'm stuck. Note: the script runs fine, I can even just inject toggleNav(); and it goes back and forth perfectly. Here's the focus of the code: onclick Event <script> // Scripts for sidebarsfunction toggleNav(){var navLeft = document.getElementById("nav").style.left; if (navLeft == 0 || navLeft == "0px"){ document.getElementById("nav").style.left = "-251px"; document.getElementById("nodes").style.left = "0px";}else if (navLeft == "-251px"){ document.getElementById("nodes").style.left = "251px"; document.getElementById("nav").style.left = "0px";}}</script> Body <body><header> <h1>BibleGene</h1> <div id="bottomHeader"></div></header><section id="container"> <section id="nav"> <div id="navArr" onclick="toggleNav();"> <embed src="expandArrow.svg" type="image/svg+xml" /> </div> </section> <section id="nodes" onclick="toggleInfo()"> <p id="test"></p> </section> <section id="info" onclick="toggleInfo()"> </section></section> </body> Styles #nav {height: 100%;width: 230px;padding: 0 10px;position: absolute;z-index: 2;left: 0px; background-color: #f7f7f7;border-color: #a5a5a5;border-right-style: solid;border-width: 2px; /* Transition Effects */transition: left 0.5s;-moz-transition: left 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s; /* Safari and Chrome */-o-transition: left 0.5s; /* Opera */}#navArr {height: 20px;width: 20px;margin: 8px 0px; opacity: 0.3; position: relative;z-index: 2;left: 248px;}#navArr:hover {opacity: 1;}#nodes {height: 100%;min-width: 450px;margin: 0 10px;position: absolute;z-index: 1;left: 250px;right: 250px; /* Transition Effects */transition: left 0.5s, right 0.5s;-moz-transition: left 0.5s, right 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s, right 0.5s; /* Safari and Chrome */-o-transition: left 0.5s, right 0.5s; /* Opera */} Edited December 20, 2012 by AdrianPC 1 Link to comment Share on other sites More sharing options...
Don E Posted December 19, 2012 Share Posted December 19, 2012 (edited) Try giving the left values like the following: document.getElementById("nav").style.left = -251 + "px"; document.getElementById("nodes").style.left = 0 + "px"; document.getElementById("nodes").style.left = 251 + "px"; document.getElementById("nav").style.left = 0 + "px"; Also for the if conditions, you can try just checking the number itself without double quotes(string), like: else if (navLeft == -251) Edited December 19, 2012 by Don E Link to comment Share on other sites More sharing options...
AdrianPC Posted December 19, 2012 Author Share Posted December 19, 2012 I had that initially but for some reason it would not take, it would go off once, come back once, and then not repeat the next time it calls, so that's why the OR is in there. The script itself runs fine though, it's just the div's onclick event isn't triggering the script. Link to comment Share on other sites More sharing options...
Don E Posted December 19, 2012 Share Posted December 19, 2012 I just noticed for the onclick attributes, you have toggleInfo() instead of toggleNav(). The function is toggleNav(). Link to comment Share on other sites More sharing options...
AdrianPC Posted December 19, 2012 Author Share Posted December 19, 2012 Sorry those were for a second sidebar on the other side of the page, I had onclick="toggleNav()" on the div with the embed but in playing around with it forgot to put it back on when I pasted the code. I've figured it out now though. It is perfectly fine to apply an onclick event to a div, but does not work on an embed. And since the embed completely covers the div it wasn't accessible. Instead in the SVG I added an invisible rectangle over the whole SVG with the onclick event attached to the rectange. Working fine now Link to comment Share on other sites More sharing options...
Don E Posted December 19, 2012 Share Posted December 19, 2012 Glad you got it working. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now