I am new to CSS/HTML and couldn't find the answer to this question probably because I'm not using the proper terminology.
I have my separate pages set-up and don't know how to keep the 'user-zoom' consistent among my pages.
For example:
-User is on home.html. User zooms 3 times (control + '+'). Font is much bigger.
-User navigates to about.html. Font and layout is back to the small, default size.
Is there a CSS/HTML/Javascript attribute to keep the pages consistent? Thanks a lot!
Edit: For newer HTML coders, it appears that when you run the code on your local machine clicking on a link to another page will "reset" all the zoom [IE and Chrome tested]. However, apparently when you run it from a server the browser will remember the specific zoom and you don't have to worry about it. Hope this helps at least one person!
Because the zoom level is controlled by the browser itself, the way it behaves on a per page basis cannot be adjusted using CSS/HTML/JS.
A workaround would be to create custom zoom buttons with JS and the CSS transform property. You would then want to save the zoom level to a cookie and apply the current saved zoom level to each page the user loads.
Related
I'm trying to make a window based application for web browsers. The number of windows is considerably high, so I'm storing them as HTML files (one per window) that I asynchronously retrieve from the server according to user interaction.
To add a window to the main page, I first add the link elements (CSS) of the downloaded document to its head section, and then I append the content of the body section to a certain div. When a window is closed, I just remove these elements.
This approach seems to be working nicely, but I can see that sometimes when I add a window, its elements are visible out of position with no style, and after a brief moment they are correctly painted.
I don't have a strong background in web programming, but I suspect this might be related to what it is called "browser reflow". Does it mean that it is taking too much time to repaint everything? Is it possible to just hide these "unstyled" elements until it is safe to show them?
Any guidance would be appreciated.
Some time away from the computer seems to have relaxed my mind. I was erroneously assuming that adding new link elements to the head section would load the CSS files immediately. Obviously, the browser needs to retrieve them from the server first. So, the DOM elements I'm adding don't show their style because the CSS files have not been downloaded yet. I think this is the right answer.
I am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
I am working on an ePub3 and I created an interactive document that requires the full page to really look how it should. Unfortunately when I compile it with Readium to test the functionality in the ePub it shrinks it to one half of the viewport and leaves the other half empty (because it is, after all, a book).
I googled around and messed with the CSS and DOM and I cannot figure out how to remove that extra, unused page and make the one page with the interactive app take up the entire viewport.
Does anyone know if this is even possible? I know it might be pushing the standards of the ePub, but this app is a huge part of the ePub.
I appreciate any advice that can be given!
This is a reader-specific display function (not an ePub3 function), so you won't be able to control it. It is similar to what happens on most tablets if you turn them to read in landscape mode... The thing is, many readers don't read in this mode but some do, and you wouldn't want to take that ability to choose away from them.
If you are doing this in a reflowable book, I would suggest having the App be on it's own fixed layout XHTML page so that it is full-screen (on tablets) at least. You can do this by creating the new XHTML page and putting a link to it.
The best visual solution I can see in Readium isn't really a solution, but you should just go to "settings" and read in single page mode and possibly have a tooltip recommending that to readers when they get to the app.
Best of luck!
I'm trying to create a gallery for a mobile site where I have different stylesheets for different sized devices. Within these stylesheets I have several classes which simply set a background url property to each image I want in the gallery.
Only one of these will be displayed at a time. And I will be cycling through the classes using Javascript to display them in a slideshow type presentation.
I am wondering is this method more bandwidth efficient than having all the images as individual img tags within the DOM? By setting these url properties do they get downloaded to the user's browser when they first load the site or are they only downloaded when the class gets set on a div in the DOM?
Simply I am trying to avoid having to download all the different images to the user's device at once. If you know any alternate methods which are better for this sort of thing I am also interested.
You are right, When you set the image backround, the image will only be downloaded if it is used, By this I mean, used as a style on some dom element.
Alternatively, you could 'change' the background-image css property using javascript. This way, you don't even have the image url in your CSS.
If bandwidth is your biggest concern, I would urge you to have a look at the inspector in webkit browsers like Chrome or safari, or with firebug on Firefox to see the 'network' tab, there you have a clear overview of what is loaded, how ( what order ) and how to optimize things. You can also make some stupid mistakes clear like downloading multiple times the same library from different locations and so.
If you just declare the class in css it shouldn't download anything before it is set. however it is a round question and the answer could take a lot of different shapes.
So I would say that yes it is a good way to do it, and it should be more bandwidth efficient (if you don't know that all the images will be loaded eventually anyhow, since you will typically have asynchronous image-loading either way it shouldn't matter much. I guess that if you only load one image initially the other images (i.e. the mentioned img tags) will not interfere making the load a bit more smooth?).
I find it to be a cleaner solution at least if you aren't sure which images will be viewed (which is likely to believe) to use your css-approach. also it's easier to maintain and provide a better design.
That you will be using javascript indicate that you are also doing the client side. And that give you control to choose what to do which is great :)
One alternative could be to have a local cache of the images as well, but that really depends on the problem at hand, if you will have different images and no real possibility to know in advance which images you will need (and perhaps not even how many of them?) then I think that the cleanest way is the way you purpose.
i.e. set up (or dynamically create) css-classes for images and handle all the logic in javascript.
So, I made this website (lemiart.com) and depending on the image height (if it's too big), the user has to scroll down to view the entire image, specially when using computers with low res. What I would like to do is implement a button in the website so the user can click it and the website will become smaller, like decreasing the zoom in the browser. But I would like to implement it so the user just click it and it zooms out, without having to access the browser config.
Any idea on how to implement it?
Thanks in advance
What you're describing sounds like 'responsive web design'. Rather than have the user initiate an interaction (button click) to zoom or resize the site and images, consider adding some JQuery or other tools that detect the browser dimensions, and automatically reconfigure the page. This is a common approach when designing for multiple platforms (PC, mobile, tablet, etc).
Check out this presentation
You might want to look at some kind of lightbox plugin for jquery.
Fancybox(http://fancybox.net/) is one I have used that is quite good. With these you can have a smaller image on the site and then use the lightbox to zoom to the biiger one.