Well I am working on <iframe src> tag in which i am trying to add hover effect. What really this code does is that when i put my mouse over the yellow box it changes to cyan and red colour with 50 % height each divided vertically. But then I think what about adding an image so I just putted one image url and I noticed that it is not coming fit on that particular area. I tried changing the size or making position absolute ... but nothing worked in this.
My image file is this : 'http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg
Which is not fitting on that particular area.So is there any solution by which on hover I can get full size of that image on that particular area.
WHAT I HAVE TRIED
I have tried using background-size: 100% 100%; but then also its showing image like this.
THIS IS WHAT I WANT I have just edited to show you what I want
My code is divided into three parts
framehover.html
<html>
<body>
<p style="height: 50px;">Move the mouse pointer into the yellow box, then directly into
the green box,
then out of both boxes. No red or cyan should remain, only yellow and green.</p>
<iframe src="my.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
<iframe src="my2.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
</body>
</html>
my2.html - both my.html and my2.html is same so I am putting this one only. just difference is that in my.html background-color: red; for .outer
<html>
<head>
<style>
body { margin: 0px; }
.outer {
margin: -100px;
width: 400px;
height: 500px;
background-color: green;
}
.outer:hover {
background-color: red;
}
.inner {
visibility: hidden;
width: 100%;
height: 50%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg');
}
</style>
</head>
<body>
<div class="outer"
onmouseover="firstChild.style.visibility='visible'"
onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div>
</body>
the iframe is independent of your website, you can not change the style of iframe, for that you must change it in the original Web. If you are in the same domain with js you can try, but you can have crossdomain error.
Related
I have a div with word-wrapped text inside. I would like the text to be scaled up to the maximum size that still fits the div without overflowing. How can I achieve that?
<html>
<head>
<style>
div#hugetext {width: 250px; height: 500px; border: 1px solid blue; overflow-wrap: break-word;}
</style>
</head>
<body>
<div id="hugetext">This text shall be so huge that it fills the entire div</div>
</body>
</html>
On the left is how it looks like, on the right how I would like it to look like:
I would prefer a pure HTML+CSS solution but if this requires JavaScript then I will accept it.
I'm trying to embed a camera feed into a page which will display manual focus and servo controls. However, I cannot get past the scaling of the content within the iframe.
The iframe boundary resizes to the width of the window. However the embedded page (which is an mjpeg page generated by an application) is not being scaled.
Here's the markup
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ustreamer Webcam</title>
<style>
.icontainer {
border: 1px solid red;
position: relative;
padding-bottom: 100%; /* set the aspect ratio here as (height / width) * 100% */
height: 0;
/*overflow: hidden;*/
max-width: 100%;
}
.icontainer iframe {
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='icontainer'>
<iframe src='http://abc.def.com:5001/webcam/?action=stream' allowfullscreen></iframe>
</div>
</body>
</html>
Do you think it is at all possible? The source page is out of my hands, unless there is no option. It just poses other complications.
The URL you are embedding there returns an image data stream, the browser will create a rudimentary HTML document around that, and an img element. A plain image has no reason to "scale" to anything by its own volition - and since the iframe content is from a different origin, you can't easily inject your own styling either.
But you should be able to simply use an img instead of an iframe to begin with, to embed this into your page - and then you can format that image directly.
I'm trying to create something similar this web page, where a video is used as the background and as the user scrolls up and down the text/background video change appropriately so as to tell a story.
Right now getting the video to play is about the only thing working. The video will load, and play, as intended. However the <div> elements are simply stacked below the video one by one. When the user clicks anywhere on the page, I'd like the text to scroll up, from the bottom, and finish scrolling once they reach the same position on the page as the previous text... however I don't think I'm using the .animate() function properly.
This seems like it'd be relatively easy to do, so here's my admittedly weak first attempt.
fiddle: http://jsfiddle.net/f06w76bv/
<!DOCTYPE html>
<html>
<head>
<style>
.textConatiner{
position: absolute;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
left:10%;
}
video.bgvid{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(TurbineStill.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="TurbineStill.png" class="bgvid">
<source src="Turbine.mp4" type="video/mp4">
</video>
<section>
<div class="textConatiner" id="one" style="top:50%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
<section>
<div class="textConatiner" id="two" style="top:150%;">
<h2>Video Backgrounds One</h2>
</div>
</section>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).click(function () {
var myDiv = $("#two");
var scrollto = myDiv.offset().top + (myDiv.height() / 2);
myDiv.animate({ scrollTop: scrollTo }, 1000);
});
});
</script>
</html>
EDIT
By adding the position to the div container I'm able to get the original div positions exactly where I want them when the page loads. However, I still cannot get the animate method to move the second div into the page from below.
Your question isn't exactly new, it's just a bunch of questions in one really.
First of all - for your positioning, you'll be able to use plain CSS like you would with any DOM element. Tutorial on that are at W3Schools for example.
Scrolling to an Element using JQuery is answered in this stackoverflow-Question.
And another stackoverflow-question about moving a video by scrolling can be found here.
Look at this bug,
this is the code: "We have a simple webpage with an iframe that is very big and is moved to the left, we are seeing the center part of it. Then with javascript we add a flash object (a clock) in the middle (position 1000x1000) so it is in the visible section of the iframe. At first the flash piece is well rendered but after the "magic" steps that i mention here the flash piece is not rendered"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<iframe id="iframe" style="position: absolute; left: -1000px; top: -1000px; width:2000px; height: 2000px; border: 1px solid black"></iframe>
<SCRIPT LANGUAGE="JavaScript">
window[0].document.write('<body><div id="FlashContainer" style="display: inline;"><embed id="embed" name="embed" type="application/x-shockwave-flash" wmode="transparent" src="http://edmullen.net/flash/relog.swf" allowscriptaccess="always" allowfullscreen="true" swliveconnect="true" style="vertical-align: top; margin: 0px; width: 728px; height: 300px; clip: rect(0px 728px 300px 0px); position: absolute; left: 1000px; top: 1000px; z-index: 1;"></div></body>');
window[0].document.body.style.paddingLeft = "1000px"; //without this works
window[0].document.body.style.paddingTop = "1000px"; //without this works
</SCRIPT>
</BODY>
</HTML>
Run this code in Chrome, open the devtool (F12):
Select the element embed:
Change the values:
postion: relative
left: 0px
top: 0px
(Some times the flash is not rendered here!)
Change again to:
position: absolute
left: 1200
top: 1200
Comment: with these two steps, we moved the embed element to the left top corner of the iframe, and then we restored the original position
So, where is the bug? The bug is that the flash element is not rendered (Can be in step 1 or 2). To check it, press right click (on the left top corner of the viewport) and the flash popup menu should appear.
That is not all folks! if you change the display property of the element "FlashContainer", then the flash piece appears there!
Note: the problem is caused by the padding left & top, I couldn't figure out why is this happening.
Thank you!
Try setting the z-index for the iframe to 1 or greater.
I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.