I'm working off a specific codepen which can be found here https://codepen.io/anon/pen/WXgvjR .. Its not mine.
Everything works perfect with it, except when i open the page on a mobile or change the browser width to be mobile size, its still displaying some items outside the browser window width ways, is there any way to detect a mobile or change in screen size and just display them going down?
The following is the resize code that is found in the codepen if that helps
$(window).resize(function(){
var margin=40;
var padding=15;
var columns=0;
var cWidth=300;
var windowWidth = $(window).width();
var overflow = false;
while(!overflow){
columns++;
var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
if(WidthTheory > windowWidth)
overflow = true;
}
if(columns > 1)
columns--;
var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
if( GridWidth != $('#grid').width()){
$('#grid').width(GridWidth);
}
});
Any help would be greatly appreciated
Resizing using the Maximise, Minimise, or the Chrome DevTools Devices Buttons, etc. does not trigger the resize event properly (it triggers it before actually resizing, so it does not get the right size).
For the mobile page load, put the same code from the window resize function into the document ready function as well (I would recommend making it a function and then call the function in both to reduce duplicate code):
function setDisplayBoardSize()
{
var margin=40;
var padding=15;
var columns=0;
var cWidth=300;
var windowWidth = $(window).width();
var overflow = false;
while(!overflow){
columns++;
var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
if(WidthTheory > windowWidth)
overflow = true;
}
if(columns > 1)
columns--;
var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
if( GridWidth != $('#grid').width()){
$('#grid').width(GridWidth);
}
}
$(window).resize(function()
{
setDisplayBoardSize();
});
$(document).ready(function()
{
setDisplayBoardSize();
});
For the min-max etc. see this stackoverflow thread:
jQuery resize() using browser maximise button
This answer specifically should help:
$(window).resize(function()
{
setTimeout(function() {
setDisplayBoardSize();
}, 100);
});
I am using some JS to make some divs the same height on a website I am working on. Flex won't work for this particular project.
The code I am using is:
(function() {
function equalHeights(selector) {
var maxHeight = 0;
function calcEqualHeight() {
var el = $(this);
maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
}
selector.each(calcEqualHeight).height(maxHeight);
}
equalHeights($('.level'));
})();
When you re-size the screen, the calculations are off unless you refresh. I am wondering if there's anyway for this to reload when the browser size is changed.
Ideally it would be good for the heights to recalculate, rather than the user having to refresh the page for it to display properly.
You can add a handler for the window resize event.
Note: since the resize event is called multiple times when the size changes, it's advisable to debounce the event handler. I've used the debounce method from the article in the example.
(function() {
function equalHeights(selector) {
var maxHeight = 0;
function calcEqualHeight() {
var el = $(this);
maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
}
selector.each(calcEqualHeight).height(maxHeight);
}
var $levels = $('.level');
equalHeights($levels);
// 10ms after window stops resizing, the equalHeights will be called
$(window).resize(debounce(function() {
equalHeights($levels);
}), 10);
})();
I want to get the height of the highest div using outerHeight() jquery function.
Here is my js code:
$( window ).load(function(e){
var maxHeight = 0;
var div = $('.inner_service_block');
div.each(function(){
if ($(this).outerHeight(true) > maxHeight) { maxHeight = $(this).outerHeight(true); }
});
console.log(maxHeight);
});
This code works fine in every browser except in Safari (Version 9.0.3 (11601.4.4)).
For example the actual div's height is 293px (I can see that in web inspector), while in console I get 250px. But sometimes, after refreshing the page, I get the right value i.e. 293px and after further refreshing I see 250px again.
I've cleared cache, restarted mac, tried in private browsing mode and tried height() function but get the same result.
Here is the workaround that I've found:
$( window ).load(function(e){
setTimeout( function(){
var maxHeight = 0;
var div = $('.inner_service_block');
div.each(function(){
if ($(this).outerHeight(true) > maxHeight) { maxHeight = $(this).outerHeight(true); }
});
console.log(maxHeight);
}, 90);
});
I really would like to know what the real problem is here because using setTimeout function is not what I would like to use in this case.
I've written some jQuery code to display a box with data in the corner of the users' web browser. I'm using the .scroll event to make the box stay in the corner as the user scrolls up and down the page. Let me emphasize that I am not using jquery-ui dialog.
The only problem is that the box flickers as the page scrolls. I'm afraid that there will be no cross-browser solution to this problem as the different browsers seem to behave differently with scrolling. Barring a cross-browser solution, an IE solution would be nice (My web application is designed to be used by a specific group of about 100 users in my organization.)
Here are snippets of the relative code:
ExternalScroll: function () {
LittleBlackBook.setPosition();
}
setPosition: function () {
var scrollPosition = $(self).scrollTop();
var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
this.jQueryObj.css('top', cssTop);
this.jQueryObj.css('height', cssHeight);
this.jQueryObj.css('left', cssLeft);
this.jQueryObj.css('width', cssWidth);
}
var LittleBlackBookStatic = {
determineCssTop: function (height, isTop, vOffset, vScroll) {
var windowHeight = $(self).height();
var scrollPosition = $(self).scrollTop();
var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
return newModalTop + 'px';
},
determineCssHeight: function (height) {
return height + 'px';
},
determineCssLeft: function (width, isLeft, hOffset) {
var windowWidth = $(self).width();
var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
return newModalLeft + 'px';
},
determineCssWidth: function (width) {
return width + 'px';
}
} // end LittleBlackBookStatic
I'm using jQuery to look up the scroll position as the page scrolls and change the CSS.
Is there a better way; a way that will make it scroll without flickering? If no, then why not?
You should use fixed positioning for that box instead instead of animating it to keep it in the corner.
You'll use less javascript and avoid flickering that comes with animation.
How do I auto-detect a screen resolution and change browser zoom with Javascript?
I was thinking of something more like this:
I've got the following code:
#warp with width: 3300% and a mask with width: 100%; and then, each .item has width: 3.030303% — with overflow hidden, otherwise it couldn't work as I want.
My point is: I've done this for at least 1280px wide screens.
What I want is if someone can write code that I could use toswitch the CSS file once viewed on a <1280px screen — them, I could do something like:
.item img { width: 80%; } and then, the result would be the same as "browser zoom out".
If you mean change the native browser zoom triggered by CTRL +/- then this isn't possible. You can adjust CSS properties/apply stylesheets but you cannot affect native browser controls. There are in fact CSS only options here depending on your target audience (and their browser choice) through the use of media queries, a couple of examples here and here. If these are not suitable then you can do various things with JavaScript to detect screen width/height and adjust accordingly.
Auto-detect a screen resolution
See this SO question
change browser zoom with javascript
This is not possible. See this SO question.
This will help to detect browser zoom tested on all browser
<script>
window.utility = function(utility){
utility.screen = {
rtime : new Date(1, 1, 2000, 12,00,00),
timeout : false,
delta : 200
};
utility.getBrowser = function(){
var $b = $.browser;
$.extend(utility.screen,$.browser);
utility.screen.isZoomed = false;
var screen = utility.screen;
screen.zoomf = screen.zoom = 1;
screen.width = window.screen.width;
screen.height = window.screen.height;
if($b.mozilla){ //FOR MOZILLA
screen.isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
} else {
if($b.chrome){ //FOR CHROME
screen.zoom = (window.outerWidth - 8) / window.innerWidth;
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02)
} else if($b.msie){//FOR IE7,IE8,IE9
var _screen = document.frames.screen;
screen.zoom = ((((_screen.deviceXDPI / _screen.systemXDPI) * 100 + 0.9).toFixed())/100);
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02);
if(screen.isZoomed) screen.zoomf = screen.zoom;
screen.width = window.screen.width*screen.zoomf;
screen.height = window.screen.height*screen.zoomf;
}
}
return utility.screen;
};
window.onresize = function(e){
utility.screen.rtime = new Date();
if (utility.screen.timeout === false) {
utility.screen.timeout = true;
setTimeout(window.resizeend, utility.screen.delta);
}
};
window.resizeend = function() {
if (new Date() - utility.screen.rtime < utility.screen.delta) {
setTimeout(window.resizeend, utility.screen.delta);
} else {
utility.screen.timeout = false;
utility.screen = utility.getBrowser();
if(window.onresizeend) window.onresizeend (utility.screen);
if(utility.onResize) utility.onResize(utility.screen);
}
};
window.onresizeend = function(screen){
if(screen.isZoomed)
$('body').text('zoom is not 100%');
else{
$('body').text('zoom is 100% & browser resolution is'+[screen.width+'X'+screen.height]);
}
};
$(document).ready(function(){
window.onresize();
});
return utility;
}({});
</script>
Demo
RE: Auto-detect a screen resolution and change browser zoom with Javascript?
The question is perfectly possible and is in effect at our website here:
www.noteswithwings.com
JS detects the screen width and zooms out or in a little to fit the content on to the screen.
Further, if the user resizes the window the zoom is triggered.
This actually helps fit content on to tablet sized screens and screens as small as the iphone without adding extra stylesheets or having to detect an OS/ Browser..
var oldZoom = $(window).width();
var windowWidth = $(window).width();
check_window_size(windowWidth,1,bsr,bsr_ver);
$(window).resize(function() {
var windowWidthnow = $(window).width();
check_window_size(windowWidthnow,2,bsr,bsr_ver);
});
function check_window_size(size,init_var,bsr,bsr_ver)
{
/* Develop for resizing page to avoid grey border!
Page layout 1265px wide.
On page resize shift layout to keep central, zoom BG-img to fill screen
Zoom content down for smaller screens by 5% to keep content flow!
*/
//change this var for screen width to work with, in this case our site is built at 1265
var wdth = 1265;
//Change this variable for minimum screen;
var smallest_width=1120;
var varZoom= $(window).width()/wdth;
var s_size = $(window).width();
var scale_smaller;
var center = (s_size-wdth)/2;
var its_ie=false;
if(size<=smallest_width)
{
$("#old_browser").css("width","50%").css({"height":"40px","left": center+"px"});
if(!check_for_object(false,"moved_pages"))
{
if(center<-110)//margin width!
{
if(!its_ie)
$("#scroller").css("zoom",0.95);
$("#footer").css("zoom",0.9).css("left",120+"px");
$(".colmask").css("left",-110+"px");
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right","110px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","-80px");
return;
}
$("#move_menu_loggedin").css("left","-"+center+"px");
$("#scroll").css("zoom","normal");
$(".colmask").css("left",center+"px");
}
else
{
/*Only pages that you do not want to move the colmask for!*/
$("#scroller").css("zoom",0.90);//.css("left","-50px");;
$("#footer").css("zoom","normal");
}
}
else
{
if(size>wdth)
$("#background").css("zoom",varZoom);
$("#scroller").css("zoom","normal");
$("#footer").css({"zoom":"normal","left":0});
if(!check_for_object(false,"moved_pages"))
{
$(".colmask").css("left",center+"px");
$(".colmask").css("zoom","normal");
var movelog = -center;
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right",movelog +"px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","80px");
}
else
{
$(".colmask").css("zoom","normal");
}
}
}
-- check_window_size(windowWidth,1,bsr,bsr_ver); bsr & bsr_ver are detected using a php class.
-- #old_browser is a div containing information if you have an old web browser.
-- #background is a fixed image 100x100% of the screen.
As you can see we also move a few items which were not in the containing div scope.
Colmask is the containing div for most of the pages content (For us that sits underneath the header which is why we move some items manually)
Hope the code snippet can help someone else achieve this.