jQuery - If screen is less than specified width (responsive) - javascript

How can I make an alert popup if the width of the page is less than 1200px, and made responsive?
Thanks!

You can use something like the breakpoints module. Then you setup a breakpoint to trigger at 1200px and show a dialog and either add a css class that changes the layout, or use straight javascript to make the changes.
breakpoints(1200, function(oldPoint, newPoint) {
alert('The screen width just changed');
});
if you just wanted native jQuery:
$(window).resize(function() {
var width = $(window).width();
if (width < 1200){
alert('Your screen is too small');
}
});
For completeness, heres the CSS media query (still doesn't take care of the alert, but can help with making the website "responsive").
/* some normal style */
.myclass {
font-size: 22pt;
}
/* alter the style when the screen's smaller */
#media screen and (max-width: 1200px) {
.myclass {
font-size: 18pt;
}
}

For future Googlers, a 2019 solution is to use JavaScript's window​.match​Media(). It is supported in all major browsers and IE 10 onwards.
You can use it like this:
if (window.matchMedia('(max-width: 1200px)').matches) {
// functionality for screens smaller than 1200px
}
To make this responsive, you just need to wrap it in a resize function:
$(window).resize(function() {
if (window.matchMedia('(max-width: 1200px)').matches) {
// functionality for screens smaller than 1200px
}
});
This is arguably the most easiest way to check a screen size and it doesn't bloat the code.
Check the Mozilla docs about match​Media to learn more and this one for more info on Testing media queries programmatically.

Related

Increment negative value of property based on window size

I don't know if this question has an easy or hard answer.
The situation is that I have an element on the page with negative margin:
.element {
margin-left: -195px;
}
It works well with a screen size 1440x532 (check with Chrome's inspector element).
What I want is kind of simple to explain.
I want an increase of 1 pixel (for instance) in the margin-left of the element anytime the window is larger by one pixel:
So, if window size is 1441, the margin-left of the element be -194px. If the window size is 1451, the margin-left of the element be -184px.
In the same way, I want this to work from 1440px upwards.
IMPORTANT NOTE: What I want is a dynamic value for the margin-left that increases based on screen size and not a kind of media query which would make the value always remain the same between an interval of screen sizes. What I want would force me to add a massive number of media queries.
Is this possible with javaScript or jQuery? (or even CSS?)
The Jquery solutions that other users gave you works perfectly for this use, but if you prefere you can also use a CSS-only alternative (it works even if the user has disabled scripts!).
It has got also a good support among browsers
You can implement your CSS in this way:
#element{
margin-left: -195px;
}
#media screen and (min-width: 1440px){
#element{
margin-left: calc(-195px + 100vw - 1440px); //100vw is the width of the screen
}
}
It adds a pixel for each pixel above 1440
Tell me if this is what you mean
This is not possible with CSS since there is no property or method to capture the window size. If there would be, this could be done using calc().
However, this is possible with JavaScript.
function resizeScreen() {
var windowWidth = $(window).width();
var $element = $('.element');
if (windowWidth > 1440) {
// Calculate the new (negative) margin by subtracting the windows width by 1440 (e.g. 1500-1440 = 60). The new margin would be: -195 + 60 = -135.
var newMargin = $element.css('margin-left') + (windowWidth - 1440);
$('.element').css('margin-left', newMargin)
}
}
$(window).resize('resizeScreen');
Yes is it possible with Jquery with resize()
$(window).resize(function() {
if (($(window).width() <= 1441)) {
$('.element').css('margin-left', "-194px")
}else if($(window).width() <= 1451){
$('.element').css('margin-left', "-184px")
}
});
But i suggest to you to use media queries with css:
#media screen and (max-width: 1441px) {
.element {
margin-left: -194px;
}
}
#media screen and (max-width: 1451px) {
.element {
margin-left: -184px;
}
}

how to use resize in js several times

i'm making a webpage and i want when this page resized do a function
but it works just for first time not for every time that page resized
and my codes is below:
any suggestion ?
<body onresize="myFunction()">
<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
function myFunction() {
if(width<500){
document.getElementById("yy").style.display="none";
}else{
document.getElementById("yy").style.display="absolute";
}
}
</script>
<img id="yy src="..."/>
If you want just to change styles for element if page width less than 500px, you can use css media query. Media queries don't work on IE8 and below, so be sure you don't need to support old browsers, in that case you need to use javascript.
/* css rules for your example */
#yy {
display: absolute;
}
#media (max-width: 500px) {
/* this rules will apply only when screen width less than 500px */
#yy {
display: none;
}
}
It's much easier to write and much easier to maintain.

Detecting media queries via javascript and apply appropriate data-state

I need javascript #help.
I have an object(#objID) with three different data state (A B & C) (https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0)... Each state contain some css to describe the look of it..
I want to use javascript to detect media queries change and add the appropriate data state to #objID.
(ie.
if screen is under 320px then add [data-state="A"] to #objID
or if screen is between 320px and 728px then switch to [data-state="B"]
or if screen is above 1024px then switch to [data-state="C"]
)
similar to this concept..http://zerosixthree.se/detecting-media-queries-with-javascript/
but im not sure how to implement it.
Please help. Thanks
To simplify you can do something like this:
window.matchMedia("(max-width: 320px)").addListener(function() {
// Change the value of `data-state`
});
window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
// Change the value of `data-state`
});
However you need make sure the browser supports window.matchMedia and also handles maintaining state etc to know when you've crossed from one breakpoint and into the other and identify which is active as both will trigger as you exit and enter breakpoints.
As for doing it on window.onresize this is not a very performant way to do this and you must throttle/debounce if you do it that way. Using matchMedia will only trigger when the breakpoint changes rather than continuously on resize. It also give you the benefit of keeping your CSS media breakpoints in sync with your JS.
This is a Polyfill for browsers which do not support it as mentioned and this guide might also help you.
However:
I have an object(#objID) with three different data state (A B & C).
Each state contain some css to describe the look of it..
Sounds as though you want to change the CSS styles applied to an element based on the data-state attribute, which you are going to change per breakpoint?
Correct me if I am wrong but why can't you just use media queries to change the CSS that is applied to it instead?
#media only screen and (max-width: 320px) {
/* State A */
.css-selector {
color: red;
}
}
#media only screen and (min-width: 321px) and (max-width: 728px) {
/* State B */
.css-selector {
color: green;
}
}
#media only screen and (min-width: 728px) {
/* State C */
.css-selector {
color: blue;
}
}
You need the onresize event
window.onresize = function(event) {
//...
};
The screen has two dimensions, width and height, and you describe a one-dimensional comparison, which does not give us enough information about what you want to achieve. Anyway, you can use window.innerWidth and window.innerHeight inside your onresize event.

Size Font to Window

I'm looking for a suitable font size for my page. I currently have it set at -webkit-xxx-large as that fits my window perfectly.
What I need is the text to fit inside the window width (not fussed about height) no matter what the window size.
Example:
1920px Window Width - font-size: -webkit-xxx-large
480px Window Width - font-size: large
Whether it uses Javascript/jQuery or if it's just CSS it doesn't bother me. I just need a suitable one-size-for-all.
Try the media query using #media like (IE support)
body {
font-size: -webkit-xxx-large
}
#media screen and (max-width: 480px) {
body {
font-size: large;
}
}
Demo: Fiddle - reduce the width of the result panel
Don't use the size constants. Find a value based on the em scale and that will work for different screen sizes.
Text can be a pain to size exactly. BigText is a nice Javascript Library that can size it to 1/100th of an em for you pretty easily.
You could look into something like: http://simplefocus.com/flowtype/
Although i would not recommend this for your body text as media queries would probably suffice and give you more control. Smaller on small screens is not always better.

how to change the font-size proportionally to the change size of the window in CSS3 or javascript

I do some web app and i have some problem with font-size.
How to change the font-size proportionally to the change size of the window in CSS3 or javascript?
The ideal way to do this is using the vw unit, which is defined as 1/100th of the viewport width (hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:
font-size: 4.5vw;
… and theoretically, that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-index property from JavaScript:
window.addEventListener('resize', function(){
document.getElementById('myEl').style.zIndex = '1';
}, false);
This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.
The ideal way to do so is to combine between the VW font-size and #media queries. Reasons are:
1) em for itself won't rescale by window size
2) vm for itself will be too small for resolutions / screens lower than 800px.
So the right way to achieve this is:
Define a class - prop-text with VM=1.0 for your desired screen width
Add media queries to fit the font-size with your desired lower resolution grids.
For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:
<style>
.prop-text{font-size:1.0vw}
#media (max-width : 768px) {
.prop-text{font-size:2.0vw}
}
/*other media queries here - fit font size to smartphone resolutions */
</style>
<div class="prop-text">your text is here</div>
Set your base font size (the one you define for your body element in css) in px then everywhere in the rest of your page set font sizes relative to that one using emunit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:
body {
font-size: 15px;
}
#media (max-width: 1000px) {
body { font-size: 1.3em; }
}
#media (max-width: 500px) {
body { font-size: 1.1; }
}
You have 3 ways to do it:
Using http://fittextjs.com/, but pages can start to be slower
Using media queries
Using ems
Now, it depends on what you want to be your final result.
I'd go to option no 3.
I think the best way might be vh, beeing that font-size changes the height of the text. Using vh means that the text will always foolow the size of the page, even if the user resizes the page or the screen is small.

Categories