i have a simple webpage made by using bootstrap.now i want to embed it in another webpage but i have a problem in setting the height .
here is my webpage:
<html>
<head>
<style>
#above1 { margin-bottom:6px; }
#iframe1 { height:100%; width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px; }
</style>
</head>
<body>
<div class="container-fluid">
<div id="above1">
<div class="row"> [content here]</div>
<div class="row"> [more content here]</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<iframe id="iframe1" src="home.html"></iframe>
</div>
</div>
</div>
</body>
</html>
here is my home.html webpage which i want to embed is:
`<htlm>
<head>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-6">
<img src="image/2.png" >
</div>
<div class="col-md-6">
<img src="image/1.png" >
</div>
</div>
</div>
</body>
</html>`
when i implement this i got scrollbar in iframe how i gonna fix this issue?
Remove height and width in #iframe1
This Script to help you to auto-adjust the width and height of the iframe to fit with content in it.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe id="iframe1" src="home.html"></iframe>
Related
I'm using bootstrap 4 and I'm trying to get a bootrap container and its content to go full width and bleed all the way to the view port.
My initial solution added padding off the side of the screen which lead to the window scrolling right 15px.
My second partial solution is based on this answer for bootstrap 3: Bootstrap container-fluid padding
With this approach I get the bleed to the left of the screen, but 30px gap remains on the right. I can't see what I should have done to get the full width container working.
Here's code that fully represents the problem. The content that I want to go to the edge of screen happens to be a map. I doubt that's relevant, but have included in case:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript">
var map
var geocoder
function initMap() {
// received letters array
// create map object
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: 'terrain'
})
var userLocation = "London"
geocoder = new google.maps.Geocoder()
geocoder.geocode({'address': "London"}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
} else {
console.log('Geocode was not successful for the following reason: ' + status)
}
})
google.maps.event.addDomListener(window, 'load', initMap)
}
</script>
<style>
.container-fluid.full-width {
padding:0px;
}
.change-margins {
margin-left:-15px;
margin-right:-15px;
}
</style>
</head>
<body style="background-color:blue;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
nav
</nav>
<div id="content" class="container-fluid full-width">
<div id="map-panel" class="container-fluid change-margins">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 m-2">
<h1>Title</h1>
</div>
</div>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
min-height: 300px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script>
<div id="map">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-sm">
<h1>Content below map</h1>
</div>
</div>
</div>
</div>
</body>
</html>
What should I have done in order to get the content to meet the edge of the browser window?
Bootstrap 5 - update 2021
The .no-gutters class has been replaced with .g-0. Use it the .row where you want no spacing, and .p-0 on the container for an edge-to-edge width.
Bootstrap 4 - original question.
Because Bootstrap's grid row has negative margins, removing padding from the the container alone won't work. You also shouldn't have nested containers.
To make a full width layout (no extra CSS)...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col">
(edge to edge content...)
</div>
</div>
</div>
Therefore, for your layout..
remove the padding on the container-fluid using px-0
remove the negative margins on the row using no-gutters:
https://codeply.com/p/5ihF13YSBL
Also, since you're using only 1 grid column, you can simply zero out the padding on it using px-0.
To remove the spacing between columns (gutter) see this question
Use this code. You need to add one more class "full-width" to the "container-fluid" class name.
<script type="text/javascript">
var map
var geocoder
function initMap() {
// received letters array
// create map object
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: 'terrain'
})
var userLocation = "London"
geocoder = new google.maps.Geocoder()
geocoder.geocode({'address': "London"}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
} else {
console.log('Geocode was not successful for the following reason: ' + status)
}
})
google.maps.event.addDomListener(window, 'load', initMap)
}
</script>
<style>
.container-fluid.full-width {
padding:0px;
}
.change-margins {
margin-left:-15px;
margin-right:-15px;
}
</style>
</head>
<body style="background-color:blue;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
nav
</nav>
<div id="content" class="container-fluid full-width">
<div id="map-panel" class="container-fluid change-margins">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 m-2">
<h1>Title</h1>
</div>
</div>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
min-height: 300px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script>
<div id="map">
</div>
</div>
</div>
</div>
<div class="container-fluid full-width">
<div class="row mt-3">
<div class="col-sm">
<h1>Content below map</h1>
</div>
</div>
</div>
</div>
</body>
<div id="map-panel" class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<h1> Title </h1>
</div>
</div>
</div>
I'm straggling with a simple layout issue:
Basically my goal is to create a toggled side menu. When the side menu is visible the main layout is 80% width, and when it is not visible the main layout would be 100% width, like so:
I'm using bootstrap 3 and would like to use their CSS markup, so I can add rows and columns to the main div (Lt-orange in the illustration).
Any help would be appreciated :)
EDIT:
Here is my progress so far:
<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
<div style="border:solid 1px red">
<div class="row">
<div class="col-lg-6">Some Content</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">Some content</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>
Demo
Actually, you can't use 20% because bootstrap grid size works with 12s. Which means 100%=12/12 so 1/12 is 8,33% is the smallest unit. What is closest to you is for the sidebar to be 3/12=25%. Giving you code for this:
<div class="row">
<div class="col-xs-12 col-sm-3">
sidebar content
</div>
<div class="col-xs-12 col-sm-9">
main content here
<div class="row">
<div class="col-xs-12">
your 100% main content here
</div>
</div
</div>
I assume the bottom photo shows how it will look on a mobile device..?
I was working on a similar kind of solution, below is the snippet of code that works for me
below is the file (test.php)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Demo</title>
<link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="PATH/demo.css">
<script type="text/javascript" src="PATH/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-sm-3 side20" > This is side content</div>
<div class="col-sm-9 main80">This is the main content.</div>
</div>
<button class="btn btn-default" role="button">Toggle</button>
<div class="row" >
<div class="col-sm-3 side20" >n</div>
<div class="col-sm-9 main80" >This is the main content</div>
</div>
<footer class="row">
<div class="col-xs-6 copyright">
© Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
<small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>
The sample css is (demo.css)
.container{
width: 100%;
background: #0081c2;
}
.side20{
background: #3e8f3e;
}
.col-sm-3{
display: block;
background: #3e8f3e;
height: 200px;
border: solid 2px #000000;
}
.main80{
background: #8D0D19;
height: 200px;
border: solid 2px #000000;
}
.col-sm-12{
background: #8D0D19;
}
footer{
min-height: 50px;
background: #010102;
border-radius: 3px;
}
.copyright{
text-align: center;
line-height: 50px;
color: #fff;
}
.design{
text-align: right;
line-height: 50px;
color: #FFF4B9;
}
And the toggle function is achieved by the below jQuery script (custom.js)
$(".btn").on("click", function(){
$(".col-sm-3").toggle();
$(".main80").toggleClass("col-sm-12");
$(".main80").toggleClass("col-sm-9");
});
Hope this helps. Happy coding!!
Found a CSS only solution , basically I'm using table display:
HTML + CSS:
<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
<div style="display:table-row">
<div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
<div style="display:table-cell">
<div class="row">
<div class="col-xs-6">6 col</div>
<div class="col-xs-6">6 col</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>
here is a JS fiddle, that toggles the display of the cell
I have one wrapper which is fixed width for all of my pages, but what if i have a page with a content that needs to have a full width like for example slideshow.
HTML
<div id="wrapper">
//fixed width contents
</div>
CSS
#wrapper{
width: 960px;
margin: 0 auto;
}
I don't want to create another wrapper with full width like:
CSS
#wrapper-full-width{
width: 100%
}
HTML
<div id='wrapper-full-width'>
// some contents with full width like slideshow
</div>
So i only need one wrapper which i can use for all my pages.
HOMEPAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow> // fixed width=960px</div>
<div id="footer"></div>
</div>
PRODUCT PAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"> // full width=100% </div>
<div id="footer"></div>
</div>
How can i use same wrapper for pages with contents that need to have a full width?
Well, there's two option: either add a class of fullwidth to the wrapper itself or to the <body> tag on that specific page:
<div id="wrapper" class="fullwidth">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
#wrapper.fullwidth { width: 100%; }
Or:
<body class="fullwidth">
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
</body>
.fullwidth #wrapper { width: 100%; }
I have implemented many onclick functionality. But it is not functioning here alone.
My HTML
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="home()"/></div>
</div>
My CSS
.wrapper_other
{
width:auto; margin:0auto; overflow: hidden;
}
.header
{
float:left; height:44px; line-height:44px; margin:0%; width:100%;
}
.header_title
{
height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight:bold; width:100%;
}
Myfunction
function home()
{
window.location.href="index.html";
}
EDIT
My file structure
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function test()
{
window.location.href="index.html";
}
</script>
</head>
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
Please,help me identify my mistake.
<div id="home" class="home"><img src="img/home.png" onClick='window.location.href="index.html";'/></div>
Why don't you use the location.href inside the onClick()?
You have used "home" in id attribute and function name. When you use home() onclick, you might have faced not a function exception as Browser refer HTMLDivElement (due to an id attribute). Change the value in id attribute or function name and check
Here's the HTML for script.
<script type="text/javscript">
function home()
{
window.location.href="index.html";
}
</script>
Now, place the code either the following:
inside the <head> tag or
above the </body> tag
Though placing above the ending <body> tag is highly recommended.
Update
Given the directory structure is like this:
- index.html
- script.js <- assuming the function is in there
Here's the line of code
<script type="text/javascript" src="script.js"></script>
Then place the code either the following:
inside the <head> tag or
above the </body> tag
What is your error? Its working fine see the DEMO
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="test();"/> </div>
</div>
</div>
function test()
{
window.location.href="index.html";
}
EDIT
Found your problem
1) Function not defined (test should changed to ->info)
2) onclick (C was capital)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function info()
{
window.location.href="index.html";
}
</script>
</head>
<body>
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" alt="clickme" onclick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
Wrong here I can find is
1- U have used home in as id attribute of div and function name.
<div id="home" class="home"> <img src="img/home.png" onClick="home()"/> </div>
2- Try to write onclick all in small and put [;] after function call
show write it like onclick="home();" there will be no error!
All browser accept it.
Try to debug using Chrome console or Internet Explorer(after un-checking - disable script debugging and disable all script debugging).
Here is Solution:
HTML CODE with Java Script: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="yourcss.css" />
<script type="text/javascript">
function navigator() {
alert("Test is called!");
window.location.href = "justchill.html";
}
</script>
</head>
<body style="background-color: lightyellow">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title">
<img src="Dream_home6.jpg"
alt="welcome" onclick="navigator();" />
</div>
</div>
</div>
</body>
</html>
Tested and verified on Chrome and Mozila Firefox.
Hope it will help.
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }