I have two blogs. I need to link those.
'one.html' of the 'website1.com' should load the 'website2.com'.
The address 'website2.com' should not be displayed, instead, it should show 'website1.com/one.html'.
It has to scroll without cutting the content (auto adjust height, based on the content/no. of posts) but scroll bar should not be visible.
I created an iframe and was able to hide the scroll bar as well, but it did not auto adjust the height. Either it does not show full content or shows half content.
Please provide the appropriate HTML, CSS, and/or Javascript code to do the same.
Thanks in advance.
<style>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100%; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
</style>
<div id="content" >
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="website2.com" frameborder="0"></iframe>
</div>
</div>
</div>
Demo : https://jsfiddle.net/umd2ahce/6/
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
In the Adirondack template from Squarespace, there's a super crazy responsive feature where if you resize the window horizontally, the "margins" of the page start shrinking until it just kinda locks onto the main content of the page. I included a GIF of what I'm trying to articulate below.
How could I go about replicating that effect? All my attempts have just resulted in the entire page shrinking to scale instead of just the margins. (In my attempt, I styled the main content of the div to have margins from the left and right to replicate the kind of look in this template.)
You can achieve this without using margins or media queries. Just use max-width on the content, i.e.
.content {
// Make it as wide as possible…
width: 100%;
// … but only up to 250px
max-width: 250px;
// Center horizontally within parent
margin: 0 auto;
}
Example:
function updateWidth() {
const slider = document.querySelector(".slider");
document.querySelector(".parent").style.width = `${slider.value}%`;
}
input {
width: 100%;
}
.parent {
background-color: #cecece;
padding: 5px 0;
}
.child {
background-color: red;
width: 100%;
max-width: 250px;
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: white;
}
Use the slider to simulate resizing:
<input type="range" value="100" min="0" max="100" oninput="updateWidth()" class="slider" />
<div class="parent">
<div class="child">Content</div>
</div>
I normally center the main content div using margin-left: 50% and transform: translateX(-50%). Just make sure to use the various cross-browser rules when using transform.
After that just set the divs width and max-width. See below or this fiddle.
body {
width: 100%;
float: left;
display: block;
padding: 0;
margin: 0;
}
.main-centered-div {
color: #000000;
width: 100%;
max-width: 1180px;
margin-left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
background: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main-centered-div">
Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some
content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div. Some content for my div.
</div>
</body>
</html>
I am trying to a fixed header on top of the page. So when the user scroll down, the header stay up on top. However this is only work in Chrome, FireFox and Opera which scrolls smoothly.
If you have a look the code below. Open with IE and Google Chrome. You will see the difference! The header must stay in the wrapper.
Example Code
I would like to know how to make the scrolling smooth when repositioning objects inside the div elements when set to absolute to keep it floating at the top of the box.
HTML:
<div id="wrapper">
<header>
<h2>Title Header</h2>
</header>
Content page
</div>
CSS:
#wrapper{
height:200px;
overflow-y:scroll;
position:relative;
}
#wrapper > p {
position: absolute;
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: absolute;
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
#wrapper header h2 { margin:0 }
Javascript:
$(function(){
$('#wrapper').scroll(function(e){
$('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
});
});
I'd rather use this CSS and remove the JS for cross-browser compatibility:
// same CSS...
#wrapper p {
margin-top: 50px; //no positioning just a top margin
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: fixed; // from absolute to fixed
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
//same CSS...
Demo.
There're 2 divs - top and bottom.
The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)
The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:
http://jsbin.com/UrasoKi/3/edit
<style scoped>
#top{
min-height: 500px;
width: 100%;
background-color: blue
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
</style>
<div id="w">
<div id="top">TOP PANE</div>
<div id="bottom">BOTTOM PANE</div>
</div>
I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.
Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")
I've been trying to play around for hours, something is missing.
I would tweak as follows to provide the sort of functionality you want:
<body>
<style scoped>
#top{
height: 100%;
width: 100%;
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
#inner {
overflow-y:scroll;
height: 100%;
background-color: blue
}
</style>
<div id="w">
<div id="top"><div id="inner">TOP PANE</div></div> <div id="bottom">BOTTOM PANE</div>
</div>
<script>
$(document).ready(function() {
$('#w').kendoWindow({
width: '450px'
});
$('.k-window-content').css({'overflow':'hidden', scrollable: false })
});
</script>
</body>
The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.
I hope this helps...
The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height
Edit:
Edited your fiddle, see if that is what you need.
http://jsbin.com/efOgoVE/10/edit
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.