I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.
Here's my code. Menu:
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
<li><a class="modal-trigger" href="#signup">Signup</a></li>
<li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li>About</li>
<li>Signup</li>
<li>Sign In</li>
</ul>
<i class="material-icons">menu</i>
JS:
<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
</script>
I get the appropriate hamburger menu when reducing the screen size, however, clicking the hamburger does not expand out a menu. The URL updates with a hash # and that's it. There are no errors reported in my JS output.
With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.
Any ideas?
I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.js and then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)
Related
I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.
Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.
Basically I have my menu:
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
<li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
<li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
</ul>
</div>
and then I have the different sections/divs, just like so:
<div id="sliders">
<div class="full-width">
<!-- light slider -->
<div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
</div>
</div>
Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place.
But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...
You can see this in action here.
Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop.
On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).
Anybody can tell about the problem? I don't get it...
I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/
You are looking for the Scrollspy.
This is how you can do it:
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.