I am building a website for a client who wants their page to zoom perfectly in IE7. I have finally managed to get around most of the bugs, but one.
When you zoom in on the page, it centers fine, but then when you go to another page, the page renders and displays the top left of the page. I need to make it render centered. I know it is possible (the client keeps comparing it to bbc.co.uk which has this feature).
Does anyone know of a fix I can add to my body tag or something?! Let me know if you need to see any code.
Wrapping your site in a container div;
<div id="wrapper">
...
</div>
and the css;
#wrapper {
margin: 0 auto;
width: XXXpx;
}
applied to it has the desired effect.
(Where width represents the width of the layout).
Zooms centered, and when moving through pages in the zoomed state stays centered. Tested in ie7 on VMware XP.
When scale/zoom, the center point of IE seems at the top-left
I move to the center by scripts
$.browser.mozilla
? $container.css('-moz-transform', 'scale(' + scale + ')')
: $container.css('zoom', scale)
winW = $(window).width()
winH = $(window).height()
if ($.browser.msie) {
var offScale = (1 - scale) / 2
$container.css({
top : winH * offScale
, left : winW * offScale
})
You must know the scale number and my position of $container is "absolute"
Related
I'm working in a webpage that i want to display on a digital signage screen which has a built-in web browser. Since the screen does not have a built in "turn screen 90 degrees (portrait)" mode i have to do a workaround.
I'm trying this using the following CSS:
body{
transform: rotate(-90deg);
...
}
I am using a liquid layout for this page (working in percentages) and this page is going to be displayed on a 1080x1920 screen (hanging vertically in portrait mode)
However when i display the page in my browser without rotating the screen everything seems fine.. When i rotate it, it falls out of the screen and elements don't align correctly and the page feels zoomed in instead of stretched in the browser.
Does anyone have an idea of how to fix/code this?
If you need more info or code please let me know i will post it here.
You need to switch the height and width values when you rotate the body, something like this:
$("body").click(function() {
var height = $(window).height();
var width = $(window).width();
if ($(this).css("transform").indexOf("-1") == -1){
$(this).css("transform", "rotate(-90deg)");
$(this).css("width", height + "px");
$(this).css("height", width + "px");}
else{
$(this).css("transform", "rotate(0deg)");
$(this).css("width", width + "px");
$(this).css("height", height + "px");}
});
Doing this in Fiddle positions the body so it is offset up and to the left, so you'll have to figure out how to fix that, here is my fiddle, I have also included a function to get the position of an element which might be helpful:
http://jsfiddle.net/jz0odbbz/3/
I am trying to add a black status bar into my BakerFramework for iOS Newsstand App when issues are viewed in iOS 7+. Previously in iOS 7+, the status bar disappeared when issues were viewed.
The first "page" of the magazine is the cover page, and consists of an HTML page with an IMG tag in the body, which is sized to max-width:100% max-height:100%. In Safari, viewing that HTML file, resizing the window to the proper aspect ratio, the image simply fills the screen and there is nothing else -- no additional spaces or anything. The image is of the correct aspect ratio (1536px x 2008px) to fit in the iPad screen under the status bar and then fill the screen perfectly. Now initially, without the status bar, the IMG fills the iPad screen except for an empty 20px space at the bottom. But when we add the 20px status bar to the top, everything should be perfect, right?
I added this code into the didFinishLaunchingWithOptions method:
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
self.window.clipsToBounds = YES;
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
[self.window setAutoresizingMask:UIViewAutoresizingNone];
self.window.frame = CGRectMake(0, 20, self.window.frame.size.width, self.window.frame.size.height-20);
self.window.bounds = CGRectMake(
self.window.frame.origin.x,
self.window.frame.origin.y,
self.window.frame.size.width,
self.window.frame.size.height
);
}
...and this into the BakerViewController.m file:
- (BOOL)prefersStatusBarHidden {
return NO;
}
This gives me a status bar like I want, and it moves my content down 20px so that the status bar is not overlaying my content and so that the cover IMG fills the rest of the screen perfectly. However, it also seems to keep the empty 20px space underneath my content, shoving that space off-screen! Since this is a BakerFramework App, all my content is HTML. In the HTML, sometimes we have a CSS position:fixed bottom:0 element on some pages. This fixed position element seems to locate itself along the base of the bottom space, 20px under the bottom of the screen, instead of along the base of the screen itself! I expected the bottom space to be completely removed by the above code changes, but it has not been.
It's like the code above doesn't actually resize the HTML document window... rather it only moves the HTML document window down by 20px. I need to actually resize the HTML document window.
I am very, very new to iOS development, so I will need hand-holding. If you have any suggestions for me to get rid of the empty 20px space under my content, I would very much appreciate them.
Thanks!
Finally figured out a fix. Had to add: pageHeight = pageHeight - 20; to the setPageSize method in BakerViewController.m. Hope this helps someone.
Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.
EDIT: The kicker, I guess, is that I want the content of the <div> to stay the same size, too.
Thanks!
EDIT: My goal was (and is) to keep an AdSense <div> from expanding so much as to obscure a lot of the real content on the page. But come to find out (thank you #thirtydot) there's really no good way to do this. The answer, for me (thank you #Neal!): give the <div> overflow:scroll so as to sacrifice its content rather than the content I'm trying to show.
.box {
background: red;
width: 5vw;
height: 10vh;
position: absolute;
top: 10vh;
left: 5vw;
}
<div class="box"></div>
There is no good way (read: reliable) to do this. Sorry.
What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):
How to detect page zoom level in all modern browsers?
As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:
It uses Flash.
It's not reliable if the user loads your page already zoomed in.
It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.
Anyway, it's here:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/
I am not sure what you mean, just use css:
div#id {
width: 100px; /*or some other #*/
height: 100px; /*or some other #*/
}
html:
<div id="id">some content</div>
To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :
min-width: 100%;
max-width: 100%;
This will freeze the width, you can do the same for height too.
You should just be ablemto set a width and height in css using a px measurement
Eg
div
{
width:100px; height:200px;
}
I read in another post a solution that I didn't test yet...
Maintain div size (relative to screen) despite browser zoom level
that's the used javascript:
//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.)
function flaotingDiv(){
//How much the screen has been zoomed.
var zoomLevel = ((screen.width)/(window.innerWidth));
//By what factor we must scale the div for it to look the same.
var inverseZoom = ((window.innerWidth)/(screen.width));
//The div whose size we want to remain constant.
var h = document.getElementById("fontSizeDiv");
//This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom.
h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";
//This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up.
h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";
//Finally, we shrink the div on a scale of inverseZoom.
h.style.zoom = inverseZoom;
}
//We want the div to readjust every time there is a scroll event:
window.onscroll = flaotingDiv;
I'm using the following script to adjust the height of a container div on my page relative to the browser window's height
function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
The script works fine to scale the #slider div's height relative to the viewport's height. The problem is if I resize the browser window the inside div elements dimensions get distorted. However if I refresh the browser the inside div elements fix themselves. Also if I go into firebug while the inside div's are distorted and I un-check ANY even unrelated elements CSS properties, the inside div's fix themselves.
Would the solution be for javascript to somehow refresh CSS after a browser re-size? If so how do you do that? Or should I be tying in the effected inside div element's dimensions to the function to begin with? I have also tried to do that with no luck.
The fact that a browser or CSS refresh seems to fix the problem makes me lean towards the first solution if it's possible.
Thanks.
First off, I suggest you make a text space... a simplified version to learn with. Here is a jsFiddle as an example how you can make an example that doesn't have all the other site stuff in the way. CSS is read once. the js is writing inline CSS. So you don't want to refresh the CSS. You want to write new inline CSS over the stuff the js already wrote.
Here is an example of a function. Below is how you call it on DOM ready and then, also when the window is resized. Keep in mind that it is going to run that function many many many times while you resize - so this isn't great for all scenarios. Also, - while it's commendable that you want it to resize(I do the same) no one else is going to resize their browser... So pick your battles.
var your_functions_name = function() {
var windowHeight = $(window).height();
$('.box').css('height', windowHeight/2);
};
// run on document ready
$(document).ready(your_functions_name);
// run on window resize
$(window).resize(your_functions_name);
I managed to do a parallax scrolling effect following a tutorial (code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641) , and it works great.
Here is my parallax script :
$(document).ready(function(){
var $window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});
I needed that effect on several pages showing projects, so I transfered the whole CSS attributes directly in the HTML instead of having a CSS file for each page of course.
In the tutorial it was like this :
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
and the html (I didn't keep the "article" elements since I'm showing only pictures) :
<section id="home" data-type="background" data-speed="10" class="pages">
<article>I am absolute positioned</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
Now I have this in my HTML:
<section id="img1" data-type="background" data-speed="19" style="background: url(../../assets/img/projects/product/jorislaarman1.jpg) 0 no-repeat fixed;
min-height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: absolute background-size : cover;">
</section>
(I have one of these ^ for every picture in my page, the next sections only have a box-shadow effect on them.
I'm encountering two different problems now :
First, I have some pictures wich are different size, thus many times the content is barely visible before it disappear with the scrolling effect.
You can see it here on the first picture :
vincentleroux.fr/projects/product/jorislaarman.html
The full picture is here :
vincentleroux.fr/assets/img/projects/product/jorislaarman1.jpg
I guess a solution would be to resize every picture to the same ratio but that would be quite some work.
I was hoping that there would be a way to influence the div/parallax scrolling to avoid my picture to be hidden too quick, but I couldn't make it work by myself :/ .
I tried modifying the scrolling speed of both elements (containers and background) but I couldn't work it out.
The second problem I have is my picture placement inside the divs. The pictures are quite large and I'll resize them to be around 1900px wide. But still I have a problem with them not being quite in the right place.
When you loaded the page I gave the link of, you maybe saw that my picture stuttered when starting to scroll. I tried different things and I have no idea where it may come from...
You can see it also here with the first picture : http://vincentleroux.fr/projects/arcade/wolverine.html
It also illustrate well my second problem, which is that I can't manage to vertically align my pictures in the divs so that the interesting things to see in them are not cropped or hidden immediately by the scrolling.
I tried the solutions here : Is it really impossible to make a div fit its size to its content?
But none seems to work... :/
I also gave a try to the different "background-size" attributes (cover, contain...) but I don't want to lose the full page width of the pictures.
Here's a JSfiddle with all my code : http://jsfiddle.net/79D2J/
You need to subtracting the offset.top
Something like this:
var topWin = $(window).scrollTop();
var yPos = -((topWin - $bgobj.offset().top) / $bgobj.data('speed'));