My image zoom functionality works perfectly on all browsers except for IE and Google Chrome when opened inside an iframe. Strangely, it still functions flawlessly in Firefox.
How can I resolve this frustrating issue?
The image link was sourced from the internet.
<iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" src="http://www.dobble.net.au/help/template.jpg" style="align:left;vertical-align:top;border-width:0px;" name="AisIFrame"></iframe>
Not even Opera Browser is immune to the same issue. This problem doesn't just impact IE and Chromium-based browsers, but potentially others as well. Since both Chrome and Opera originate from the Chromium browser project, they share similar vulnerabilities. Testing has shown that Firefox is the only browser that behaves correctly in this scenario.
I have previously reported this bug multiple times to the relevant developers (excluding Microsoft), yet it appears that the issue still persists despite these efforts.
An approach to tackling this issue could involve embedding another HTML/CSS page into the iframe instead of directly loading the image. By loading the image within the HTML page using the "img" tag and styling it with CSS for size adjustments, you can achieve better control over the image display. Consider wrapping the img tag in a styled div to ensure proportional scaling without distortion within the container div.
To further enhance functionality, consider implementing a zoom feature. This would entail attaching a JavaScript event to the element intended for zooming, such as the div. The event trigger could be set to "onclick", or alternatively utilize the "click" event listener method in JavaScript. Alternatively, CSS effects using the ":hover" pseudo-class can also enable zoom behavior.
The example below provides clarity on how to establish the zoom functionality:
function zoom(el)
{
var checksize = el.style.width == "100%";
if (checksize)
{
el.style.width = "";
el.style.height = "";
}
else
{
el.style.width = "100%";
el.style.height = "100%";
}
}.h
{
float: left;
width: 400px;
height: 150px;
background-color: blue;
}
.v
{
float: left;
height: 400px;
width: 150px;
background-color: yellow;
}
img
{
height: 100%;
width: 100%;
object-fit: contain;
}
.v:hover
{
float: left;
width: 100%;
height: 100%;
background-color: blue;
}<div class="v" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
<di...</answer1>
<exanswer1><div class="answer" i="41537526" l="3.0" c="1483896602" m="1483913192" a="d2lsbHkgd29ua2E=" ai="6508528">
<p>Even Opera Browser is affected by the same issue. It is an issue that affects IE and Chromium derived browser (and perhaps not only). Chrome and Opera are both derived from the Chromium browser project. After testing the issue on IE, FF, Op, Ch, Firefox is the only one that behaves right.
I've sent to respective developers (but MS) a bug notice with the issue more times in the past, but as far as I can see the issue is still there unfortunately.</p>
<p>Anyway to try to solve the problem insert into the iframe another html/css page instead loading the image directly into the iframe and load the image into the html page within the html tag "img". Than style that tag with the css style sheet as you wish giving the img the size you need. Also, depending on what you need, you may evaluate to wrap the img tag into a styled div to contain img size. If properly done de css part, the img will match in size to the container div scaling proportionally, without shrinking/deforming.</p>
<p>Done that let's try now the implementation of the zoom function.
Well for this it is needed a javascript event attached to the element that you want to zoom (the div for ex.). The event would be "onclick" (or "click" if you want to use addEventListener js method. Also you can zoom even without any js using ":over" css pseudoclass (in the example is used once to compare the different behavior).</p>
<p>The following example will explicate how the whole trick works:</p>
<p><div>
<div>
<pre class="lang-js"><code>function zoom(el)
{
var checksize = el.style.width == "100%";
if (checksize)
{
el.style.width = "";
el.style.height = "";
}
else
{
el.style.width = "100%";
el.style.height = "100%";
}
}.h
{
float: left;
width: 400px;
height: 150px;
background-color: blue;
}
.v
{
float: left;
height: 400px;
width: 150px;
background-color: yellow;
}
img
{
height: 100%;
width: 100%;
object-fit: contain;
}
.v:hover
{
float: left;
width: 100%;
height: 100%;
background-color: blue;
}<div class="v" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
<div class="h" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>Also remember that the iframe is not the only html tag that allows you to show an external content (the image in this case). In fact you can use the 'img' tag itself, the 'embed' tag, the 'object' tag and even the 'div' tag or other tags that accept the background to be styled with an image. In this last case you can show an image into it by setting its 'background-image' css style property to the image you want to show into it.
Two requests, POST and GET, need to work together. The POST request creates data, and once that data is created, the GET request fetches it to display somewhere. The component imports these hooks: const { mutate: postTrigger } = usePostTrigger(); cons ...
After the recent Slick carousel update to version 1.4, there have been changes in how data attributes are accessed from the current slide. The previous method that was working fine is as follows: onAfterChange: function(slide, index) { $('.projec ...
I have two arrays, one representing parents and the other representing children in a relational manner. I need to combine these into a single array. Parent array: const cat = ['a','b','c']; Child array: const sub =[{name:&ap ...
After building experience with React, I am now faced with the task of using ejs in my current project. Specifically, I need to return multiple radio elements. My attempt at achieving this was through the following code: <% const renderRadios = (value, ...
Utilizing Async, I am using async.map() to connect my data array with a function and incorporating async.waterfall() within that function to execute functions in a series. However, the waterfall function is not functioning as anticipated. I have also attem ...
For my first attempt at building a SPA with Vue, I decided to re-use a few functions but encountered some issues. The error message "this.ExperienceToLevel is not a function" kept popping up and it left me puzzled. Furthermore, I'm contemplating if c ...
Currently, I am using Link to redirect and call another component. The code looks something like this: <Link to={{ pathname: "/app/" + app.appId, appDetail: { app: app } }}>> When I call the path /app/:appId, it triggers the AppDetails ...
My question relates to having 2 specific components: Firstly, there is a component called SearchResultVue.vue. The structure of this component is as follows : <template> ... <span class="pull-right" v-show="totalall>8"> ...
In my current project using Ionic 7, I have a navigation guide set up with 4 tabs. I am trying to customize the styling of these ion tabs by adding some custom CSS. The issue I'm facing is that despite my attempts to make the background transparent, ...
I am dynamically adding new rows to a table named "newDataTable" using the JavaScript function below: function addRow() { //add a row to the rows collection and get a reference to the newly added row var table = document.getElemen ...
Imagine having an object that contains arrays of objects in some properties. Whenever changes are made to any field, whether it's within an object in an array or the main object itself, you want to mark that object as "dirty" using a code snippet like ...
I am currently working on a code that displays the results of a query in a table format. I would like to have the ability to click on certain elements to show or hide them. I know this can be achieved using toggle and CSS, but I keep encountering obstacles ...
On my asp.net web page, I have implemented a search filter functionality using cookies. The filter consists of a checkbox list populated with various categories such as sports, music, and food. Using a jQuery onchange event, I capture the index and categor ...
I'm having an issue where the following code is not displaying any output. Can someone help me identify what mistake I might be making? This is the HTML file: <head> <script type = "text/javascript"> function ajax_get_json() { var h ...
I have a food consumption log in a table that I need to sort. When I attempt to sort by the date column, I notice an issue with how it groups numbers together. For example, the sorting places all dates starting with 10 between 1 and 2, then all dates star ...
I am currently developing a multi-select list feature where users can select items and then rearrange them within the list by clicking either an "Up" or "Down" button. Below is a basic example I have created: <html> <head> <tit ...
I am trying to implement a page with the structure shown below: const Upload = (props) => { return ( <BaseLayout> <ToolbarSelection /> <Box> <FileDropArea /> </ ...
For my Rails 5.2 project, I have included the gems 'jquery-rails' and 'jquery-ui-rails'. I am attempting to utilize the .ajaxStop( handler ) handler as outlined in the documentation found here: https://api.jquery.com/ajaxStop/#ajaxStop ...
I am a beginner in Node.js and have encountered an issue in my passport.js or signupLogin.js file with the error message, app.use() requires a middleware function that I am struggling to resolve. I suspect it may be related to the signupLogin route, as th ...
I am looking to load a JSON file to generate a list within a Bootstrap Modal. The setup I have allows for the modal to appear when clicking on a person's image. <li class="project span3" data-type="pfa"> <a data-toggle="modal" data-targe ...