Search the Community
Showing results for tags 'javascript button div'.
Found 1 result
-
I would like to create a button using one of div's i have done some green sock animation with but nothing works I have tried to make the 'logo' div a button but it doesn't work <!DOCTYPE html> <html> <!-- This code is only meant for previewing your Reflow design. --> <head> <link rel="stylesheet" href="boilerplate.css" /> <link rel="stylesheet" href="index.css" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> <script>var __adobewebfontsappname__ = "reflow"</script> <script src="http://use.edgefonts.net/andika:n4:all.js"></script> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!--<script src="jquery-1.10.1.min.js"></script>--> <!--<script src="TimelineLite.min.js"></script>--> <script src="TweenMax.min.js"></script> <!--<script src="TweenLite.min.js"></script>--> <script src="jquery.gsap.min.js"></script> <!--<script src="CSSPlugin.min.js"></script>--> <script> <!---Buttons----> $("#Logo").click(function(){ TweenLite.to(quoteDivTwo, 1.2, {x:"+100", ease:Back.easeOut}); }); } window.onload = function(){ var quoteDivTwo = document.getElementById("quoteDivTwo"); var quoteDivOne = document.getElementById("quoteDivOne"); var TextOne = document.getElementById("TextOne"); TextOne var Logo = document.getElementById("Logo"); var homeButton = document.getElementById("homeButton"); var aboutButton = document.getElementById("aboutButton"); var galleryButton = document.getElementById("galleryButton"); var contactsButons = document.getElementById("contactsButons"); <!--I like to create --> TweenLite.from(quoteDivOne, 3, {css:{opacity:"0"}}); TweenLite.to(quoteDivOne, 1.1, {x:"+100px", ease:Back.easeOut}); TweenLite.from(TextOne, 1, {css:{opacity:"0"}, delay:0.8}); TweenLite.from(TextOne, 0.9, {y:"-50px", ease:Quad.easeOut, delay:0.4}); <!--differnetly --> TweenLite.from(quoteDivTwo, 3, {css:{opacity:"0"}}); TweenLite.to(quoteDivTwo, 1.2, {x:"+100", ease:Back.easeOut}); TweenLite.from(TextTwo, 1, {css:{opacity:"0"}}); TweenLite.from(TextTwo, 1, {y:"-50px", ease:Quad.easeOut, delay:0.3}); TweenLite.from(Logo, 1.8, { rotation:-80, ease:Sine.easeOut}); TweenLite.from(homeButton, 1.4, {y:"-30px", ease:Quad.easeOut}); TweenLite.from(aboutButton, 1.8, {y:"-30px", ease:Quad.easeOut}); TweenLite.from(galleryButton, 2, {y:"-30px", ease:Quad.easeOut}); TweenLite.from(contactsButons, 2.2, {y:"-30px", ease:Quad.easeOut}); </script> </head> <body> <div id="primaryContainer" class="primaryContainer clearfix"> <div id="homeDiv" class="clearfix"> <div id="logoDiv" class="clearfix"> <img id="Logo" src="img/logo.svg" class="image" /> </div> <div id="menu" class="clearfix"> <p id="homeButton"> Home </p> <p id="aboutButton"> About </p> <p id="galleryButton"> Gallery </p> <p id="contactsButons"> Contacts </p> </div> <div id="quoteDivOne" class="clearfix"> <p id="TextOne"> "I like to create everything ... </p> </div> <div id="quoteDivTwo" class="clearfix"> <p id="TextTwo"> differently." </p> </div> <div id="soicalMedBox" class="clearfix"> <img id="twitter" src="img/Twitter-.png" class="image" /> <img id="facebook" src="img/Facebook.png" class="image" /> </div> </div> </div> </body> </html> p.s I am sorry I didn't use the CodePen Demo but I have so much code
