I was working on my website and I Was wondering how could I make it like Some other websites like Instagram after resizing.
let me explain a bit,
my website is responsive and as you already know it's style will change after you resize the width/height,
My question is, How could I prevent this,changing style instantly after resizing,and make it change only after reloading the page.
The best example is Instagram website (on desktop browser).
you can see that if you resize the page it won't change but right after reloading the page, it will change to the specified width and height.
I would be really happy if you could help me with this idea.
Regards
S.Rb
You can redirection you own page with a http get/post to check the viewport and administrate the .css that you link on the header. All the changes in css3 will be displayed without refreshing.
Related
Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
Ive Googled and stackoverflowed since earlier on today and i just cant find a solution. I'm looking for a way using JQuery/JS to open up a webpage ive created with a maximized window. So on the page loading whichever browser the user is using, my webpage will be displayed as though the user has hit the maximise button on their browser, but automatically on load.
I need to make an interactive website which is best displayed maximised, any ideas? Btw im very new to building websites so any solution JS fiddle based or properly explained would be so much appreciated.
THANKS :)
For security reasons, JavaScript cannot change the window's size (including minimizing or maximizing it).
You can, however, open a new window set to a certain size - but not automatically - only in response to user interaction, like a click on the page (again, for security reasons).
I don't know what your site's content is - but if it isn't flexible enough to fit different screen sizes (like a game, maybe?) then your best bet from a user experience perspective may be to just put some text up somewhere on the page that says something like "Site best viewed in fullscreen". Or, if it is something like a game, maybe a nice big button on the homepage that says "Launch Game"?
Your best bet, however, is to have your content fit any screen size/shape. This is often called things like "responsive webdesign", and there's tons of info out there on how to design a website responsively, as well as how to implement said design.
Good luck!
window.innerHeight and window.innerWidth
http://www.w3schools.com/jsref/prop_win_innerheight.asp
Kind of getting ahead of myself with the discovery of the javascript auto-refresh script..
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
I was stoked to have it be used as a way for my site to auto-adjust it's nav bar no matter what size the screen is. My goal was mainly to have the nav bar's menu icon "float on right" but still be visible on the screen, even on small screens. And I know there's a better way going about this, but for the moment this method seemed to work best via my limited javascript knowledge. No judgement! :-P
Anyway here's my problem. Although the nav bar re-sizes itself upon refresh, on small screens and mobile browsers it will REFRESH the page anytime the user swipes down on the site. The same happens for most tablets and smartphones.
To see what I'm talking about here is an alternate link to my website (Updating my database atm so I apologize for the horrid address numbers)
http://69.194.231.142 <---Please copy/paste this address into major/mobile browsers for diagnosis
it works great on laptops and large screens, but when viewing this site on a phone or tablet it will either refresh for infinity or refresh whenever you scroll.
If there's any way to solve this little riddle of nuisance code please let me know. Or at least, a better way to go about coding it so it only refreshes ONCE and not indefinitely. I don't know if this is possible though so any alternative solutions are welcome.
Maybe there's a way for just the CSS that makes up the nav to refresh and not the entire page? Either that or something that lets the page refresh just one time would be superb :-D
Thanks!
I found a solution!
Seems that my browser was using a cdn. So I had to flush the cache on the server to see the changes. Removed the JS refresh script and fixed the navbar to be set to "relative" when in mobile view. This way I don't have to worry about the spacing! It was originally being crossed out from this other javascript that makes the nav bar sticky, but the script also made the navbar stick on mobile view, which was messing up my layout and causing a lot of lag upon scrolling.
Fixing these little things made a big difference in my website usability. Now theres no refresh to worry about and the page stays centered on multiple screens.
Thanks all who suggested removal of the JS, Using CSS only worked like a charm!
Is there any way we could disable the browser scrollbar itself?
I'm not sure if this is a stupid question, but I really hope there are any alternative ideas you can suggest.
I am creating a Site following a Parallax effect with timeout. I want users to disable scrolling the browser so that it wont make the presentation screen get behind/advance, making its flow distorted.
I have already found a way to disable scrolling using mouse wheel and key strokes (thanks and Credits to this --> How to disable scrolling temporarily?) but users can change the view by clicking on the browser scrollbar itself
$('body').css("overflow", "hidden");
Should do the trick. Or add it via your stylesheet.
I have a web page with a fixed-size layout, it's fine in its current implementation even if it's far from "state of art", but a little too high for a mobile device screen.
Since the "header" part doesn't really matter to anyone, everyone wants to immediately pan / scroll down a little when viewing the page on a mobile device (or, broadly speaking, on a viewport shorter than the page fixed height).
Is there some HTML or JS magic I can do to tell the browser to start displaying the page already-scrolled-down X pixels?
You can try something like links and anchors.
http://www.yourdomain.com/main.html#bottom
If you're using jQuery, you could try scrollTo. You'll need to work out where on the page your target is, though...
Anchors is one solution, but the way I find really nice is to use http://archive.plugins.jquery.com/project/LocalScroll. So use can detect User Agent in Javascript and scroll down in proper place using this plugin.
Cheers!
Not sure anchors would work if you are trying to implement this on the homepage.
If the header is completely pointless in mobile browser this you could use html to detect that a mobile browser is being used then from this load CSS with the header hidden, or load it at the bottom perhaps. If this sounds like a viable option I can post examples.