I have this initially in my .css stylesheet:
#media only screen and (min-width: 901px){
#main_panel {
width: 750px;
}
}
#media only screen and (min-width: 300px) and (max-width: 900px), handheld {
#main_panel {
width: 500px;
}
}
And then after some user interaction, this jQuery command changes this CSS-value:
$("#collapse").click(function() {
if ((($(window).width()) >= 600) && ($(window).width() <= 900)) {
$("#main_panel").animate({width: "500px"}, 'slow');
}
});
When I resize the window to more than 901px, it still follows the recent declaration by the jQuery and not the CSS-declaration in the stylesheet for 901px.
How to prioritize CSS-declaration when resizing the window?
Or how do you handle this better?
Please don't make me rely to $(window).resize() event forever :) That disregards the CSS.
** EDIT **
If you want to give priority to the CSS and still be able to animate it, what you probably need is this:
http://jsfiddle.net/2Fe22/1/
1) create a "normal" panel class and style it
.panel {width:750px;height:400px}
2) create a collapsed class and style it
.collapsed {width:500px}
3) create a function to read the collapsed and normal widths from the css:
function getClassWidth(aClass) {
return parseInt($("<div />").addClass(aClass).css('width'));
}
4) handle the click by first animating and then (at the end of the animation) add or remove the "collapsed" class to the panel and removing inline styles left by the animation:
var collapsed=false;
$("#collapse").click(function() {
collapsed=!collapsed;
if(collapsed) {
$("#main_panel").animate({width: (getClassWidth('collapsed'))+"px"}, 'slow',afterAnimation);
} else {
$("#main_panel").animate({width: (getClassWidth('panel'))+"px"}, 'slow',afterAnimation);
}
});
function afterAnimation() {
if(collapsed) $("#main_panel").addClass( "collapsed" ).removeAttr("style");
else $("#main_panel").removeClass( "collapsed" ).removeAttr("style");
}
You do this, so if the user resizes the window and the css changes your screen updates correctly.
** OLD POST (for reference) **
If you set sizes with JQuery you may go on setting them this way:
var collapsed=false;
$( window ).resize(calculateNewSizes); // When resized
calculateNewSizes(); // At startup
function calculateNewSizes() {
if(collapsed) {
// if screen width < xxx set elemt width to yyy, etc.. collapsed version
} else {
// if screen width < xxx set elemt width to yyy, etc..
}
}
// This toggles the collapsed state if user clicks on an element
$("#collapse").click(function() {
collapsed=!collapsed;
calculateNewSizes(); // or do the animation here
});
This script should be called as fast as possible after the beginning of all the elements to be resized to avoid a FOUC.
<div class="to be resized">
<script>
//do the $( window ).resize(...) here
</script>
... all other stuff </div>.
Warning, this code is UNTESTED. It is just to show an idea.
Since you are using jQuery Animate, the element style will directly receive width value.
Like this:
<el id="mainpanel" style="width: 500px">
This will always override any css on the element unless you use !IMPORTANT:
width: 100px !IMPORTANT;
http://codepen.io/rafaelcastrocouto/pen/suEHn (DEMO)
Notice that you should avoid that since you won't be able to change this if you need.
Related
If I click a button I can assign it a function like bellow
document.getElementById("mySidenav").style.width = "250";
This works fine, however I wish do give it a different width for different screen sizes so I was going to set the width in a class so that i can use a css media query.
instead of .style.width = "250";how can I tell it to take the values of a CSS class instead ?>
Just for reference, CSS names cannot start with digits, per the W3C spec. Your edited post removes the need for this comment but it's worth noting.
To manipulate classes via JavaScript, either use className (as in myElement.className = 'some-class') or the classList interface. However, you specifically mentioned "different screen sizes" and this is a prime candidate for responsive CSS queries using the #media selector.
With all that being said:
JavaScript example
// CSS
#mySidenav {
width: 1000px;
}
#mySidenav.responsive-class {
width: 500px;
}
// JS
const mySidenav = document.querySelector('#mySidenav');
window.addEventListener('resize', function() {
if (window.innerWidth < 200) {
mySidenav.classList.add('responsive-class');
}
else {
mySidenav.classList.remove('responsive-class');
}
});
CSS example
#mySidenav {
width: 1000px;
}
#media query and (max-width: 200px) {
#mySidenav {
width: 500px;
}
}
As you can see, the latter example is much simpler. Go with the CSS approach. A halo will appear over you.
I used #Shenh's answer to work out a solution +1 Sheng.
Please see bellow I added new class and removed class
function openNav() {
document.getElementById("mySidenav").classList.add('popoutwidth');
}
function closeNav() {
document.getElementById("mySidenav").classList.remove('popoutwidth');
}
I'm working on a onclick event (html) with jquery.
In my jquery i set the width for this event.
Though i want a different width for the mobile website. For this I should work with media queries.
On desktop it is 50vw, on phone (triggered from 600px) it should be 100vw...
Though how to make this work properly?
function openMenu() {
document.getElementById("menuNav").style.width = "50vw";
}
function closeMenu() {
document.getElementById("menuNav").style.width = "0vh";
}
Define .open class and .closed class in CSS where you can use media queries normally. Then switch CSS classes on menuNav with JavaScript. See documentation for classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
if($(window).width() < 601) {
// change functionality for smaller screens
} else {
// change functionality for larger screens
}e
or
if(window.matchMedia('(max-width: 600px)').matches)
{
// do functionality on screens smaller than 600px
}
You can use jQuery's width() method to find the width of the window (IE the browser viewport) and determine whether 50vw or 100vw should be used:
function openMenu() {
if($(window).width() > 600) {
document.getElementById("menuNav").style.width = "50vw";
} else {
document.getElementById("menuNav").style.width = "100vw";
}
}
I have a responsive website, with some jQuery code, of which some is the following:
<script>
$(document).ready(function(){
$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").show();});
$("#D1200C36LPB3").click(function(){$("#D1200C36LPB3_details").show();});
$("#D1-3CA36LPB3").click(function(){$("#D1-3CA36LPB3_details").show();});
$("#D1-0CA36LPB3").click(function(){$("#D1-0CA36LPB3_details").show();});
$("#D700S36LPB3").click(function(){$("#D700S36LPB3_details").show();});
$("#D700S24LMB3").click(function(){$("#D700S24LMB3_details").show();});
});
</script>
All of the div elements above (#D1000C36LPB3_details, #D1200C36LPB3_details, #D1-3CA36LPB3_details...) have a CSS display property value of none, so by default they aren't visible until you click on one of the div elements above (#D1000C36LPB3, #D1200C36LPB3, #D1-3CA36LPB3...) and then the corresponding div is displayed.
However, when the jQuery script runs, it sets the corresponding div display value to block. When the viewport's/window's width is smaller than say 400 px, I want the script to display them with position: fixed;.
My suggestion
I've figured out I can display them with fixed position using:
$("#corresponding_ID").css("display", "fixed");
But I still have to not let jQuery run the first script (the one using .show()).
Don't set css styles directly this way. As already commented, use e.g. a .visible class and let css media queries decide. Example:
#media screen and (max-width: 399px) {
.visible {
display: fixed;
}
}
#media screen and (min-width: 400px) {
.visible {
display: block;
}
}
Then, in your click handler, go as follows:
$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").addClass('visible');});
Also, if your details containers all follow that naming scheme with affixing _details to the id, it'd be easier to put all ids in an array and iterate over that:
$(document).ready(function(){
var ids = [ "#D1000C36LPB3", "#D1200C36LPB3", "#D1-3CA36LPB3", "#D1-0CA36LPB3", "#D700S36LPB3", "#D700S24LMB3"];
for (var i = 0; i < ids.length; i++) {
$(ids[i]).on('click', function () { $(ids[i]+'_details').addClass('visible'); }
}
};
Easy way to check for browser width with Jquery:
var width = $(window).width();
if (width >= 1024) {
-- Code to execute here --
}else{
-- Other code to execute here --
}
Then you can adjust the width you are looking and update the >= based on what you want to do.
Let me know if this doesn't make sense.
I'm currently use Bootstrap v3.3.0 and i would like when user change the width of screen, the last elements of the navbar (LINKs before dropdown list) disappear and be added at the dropdown list.
Can I do that with Bootstrap or any JS library ?
Example of navbar : http://getbootstrap.com/examples/navbar/
Thanks in advance.
You should probably use the following approach:
Add them twice, so in the normal menu and in the dropdown. Then in CSS display or hide them when needed.
#media (min-width: 768px) {
#item_link1
{
display:none;
}
}
#media (max-width: 768px) {
#item_link2
{
display:none;
}
}
Use Jquery functions
$(window).on("orientationchange load resize", function () {
var width = $(document).width();
if(width<765){
// $("#elementID").hide();
// code for other elements hide stuff
}
else if(width>765){
// for show iamges
}
});
I am trying to create a slideToggle navigation only on mobile. However, the settings are also affecting the larger browser sizes. On the large browser, the first child is hidden:
#menu-menu-1 li {
display: block;
}
#menu-menu-1 li:first-child {
display: none;
}
And on mobile, it is reversed. The first child is shown, the rest hidden:
#menu-menu-1 li {
display: none;
}
#menu-menu-1 li:first-child {
display: block;
}
And thus, because the first child is now set to display:block, you can use this slideToggle:
$('#menu-menu-1 li:first-child').click(function(e){
e.preventDefault();
$('#menu-menu-1 li:first-child').siblings().slideToggle();
});
This works fine, until you use it to slide the content back up, and change the browser size back. That makes all the siblings set back to display:none, even though the larger browser media queries has them at display:block .
Is there a way as soon as the browser is expanded, the slideToggle settings are ignored?
This is a module I wrote to help with the problem of triggering javascript when I want it on resize and to help with chekcing the size:
jQuery(function($){
//resize window events
//store the reference outside the event handler:
var $window = $(window);
function checkWidth() {
var windowSize = $window.width();
return windowSize;
}
// Execute on load
checkWidth();
// Bind event listener
//remove console.log from production version
$(window).resize(function(){
console.log('checkWidth: ', checkWidth() + 'px' );
if(checkWidth() >= [yourDesiredWidth]){
//do something
}
});
});