Kérdés JavaScript beillesztés

Több
2015 márc. 12 23:48 - 2015 márc. 12 23:49 #1 Írta: kapula-gabor
kapula-gabor létrehozta a témát: JavaScript beillesztés
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?
<!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: 2015 márc. 12 23:49 Írta: kapula-gabor.

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

Több
2015 márc. 13 01:15 #2 Írta: kapula-gabor
kapula-gabor válaszolt a témára: JavaScript beillesztés
Végül sikerült megoldani, működik, ebben a formában:
<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!