Changing Margins Depending on Browser Width Javascript - javascript

Im trying to make an "Additional Comments" box on my website, which floats to the right of the page, while there's 4 inputs on the right.
For some reason, the comments box, on browser resizing, sits behind the inputs.
I want to make it so that when the browser is less than, say for example, 400px, it applies a margin to the comments box. I tried the below, but that didn't seem to work.
var browserSize = window.innerWidth();
var additional = document.getElementById("additional");
if(browserSize < 400px) {
additional.style.marginTop = "200px";
}
Could someone guide me as to where to go?
Many thanks in advance!

Why not use CSS media queries? You can do something like this in a stylesheet:
#media only screen and (max-width: 400px) {
#additional {
margin-top: 200px;
}
}
However, you should try to avoid using IDs as CSS selectors as much as possible.

Add an event listener for browser resize and a function for your work inside it:
function processResize()
{
var browserSize = window.innerWidth();
var additional = document.getElementById("additional");
if(browserSize < 400px) {
additional.style.marginTop = "200px";
}
}
window.addEventListener("resize", processResize);

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;
}
}

Stop being responsive at a certain width

I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)
set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.
You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

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.

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

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.

How to hide a div if it overlaps another div

Is this CSS or javascript? I just need the div to change to display:none if it comes within say 20px of another div. Thanks
Try this
https://github.com/brandonaaron/jquery-overlaps
//Listen to the event that will be triggered on window resize:
window.onresize = function(event)
{
// test if one element overlaps another
if($('#div1').overlaps('#div2'))
{
//Do stuff, like hide one of the overlapping divs
$('#div1').hide();
}
}
Based on your comment:
Yes it is so that if the user makes their browser window small my site
does not look crowded
Instead of answering the question you asked, Here's an answer to the question you didn't ask:
How to resize/position/cssify page elements based on browser size?
There is a new-ish application of css and javascript called Responsive Web Design. Responsive Design allows you to specify different css rules to apply based on different elements. For a great example of this technique, resize your browser around on The Boston Globe's website. They just integrated this technique sometime this week.
Here's an example of the css that would implement this:
#media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
example from http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
Here is a boilerplate to get you going.
You can add an event handler that gets fired when the window is resized. You could do this with javascript or jquery. jquery makes it easy:
window.onresize = function(event) {
var h=$(window).height();
var w=$(window).width();
if(h<400 && w < 300){
//hide divs
$('#yourdivid1').hide();
}
}
Hope this helps

Categories