Making slider not exceed height of viewport - javascript

I'm using bxslider (can use any free slider if needed) and I want to make it not exceed the viewport height. For example, the slider works fine on iPhone/Nexus 5 (portrait), but when in landscape, the photos have bigger height and you have to scroll to see them. This is because I have content above the slider, if I were to delete it, it would be 100% height and would work fine.
The site you can see it on - http://laurakok.openyourpage.com/ (note - you have to be on touch device, or use emulation (chrome for example)).

Try using Slick.
http://kenwheeler.github.io/slick
You can set settings at different breakpoints.

Related

React.js CSS window width

I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.

HTML-- Faking the size of the browser window (to be smaller or larger)

I'm attempting to make a page that will be compatible both with a PC browser and a browser on a phone.
Essentially, I want to size my elements as large as I can on the smaller screens (ideally, even a little bit larger), while confining everything to a narrow vertical band in the center on a PC browser window.
You can see the look I'm trying for here:
http://www.hoggy.com
I've attempted to read the browser's width to tweak the data on the fly, but I find I cannot get a reliable width on all platforms.
So I've attempted to center things, and make the image and table sizes be a percentage of the page size... but on a phone it's too small (thus I would like it to be actually a little wider than the phone screen) whereas on the PC, I want my width to be, effectively, min(100%,500px).
Is there any way to do that?
Simplest answer:
html
{
max-width: 1024px
}

Responsive Design on mobile phones with higher resolutions

To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.
I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).

Preventing viewport resize of web page when android soft keyboard is active

I'm developing a Javascript/JQuery plugin for Responsive Web Design. It has a function that monitors the viewport for changes, specifically resize and orientation. When a change is detected, a corresponding callback function is called.
However, I just noticed that on Android (specifically using the stock browser on a Google Galaxy Nexus), if the user tries to use the soft keyboard, it resizes the viewport, thus firing the callback function. This is behaviour I would like to eliminate.
Is there a way to - via Javascript - disable this behaviour or detect for it so I can make changes to the code base to accommodate it?!
The solutions I've seen so far have to do mainly with Android App Development and I'm not sure they apply in my case.
Thanks.
Ok, well after some fiddling around I've found out a solution to my problem.
So what happens when the soft keyboard is shown/hidden?! In my test, the viewport width remains constant. However, the viewport height changes size [((current - previous)/previous)*100] when the soft keyboard is shown by 43% (in portrait) and by 58%(in landscape); and when the soft keyboard is hidden by 73%(in portrait) and 139%(in landscape) respectively.
So what I did was disable the callback function when the following conditions are all true:
The device is mobile
The percentage change in viewport width is less than 1%
The percentage change in viewport height is greater than 35%
Since mobile device browsers do not have resize handles like on the desktop, I do not believe there will arise a situation where a user will mimic the above conditions in a natural way.
You can see a sample of the code here: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. Unfortunately, it's part of a bigger codeset, but you should be able to glean the basic idea based on the conditionals.
Cheers.
I had a similar problem. And my solution was to use the orientation change event instead of the resize event which triggers when you least expect it on android :P
$(window).bind( 'orientationchange', function(e){ // Type pretty code here });
source: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/
I can share you with my pretty code. I was setting trigger on resize event and counting height relative to before resize event.
originalHeight * 100 / currentHeight give you precent wich you can change height container
You can see a sample of the code here
https://jsfiddle.net/ocg9Lus7/
UPDATE 19.11.2018
I recomend you change value from dynamic (100%, vh etc.) to static value after onload window. If you need more dynamic container you can reculclate sizes by bynding function to resize event (originalHeight * 100 / currentHeight)
You can see a sample of the code here: https://jsfiddle.net/gbmo6uLp/

resize iScroll 4 to fit 100% on any device

I'm trying to resize my wrapper, so when viewed on iPhone, iPad or computer 100% of my site is in view. I have placed pictures in my scroller using the <ul> and <il> methods.
At the moment everything is in view on my computer, but on iPhone the pictures are getting cut off. It's letting me scroll horizontally and vertically my pictures, but need to resize the wrapper so my pictures are smaller.
Any help would be amazing. Cheers in advance
You didn't provide any codes, so these maybe help you:
Set proper width/height to your wrapper when browser resizes and window.onload. Because we don't know device is in landscape or portrait mode until window.onload. Here better explained how to get resized browser width/height.
Check your images width/height. Maybe images' dimensions wider than wrapper. You can set width/height to image in percent.
And don't forget refresh iScroll when browser resizes. You can do it like that:
setTimeout(function(){myScroller.refresh()}, 400); // browser need time to rotate

Categories