IE8-zoom breaks my layout - javascript

i have a problem with my zoom in ie8.
Okay, i have the function where i have 3 buttons. Onclick on those button my webpage get zoomed for the value that stands behind that button. All is saved into a cookie and onload of the page this cookie is loaded and the css property is set throughout the entire page.
My JS-Code:
var content = document.getElementById("zoomable");
document.getElementById('zoomable').style.zoom = myvalue;
document.getElementById('zoomable').style.overflow = "auto";
content.style.overflow = "auto";
document.getElementById('zoomable').style.MozTransform = 'scale('+myvalue+')';
document.getElementById('zoomable').style.MozTransformOrigin = '0 0';
document.cookie="mysize=" + myvalue;
Everything is okay in Chrome, IE9, IE7 (at least it seems like it is okay there, i may be wrong) and FF. In ie8 this function destroys my layout. It seems like the zoom function rezizes everything instead of just zooming in. It breaks through the borders to the right and creates a nasty overflow that isn't even scrollable. I searched and tried and tried and searched but without any success.
Does anyone know the problem? (if it is not clear, what i mean by all that feel free to ask :) )
so far
Adi
edit:
If it is important, i might add, that my layout isn't made of tables but created with divs with the "display-table:" prop
edit2:
Okay i got it.
If someone had the same problem, i show i my personal mistake.
my div for the "zoomable" property which is my body tag:
margin: 10px auto;
width: 974px;
background-color: #fff;
padding: 0 12px 5px 12px;
text-align: center;
font-size: 11px;
Now the problem is, that ie8 changed the scaling of the page width by impossible ammounts. So i used a div to wrap everything inside the body tag and gave all those atributes above to the new div and removed the older ones from the body tag. I didn't change anything in my jquery, i still use the zoom on the body tag or else i get the same problem as before.
I don't know what is causing this beheivor.. It is only in the ie8.
But thanks anyways for everyone who had read this! :D

Related

I can't scroll to the bottom

You see, for some reasons some times I can't scroll to the bottom of the page (some times it happens in the middle too). Here is a screenshot:
Why does this happen? I can't create a jsfiddle, because I can't reproduce it since sometimes when I reload I have this problem, sometimes it works fine... It happens in a random way. I have no idea what might be causing this. It just stops scrolling before reaching the bottom. I know this might be classified as an open question but I just want to see, if anyone have had this problem. Any suggestions are appreciated..
UPDATED
Ok, here is the code I used to style the scrollbar and the scrolling, in CSS:
body
{
scrollbar-face-color: rgb(0,131,168);
scrollbar-track-color: rgba(0,131,168,0.8);
scrollbar-arrow-color: rgba(0,131,168,0.5);
scrollbar-shadow-color: rgb(0,131,168);
}
::-webkit-scrollbar-track
{
background-color: rgba(0,131,168,0.5);
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-thumb
{
background-color: rgb(0,131,168);
}
in the javascript, "vista" is the main container, I wrote:
var vistaProfesional = document.getElementById('vista');
vistaProfesional.style.overflow = "auto";
vistaProfesional.style.overflowX = "hidden";
vistaProfesional.style.height = 100 + '%';
I have been thinking, and I found out that, when I was doing the whole thing, I wanted it to have a smooth scroll, therefore I used the smoothWheel plugin because it is easy to use and since I am new to programming this seems a charm. However, right after the code abode I wrote:
$("#vista").smoothWheel();
to initialize it and though it works, it is when this plugin is active that I have this issue. If I comment that line of code and stay with the normal scroll, the problem described doesn't occur. As for one of the comments, yes, the zoom is already in 100%
I have seen this problem in several websites before. Set your zoom level to 100% to allow you to scroll to the bottom of the page.
Often when the zoom is not equal to 100% there is a partial row that is not shown, so the website thinks that you have not displayed the bottom of the page, so won't fetch the rest, or update the scroll bar properly.
I think you should specify height to body and html because as for as i know Scrolling plugins need that, so
body, html {
height: 100%;
}
If this does'nt solve your issue you may use Nice Scrolling Plugin which has a lot of properties, also it has been documented very well.
Hope this helps you.

Select2 4.0.0 - change inputbox height

whenever I use select2, the empty box is just one line high.
When input is added, the box expands accordingly, but always just the exact amount needed.
How can I change it so my input box is at least 100px high, even if empty? In some cases, I expect the box to be 100px or even higher when filled, so it looks really dumb in my layout, if the box is just 16px high in the first place.
The HTML element to which I'm applying select2() is a Select element with "multiple=multiple" (I need multiple inputs eventually.)
I googled a lot, and also searched in this forum, but nothing worked so far.
I tried including something like this in my custom css file:
.select2-container .select2-choice {
min-height:100px !important;
}
But it didnt't change anything. Maybe those tipps are for older versions of select2? I'm using 4.0.0.
How can I enlarge the box?
Solution:
I added this to my css. It's all about getting the css selectors right (which indeed seem to have changed, recently). I extracted their names by inspecting my HTML output.
.select2-container .select2-selection--multiple{
min-height:100px;
padding-bottom: 50px;
}
.select2-selection.select2-selection--multiple {
min-height: 100px;
}
Tested on the examples page.
I would just pad the select2-choices container a bit so you can still have a dynamic height but be sure that the element can never make contact with the bottom of the container. You can also put the min-height here I think.
.select2-container-multi .select2-choices {
padding-bottom: 4px;
min-height: 26px;
}

MouseEvents don't fire on body when inner div has position fixed in firefox

Look at this example
Here is the code:
CSS:
div {
position:fixed;
top:100px;
left: 320px;
border: solid 1px blue;
}
Javascript:
var i = 1;
$(document.body).mousemove(function () {
$("#text").html(i++);
});
HTML:
<body>
<div>
<span>Test Text: </span>
<span id="text"></span>
</div>
</body>
This code just updates the span while mouse is moved over the body. It works fine in Google chrome but in Firefox the span is only updated when mouse moves over the div, To debug I looked into firebug and found that the height of the body is 0, so the mouse is actually not moving over the body, but in Google chrome body covers whole document.
So My question is:
Which is the right behavior?(chrome's or firefox's)?
Is the right behavior documented somewhere?
Also surprisingly when I added this code in jsfiddle, chrome started behaving like firefox, can someone explain me this unusual behavior also?
EDIT: I know I can make the code work in both browser by adding height:100% to body, I want to know why this different behavior in browsers and the right one.
You can see what's going on if you add this css:
body { border: 1px solid red; }
I'm not entirely sure of the reasoning, but Chrome decides that the 'body' element should be the full height of the window, whereas Firefox collapses the body element to a single line. I believe the body collapsing is the correct behavior, because a 'block' element (such as <body> or <div>) should only be as tall as necessary to contain its contents (and since you made the inner div absolutely positioned, it won't take this into account in calculating its height).
The correct fix depends on your intended outcome, but you could use document or window instead of document.body because they represent the entire viewable window instead of just the actual <body> element.
You could also set your body to a specific height like 100%. Alternatively, once you add more content to the body (stuff that isn't absolutely positioned), it will "fill out" and cause the mousemove event to fire properly anyway, so you won't need any of these fixes.
Additional to Alex's answer I was still interested in the different behaviour. I found the solution: in jsfiddle you are not supposed to add the 'body' element in the html. If you remove that then you get the same behaviour as with the stand-alone page.
UPDATE:
That wasn't the case. The real reason is that the stand-alone page missed the
<!DOCTYPE html>
declaration which caused a HTML version difference.
I don't know why but this works
Replaced document.body with document in
$(document.body).mousemove(function () {
This also works on Firefox.

Firefox page "moves" when hiding/showing divs

We have a web page with this general structure:
<div id="container">
<div id="basicSearch">...</div>
<div id="advancedSearch" style="display: none">...</div>
<div>
With this CSS:
#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}
We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:
var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
advanced.style.display = '';
basic.style.display = 'none';
} else {
basic.style.display = '';
advanced.style.display = 'none';
}
This all works great in IE.
It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?
Is it causing a scrollbar to appear / disappear?
Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.
What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }
Here's a good related SO post.
Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).
On a side note jquery has some really nice animations that make this switch much nicer on the eyes.
I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.
Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.
With firebug you can view what may be different between the two divs.
From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.
One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.
I hope this helps.

How can I convince Firefox to redraw CSS Pseudo-elements?

I'm having issues getting Firefox to update a webpage when its class is changed dynamically.
I'm using an HTML table element. When the user clicks a cell in the table header, my script toggles the class back and forth between sorted_asc and sorted_des. I have pseudo element which adds an arrow glyph (pointing up or down) depending on which class the cell currently is.
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
The problem is, that when you click the cell header a second time, the page doesn't update the arrow... until the user mouses away from the element. I think it's a bug as it works fine in Safari, and as I don't see any :hover tags in my CSS or other entries that might interfere.
Anyone seen this before, or know how to work around the issue?
It's kind of cheesy, but since you're using javascript anyway, try this after you changed the className:
document.body.style.display = 'none';
document.body.style.display = 'block';
This will re-render the layout and often solves these kind of bugs. Not always, though.
This is 2014 and none of the proposed solutions on this page seem to work. I found another way : detach the element from the DOM and append it back where it was.
Would you be able to use different CSS to accomplish the same thing without relying on the :after pseudo-selector? You might be able to simple define a background-image which you align as needed (I assume you would want the arrow on the right hand side).
For example:
.thead .tr .sorted_asc .sorted_asc {
background: url(images/down_arrow.png) no-repeat right;
}
.thead .tr .sorted_asc .sorted_des {
background: url(images/up_arrow.png) no-repeat right;
}
I only suggest this since I assume there isn't a specific reason why you need to use the :after pseudo-class. If you do need to use it, please update.
The bug can still be triggered in Firefox 58. Thankfully the opacity trick also still works. Just make sure to time it correctly. You might need to set a timeout between opacity changes.

Categories

Resources