JavaScript beillesztés

Több
9 éve 2 hónapja - 9 éve 2 hónapja #7029 Írta: kapula-gabor
JavaScript beillesztés téma létrehozva kapula-gabor által
Joomla 3.3.6 alatt kisérletezgetek, szeretnék összehozni egy off-canvas féle menüt.
Hadd kérdezzek valami triviálisat: hogy kell beilleszteni ezt úgy, hogy működjön?
Code:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".offCanvasToggler").click(function(){ $(".menu-wrapper").toggleClass("visible"); }); }); </script> <style> .menu-wrapper { position: relative; float: left; } #menu { background-color: transparent; width: 0; height: 0; margin:-1px; overflow: hidden; } .menu-wrapper.visible { background-color: silver; width: 70%; height: 100%; display: block; } .menu-wrapper.visible #menu { background-color: silver; width: 100%; height: 100%; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <button class="offCanvasToggler">Toggle class</button> <div class="menu-wrapper"> <div id="menu"> <ul> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> </div> </div> <p>Paragraph.</p> <p>Paragraph.</p> <h2>Heading 2</h2> <p>Paragraph.</p> <p>Paragraph.</p> </body> </html>

Ott van a probléma, hogy a javascript -- úgy tűnik -- ebben a formájában nem működik. Gondolom dollár-jelek nélkül kellene összehozni, de én ehhez nem értek...

Ennek felhasználásával kezdtem tervezgetni:
jQuery toggleClass() Method

Valaki át tudná alakítani ezt javascript részt olyanra, hogy használható legyen?
Utolsó szerkesztés: 9 éve 2 hónapja kapula-gabor által.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
9 éve 2 hónapja #7031 Írta: kapula-gabor
kapula-gabor válaszolt a következő témában: JavaScript beillesztés
Végül sikerült megoldani, működik, ebben a formában:
Code:
<script type="text/javascript"> (function($) { $(document).ready(function(){ $(".offCanvasToggler").click(function(){ $(".menu-wrapper").toggleClass("visible"); }); }); })(jQuery); </script>

Jelentkezz be, hogy te is részt vehess beszélgetésben!