I'm looking for a solution for this that has more precision than breakpoints. I'm aware this will require JavaScript but I am having trouble finding a suitable plugin.
The majority of text on my site will stay the same, or I will simply adjust it with media queries (say 90% for tablet and mobile). That's fine, but I'm looking for a "real-time" solution" for areas such as my navigation menu and my banners.
See the site here
You can see all my text is relative and sized using ems with a base font-size of 100%
If you resize the site you'll notice the menu "crashes" as the font size becomes too big. I'm keen to find a JS solution that will resize that text down relative to the width of the navigation bar so that I can always keep it all on one line (At mobile width, it'll go down into a collapsed menu)
Check out this jquery plugin
http://simplefocus.com/flowtype/
It resized font-size and line-height based on element width.
Related
There are many articles out there discussing a clever way in CSS to make videos (such as youtube) delivered through an iframe responsive (such as described here https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/). Ultimately you wrap your iframe in a relative container with a top padding equal to the aspect ratio (height/width * 100)% of the video.
This works great when your aspect ratio of the iframe contents is static, but is there a clever way to achieve this purely through CSS if your iframe content is also responsive?
For example lets say your iframe contents contain a bootstrap grid of boxes (col-xs-12 col-md-3) and you assign 100% width to the iframe so it responds to vertical window resizing of the parent. As you decrease the size of the parent, at the point the col-xs-12 kicks in, the aspect ratio has changed and you are probably going to see a vertical scrollbar appear for the iframe due to the height change.
I think the only way to achieve responsiveness in this case is through javascript (postMessage calls).
Anyone have any thoughts?
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE
I am working with a Responsive Design website, more specifically a page that incorporates several Divs. When you re-size the webpage the width of the divs change as they are set as percentages. As the height has to stay constant, unless the div will disappear, I have to set break-points to change the height. If I don't change the height, it stays constant and adds "margin" between divs below. Essentially, my logic is: when the window is re-sized and the width is less than 810px, then remove all CSS styling, and add margin top, items 2 through infinity. As this is hard to explain through writing, I have added the following code at the end.
When I re-size the browser window, and the content div is less than 810px, styling is not removed. Looking at my code, what could be the culprit?
The function is at lines 27-50: https://github.com/jdmagic21/coded_container/blob/master/work.js
Rather than doing it with Javascript, you should consider using CSS Media Queries to change the styles depending on the width of the browser.
Here's a tutorial - one of the top hits on Google for "How to use CSS Media Queries"
Here's a table of browser compatibility for Media Queries. As long as you don't care too much about IE8 or previous, you're ok!
You can do it like this with CSS Media queries.
#media screen and (max-width: 810px) {
/* reset the styles of the divs here */
}
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.
I am developing mobile web app. However, safari in iOS 5.1 or below has limited memory. I need to minimize the memory usage when i use css3 transition. I found that if I use css style "display:none / visibility: hidden", The app will not crash by memory problem. So I want to make thing "hidden" when they are truly hidden.
My English is bad. the picture can show what I want to:
uploaded image**:**
Another example which is a website used the css "visibility: hidden" property to hide every session when it is not on screen:
example website: Dentsu Network
There's a plugin for jQuery offering viewport selectors.
You can set everything to visibility:hidden; and then show only the items in the viewport. Once the user scrolls you can re-grab the viewport elements and show them too.
$(":in-viewport").css("visibility", "visible")
You should be able to calculate the viewport from document.body.scrollTop and the size of the window.
Say if the scrollTop is 100px, the user the has scrolled down 100px. And now you may want to hide a div which occupies the top 100px of the screen and show a div which start at 101px and extend till the size(height) of the screen