I have problem with reloading page, iam writing a site using RWD and media queries for desktop and tablet/mobile layout. And i have one page where i use google maps. My client want me to refresh page if he resize window from desktop size to mobile (i tried to tell him this is rather dumb idea but he didnt listen). Desktop displays all map with markers, but for tablets and mobile layout is different, i use accordion/list to display list of countries. when you click on one element form accordion he expands showing info from google maps windowinfobox. and the problem is when i use only media query ofcourse it change layout but all elements on the accordion are expanded, but it must be hide and only if you click then they expand, if i refresh page everyting is ok, problem is with resize page. i tried use window.resize(function(){location reload}); and its work perfectly with resize, but on mobile devices every touch couses relouding. so i want to write a function that reload page only when window size change from xxx to yyy if they cross the border 1024px., because then my accordion will display perfectly.
I am assuming this is what you want.
$(function(){
var width = $(window).width();
var screen = "";
if(width < 1024 && width >640){
screen = "small";
} else if(width>1024) { screen = "big"; }
$(window).resize(function(){
var cur_width = $(window).width();
if(cur_width<1024 && cur_width>640 && screen == "big"){
location.reload();
} else if(cur_width >1024 && screen == "small"){
location.reload();
}
}
}
Related
I'm working on my responsive website and I'm trying to hide the address bar and toolbar of mobile browsers.
On this picture, you can see which zone I'm trying to hide (red mark)
So as I've seen when I scroll on my mobile this automatically disappear.
What I'm trying to do is once the document is ready to do an auto scroll. Something like this:
$('html, body').animate({
scrollTop: $("#id").offset().top
}, 2000);
This element is practically on the bottom of the website but still don't hide the toolbar of the web browser.
Is there any way to hide it?
EDIT: I've to clarify that this is not on my website, i'm trying to hide de footer of practically all browsers, i know that this is not possible beacause is on client side, but i'm trying to do a "trick" to hide it. I know that when i use my mobile i open safari and i navegate there is a footer to open a new tab or close it etc... But when i scroll down on a website this one disappear, so this is what i'm trying to do. Create an automatically scroll down to make it disappear... But this is not actually running
The only way I can think to solve this would be to use the Fullscreen API as described here.
For example:
// Covering all browsers that support this
var docEl = document.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
// Execute the variable on initalization
requestFullScreen.call(docEl);
use Jquery to add a CSS and display it as none
if(condition that you want){
$(.'your-menu').css({'display':'none'});
}
I have an image that I am using at the bottom of my clients page. It is an absolute positioned image on the bottom left of the screen, inside the footer div.
.footer__endrow > .chefBottom {
left: 0;
position: absolute;
bottom: 0;
}
This works and looks fine when on the desktop at a normal resolution. However, when the window is made smaller, it starts to collide with the social icons there and goes behind them.
The viewport it self is still well within range of a normal desktop website when viewing the second image so I can't just hide it when its at tablet or mobile size as the collision would have already hapend.
Is there a way with javascript or css to hide an image when it collides with another element? For example detect if the element touches another one and then hide it?
Just find your breakpoint of when images collide with social icons using chrome developer tool inspect element in responsive mode and then use media query to hide the element at the end of your css file like
#media screen and (max-width:480px){
.footer__endrow > .chefBottom{
display:none;
}
}
Note: Here I have used 480px as a breakpoint
If you want to make it with javascript way, then it is better to solve this way.
$(window).on("resize", function(){
var $imgDiv; // assign image div here
var $socialIconsDiv; // assign social icon div here
var $imgDivRightOffset = $($imgDiv).offset().left + $("$imgDiv").outerWidth(); //get image right position
var $socialIconDivLeftOffset = $($socialIconsDiv).offset().left // get social icons left position
if( $socialIconDivLeftOffset <= (imgDivRightOffset) ){
$($socialIconDivLeftOffset).hide();// Hide social icons here
}
});
Hi You can check the position of both the image and see if the position is overlapping if it is over lapping in the if condition you can hide it.
window.addEventListener('resize', function () {
var imageOne = document.getElementById('firstImage');
// check for the image which you want overlapping add the condition as per that.
if (imageTwo.offsetLeft <= imageOne.offsetLeft) {
//use this command to hide the image.
imageOne.style.visibility = 'visible';
}
});
In this post What is the best way to detect a mobile device in jQuery? I found this code:
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
I have a web site that passes Googles test for "mobile friendly" with out any pop ups for my newsletter / e-courses.
I tried the above script and it will run the scitps, however do to the size of the pop up blocks the form is too large.
I would like to block the script to keep the pop up from displaying, I tried to resize the block but when I do that it become unreadable for a device with a screen size smaller than 400 pixels.
Any help would be greatly appreciated.
CSS:
#mobile-only{
display:none;
}
HTML:
<div id="mobile-only">
<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>
</div>
The java script is a form that will display after 10 second delay, the form is 800x800 pixels, this is very large for most mobile devices, the reader can not scroll the form to the right to touch the 'x' to close the form.
After testing the CSS and the HTML the script still runs.
Please see the below code and attempt it.
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#mobile-only').append('<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>');
};
});
Things To Consider
Now if you want to worry about what to do if the user resizes the window on his desktop, you can either handle these events using the following items for help:
onresize
.resize()
Media Queries
I hope this helps!
Using the above code by A.Sharma I modified it like this:
<script>
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#desktop-only').append('async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"');
}
)};
</script>
Where '#desktop-only' is the CSS container for any desktop content that either will not fit on a mobile device (tables, large hi res images, etc.) or will fill the screen past the accepable limitations of the device.
This code does not run, however it looks like the best way to block javascript from running.
Any suggesitons for modification to make it run?
Thanks!
I'm working on a site for a client who bought a template and the issue is that now client wants the slider remove from hand held devices.
I know that we can use <picture> tag to assign different images based on screens size but what I'm trying to do here is to disable(by disable i mean canceling image load on mobile devices, not {display:none;} the slider loading all together from a certain screen size.
We'll probably have to create a script to call event assigned to that <div> to cancel its loading on for instance any screen size bellow 768px.
How can I do this?
(BTW I'm still learning JS .. any help is muchappreciated)
Many thanks in advance.
I have a simple solution to achieve your need. Below is the mobile check method.
// Mobile Device Check
function MobileDeviceCheck() {
var mobileFlag = false;
var isMobile = window.matchMedia("only screen and (max-width: 768px)");
if ($(window).innerWidth() < 768 || (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
mobileFlag = true;
}
return mobileFlag;
}
Call the Above function to check the mobile device and do your necessary actions.
// Load Device Specific Actions
var mobileFlag = MobileDeviceCheck();
if (mobileFlag == true) {
// Do Your Actions
}
i've made a responsive website with a horizontal menu. I wanted to make the menu a toggle drop down when a lower screen resolution is reached. The JQuery-Toggle works fine and i tried this to "make it responsive":
if (document.documentElement.clientWidth < 768) {
$(document).ready(function(e){
$('#menubutton').on('click',function(){
$('#main-nav').slideToggle();
});
})
}
This works also fine but not by changing the windowsize directly in the browser – i have to resfresh the page manually to load the Script!
Is there a way to "refresh" the page when the needed screen width is reached (768 px)? …and vise versa!
thanx,
Jochen
maybe instead of refreshing the page on every resize, you can do:
var mainNavActivated = false;
$(document).ready(function(e){
$('#menubutton').on('click',function(){
if(mainNavActivated || document.documentElement.clientWidth < 768){
window.mainNavActivated=true;
$('#main-nav').slideToggle();
}
});
})
which is binding click anyway and making it work when the window is "narrow"
You can use $(window).resize(). It will call your function every time the window is resized by the user.
You can use the resize event.
$(window).resize(function() {
// here your code
});