My page has a div that is positioned to the top right corner using the following CSS:
position: fixed; top: 10px; right: 25px;
While this positioning works perfectly on most browsers and devices, it behaves differently on IE10 Mobile. In IE10 Mobile, it acts as if it's positioned absolutely like in other browsers.
The screenshot below illustrates how the div appears on most browsers:
Below is a screenshot showing the behavior when positioned as absolute (similar to IE10 Mobile):
It appears that Microsoft has yet to resolve this bug. However, there is a workaround available (although it may not be the most elegant solution).
To address this issue specifically with the IE10 Mobile browser, you can implement the following JavaScript code:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var allFixedElements = $('*').filter(function() {
return $(this).css('position') == 'fixed';
});
allFixedElements.each(function() {
$(this).detach();
$('body').append($(this));
var topPosition = parseInt($(this).css('top'), 10) + scrollTop;
$(this).css({ 'top': topPosition+'px' });
});
});
It seems like the issue might be related to not having a "height" declaration in your code. Check out this helpful guide on How to create a fixed div in IE10 Mobile? for more information. Hopefully, this solution will solve your problem.
My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...
Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...
I'm working on incorporating this into a dynamic script using data from an XML file (aiming for 50% to be dynamic). <div class="progress-bar progress-bar-danger" data-progress-animation="50%" data-appear-animation-delay="20"> It currently func ...
I am currently attempting to wrap a div with the class name 'wrapped' around two other divs containing innerHTML of 'one' and 'two'. <div class='blk'>one</div> <div class='blk'>two</di ...
Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...
Currently, I am working on a project that was passed down to me by a former colleague. It is a gradual process of discovery as I try to address and resolve any issues it may have. One particular element in the project is a md-tab-header with a .mat-tab-he ...
Looking to Add Bottom Margin for Selection Box I have attempted the following CSS: #Selection { margin-bottom:23px; } Unfortunately, this method did not work for me. Is there a way to achieve this using JavaScript or jQuery? View Example on JsFiddle S ...
My issue is with the master page <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ...
I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...
I am currently facing an issue with using two Fontawesome icons in a clickable dropdown menu. The dropdown menu does not toggle when I click on the icons directly; however, it works when I click on the padding around them. The example provided by W3schools ...
When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...
My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png: Here is a snippet from the HTML File: <div id="overallCanvasWrapper" class="statistic-container"> <p ng-show=" ...
I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...
After examining the fiddle, it is clear that there is code to set the background of two spans to an image created with svg. The goal now is to achieve this dynamically using javascript (either jquery or raw) on the span with the "help" class, but unfortuna ...
I am encountering an issue with my carousel of rounded images that have a gradient overlay. The problem is that sometimes the gradient doesn't follow the border-radius and extends beyond it in its default square shape, instead of conforming to the rou ...
How can I create a JavaScript function that displays a random word from a list when a button is clicked and prints it in a heading 3? I would appreciate a quick response. //Start of Js code let display = document.getElementById("motivato"); console.log(di ...
Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...
I need to create an animation that makes a transform function value "jump" in an animation. Within my @keyframes rule are three percentages with the transform property in each one. I specifically want only the scale to transition from 0.5 to 1 between the ...
My table is appearing in a single cell, and I can't figure out what's wrong. Can someone please take a look and let me know where I messed up? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont ...
Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...