I am working on a website for a client, and we have the following requirements:
When the browser width is greater than 960px don't show a scroll bar.
When the content is wider than the browser but the browser width is greater than 960 don't show the scroll bar
If the browser is 960px don't show the scroll bar when it is needed.
I have the following javascript that works perfectly under ie, chrome, safari and opera, but dies in FF by forcing the page to "reload" client side (it redraws all elements).
function sizeHandler(myWidth) {
if (myWidth > 960)
document.documentElement.style.overflowX = 'hidden';
else
document.documentElement.style.overflowX = 'auto';
}
Because everyone seems to question the content, here is the HTML:
<body>
<div id="flashContent">
<object...>
</object>
</div>
</body>
<script...>$(document).ready(sizeHandler(getWidth()));</script>
Ignore getWidth(), it works, but I don't feel like adding another 15 lines to this ;). The object tag is a flash object.
Try it with document.body instead of document.documentElement. Setting CSS properties on the HTML element can give unexpected quirks.
Related
There are many many questions regarding resize (event) not working online, but I was only able to find one that actually reflected my exact problem but did not have an answer.
When I use inspector, my website changes from the desktop version to the mobile version when it reaches the breakpoint of <= 540px width. However, when I resize the entire chrome window, nothing happens (even though my window does get smaller than 540px width).
I'm not sure if the mobile version will actually work on a mobile as I have no way of testing that currently, but I'm unsure as to whether this is a normal thing with Chrome and the website will work perfectly well on desktop and mobile or whether I'm doing something wrong.
The related piece of code:
$(window).resize((event) => {
const windowWidth = window.screen.width;
if (windowWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
This is not the entire method but it basically shows the idea that css and attributes change based on window width dropping below 540px.
What I tried:
Document.resize (failed)
I really hope this isn't a duplicate, it's hard to navigate the vast number of questions out there.
The problem is not with the resize event or with browser. It's occurring because you're using window.screen.width, which is relative to the screen, not to the browser window. It doesn't matter if you resize the browser window, the screen width will not change. For example, if your screen has resolution of 1900x1200, screen.width will always be 1900. Hence, you should use window.innerWidth, or just innerWidth to get the viewport width. To know more, see this question.
Your code would be that way:
(window).resize((event) => {
if (innerWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
An example of working code (open the snippet in full page and resize it):
$(window).resize((event) => {
if (innerWidth <= 540) {
document.write('It\'s working.');
}
});
<html>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
I have HTML page which contains a lot of sections. Content of these sections is loaded lazily. After page load, user is scrolled to some particular section. Then content above and below the section is loaded and inserted. Obviously inserting content above changes scroll position so I need to maintain scroll position relatively to the current section.
I have implemented the simplest solution which works perfectly in Chrome, FF, Edge and even IE11 but in Safari - it has glitches.
Here is the code:
function insertElementAbove() {
var elem;
// load elem
var prevOffset = window.pageYOffset;
// insert element
container.insertBefore(elem, container.firstChild);
// measure inserter element height and adjust scroll pos
var elemHeight = elem.offsetHeight;
window.scrollTo(0, prevOffset + elemHeight);
}
I assume that the last 4 lines are run synchronously so according to the browser rendering pipeline no repaint can be done in between:
But in Safari it seems that sometimes paint and composite happens before changing scroll. Why only Safari behaves like this? Can it be because of Safari use IOSurface framework (https://apple.stackexchange.com/a/56820)? Are there any ways to solve/workaround this behavior?
Here is plunkr.
The issue is not reproducible in iframe mode so go to the "Preview in separate window" using button in the top-right corner:
Safari: Version 10.0.1 (12602.2.14.0.7)
macOS Sierra: Version 10.12.1
I need to include an iframe in a page and I want to calculate the correct height and adjust it in order to avoid displaying the vertical scrollbar. I want to display the horizontal scrollbar, though, if needed.
I've found several posts about this problem, but no one works 100%. This is a very common approach I've seen:
$(document).ready(function() {
$('iframe').load(function() {
$("#your-iframe-id").height($("#your-iframe-id").contents().find("html").height()+35);
});
})
<iframe id="your-iframe-id" style="width:100%;border:0;" src="test.php"></iframe>
The problem I've found with this approach is that, with Safari and Chrome, if, navigating into the iframe, I visit a page which is shorter than the previous one, the height of the frame is still the one of the taller page. If, instead, you navigate from a short page to a tall one, everything is working fine. Firefox doesn't have this problem; I didn't try with IE and Opera.
Any help is really appreciated. Thanks in advance.
<script>
var resizeHandle = function()
{
var theFrame = $('.window-content-wrapper', parent.document.body);
theFrame.height($(document).height());
var theFrame = $('.window-content', parent.document.body);
theFrame.height($(document).height());
};
</script>
<iframe id ="home" onResize="resizeHandle()" onload="resizeHandle()" style="width:100%;border:0;" src="test.php"></iframe>
I developed an application that interfaces with an institution's emergency alert system. How it works is, when there is an alert, on all of the institution's web pages it displays a scrolling marquee at the top of the page that is put there by javascript using protoype and scriptaculous.
All of this works perfectly on desktop browsers (IE6-8, Chrome, Safari, Firefox, Opera). It also works well on iPhones. My only problem is the rendering on Android.
In researching the problem initially, I found a CSS Property for mobile devices (namely webkit) -webkit-text-size-adjust, that keeps mobile devices from resizing text when zooming and changing screen orientation. I have set this property to 'none' as stated by many articles.
Below is a picture of screen shots from an Android emulator. The left screen shot shows 1x magnification of the page. The spacing between each of the messages is as it should be. The right screen shot shows the page zoomed in. The messages overlap, as the text size is rendered differently, and the div width is not wide enough to contain the text.
http://www.themonkeyonline.com/spacing-example.jpg
Here is the code that places the div on the page:
var marquee = new Element( 'div', { 'id' : 'marquee' + marquee_counter } )
.setStyle( { 'display' : 'block'
, 'WebkitTextSizeAdjust' : 'none'
, 'fontSize' : '12px'
, 'lineHeight' : '25px'
, 'left' : $( marquee_container ).getDimensions().width + 'px' } )
.addClassName( 'marquee_text' )
.update( marquee_text );
$( marquee_container ).insert( marquee );
Is there something I am missing?
I will keep researching the problem in the time being. Thanks to everyone who read all of this.
A brief update...after more testing, it appears that the problem isn't necessarily based on zoom. It looks as if the problem is the viewport. I tested some really long text, and even zoomed all the way out, it has overlapped. It seems as though the div containing the text will not size itself greater than the window.
Here is an example of the code in action:
http://elliottr.www-dev.seminolestate.edu/alert/
Could you post a link to a demo-page where this problem occurs? I tried reproducing it on my Milestone, but couldn't.
Try setting a width to limit div's size (you will also need to set position: relative) and set overflow: hidden, so the text won't go beyond div's size
I am trying to position an span element (let us call it "the tooltip span") relative to a input field. To do this, I am wrapping the tooltip span and the input field in another span element (let's call it "the wrapper span") that has position: relative. Then I set position: absolute on tooltip span. This makes the tooltip span position itself relative to the wrapper span but not being part of the page flow - not taking up any space. This is exactly what I want.
Then, using javascript, I set the position of the tooltip relative to the position of the input element. Since the input element can be shaped differently on different pages (script should be globablly applicable), I am using its offsetTop and offsetLeft properties to calculate its position relative to the wrapper span.
However, I am noticing inconsistencies between browsers here. In Firefox, IE6, 7, 8, it works as expected. But in Chrome and Safari the reported offsetTop seems, well, incorrect.
To prove this, I created the test page below:
<html>
<head>
<style type="text/css">
span { font-size: 8px; position: relative; top: 0; left: 0; border: 1px solid red }
</style>
</head>
<body>
<span id="wrapper">
<input id="foo" name="foo" type="text">
</span>
<script type="text/javascript">
document.write("<br>Offset parent: " + document.getElementById("foo").offsetParent.id);
document.write("<br>Offset top: " + document.getElementById("foo").offsetTop);
</script>
</body>
</html>
and loaded it in Firefox and Chrome. Both browser report the wrapper span as its offsetParent, but for Firefox the offsetTop is -8 and for Chrome it is 2. Visually the page renders the same in both browsers.
This gives me a headache, because I cannot just hack in a different offset that I always apply when someone is using Chrome, because if I change the font size, the offsetTop will not change, and my script will break.
Is this a bug? Can I solve this differently?
You Can try using
$(window).load
instead of
$(document).ready
because Explorer and Chrome sets proper offsets only after images have been fully loaded.
I've been having the same problem as you and I realized that (in my case) the thing that was messing up the offset().top value in chrome, was having one or more images without the "height" attribute above the element.
Before
<img src="/images/foo.jpg" />
offset.top() was 100 in Chrome
offset.top() was 150 in Firefox and IE7 (beleive or not, it worked just fine in IE!)
After
<img src="/images/foo.jpg" height="50" width="50" />
offset.top() is 150 in both Firefox, IE7, AND CHROME.
Notice the the difference was 50px, which is actually the same as the image height.
Since I was developing a JQuery plugin, i tryed to collect all the images that had their width and height attributes undefined, and manually setting their size with .width() and .height(), but it didn't work, because Chrome returned 0 for both functions. So, i guess the problem with offset.top() actually relies on that. If JQuery is triying to get te offset.top() value by accumulating the "above" element's height, and one of those elements it's an image with no specified height, "0" will be added to that sum, and therefore the top value will be missing those "ignored" heights.
PS: Sorry for my english, it's been a long time since i wrote such a long text in this language!
Use jQuery. DOM differences between browsers is one of the things it excels at.
Put you code into a window.onload function. I recall having issues when attempting to work with the dom directly from a <script> during page load in firefox, and webkit tends to be slightly more willing to give a sane DOM at such points.
This is just based on prior issues i've encountered, i'm not sure if it's applicable to your case.
I ran into the same problem, and jQuery's position() function was reporting the same as the offset() function. Ultimately it turns out that even waiting for the document to be ready didn't work for me. I had to check offset() later in the flow (in my case, in my handler that is fired on a window.scroll event).
When I try this test code below, on page load, I get different figures for Firefox + Chrome. Once it loads, however, I can press 'd' and I get the same figure for both browsers.
// this produced different results on Chrome + Firefox (Chrome was wrong!)
$(document).ready(function () {
var x = $('#some-div-on-your-page').position().top;
alert("On load, offset is "+x); // Chrome + Firefox report diff figures
$(window).keydown(function(e, r) {
k = e ? e.keyCode : event.keyCode;
if(k == 68) { // press 'd'
var x = $('#some-div-on-your-page').position().top;
alert("Now the offset is "+x); // ...but this is consistent
}
});
}
Hope this helps.
I was experiencing the same problem, and tried adding to my function
$(document).ready(function(){});
and it worked in both Chrome and Firefox
If you get "0" in chrome, see if you are targeting an empty element like "a". It needs to wrap something in order to return the correct offset.
It could be related to the different border/margin values for the HTML and body elements that browsers set by default.