I am using sidr as side menu for my website. But when I open it in chrome browser at my phone. It opens when I click the button. But doesn't close when I click the button again.
If I use the dolphin browser, it just works fine.
I've created a Fiddle.. This is my code which opens and closes the menu perfectly, doesn't seem to work here.
Fiddle
JS:
$('#responsive-menu-button').sidr({
name: 'sidr',
source: '#menu',
side: 'left'
});
CSS:
#mobile-header {
display: block;
position: absolute;
top: 15px;
right: 0;
}
#mobile-header #responsive-menu-button {
height: 41px;
width: 42px;
display:block;
}
#menu {
display: none;
}
HTML:
<div id="mobile-header"> <a id="responsive-menu-button" href="#menu">THE MENU</a>
</div>
<div id="menu">
<ul>
<li><a class="menu first" href="#first">First</a>
</li>
<li><a class="menu second" href="#second"> Second</a>
</li>
<li><a class="menu third" href="#third">third</a>
</li>
<li><a class="menu fourth" href="#fourth">fourth</a>
</li>
</ul>
</div>
Also my viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code you provided is okay. Additional JavaScript for open/close needed, as you know. This works in web and mobile versions of Google Chrome.
<script src="http://yoursite.domain.../jquery.sidr.min.js"></script>
<script>
jQuery('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '.menu-main-nav-container'
});
jQuery( window ).load(function() {
if(jQuery("#sidr-main").length !== 0) {
jQuery(".sidr-class-sub-menu").hide();
jQuery( "li.sidr-class-menu-item ul.sidr-class-sub-menu" ).each(function() {
jQuery( this ).after("<div class='lnk-plus'>+</div>");
});
jQuery( ".lnk-plus" ).toggle(function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide();
jQuery( this ).html("-");
}, function() {
var id1= jQuery( this ).parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
jQuery( this ).html("+");
});
}
});
</script>
Please notice where jQuery(".sidr-class-sub-menu").hide(); is situated.
Related
When i open the html file on google chrome. It is just a blank page. Nothing is loading. If i take out the .js files it loads the content with the .css applied but never with the .js files. Whether I put the .js files in the or at the end of the it still does not show anything. I am using jquery btw and downloaded the file. all files are on the same folder. also tried both jquery-3.3.1.min.js and jquery-migrate-1.4.1.js if it makes a difference. Hoping someone can help. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="testing.css">
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Blocks</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1" class="credit"> 10000$ </li>
<li data-id="2" class="debit"> -10000$ </li>
<li data-id="3" class="credit"> 10000$ </li>
<li data-id="4" class="credit"> -10000$ </li>
<li data-id="5" class="credit"> Bank </li>
<li data-id="6" class="debit"> Loan </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Credit Side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Debit side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<script type="text/javascript" src="jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="testing.js"></script>
</body>
</html>
.JS
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$("#shoppingCart1 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".credit",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping cart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
// Second cart
$("#shoppingCart2 ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".debit",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
.CSS
h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal; }
Use
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Because jquery-migrate not contains entire jquery code.
Of course you can include script from local.
Issues:
Your HTML files do not have CDN links to jquery and jquery UI. They require in the same order. First, you need jquery CDN and second jquery UI cdn
You're using jquery in a testing.js file but you do not have document.ready function.
Solution:
1. Add cdn links for jquery and jquery UI
2. Wrap your javascript code within document.ready function.
Here is a MDN document
Solution
I'm trying to make a sticky navbar that becomes fixed after scrolling past the hero section. I'm trying to use materialize to do this, but I'm not very good at javascript so I can't figure it out. I'm trying to use Materialize Pushpin to do it (http://materializecss.com/pushpin.html)
Here's my code so far: https://jsfiddle.net/2kc0fgj5/
The part I'm trying to make sticky is the .menu div. What would be the method I would use javascript I would use to make the navbar behave this way?
<head>
<title>Voice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<section id="hero" class="segment">
<div id="hero-content" class="valign-wrapper">
<div id="hero-child" class="center-align">
<img src="resources/images/voice-circle.png" id="voice-circle" /><br/>
Learn More<br/>
Order Now
</div>
</div>
</section>
<div class="menu">
<nav>
<div class="nav-wrapper white">
Voice
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
</div>
</nav>
</div>
<section id="features" class="segment">
</section>
</body>
The accompanying CSS:
.segment {
height: 100vh;
width: 100%;
background-color:aquamarine;
}
.divide {
height: 50vh;
width: 100%;
}
#hero {
background-image: url('resources/images/hero%20header.png');
background-size: auto 100vh;
background-position: center;
}
.bpblue-text {
color: #21A1EC;
}
#nav-mobile>li>a {
color: #21A1EC;
}
#voice-circle {
width: 30%;
height: auto;
}
.hero-btn {
margin: 10px;
width: 300px;
}
#hero-content {
width: 100%;
height: 100vh;
}
#hero-child {
width: 100%;
}
And the current javascript, so far only having smooth scrolling and a side navigation bar
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
$(".button-collapse").sideNav();
EDIT: fixed link and added code.
You Need some Fixes in HTML and JS
HTML
change this section line 20 and 21
<div class="menu">
<nav>
to
<div id="menu">
<nav class="menu" data-target="menu">
JS
$(document).ready(function () {
var menu = $('.menu');
var target = $('#' +menu.attr("data-target"));
menu.pushpin({
top: target.offset().top,
});
});
Working Fiddle
Hope this Helps..
you can add this to your js file
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
and this to CSS file
.sticky-nav{
position: fixed;
top:0;
}
I am building a small drop-down container which appears when You hover on top of a menu item. When I hover on top of the menu item (e.g. Tools) the dropdown appears, I can move my mouse inside, but when the cursor leaves the dropdown menu, it does not go away. How am I able to achieve this?
I only managed to make it dissapear when you click somewhere outside of it.
Here is a Fiddle.
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
SOLUTION by anima_incognita:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$(".nav-dropdown").on('mouseleave',function(){
dropdown.slideUp();
});
e.stopPropagation();
});
here is edit in your code worked fine with me...added methods
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').mouseenter(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
$('#dropdownToggle').mouseleave(function(e) {
dropdown.slideUp();
});
e.stopPropagation();
});
Add this to end of your code:
$(".nav-dropdown").on('mouseleave',function(){
dropdown.hide();
});
Update your JS:
var dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(function() {
dropdown.slideUp();
});
e.stopPropagation();
});
$(".nav-dropdown").on('mouseleave', function() {
dropdown.slideUp('fast');
});
.nav-list {
.nav-list-item {
float: left;
list-style: none;
padding: 2rem;
background: tomato;
font-family: 'Helvetica', 'Arial', sans-serif;
a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.nav-dropdown {
position: absolute;
background: turquoise;
padding: 2rem;
li {
margin-bottom: 2rem;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-list">
<li class="nav-list-item">
Services
</li>
<li class="nav-list-item dropdown-wrapper">
<a href="#" id="dropdownToggle" class="nav-link tools">Tools
</a>
<!-- dropdown -->
<ul class="nav-dropdown active" style="display: block;">
<li class="nav-dropdown-item">
Buyer Cost Sheet
</li>
<li class="nav-dropdown-item">
Seller Net Sheet
</li>
<li class="nav-dropdown-item">
Mortage Calculator
</li>
<li class="nav-dropdown-item">
Title Fees
</li>
<li class="nav-dropdown-item">
Refi Calculator
</li>
<li class="nav-dropdown-item">
Real Estate Forms
</li>
</ul>
</li>
<li class="nav-list-item">
Buyers & Sellers
</li>
</ul>
As you are using the hover function, the hover function specifies two function to trigger mouseenter and mouseleave event
You have defined only the mouseenter function and not defined the mouseleave function. So below is the updated JS code:
$('#dropdownToggle').hover(function(e) {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
e.stopPropagation();
}, function(e){
e.preventDefault();
dropdown.slideUp();;
dropdown.removeClass('active');
});
There where multiple Questions and solutions for the Tab container should keep the last selected tab instead of refreshing the whole page and starting in the first tab again. But the solutions i had wont work with my page. Can someone help me out?
This is my JS
<script type="javascript">
$(function() {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
And that's my HTML:
<ul id="myTab" class="nav nav-tabs" role="tablist" style="background-color: #3E98E4;">
<li role="presentation" class="active"><a href="#kunver" aria-controls="kunver" role="tab" data-toggle="tab" style=" border: 1px solid;
margin-top: 10%;
color: #fff;
background-color: #3C97E4;">Kunden</a></li>
<li role="presentation"><a href="#erter" aria-controls="erter" role="tab" data-toggle="tab" style=" border: 1px solid;
margin-top: 10%;
color: #fff;
background-color: #3C97E4;">Termine</a></li>
<a href="logout.php" ><button style="margin-top: 1%;margin-left:1%;
background-color: #3E98E4;
color: #fff;
border-color: #fff;" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"><span class="glyphicon glyphicon-log-out"></span> Logout</button></a>
</ul>
Well I've made few modifications to your code and it will be as below:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('li.active,.tab-pane.active').removeClass('active');
//remove active class from both li and tabpane since it will be by default added at page load
$('[href="' + lastTab + '"]').closest('li').addClass('active');
//add active to lastTab's parent li using closest
$(lastTab).addClass('active');
//also add active to lastTab
}
DEMO
UPDATE
Using native .tab('show') method you can do it as below but again you need to remove active class from previous default element
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('li.active,.tab-pane.active').removeClass('active');
$('[href="' + lastTab + '"]').tab('show');
}
UPDATED DEMO
You could just change the hash:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.location.hash = $(this).attr('href');
});
The url will be updated and when the refresh button is clicked it should open the correct tab.
if you have more than one tab in the page, you can use the following code
<script type="text/javascript">
$(document).ready(function(){
$('#myTab').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
$('#charts-tab').on('show.bs.tab', function(e) {
localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
});
var chartsactiveTab = localStorage.getItem('chartsactiveTab');
if(chartsactiveTab){
$('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');
}
});
</script>
There is a menu button on the left of my site in progress.
This is the Javascript code which opens the menu:
var main = function()
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 400);
$('body').animate({
left: "285px"
}, 400);
});
And this is the Javascript code which closes the menu:
$('.icon-close').click(function () {
$('.menu').animate({
left: "-285px"
}, 400);
$('body').animate({
left: "0px"
}, 400);
});
What I would like to be able to do is, instead of using a "close" icon, I would like for a click anywhere on the page (including the original menu button) to close the menu.
As the code is currently written, when the menu is opened/closed, it slides in from the left, and the main body of the page slides to the right the same amount of pixels, and vice-versa when closed.
EDIT:
Here's the skeleton of the HTML as requested:
<div class="menu">
<div class="icon-close">
<img src="close.png">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
You can capture a document.onclick event then check the event target id against a set of allowed id's Note that to do this you have to add id attributes to the close button and the "body". I've also taken the liberty of adding an id to the menu and a wrapper around the "body" of the document and changed your body tag animation to that wrapper, as you shouldnt move the body tag directly. Note that to resize the body on menu open just change the body position: absolute and set right: 0px;
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
$(document).on('click', function(e) {
if ($("#menu").position().left != '0') {
if (e.target.id === "open") {
$('#menu').animate({
left: "0px"
}, 400);
$('#body').animate({
left: "285px"
}, 400);
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
$('#menu').animate({
left: "-285px"
}, 400);
$('#body').animate({
left: "0px"
}, 400);
}
}
});
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Pure JS and CSS
The following is a pure javascript and css method for achieving the same effect. I'm including this for reference as it is a lot lighter weight than including jquery, however if you have jquery included already there is no reason to not use the jquery methods. Notice that on older browsers that do not support css transitions the menu will still open but will not be animated (which is a good thing for older browsers as javascript animations can slow things down quite a bit)
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
var menu = document.getElementById("menu");
var body = document.getElementById("body");
menu.style.transition = "0.3s linear";
body.style.transition = "0.3s linear";
document.onclick = function(e) {
if (menu.style.left != "0px") {
if (e.target.id === "open") {
menu.style.left = "0px";
body.style.left = "285px";
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
menu.style.left = "-285px";
body.style.left = "0px";
}
}
};
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Here's humble's version of the snippet below:
http://jsfiddle.net/humbleRumble/3j7s9ggz/
You can just bind a click event to the document that does the same thing as the click on the close button:
$(document).on('click', function (e) {
// Filter some elements out so that this function doesn't
// execute when it's not intended to.
var target = e.target,
isMenuElem = $(target).parents('.menu').length || $(target).is('.menu'),
isMenuClose = $('.icon-close').has(target).length,
isIconMenu = $(target).is('.icon-menu');
// Simply return if the clicked element falls under the filter.
// This allows the close button to close,
// the menu to not close itself if you click its body,
// the function to not interfere with the menu button functionality,
// and that a click on anywhere will close the menu.
if (isMenuElem && !isMenuClose || isIconMenu) return;
$('.menu, #jumbotron').animate({
left: "-285px"
}, 400);
});
$('.icon-menu').click(function () {
// This is a 'toggle' value for left,
// if the menu is opened (left: 0), close it (left: -285)
// and vice-versa.
var toggleAnim = $('.menu').css('left') === '-285px' ? 0 : '-285px';
$('.menu, #jumbotron').animate({
// Apply the toggle
left: toggleAnim
}, 400);
});
html, body {
padding: 0;
margin: 0;
}
#jumbotron {
position: relative;
height: 500px;
width: 300px;
float: left;
}
.menu {
position: relative;
width: 285px;
height: 500px;
background: red;
float: left;
}
.icon-menu {
background: black;
color: #fff;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="icon-close">
<img src="close.png" alt="Close Me">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron" id="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
This will trigger with a click anywhere on the page, but not on the elements inside of the menu (except the close button).