Javascript/Jquery to run function when browser width change? - javascript

I'm creating a mobile website, but right now client insist on using an original website which is non responsive. That means I will be having two website under the same domain.
Now what I need to do is compare user screen size when loading the webpage and redirect them to the right website.
I can resolve this using javascript below:
if($(window).width() <= 760){
document.location = "https://maps.google.com.my/";
alert('mobile ver');//goto mobile version
}
but there is another problem, what if the person is browsing the website using
1.smaller screen(computer screen) at first then later decide to maximize the browser screen?
or
switch from portrait view to landscape view, (which has a longer width...)
Is there a function that could trigger every time the browser width change?

you need to call to your function inside resize event
$(window).resize(function() {
//call to your function and check the window width
});

I think you should consider having a single website that uses media queries -- as mentioned in #mattytommo's comment -- to alter layout based on the screen width. I've developed a few websites now that have just one site for mobile, tablets, and desktops using media queries. It's occasionally awkward, but it saves having to have two different sites and thus double the maintenance burden.

Related

Force a maximized window on user's machine?

Tech using: JS, jQuery, CSS3, HTML5, and Anguler(4+).
User's system is usually a Windows machine running 2 monitors.
Is there a way to programmatically force maximized window on the user's machine and one further force it across multiple monitors?
The only thing that is coming to my mind is somehow grabs the user's monitor size or monitors size.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.
It's user's responsibility to resize browser window to the appropriate size. A regular window (not a pop-up that was opened with window.open, as another answer explains) cannot be controlled by a website because a website doesn't own this window - there may be other tabs in this window that are equal in rights.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.
A desktop application (Electron or NW.js) may be considered to provide required UX for for this set of people. In its most simple form it can be just a wrapper for a website with necessary usability improvements.
You cannot resize a main windows, only for dynamic created windows
Only if you created it with window.open
:You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
If you have used window.open , you can always try this :
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
it might works depends on browser but as a personal experience , forcing user to resize is not always good

Restrict the user from resizing the browser window

This is question is discussed before (somewhat similar).Stack Overflow
But I have a different scenario from the other question.
My web application is mainly for Internet Explorer only. And this is going to be used in desktop/laptops and not in mobiles or any other devices.
So I need to restrict the minimize and maximize of the web application using javascript/jquery. Window size is same all the time.
At the same time I don't want to go for window.open() method. Because this is a single window application, no new window required.
Any suggestions or advice ?
You can first determine a definite size.
var sizes = [window.width,window.height];
$(window).resize(function()
{
window.resizeTo(size[0],size[1]);
});
Just try this one

Is there any issue with the way i'm detecting mobile devices

I've checked various related questions already posted about detecting mobile devices for websites, but my method is a bit different to anything i've seen and wanted to know if anyone can see any issues with it.
What I'm doing is...
I have a httpmodule that does a server.transfer(); to a blank html page on the first request of a user visit.
On this blank html page is some javascript that detects the viewport
width/height and touch capability. The js then saves this info to a
client cookie and then redirects (via window.location) to the
originally requested page.
When the httpmodule gets hit again, it reads the viewport
and touch screen details from the client cookie. If touch is
available or the viewport width is less than say 480px then the
httpmodule will redirect (via Response.Redirect()) to the mobile
version of the website.
Is there any stumbling block I will likely encounter by doing this?
I should note that the tablet version of the site is the same as the mobile, which is why I want to redirect to this version if touch is available.
any issues with it
Is not SEO friendly for sure.
Its not working if the user did not have javascript enable
Its have flickering if the cookie is not saved, or is disabled.
With the server transfer if you make any post, and any of the cookie or javascript fail, then the will also lose the post data.
Its nice idea general, but I think that you also need to check this thinks before the first server transfer. With your method you can avoid to keep an updated database with all the browser info's, I think that sounds good, but its need to be tested if its work smoothly in real world, and also make some more tests before the first server-trasnfer .
Two issues I can see: latency and touch event availability.
Round trip times are enormously extended over mobile networks: you're looking at about 500ms over 3G for an empty page request. Therefore request - redirect - redirect is about a second of extra latency before the user sees anything. I don't think you'll see flicker - as some commenters suggest - you'll just see nothing for a second, which doesn't seem like a positive experience.
Regarding touch: not all mobile devices are touch based and some that are (Windows Mobile 7) don't have the ontouch* events. You'll need to track these separately.
Viewports are slippery things too: if you aren't forcing the viewport width though a meta tag you'll find a large number of your target devices are missed by a viewport test because they'll claim to be 1024px.
As the touch-enabled devices (iOS, Android etc) all support CSS media queries wouldn't this be a better way to go?
It might be worth taking a look at the RESS (REsponsive design with Server Side components) approach championed by people like Luke Wroblewski: http://www.lukew.com/ff/entry.asp?1392
Try to use Media Queries which is CSS based and should sort website accordingly.
You can detect screen size on the fly and change css accordingly.
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.w3.org/TR/css3-mediaqueries/

detecting browser window resize on mobile when switching from portrait to landscape and vice versa

I'm using the following code to monitor screen size change and run alertSize() but it only works when loading the page and then it doesn't work
window.onresize=alertSize();
You want
window.onresize = alertSize;
You need to set the "onresize" property to refer to your function, not to the result of calling your function.
Actually you probably shouldn't try this, as it will be very painful to test if your function really is using alert(). The browser fires many "resize" events while a window is being resized on a desktop computer.
You might also want to look into CSS media queries.

Javascript for full screen

is there a javascript script that auto fullscreen mode the browser? example if you visit my site, the browser will auto fullscreen upon load..
Please, don't do this. You shouldn't resize the browser, that's the user's choice to make.
If I have my browser at a certain size, and your site is one of 20 tabs, why should the other 20 be resized?
If you're using window.open() to open a new window and want to specify a size, that's fine, but don't resize the browser. Most browsers actively block this, for a reason.
I looked into this once and like Nick said browsers do not allow you to control setting fullscreen for security reasons e.g. think malicious website recreating the toolbar to trick users. The closest you can get to it is explaining to the user in a ribbon or popup the first time they visit, how to get to fullscreen and letting them make the decision. Then the trick is check for the keypress on f11 assuming that's how you had the user do it.
The only place I wish it was allowed for the site to go fullscreen is webapps.

Categories

Resources