I have created an iFrame in my Google Chrome Extension popup and applied CSS so it has no border and height: 100%.
However, it appears with a limited height and shows a vertical scrollbar.
How do I set it to adjust to the height of the loaded HTML page?
This will work, source here.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
Related
Using the canvas, the image changes when scrolling.
I wrote the code for animation.
If css gives you the same value as positio:absolute top:4000px,
Even if I scroll, the animation doesn't work.
It works if you lower the top value. I have to operate at the top 4000px position.
I'm curious about the solution
var canvas = document.getElementById('macbook');
var ctx = canvas.getContext('2d');
var scrollYPos = 1000;
var img = new Image();
img.src = "img/AirPods Max/large0.jpg";
window.addEventListener('scroll', function(e) {
scrollYPos = Math.round (window.scrollY/5);
console.log(scrollYPos);
if (scrollYPos> 52) {
scrollYPos = 52;
}
player(scrollYPos);
});
function player(num) {
img.src = `img/AirPods Max/large${num}.jpg`;
}
img.addEventListener('load', function(e) {
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0,0);
})
canvas {
position: absolute;
top: 4000px;
}
<div id="img-sequence">
<canvas width="1004" height="1214" id="macbook"></canvas>
</div>
I created following simple website. I have Starfield and galaxy pictures. Starfield is animated by JS code. Stars are moving. But when I place Galaxy over starfield with CSS code stars stop moving.
Below I placed JS code and HTML code without placing galaxy over starfield. How can I place one over another with stars moving?
Regards
Piotr
<head>
<meta charset ="utf-8">
<title> Galaktyka</title>
<script src ="Code17.js"></script>
<style>
#galaxy{
display: block;
margin-left: 0;
margin-top: 0;
}
#star{
position: relative;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
window.scrollTo(0,0);
}
</script>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<img id="galaxy" src="Galaktyka.jpg" style="width: 70%">
<img id="star" src="starfield.jpg">
</body>
And below JS
window.onload = function(){
let image = document.getElementById("star");
imageLeft = -175;
setInterval(move, 100, image);
}
var motion = true;
function move() {
if(motion) {
let image = document.getElementById("star");
imageLeft = imageLeft + 1;
image.style.left = imageLeft + "px";
if (imageLeft == 0) {
motion = false;
} else {
let image = document.getElementById("star");
imageLeft = imageLeft - 1;
image.style.left = imageLeft + "px";
}
if (imageLeft == -175){
motion = true;
}
}
}
I can't seem to scale a canvas that's populated by an image within a fixed container in IE9. anyone know a work around? I recall reading some other thread about how IE treats a canvas as a block element
<style type="text/css">
#container { max-width: 25%; max-height: 25%; }
canvas { max-width: 90%; max-height: 90%; }
</style>
<script type="text/javascript">
var img = new Image();
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg';
img.onload = function () {
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.drawImage(img, 0, 0);
});
};
</script>
<div id="container">
<canvas id='fit-to-specified-width-height-with-aspect-ratio'></canvas>
</div>
<canvas id='normal'></canvas>
http://jsfiddle.net/VAXrL/535/
I too wish this behavior was consistent in all browsers but it looks like IE9 and a couple others treat canvas like a block level element and so you would need to style both width and height.
The canvas element will have to rely on hard pixels in its size since it is rasterized. One approach would be to calculate and set these pixels based on the original size of the image and a desired scale.
I forked your JSFiddle: http://jsfiddle.net/cbosco/ttU5L/3/
var img = new Image();
var SCALE = 0.25;
img.onload = function () {
$('canvas').each(function () {
var w = img.width;
var h = img.height;
w *= SCALE;
h *= SCALE;
this.width = w;
this.height = h;
var ctx = this.getContext("2d");
ctx.scale(SCALE, SCALE);
ctx.drawImage(img, 0, 0);
});
};
// good idea to set src attribute AFTER the onload handler is attached
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg';
I would like to know how is possible to assign a css rule to an element only if current scroll position is greater than 112px..
I've tried this but it doesn't work:
<script type="text/javascript">
$window.scrollTop(function(){
var a = 112;
var pos = $window.scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
Try using below code
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
$window.scrollTop changed to $(window).scroll
$window changed to $(window)
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!