How to make a mobile UI automatically open per specific width? - javascript

Sorry if this question was worded poorly. I didn't know how else to compress it.
I have a music player that has a button you click to toggle a smaller UI of the player, suitable for mobile. How can I set it so that the smaller player automatically opens for specific min and max height set?
The class for the toggle is '.more'
The smaller version is '.m-ui'
and the div ID it's in is '#box'
if that further helps any.
Thanks!

You can play with the resize event :
I give you a little example :
$(window).on('resize', function(e) {
if ($(document).width() < 500) {
$("#player").width(50);
$("#player").height(50);
} else {
$("#player").width(100);
$("#player").height(100);
}
});
https://jsfiddle.net/50mc23nx/
EDIT : with your comments I think you need to toggle class when the site opens (if you search a good way to detect if it's a mobile or not I suggest you to search on SO)
$(function() {
if ($(document).width() < 500) {
$("#box").toggleClass("m-ui", true);
} else {
$("#box").toggleClass("m-ui", false);
}
});
https://jsfiddle.net/z67dtnxm/

Related

Window resize menu bug

desktop view
desktop view when menu item has been clicked on mobile and then resized to desktop
I have an inline menu on top of the page, which transforms to "hamburger" icon with a drop-down menu when on mobile.
Here is the Jade
i.fa.fa-bars.fa-2x.header__icon.js-nav-toggle
nav.header__nav.js-nav(role="navigation")
ul
li.header__nav__item
a.js-track(href="#about", data-item="about") About
li.header__nav__item
a.js-track(href="#features", data-item="features") Benefits
li.header__nav__item
a.js-track(href="#howitworks", data-item="howitworks") How it works
li.header__nav__item
a.js-track(href="#options", data-item="options") Lease options
li.header__nav__item
a.js-track(href="#savings", data-item="savings") Savings
li.header__nav__item
a.js-track(href="#enquire", data-item="enquire") Enquire
li.header__nav__item.faq-menu
a.js-track(href="/faq") FAQs
In css I'm doing this transformation using media queries, so the icon appears.
+ I have some jquery to make it work (to make dropdown toggle when clicked on the menu icon on mobile view, toggle back when menu item is clicked, and condition to prevent toggling when menu item is clicked on desktop view).
So, here is the code:
$(document).ready(function() {
$('.js-nav-toggle').on('click', function(e) {
$('.js-nav').slideToggle(300);
e.preventDefault();
});
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
$('.js-nav').slideToggle(300);
});
}
});
The problem is that all that works perfectly only when page is loaded and not resized (laptop or mobile). But when you loaded the page on a wide window and then resized it to mobile it becomes bad. In this case it's not toggling back when I click any of the menu items (that's obvious as my jquery is only for "document ready".
And visa versa (when you resize from mobile to laptop view) incorrect behavior (if you clicked some menu on mobile the whole ul disappears (toggled) into nothing).
I tried to put the same jquery code to "on window resize" jquery handler, however it does not help.
$window.on('resize', function() {
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
$('.js-nav').slideToggle(300);
});
}
}, 150);
My assumption was that it should help at least when I resize from big screen to small. But...fail...
One more comment: every menu item just scrolls the page down to some section (one-page web-site), so the page is not reloaded.
Any thoughts and help are appreciated.
Thank you.
UPDATE
Added screenshots
Thanks to the answer below, the following code fixed the problem with desktop --> mobile resize.
$('.header__nav__item').on('click', function(e) {
if ($(window).width() < 768) {
$('.js-nav').slideToggle(300);
}
});
Tried to fix mobile --> desktop with the following code
$window.on('resize', function() {
if ($(window).width() >= 768 && ($('.js-nav').is(':hidden'))) {
$('.js-nav').html('Show all');
}
}, 150);
Does not work, even with $('.js-nav').show()
However, I've found another question, which is similar, and will try to restructure the code the same way soon (that will answer my question completely)
Display or hide elements on window resize using jQuery
I'm not sure if I fully understood your requirements, but at least to deal with the window resize problem that you stated here is a possible solution. You don't need to bind an event handler to resize event on window, just put your if statement that checks for current window width inside of your on click handler function:
$('.header__nav__item').on('click', function(e) {
if ($(window).width() < 768) {
$('.js-nav').slideToggle(300);
}
});
This way every time you click the window width will be checked dynamically.
2 Liner in Vanilla JS:
navbar.addEventListener('click', function() {
return (window.innerWidth <= 992) ? mob_navbar.classList.toggle('show') : null;
});

How do I disable the scroll to $align of this script on mobile?

I don't understand jQuery enough to either search for the solution, or try to implement one on my own. On desktop, I use a slideToggle to show/hide content based on which button is clicked. If the content window is 'shown' I scroll the screen to the top of the '#section' holding the content. I want to disable this on Mobile, becasue the content stacks into a single column on mobile and if the user clicks on the bottom of the stack, it scrolls him back to the top of the section.
This is the script:
var $align = $("#features");
function slideonlyone(thechosenone) {
$('.feature-box').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(400);
$("body").animate({
scrollTop: $align.offset().top
},{
duration: 1200,
queue: false
})
}
else {
$(this).slideUp(400);
}
});
}
The site can be viewed here:
www.newmarketsolar.ca
If you enable the inspector and turn on mobile emulation you can see what I mean by clicking on 'learn more' button on the last icon 'interactive' - it will scroll you up - I need to turn this off for devices only up to 768px.
Any help would be marvelous.
So what you want to do is check if the screen width is smaller than 768px first, you can do this with:
slideonlyone(thechosenone){
if($( window ).width() > 767){
// your function body
}
}
This checks if your window is bigger than 767px and otherwise doesn't execute.
edit: I didn't look at the site provided, but essentially this is what you need and can place as a condition around anything that should only happen on screens bigger than 767px
The below page has excellent article on Media query listeners in javascript,
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries4.shtml
The below code should take care of your requirement,
var mql = window.matchMedia("screen and (min-width: 768px)");
if (mql.matches){ // if media query matches
var $align = $("#features");
function slideonlyone(thechosenone) {
$('.feature-box').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideToggle(400);
$("body").animate({
scrollTop: $align.offset().top
},{
duration: 1200,
queue: false
})
}
else {
$(this).slideUp(400);
}
});
}
}
The above code runs only once and should work fine on devices or when the page is loaded keeping the browser width less than 768px.

Using resize function from minimum number of resizes

I have a website, which has some functions that are related to tablet view and some that are related to phone view - mostly menu configuration.
To overcome the need to refresh the website every time the device is changing it's orientation, i used the resize function to load the relevant functions each time the user resizes his window (aka orientation).
function res(){
var reswidth = $(window).width();
//REMOVING SOME MENU STYLES
$('.logo').removeClass('logoTop');
$('.menuList').removeClass('ulTop');
$('.menuList').removeClass('openMenu');
$('.menuList').removeClass('openMenu0');
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
//DETECTING WHICH DEVICE IS IT.
if (reswidth > 1000) {
slideshow();
tablet();
if (reswidth > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
}
$(window).ready(res).resize(res);
The problem with this method is that actually the mobile browsers are resizing all the time! every time the user scrolls (in any direction) the browser is changing it's size (menu bars, tab bars and address bar) which leads to removing and recalling the phone() function over and over again.
I'm looking for a way to enable the resize function ONLY if the user has passed a specific amount of pixels/resizes numbers.. so changing 100px won't count as a resize.
Is that possible with jQuery?
live example can be seen at boazkerengil.com/zoubisou
I fixed the issue by moving the .removeClass functions to the if statements - this results the expected behaviour that only when the user changes the device it removes the unnecessary classes.
function res(){
var reswidth = $(window).width();
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
if (reswidth > 1000) {
$('.logo').removeClass('logoTop');
$('.menuList').removeClass('ulTop');
$('.menuList').removeClass('openMenu');
$('.menuList').removeClass('openMenu0');
slideshow();
tablet();
if (reswidth > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
}

How do you undo the 'destroy' command in cycle2?

I'm trying to activate cycle2 on a list of images when the window gets too small to fit all the images and show all the images when the browser is big enough to display them. (#bignav is element containing the images.) I did some testing and the function stops working after I destroy it as it wont start it again. Is their another way of going about it? Could I activate it and deactivate by changing the name of the class?
$(window).resize(function() {
var width = $(window).width();
if (width < 1325) {
$('#bignav').cycle();
} else {
$('#bignav').cycle('destroy');
}
});
Re-initialize it...
$('#bignav').cycle('reinit');
They have an api here.

fullcalendar - resize calendar on window resize

I am using fullcalendar (fullcalendar by adam shaw)
I am wondering what I would need to do so that my fullcalendar dynamically changes size depending on the size of the browser window? I have looked into his 'render' function a little bit but have been having trouble figuring this out.
(ie, when a user resizes their window I would like fullcalendar to readjust it's width and height to a proper aspect ratio)
It's all documented.
Let's see, try something along this lines:
//function to calculate window height
function get_calendar_height() {
return $(window).height() - 30;
}
//attacht resize event to window and set fullcalendar height property
$(document).ready(function() {
$(window).resize(function() {
$('#calendar').fullCalendar('option', 'height', get_calendar_height());
});
//set fullcalendar height property
$('#calendar').fullCalendar({
//options
height: get_calendar_height
});
});
Apply similar to width.
Or you could place calendar in div and do manipulations that way.
For width, we made the calendar flexible, to adjust along with the responsive design, and it worked quite well on larger displays:
#calendar {
width: 100%;
margin: 0 auto;
}
For any other customization (changing height or default view), use the built-in windowResize event for FullCalendar. The downside to the accepted answer is that the function will run WHILE the window is being resized, for every pixel change. Conversely, the windowResize event fires AFTER the resizing is complete.
Now, the problem with a responsive calendar is that you're still at the mercy of the table - a terrible place to be on a small mobile screen.
For our project, we choose to force the day view if a user was on a screen smaller than 769px. You can see our method in this example. If it doesn't work for you, at least it will give you some direction on how to implement a solution that does.
$(function(){
var $calendar = $('#calendar');
$calendar.fullCalendar({
windowResize: function() {
var ww = $(window).width();
var view = (ww <= 768) ? 'basicDay' : 'month';
var currentView = $('#calendar').fullCalendar('getView');
if(view != currentView){
$calendar.fullCalendar('changeView',view);
}
if(ww <= 768){
$calendar.find('.fc-header-right .fc-button').hide();
}else{
$calendar.find('.fc-header-right .fc-button').show();
}
}
});
});
Since the current view is passed in the windowResize callback.
One could simply manage a responsive behavior with:
$('#calendar').fullCalendar({
# ...
windowResize: function (view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'agendaWeek' : 'agendaDay';
if (current_view !== expected_view) {
$('#calendar').fullCalendar('changeView', expected_view);
}
}
})
Also, one should make sure handleWindowResize is set to true (which is the default)
I googled "responsive calendar", because that is what you wanted I just think you didn't know how to word it. I believe the links I provided you should get you on your way. I am assuming you wanted to do this using javascript/jquery because of your tags. If the links are useful, that is also fine because now you know what to search for, Good Luck!
Responsive Calendar Demos:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (Changes to agenda view after a certain extent.)
More Info:
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Categories

Resources