This question already has answers here:
Iframe creates extra space below
(12 answers)
Image inside div has extra space below the image
(10 answers)
Closed last month.
How to remove the white margins from this web page.
Code of webpage:
<html>
<head></head>
<body>
<iframe id="i1" src="yoursource1.html" width="100%" style="height:100vh"></iframe>
<iframe id="i2" src="yoursource2.html" width="100%" style="height:100vh"></iframe>
</body>
<html>
iframes have a default display type of inline. Inline elements are initially designed for text and your iframe acts a bit as one giant character. It has a bit of white space beneath for the descenders of the characters (characters like j and g have descenders).
To cut a long story short, try changing the display type with css (and remove the border).
body {
margin: 0;
}
iframe {
display: block;
border: 0;
}
<iframe id="i1" src="yoursource1.html" width="100%" style="height:100vh; background:black"></iframe>
<iframe id="i2" src="yoursource2.html" width="100%" style="height:100vh; background:black"></iframe>
Related
I want to make my own image viewer, something that's better than what windows can provide.
I want to create an HTML page containing all my images but laid out horizontally as far as the monitor can go. And when I zoom in zoom out, the images also adjust sized and alignment.
I looked into IMGUR but I can't make sense of how they're achieving it. I'm guessing normal HTML can't do it, but some JS is involved as well? But I'm completely not sure.
I last did HTML 10 years ago. No spoonfeed needed, just a general direction.
my current code:
<html>
<body>
<video controls="" loop="" autoplay="" class="" src="somevideo"></video>
</body>
</html>
You could try using flexbox. Something like:
<div style="display:flex; flex-wrap: wrap; width: 100vw; height: 100vh;">
// your image elements
<img style="flex: 1;" src="myImage.png">
</div>
Should give you what you're looking for (at least as far as I can tell).
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
This question already has answers here:
JavaScript regex multiline text between two tags
(5 answers)
Closed 7 years ago.
I have this html content
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><img style="margin-left: auto; display: block; margin-right: auto;" src="../img/escudocaba.png" alt="#" width="470" height="90" /></center>
<h1>Hoddda</h1>
</body>
</html>
I need to extract the content of the body without including the body tags. I have made this regex that match perfectly:
/<body[^>]*>(.*?)<\/body>/is
as you can see in this website
https://regex101.com/
But when I use it
var bodyHtml=$editor.val().match( /<body[^>]*>(.*?)<\/body>/is);
I get no results.......Also tried a similar regex which did not work out in the end with the same format and without modifiers and it was matching
var bodyHtml=$editor.val().match(/(?:.(?!<\s*body[^>]*>))*\>.+/);
for example returned
<center><img style="margin-left: auto; display: block; margin-right: auto;" src="../img/escudocaba.png" alt="#" width="470" height="90" /></center>
How can I do in this case to use regex modifiers with this jquery function?. Thanks
In javascript flavour of regex the . doesn't match new lines.
To solve that you can use [^] or [\s\S] or [\d\D] or (?:.|\n) ...
Try this code:
var bodyHtml = $editor.val().match(/<body[^>]*>([\s\S]*?)(<\/body>|$)/i)[1];
The s-modifier doesn't exist in JS. try using [\s\S] instead of the dot, as suggested here: Javascript regex multiline flag doesn't work
like this:
<body[^>]*>([\s\S]*?)<\/body>
I am trying to display a webpage inside a div using object tag of html. I have tried loading it inside a div but since the host name of that webpage differes, it gives CORS error.
Also tried iframe but it requires scrolling='no' to remove scrollbars. So, I decided to use object tag after referring https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am able to remove the scroll bars if I specify fixed height and width in pixels. However, I want to decide this dynamically based on screen resolution to avaoid scrollbars appearing for any devices/browsers.
How can I achieve this? Below is my code snippet.
<div style="width: 100%; overflow:hidden;">
<!-- Main content goes here -->
<object type="text/html" data="<%=url%>" style="overflow: auto;" align="middle" standby="Loading ..." id="py-content"> </object>
</div>
I really appreciate any help on this.
Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:
<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>
How can I fit entire content are on my iframe?
Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.
<body style="margin: 0 auto;">
<iframe src="some.html" frameborder="0"
style="overflow:hidden;
display:block; position: absolute; height: 100%; width: 100%">
<p style="">
Your browser does not support iframes.
</p>
</body>
add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/
Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:
<style>
/* Unless you use normalizer or some other CSS reset,
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>
<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only.
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content,
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document,
so no borders and scrollbars will appear.
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>
See demo
See seamless property browser compatibility.
*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"