I have a menu button that when you click on it under 960px, it will toggle a menu. That menu is permantly shown on a screen that is over 960px. The problem is when I click on the menu to open, and then I close the menu under 960px, when I increase the screen size the menu isn't there because the last action was to close the menu ( when the screen is under 960px. ) How do I make sure that the menu stays open above 960px no matter what state the menu is in under 960px?
Javascript:
$('.leftnavmenu').click(function (e) {
e.preventDefault();
if($(window).width() <= 960) {
$('.left-nav-main-li.active div:nth-child(3)').slideToggle();
} else { ($(window).width() >= 960)
$('left-nav ul.navigation>li>div').show();
}
});
HTML
<div class="left-nav>
<span class="leftnavmenu>Select</span>
<div style="display: none;">
<ul>...</ul>
</div>
You can also do this with a CSS media query
//More than 960px
#media (min-width: 960px){
.left-nav ul.navigation>li>div {
display: block;
}
}
Related
the end goal is for my navigation to look just like this:
<div class="l-region l-region--navigation">
<div data-mediasize="959" class="responsive-menus responsive-menus-0-0 absolute"><span class="toggler">☰ Menu</span><div id="block-superfish-1" class="block block--superfish block--superfish-1 responsive-menus-simple">
<div class="block__content">
<ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-none sf-total-items-8 sf-parent-items-6 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"><li id="menu-2237-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Events</li>
link to code: https://jsfiddle.net/4b17u2fs/1/
You have to use different #media queries for this.
With those media queries, you will be able to make your burger button visible or not. Then it's some javascript for the event when you click on the button.
You can do something like this :
#media screen and (max-width: 1100px) {
.burger-button {
display: inline-block;
}
}
.burger-button {
display: none;
}
This will only make your .burger-button visible on screens smaller than 1100px.
You just have to adjust things but this is the way of doing.
<p>Content1
<a class="button" onClick="toggleText()">Read More</a>
</p>
<p class="text2">
Hiding content2[ maybe by toggle so even the white space is gone]
<p>
By clicking the anchor link= read more, It toggles Content2.
For sure best way is CSS media query, but if you want to do that on js side you can add an event listener to window resize. Base on event prop you can check size of the window like this
window.addEventListener('resize', (e) => {
if (e.target.innerWidth < 980) {
// do stuff
}
});
#media only screen and (min-width : .....) and (max-width : 980px) {
.text2 {
display: none;
}
}
I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}
You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>
You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event
Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }
I'm building a web page to learn about responsive web development and have run into a problem with my links. When the page width is small I would like to add hyperlinks to my images however when it becomes large I would like to take them off the images and put them on another element. Is there a way to do this with HTML, CSS and/or JavaScript?
For more context please take a look at this slideshow where I have added a breakpoint at screen width 450px. When the screen is wider, the hyperlink is on the "Read More" button, however I would like it to be on the image when the "Read More" button disappears.
If you wanted to use jQuery, you could do something like this:
Demo
JS:
$(document).ready(function() {
moveLink();
});
$(window).resize(function() {
moveLink();
});
function moveLink() {
if ($(window).width() >= 450) {
$("#myImage").unwrap();
$("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
} else {
$("#myText").unwrap().hide();
$("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
}
}
HTML:
<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>
<span id="myText">Read More</span>
Example using media queries (minimize the window to be less than 600px, you will see the link, otherwise you will see the image):
https://jsfiddle.net/89ptv9mt/
#media (max-width: 600px) {
.logo {
display : none;
}
.altText {
display : block;
}
}
#media (min-width: 601px) {
.logo{
display : block;
}
.altText {
display : none;
}
}
<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
MDN
http://plnkr.co/edit/F8K66L?p=preview
I have a li menu which at 300px goes to display:none, while the mobile_nav button turns on.
Now currently in my Controller I'm using this
main.js
$scope.mobileMenu = function() {
var menu = document.getElementById('main_nav');
if (menu.style.display == 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
};
If I open the mobile menu, then close it, it stays closed on a larger view when resized, even though I have display:block in the CSS. Also need the mobile menu to close if an item is clicked inside of it.
Tried this, but without any luck
index.html
<div
ng-click="isMobileNavOpen = !isMobileNavOpen"
class="mobile_nav">
=
</div>
<nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen">
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
style.css
// the button
.mobile_nav {
display: none;
}
#media all and (max-width: 300px) {
.mobile_nav {
display: block;
}
#main_nav {
display: none;
}
#main_nav li {
float: none;
margin-bottom 20px;
}
#main_nav a {
width: 100%;
}
}
Found the perfect library!
https://github.com/AnalogJ/matchmedia-ng
^ Here is the code that fixed my issue (needed an Angular way to detect size)
var unregister = matchmedia.onPhone( function(mediaQueryList){
$scope.isPhone = mediaQueryList.matches;
});
Did have to use the overrides to adjust to my pixel specifications:
angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
matchmediaProvider.rules.phone = "(max-width: 500px)";
matchmediaProvider.rules.desktop = "(max-width: 1500px)";
}]);
Also had to go ahead with 2 different navs :/ will still try to play around with this a bit to see if I can get it down to using just 1 nav:
<div class="mobile_nav noselect">
<div ng-click="isMobileNavOpen = !isMobileNavOpen" class="icon-menu"></div>
</div>
<nav id="main_nav">
<nav id="mobile_nav" ng-show="isMobileNavOpen">