jquery - opening multiple divs with javascript -
i'm trying open div on right side, , change animation div on same time, works when use same div id, gives me problems css positions. when press 1 intro animation disappears , animation div loads data_1.json appears.
current js code :
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('a').click(function () { var divtitle= this.title; $("#"+divtitle).show("slow").siblings().hide(1000); }); }); </script> <script> $(function() { $("#slideshow > div:gt(0)").hide(); setinterval(function() { $('#slideshow > div:first') .fadeout(1000) .next() .fadein(1000) .end() .appendto('#slideshow'); }, 3000); }); </script> here rest of source code:
<!doctype html> <html lang="nl"> <head> <title>kvl</title> <meta charset="utf-8"> <meta name="robots" content="index,follow"> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=open+sans'); @font-face { font-family: bree; src: url(bree.otf) format("opentype"); } body { margin: 0 0 600px; font-family: 'open sans', sans-serif; color:black; } *{ margin:0; padding:0; } { color:#f6f0e3; text-decoration:none; } .rhombus{ width:90px; height:90px; background:#d5c2f4; margin:36px; transform:rotate(-45deg); float:left; font-family: bree; } .rhombus p{ transform:rotate(45deg) translate(10px,5px); text-align:center; font-size: 62px; font-family: bree; } #footer { position: absolute; left: 0; bottom: 0; height: 400px; width: 100%; text-align:center; } div.rechts { color:black; position: absolute; right: 200px; top: 150px; margin-right: 30px; width: 500px; text-align: justify; font-size: 24px; } h1 { font-family: bree; font-size: 64px; } .bodymovin { background-color:white; width: 800px; height:500px; display:block; overflow: hidden; transform: translate3d(0,0,0); margin: 20px; position: absolute; top: 10px; left: 10px; } p.titel { font-style: italic; margin-bottom: 30px; margin-top: 30px; } a.meer { font-family: bree; font-size: 40px; } p.onder { text-align: center; margin: 50px; } </style> <script src="bodymovin.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('a').click(function () { var divtitle= this.title; $("#"+divtitle).show("slow").siblings().hide(1000); }); }); </script> <script> $(function() { $("#slideshow > div:gt(0)").hide(); setinterval(function() { $('#slideshow > div:first') .fadeout(1000) .next() .fadein(1000) .end() .appendto('#slideshow'); }, 3000); }); </script> </head><body> <div id="footer"> <a href="#" title="content1"><div class="rhombus" style="background-color: #dccd00;"><p>1</p></div></a> <a href="#" title="content2"><div class="rhombus" style="background-color: #eda400;"><p>2</p></div></a> <a href="#" title="content3"><div class="rhombus" style="background-color: #39aa36;"><p>3</p></div></a> <a href="#" title="content4"><div class="rhombus" style="background-color: #3aa8dd;"><p>4</p></div></a> <a href="#" title="content5"><div class="rhombus" style="background-color: #00a79f;"><p>5</p></div></a> <a href="#" title="content6"><div class="rhombus" style="background-color: #808080;"><p>6</p></div></a> </div> <div> <div id="content1" class="rechts" style="display: none"> <h1 style="color: #dccd00;">data strategy</h1> <p class="titel">identificeren van kansen door beter datagebruik.</p> <p class="verhaal">met een quick scan identificeren de mogelijkheden om met analytics de omzet en winst te laten groeien en prestaties verder te verbeteren. vervolgens bepalen samen met stakeholders een roadmap. daarin leggen vast hoe relevante data in de organisatie optimaal identificeren, verzamelen, opslaan, beheren, delen en gebruiken.</p> <p class="onder"><a class="meer" style="color: #dccd00;" href="#">lees meer</a></p> </div> <div id="content2" class="rechts" style="display: none"> <h1 style="color: #eda400;">data economy</h1> <p class="titel">versterken van data-ecosystemen</p> <p class="verhaal">met pragmatische en schaalbare data-engineering helpen wij om bestaande en nieuwe data slim te structureren en op te slaan. zodat alle betrokkenen in een organisatie de data eenvoudig kunnen vinden en gebruiken.</p> <p class="onder"><a class="meer" style="color: #eda400;" href="#">lees meer</a></p> </div> <div id="content3" class="rechts" style="display: none"> <h1 style="color: #39aa36;">business intelligence</h1> <p class="titel">ontsluiten van relevante business-informatie</p> <p class="verhaal">we gaan op zoek naar de toegevoegde waarde van gecombineerde bedrijfsdata. hierbij gebruiken geavanceerde data-analytics en data-visualisatie oplossingen, die bruikbaar zijn voor zowel data-experts en gewone gebruikers in uw organisatie.</p> <p class="onder"><a class="meer" style="color: #39aa36;" href="#">lees meer</a></p> </div> <div id="content4" class="rechts" style="display: none"> <h1 style="color: #3aa8dd;">business impact</h1> <p class="titel">creëren van nieuwe inzichten</p> <p class="verhaal">van data naar inzicht. met state-of-the-artmodellen en -benaderingen ondersteunen wij gebruikers op alle niveaus in uw organisatie om op een intuïtieve manier nieuwe inzichten voor uw business te genereren. waar nodig combineren uw data met de business-kennis binnen uw bedrijf.</p> <p class="onder"><a class="meer" style="color: #3aa8dd;" href="#">lees meer</a></p> </div> <div id="content5" class="rechts" style="display: none"> <h1 style="color: #00a79f;">business analytics</h1> <p class="titel">implementeren van slimme actie voor business value</p> <p class="verhaal">wij helpen uw medewerkers om nieuwe verkregen inzichten door te vertalen in concrete groei- en verbeteracties. ook monitoren de impact hiervan op uw business. zo laten wij uw medewerkers ervaren hoe een juist gebruik van data een groot verschil kan maken voor uw business.</p> <p class="onder"><a class="meer" style="color: #00a79f;" href="#">lees meer</a></p> </div> <div id="content6" class="rechts" style="display: none"> <h1 style="color: #808080;">kvl academy</h1> <p class="titel">kennis vergroten kennis delen.</p> <p class="verhaal">daarom investeren in de ontwikkeling van onze eigen collega's. en trainen de medewerkers van onze opdrachtgevers. op alle domeinen binnen ons vakgebied. ook bouwen aan een nieuwe generatie data-experts met ons programma scherp talent.</p> <p class="onder"><a class="meer" style="color: #808080;" href="#">lees meer</a></p> </div> <div id="ani0" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('ani0') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_intro.json' }; anim = bodymovin.loadanimation(animdata); </script> <div class="bodymovin" id="content1" style="display:none"></div> <script> var anim; var elem = document.getelementbyid('content1') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_1.json' }; anim = bodymovin.loadanimation(animdata); </script> <div id="content2" style="display:none" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('content2') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_2.json' }; anim = bodymovin.loadanimation(animdata); </script> <div id="content3" style="display:none" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('content3') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_3.json' }; anim = bodymovin.loadanimation(animdata); </script> <div id="content4" style="display:none" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('content4') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_4.json' }; anim = bodymovin.loadanimation(animdata); </script> <div id="content5" style="display:none" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('content5') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_5.json' }; anim = bodymovin.loadanimation(animdata); </script> <div id="content6" style="display:none" class="bodymovin"></div> <script> var anim; var elem = document.getelementbyid('content6') var animdata = { container: elem, renderer: 'svg', loop: false, autoplay: true, renderersettings: { progressiveload:false }, path: 'data_6.json' }; anim = bodymovin.loadanimation(animdata); </script> </div> </body> </html> hope can help!
you cannot use id more once! that's why it's called id.
this invalidates html: https://validator.w3.org/nu/?doc=http%3a%2f%2fbolink.eu%2fdemo%2f
use class selectors. can used in jquery too:
$("."+divtitle)
Comments
Post a Comment