I have a framework which renders the following mark up:
<div class="menuButton">
<button id="menuButton">Menu</button>
</div>
<ul class="menuList">
<li><a href="#" tabindex="1" id="nav_home">
Home
</a>
</li>
<li><a href="#" tabindex="1" id="nav_services">
Services
</a>
</li>
</ul>
It also has the following css which shows the menu button on small devices only:
#menuButton {
display: none;
}
#media only screen and (min-width : 769px) {
.menuList {
display: block !important;
}
}
#media only screen and (max-width : 768px) {
#menuButton {
display: block;
}
.menuList {
display: none;
}
}
An the following javascript to toggle the menu
$('#menuButton').click(function() {
$(".menuList").toggle();
return false;
});
I want to have the menu button displayed regardless of screen size and toggle the menu list i.e. have a mobile menu regardless of screensize. I can do that by overriding the css as follows but I'm unable to override the menulist because it's using the !important property and the jquery toggle function only adds 'style="display: block;" to the element.
#menuButton {
display: block;
}
#media only screen and (min-width: 769px) {
.menuList {
display: none !important;
}
}
How can you get the toggle function to add style="display: block !important;" or how else can I achieve what I'm trying to do which is to have a mobile menu regardless of screen size. Note I can only override the css and add my own javascript but cannot edit the outof the box javascript.
Using toggleClass you should be able to easily overwrite the !important declaration.
$('#click').on('click', function() {
$('#block').toggleClass('open');
});
#block{
display: none!important;
}
#block.open {
display: block!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="click">click</div>
<div id="block">block</div>
Related
currently I am trying to create a navigation bar that switches itself to a hamburger menu if the screen size is too small (responsive / mobile).
https://jsfiddle.net/g7tfnry1/31/
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggle();
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
#media(max-width: 300px) {
#items {
display: none;
}
#btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
So if you lower the screen size to mobile the css works fine. If you show the items by clicking the button the css works fine too. But after that if you want to get back to a big screen size the menu disappears completely because the items are still hidden or the items don't get aligned in a flex box next to each other.
My question is, do I have to create a resize event $(window).resize() or am I missing something in my css?
When using .toggle (show/hide) you override the CSS rules as it change the display type inline, which has a higher specificity than external rules, unless !important is used in the CSS.
Instead toggle a class .toggleClass, combined with an extra CSS rule #items.show
Updated fiddle
Stack snippet
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggleClass('show');
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
/* temp. changed to 500 so it works better in the snippet/Chrome when resize */
#media(max-width: 500px) {
#items {
display: none;
}
#btn {
display: block;
}
}
#items.show {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.
I have a mobile nav button that upon touching/clicking, should expand and reveal page links. Problem is when you first start the page the button is already expanded:
But should actually load page with elements hidden like so:
The X icon and Line-stack Icon are also reversed. How would I switch these icons around and also make sure the page loads with them closed? I tried switching the icons classes in the jQuery function to switch the x and line-stack but that hasn't worked.
I know there is a simple concept I am missing but I am quite new to jQuery and am having trouble here.
My HTML:
<nav>
<div class="row">
<img src="img/logoblack.png" alt="logo" class="logo img-fluid">
<img src="img/logoblack.png" alt="logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>About</li>
<li>Skill</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
My CSS:
.mobile-nav-icon {
float: right;
margin-top: 30px;
cursor: pointer; /* Used since no href tag specifying link type */
display: none;
}
My jQuery:
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
nav.slideToggle(200);
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
Figured it out, needed to create a media query that would hide the .main-nav with display-none;. This way the tags were hidden on mobile devices but still shows in a navbar on a browser:
/* Small phones to small tablets from: 481px to 767px*/
#media only screen and (max-width: 767px) {
.main-nav {
float: left;
margin-top: 25px;
margin-left: 25px;
display: none;
}
}
I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.
Here is my code:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
Link
Link
Link
Link
Link
</div>
<!--#menu-items-->
The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.
Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.
The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.
Any help would be really appreciated!!!
Thanks so much.
Try this :
#media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}
Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.
What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: (JSFiddle)
CSS:
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
.collapsed {
display: none;
}
}
#media only screen and (min-width: 681px) {
.collapsed {
display:block;
}
}
JS:
function toggle_collapsed_class(e) {
$(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast', function(){
toggle_collapsed_class(e)
});
} else {
$(e).removeClass('collapsed').slideDown('fast');
}
};
I'm using jQuery slideToggle function and the media queries.
The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.
If I do not click on the toggle link, and resize the window back to large size, it works fine.
Demo to see the problem:
Please check the demo here, where you can see the problem:
http://jsfiddle.net/3Jj7J/
Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.
Here's my code:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
add on window resize event handler :
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.show();
}
});
jsFiddle : http://jsfiddle.net/3Jj7J/1/
update: this is alternative solution (just remove inline display property, so it will use css rule).
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.css({'display':''});
}
});
DEMO
I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:
CSS:
#bar {
display: none;
color: #000000;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
#nav ul {
display: none;
}
.bar{
display: block;
}
}
To see for yourself (http://jsfiddle.net/hSZ7t/) What I've done is changed your CSS. Instead of you using:
.bar {
It's now:
#bar {