I have an iframe on my site wrapped in a div.
If I enter only one character in the telephone box it doesn't validate so red warning text appears.
If I then click in the email box and press tab twice, on the second tab the form shifts to the left so I can no longer see the question text.
How can I horizontally fix the form so it doesn't move to the left?
IFrame code:
<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
URL: http://content.workbooks.com/free-trial-workbooks-crm
This happens because iframe width you've chosen is too small (I think this is due to the Industry select box). Just increase both div and iframe width and the shift disappears.
<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
Fiddle
EDIT
To dynamically adapt iframe height, you can use this jquery library. Upload iframeResizer.contentWindow.min.js script to your server and include it from iframe page:
<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>
Then upload iframeResizer.min.js, include it from the page with the div that contains iframe and invoke the proper function to resize iframe:
<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>
This should do the trick. For more details, refer to the GitHub page linked above.
Related
What I need is this:
Overlay image which can change its X and Y position over youtube video without page reload.
Ideally this should be Javascript I guess which upon Interval gets the X and Y values from text file (or MySQL).
In other words...say a car is driving in the Youtube video, the overlay should be red rectangle that every 1 second or so the Javascript gets the X and Y from text file and redraws over the youtube screen red rectagle.
The final result should be something like this:
https://i.ytimg.com/vi/aEBigBm7KBk/hqdefault.jpg
I am C++/C# kind of guy with very little knowledge of Javascript so I want to port a machine learning demo to a friendly interface (webpage), I know this can be too much coding so if someone can at least point me to a free script will be super helpful! thanks!
I've prepared a sample JSFiddle that can get you started in the right direction: https://jsfiddle.net/2nfswab3/
Basically, the <div class="overlay"... are the red squares that overlay the video. You may add as many as you like of them inside the #app container. You mentioned that their position will be changing dynamically every second with values coming from your backend code. Changing their position is as easy as updating their left, right, top, bottom CSS attributes.
You can do that through vanilla JS in this way:
var redSquares = document.getElementsByClassName('overlay');
var squareOne = redSquares[0];
squareOne.style.left = '300px';
HTML:
<div id="app">
<iframe width="100%" height="400px" src="https://www.youtube.com/embed/KGN_9xZBgYY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="overlay" style="left: 370px; top: 140px;"></div>
<div class="overlay" style="left: 170px; top: 140px;"></div>
</div>
CSS:
html,body{
position: relative;
width: 100%;
height: 100%;
}
#app{
position: relative;
}
.overlay{
border: 2px solid red;
color: #fff;
z-index:2;
position: fixed;
width: 100px;
height: 100px;
}
I hope this helps. If you have further need of help or elaboration please ask as a comment.
I am wondering if anyone can help me which this problem, I have an iframe to a URL(on a subdomain). The page in the iframe has a button to another page. I would like to be able to resize iframe when the user moves to the other page in the iframe. Below is how I am sizing the first page.
$disp = '<div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 50px auto; max-width: 300px;">
<iframe scrolling="no" src="https://something.com" style="border: 0px none; margin-right: 188px;height: 1036px; margin-top: -380px; width: 297px;">
</iframe>
</div>';
echo $disp;
Using onLoad you can tell if the iframe source changes, as explained here:
iFrame src change event detection?
The gist is
<iframe src="http://www.google.com/" onLoad="yourJsFunc();"></iframe>
or, with jQuery
$('#iframeid').load(function()
{
alert('frame has (re)loaded');
});
I am loading a content from another site in iframe window, but when I select any link it opens the parent site in the window. I need everything to be opened in the same iframe? How to fix that?
The code:
<div class="calculator" style="display: block;width: 900px; height: 440px; overflow: hidden; ">
<iframe src="http://www.avtosojuz.ua/technical_service/" align="middle" width="962" height="100%" scrolling="no" frameborder="0" style="margin-top: -440px;
"></iframe>
</div>
This question has been asked before: How to open a iframe link within the same iframe?. It appears that it is not possible to control this when referencing an external website.
I have an iframe that looks like this:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" style = 'height:100px;width:200px;' scrolling = 'no'>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
so when I press tab in the iframe, it traverses through all the links , automaticall scrolling all the way to the bottom of the site that's in the iframe. What I want to do is make the iframe so that tab only within the rectangle box where height = 100px, width = 200px and ignore everything else on the site...basically clip everything else that doesn't fit into this rectangle...
I tried setting height and width and also overflow:hidden, but that doesn't seem to do the trick.
This blocks user from being able to click on anything in the iframe but for some reason, you can still click inside and tab through :-( fiddle
<div id="IframeWrapper" style="position: relative;">
<div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: 400px; height: 200px"></div>
<iframe src="http://www.w3schools.com" style='height:200px;width:400px;' scrolling='no'>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
You can't do anything about it, but instead you can run a JS on iframe load which cam hide the html contents from your iframe which you don't want to be displayed
you can refer to these similar questions to get the idea:
Changing div in iframe using Jquery
jQuery, select element inside iframe, which is inside an iframe
And there's a similar discussion on jQuery forums here: https://forum.jquery.com/topic/changing-elements-in-an-iframe
Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */