This has been raised before, but the solutions currently fail in Firefox (34.0.5) in Windows (7 Pro 64bit SP1). I want to plot an iframe over the GE Plug-In. The following code works in
Chrome and Safari, and Firefox OSX:
but not Firefox for Windows:
Do other Windows users get the same result?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>HTML overlay</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
</head>
<body onload='init()' id='body'>
<center>
<div>
header bar
<br>
ignore this
</div>
<div id='map3d' style='height:98vh; width: 100%; position: relative; z-index: 50'></div>
<iframe src="" srcdoc="<p style='color: red;'>Let's put some HTML on top</p><br><p style='color: red;'>And some more here</p>" style='width: 200px; height: 100px; top: 0; left: 0; position: absolute; z-index: 100'></iframe>
</center>
</body>
</html>
Can you try giving the text the following property:
z-index: 100;
and the google map:
z-index: 1;
and give both this property:
position:absolute; //don't apply this property in the seperate html file for the iframe
Related
I am trying to get a link from an iframe, when it changes. I have iframe of one site, on different domain. I am trying to get a second link, when iframe redirected to a different page.
For example, default iframe on site hosts a form. After form is completed, it redirects to another page and then src in iframe changes. I am not able to get a link from iframe, not even sure if that is possible.
I was googling, but whatever I tried doesnt work for me.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe id="iframe" samesite=None width="100%" height="100%" frameborder="0"
src="www.site.com/" />
</div>
<script>
$(document).ready(function(){
console.log('asdsadsa');
var link = document.getElementById("iframe").src;
console.log(link);
});
</script>
</body>
</html>
Not sure if this is possible, any advice is appreciated.
I was creating a website based on a video as a background for the homepage I came across a problem, I don't know what the problem is but I followed an online tutorial and it seems that the video that I was willing to put in my website has shown up but does not play and is way too big even when viewed at full screen.
here's the code:
<html>
<head>
<!-- settings -->
<title> Prestige</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" conetent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="Intro.mp4" autoplay="true" loop="true"></video>
</div>
</header>
</body>
If you mean the video is too big for your page->
You can resize the video by using width and height attribute.
for example:
<video src="Sample.mp4" width="320" height="240">
If you mean the video is too big in terms of memory->
try to compress the video or embed using embed tag. You can also try to update to the latest version of your browser.
You can try to upload your code in a code snippet to replicate it and see if there's a problem with your code.
You can try this code:
HTML
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
JS
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
Also you can check this here.
You can try this full code on your computer. When I resize my Chrome and Firefox, the right hand side (which is column 2) will overrun the left hand side.
In jsfiddle this is harder to observe but if you want to: http://jsfiddle.net/kkmzkkyq/5/
It seems like this is caused by my col-xs-12 but isn't that used if I want a stack behavior?
Second problem is when I resize the window I can also see the right hand side continue (the text is not done!) How do I fix that? Am I supposed to apply text wrap?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>robots.txt scanner demo</title>
<link rel="stylesheet" type="text/css"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<!-- CSS are mainly based off
http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html
ACE editor CSS is a pain to work with....
-->
<style type="text/css" media="screen">
.right {
position: absolute;
padding-left: 0;
right: 0;
display: block;
padding: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
background: #708090;
color: black;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
top: 0;
bottom: 0;
left: 0;
padding-left: 0;
padding-right: 0;
}
#editor {
position: relative;
top: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 left">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-md-4 right">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
</script>
<script type="text/javascript" charset="utf-8"
src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js">
</script>
</script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
</html>
Your biggest problem is that you're not including the bootstrap3.0.2.js file - the css alone is not enough.
Secondly - the grid "bubbles up" - so if you define col-xs-12 and no col value for "sm" you will get 12 as the col value for sm size screens. So you could do a col-sm-8 and remove the col-md-8.
You also don't need to add left or right as your classes. Here's a good explanation of the grid: http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
And here is the body of your html: you have some messy (closed but never opened) script tags - and I added the include for the bootstrap JS file.
You still have to address the text issue (it's not being wrapped because there are no white spaces I would expect.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-sm-4">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
I'm stuck on this pretty simple problem and I know there must be a simple solution but I don't know what to do. I'm sure it is a CSS issue since everything else is functioning fine. Here is the page in question-
And the code used for the page
CSS:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z - index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML/JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
jQuery Hover Effect
</title>
<script type='text/javascript' src='jquery.js'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({
"opacity": "0"
}, "slow");
}, function() {
jQuery(this).stop().animate({
"opacity": "1"
}, "slow");
});
});
</script>
<link rel="stylesheet" type="text/css" href="/js/mouseover.css" />
</head>
<body>
<div class="fadehover">
<img src="pre.jpg" alt="" class="a" />
<img src="post.jpg" alt="" class="b" />
</div>
</body>
</html>
I think because the two images have absolute positions the div.fadehover is failing to get a height. So adding height: 700px; to the div.fadehover class in the css seems to fix the problem. (From my point of view anyway :)
I just used the following technique:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
to try to get a background picture to be the exact size of the page no matter what I do, it works fine in Google Chrome but not it IE. The example that they provide works fine in IE and GC but I see no differences in the two sites. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title> National Balloon Festival! </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <style type="text/css"> html, body {
height: 100%;
margin: 0;
padding: 0; } img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%; } #content {
position:relative;
z-index:1;
top:0px;
left:0px; } </style> <!--[if IE 6]> <style type="text/css"> html { overflow-y: hidden; } body { overflow-y: auto; } img#bg { position:absolute; z-index:-1; } #content { position:static; } </style> <![endif]--> </head> <body style=''> <body> <img src="images/Field1.jpg" alt="background image" id="bg" /> <div id="content">All your content here - including headers, paragraphs, etc.</div> </body>
</body> </html>
Hmm, when i use your code (with a picture of my own) everything seems to be fine. I'm curious, what version of IE are you using?
Hmm... Apparently changing the positioning to "absolute" allowed it on top.