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.
Related
I am developing a responsive site using Bootstrap 3. I have a JS show/hide script which is available when the screen is max-width 767px, but if I have shown and then hidden the div in that size, when I resize the screen back to desktop the div is still hidden.
Is there away to force the div to come back if the screen goes beyond a 767px?
<script type="text/javascript">
function showFunction() {
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction() {
document.getElementById("left-col").style.visibility="hidden";
}
</script>
Why not use a media query then?
#media (max-width: 767px) {
.left-col {
display: none;
}
}
http://jsfiddle.net/x9y1s14o/
Generally, there are two ways to do this:
Use CSS to force the div to be shown at one size, and hidden at another
Use JavaScript to listen for changes in the browser and then call a function to modify the state of the dom
With CSS, you tell the browser what to do when the window is bigger than your breakpoint, and what to do when your window is smaller than your breakpoint, which 767 px.
#media (min-width: 767px) {
.left-col {
visibility: visible;
}
}
#media (max-width: 767px) {
.left-col {
visibility: hidden;
}
}
With JavaScript, you tell the browser to call a function when the window resizes:
var breakpoint = 767;
window.onresize = function(event) {
if (window.innerWidth >= breakpoint) {
showFunction();
} else {
hideFunction();
}
};
Note: Your specifics might be slightly different, but this is meant to illustrate the idea behind it. Tweak the details that you need to.
I have a div which has a basic width value, set in a css file.
In that file, i also have a media query for a new basic width, upon orientation change to portrait.
in my javaScript i have a function updating the width dynamically when document is ready.
What happens is, that when the media query is called, the updated width - is the width which was set dynamically by the js, and it's automatically overwrites the new media query css width.
In other words, once I dynamically set the width in the code - the media query will no longer take any effect.
how can i make the media query css width overwrite the current width (which was set dynamically by js?)
THANK YOU!
HTML + JS :
<html>
<head>
<script>
var defaultNumOfItem = 3;
$(document).ready(function()
{
updateWidth(4);
});
function updateWidth(currentNumOfItems) {
var basicWidthText = $('#list').css('width');
var basicWidth = parseFloat(basicWidthText .slice(0, basicWidthText .indexOf('px')));
$('#list').css('width', basicWidth * currentNumOfItems/ defaultNumOfItem);
}
$(window).bind('orientationchange, function(){
updateWidth(4);
});
</script>
</head>
<body>
<div id='list'>
</div>
</body>
</html>
CSS:
#list {
width: 900px;
}
#media only screen and (orientation: portrait){
#list {
width: 600px;
}
}
P.S the use of !important did not work for me, since if i put it in the css - the js will take no effect. and if i put it in the js - the media query takes no effect - same will happen by putting it in both the js and the css
This can probably be achieved without JavaScript, though the full intent of the code is not totally clear, so this is how to do it while maintaining the current functionality.
#media only screen and (orientation: portrait) {
#list {
max-width: 600px;
}
}
The max-width CSS property trumps width, even if width is defined inline, externally, or made !important. The same is true of the min-width property under different circumstances.
Just give it a try !important
#media only screen and (orientation: portrait){
#list {
width: 600px !important;
}
}
If I understand this correctly you want to use the media query only if orientation is portrait and the js if the orientation is landscape. In this case you can try this:
$(window).bind('orientationchange', function(event){
if(event.orientation != "portrait")
updateWidth(4);
});
this way the js will not overwrite the width that you wanted to set through the media query in portrait
Ok, found a work around that actually works!
What i do, is simply remove the "width" attribute from the #list every time the orientation changes:
$(window).bind('orientationchange, function(){
$('#list').css('width','');
updateWidth(4);
});
so that way, the external css does take before the js manipulation.
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.matchMedia(). 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 matchMedia to learn more and this one for more info on Testing media queries programmatically.
I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is
<style>
body {width:1004px;}
</style>
but if it was greater than 800 pixel width, it will makes my css code is
<style>
body {width:100%;}
</style>
so anyone knows js code that code do it !!
i only care about width detection no need to detect the hights as well.
i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.
You can use CSS Media Queries
body {
width:100%;
}
#media all and (max-width: 800px) {
body {
width:1004px;
}
}
I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position.
Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows.
{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}
(It's really wide to accommodate the animation working on even the widest screens--the width isn't an issue.)
Here's a page to look at: http://ianmartinphotography.com/test-site/
And my CSS: http://ianmartinphotography.com/test-site/css/basic.css
This is easily fixed in my CSS style sheet, but it seems like I can't have it both ways for monitors greater than 600px and monitors smaller than 600px.
So, how do I detect a browser window size and then select one of two different CSS style sheets? One for small windows, another for larger windows? Is there a jquery script that will do this for me?
Or, is there another way to make my div center in the middle of the browser window with CSS that will allow scrolling so that the top of the div can be accessed on smaller browser windows?
Thanks for your thoughts!
#media queries are my preference (saw that you don't like them as a solution per se), but they really could do the trick - especially if you adjust your css a little to accommodate.
<link...media="only screen and (max-height: 600px)" href="small-device.css" />
small-device.css = div.container { ... height:500px; margin:50%; ...}
<link...media="only screen and (min-height: 601px)" href="big-device.css" />
big-device.css = div.container {... height:600px; margin:50%; ...}
You may also have a little more luck by removing your absolute positioning and taking advantage of normal document flow. It would help you to add things like { overflow-y:scroll; }
to those hidden-by-screen-height divs.
I think in the end, if you're trying to design around hand-held devices, you'll need media queries to some extent. My Android screen (for example) has 3 display options (low, medium, hi def). All 3 crop pages differently.
You can determine window size by Jquery
$(window).width();
$(window).height();
or
$(document).width();
$(document).height();
then change css
$("link").attr("href", "blue.css");
Something like this:
$(document).ready(function(){
if($(document).height() > 600 or $(window).height() > 600){
$("link").attr("href", "600+.css");
} else {
$("link").attr("href", "600-.css");
}
});
A solution that works in all major browsers. No JS needed. Vertically/horizontally centered, scrollable, sticks to the top when content is larger than viewport.
HTML:
<div id="body">[your content goes here]</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
#body {
margin: 0 auto;
}
Don't forget to apply the last rule, it will actually perform the horizontal centering.
Just did a bit of googling and found this:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
does that work for you?
Try the Less CSS Framework: http://lessframework.com/,
You do not need JavaScript, but rather you can use CSS #Media to set styles based on resolution/ screen size.
Best of luck
Use the following JavaScript conditional to detect screen size.
function x() will handle inserting the CSS link in the <head> tag. All you need to do is call the function and pass in the CSS file name.
< script type = "text/javascript" >
<!--
function x(y) {
var styles = y;
var newSS = document.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + styles;
document.getElementsByTagName("head")[0].appendChild(newSS);
}
if ((screen.width >= 1024) && (screen.height >= 768)) {
x('file.css');
}
else {
x('file1.css');
}
//-->
< /SCRIPT>
If "document_height" not work, try "window_height" i comment it in code!
$("link").attr("href", "css_file_path"); // here must insert path to your css, replace it in the code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
document_height = $(document).height();
//window_height = $(window).height();
//if(window_height > 600){
if(document_height > 600){
alert('Bigger than 600px height: ' + $(document).height());
$("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;
} else {
alert('Smaller than 600px height: ' + $(document).height());
$("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;
}
});
</script>