Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.
Related
In short: what I only need is this graphic map and the team symbol, without the other data appearing on the screen, wasting space and without the scrollbar on the right side that covers the end of the graphic.
var myIframe = document.getElementById('iframe');
myIframe.onload = function(){
myIframe.contentWindow.scrollTo(0,500);
};
<iframe id="iframe" src="https://www.sofascore.com/event/9626475/attack-momentum/embed"></iframe>
When creating the iframe, it comes with some unwanted data that only takes up space, as I left circled in the image below:
When I decrease the size of the iframe to take up less space, this happens:
What I would like to happen is that when creating the iframe, it would already scroll to the end, thus automatically:
Is there anything I can put in my HTML or script that can do this automatic scrolling when creating iframes?
I also tried using .style("margin-top","-90px"); but doing so happens that the values exceed the iframe limits getting on top of the previous ones:
If you want to do the complete test, use this code and create a CSV file with the sofascore ids (SofaScore_Live.csv):
<html>
<head>
<style>
{
box-sizing: border-box;
}
.vl {
border-left: 3px solid red;
height: 1000px;
position: absolute;
left: 30.3%;
margin-left: -3px;
top: 0;
}
.vl2 {
border-left: 3px solid red;
height: 1000px;
position: absolute;
left: 10.9%;
margin-left: -3px;
top: 0;
}
.vl3 {
border-left: 3px solid red;
height: 1000px;
position: absolute;
left: 69%;
margin-left: -3px;
top: 0;
}
.matches {
text-align:center;
float: left;
width: 700px;
border: 1px solid white;
border-collapse: collapse;
}
.column {
text-align:center;
float: left;
width: 700px;
border: 1px solid white;
border-collapse: collapse;
}
.grid {
float: left;
width: 100%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #33ccff;
color: black;
font-weight: bold;
}
input[type=submit] {
background-color: #33ccff;
color: black;
font-weight: bold;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-fetch#3"></script>
</script>
</head>
<body style="background-color:black;">
<div class="vl"></div>
<div class="vl2"></div>
<div class="vl3"></div>
<div style="color:white;font-weight:bold" class="grid games" id="jogos-sofascore">
</div>
<script id="script-da-caixa-de-selecao-suspensa-5">
var select_5 = d3.select("#jogos-sofascore")
.append("div")
.attr("id","select-box-5")
.style("width","100%")
function valorparaiframe(iframevalue) {
let link = iframevalue;
return "https://www.sofascore.com/event/" + iframevalue + "/attack-momentum/embed";
}
async function update() {
let data = await d3.csv("./SofaScore_Live.csv");
let update_5 = select_5.selectAll(".matches")
.data(data,d=>d.id);
update_5.exit().remove();
// Enter new divs:
const enter = update_5.enter()
.append("div")
.attr("class","matches");
// Append the children to entered divs:
enter.append("iframe")
.attr("src",d => valorparaiframe(d.id))
.style("width","100%")
.style("height","110");
}
update();
setInterval(update,60000);
</script>
</div>
</body>
</html>
SofaScore_Live.csv CSV example:
id
9576375
9602988
9643997
9944904
9591418
9595065
9595129
9595043
9671970
9698797
9671975
9671974
9578901
iframes loaded from a different origin are protected by the same-origin-policy, which prevents you from accessing/modifying the content of it (which is why you can't use scrollTo etc,.).
As a workaround, if you know the height of the content in the iframe (which you can retrieve by going to the iframe source and getting the body's offsetHeight), you can set the height of the iframe to the height of the content. Then, you can wrap the iframe in a container, set the container's height, and scroll to the bottom of the container.
const container = document.querySelector('.iframe-container')
container.scrollTop = container.scrollHeight;
iframe {
height: 200px;
width: 100%;
border: none;
}
.iframe-container{
height:120px;
overflow:auto;
}
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9626475/attack-momentum/embed"></iframe>
</div>
You can use the scroll(x, y) function:
scroll(0, 10000)
I am trying to replicate the same behavior as in this
codepen in IE 11 (does not have css sticky)
I am able to detect when the item is offscreen at the start with:
if (
$(".main-content").height() + $(".main-content").offset().top <
$(".main-footer").offset().top
)
but then after it reaches the end of the scroll (in this case the page), I did not manage to check when it goes offscreen again. It is probably something simple as subtracting the scroll to figure out if the element is offscreen, I am just stuck...
Here is a codepen where I stuck am now.
IE doesn't support <main> so you can't use this tag in IE 11. You can monitor the scroll bar changes through JavaScript, and then change its class according to the position of the element.
Here is the code you can refer to:
$(document).scroll(function() {
var scroH = $(document).scrollTop();
var viewH = $(window).height();
var contentH = $(document).height();
$('.main-footer').addClass('main-footer1')
if (scroH > 100) {}
if (contentH - (scroH + viewH) <= 100) { // The height from the bottom is less than 100px
}
if (contentH <= (scroH + viewH + 100)) {
$('.main-footer').removeClass('main-footer1')
$('.main-footer').addClass('main-footer2')
} else {
$('.main-footer').addClass('main-footer1')
$('.main-footer').removeClass('main-footer2')
}
});
body {
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 40px;
}
.main-container {
max-width: 600px;
margin: 0 auto;
border: solid 10px green;
padding: 10px;
margin-top: 40px;
}
.main-container * {
padding: 10px;
background: #aaa;
border: dashed 5px #000;
}
.main-container *+* {
margin-top: 20px;
}
.main-header {
height: 50px;
background: #aaa;
}
.main-content {
min-height: 1000px;
}
.main-footer {
border-color: red;
}
.main-footer1 {
position: fixed;
bottom: 0px;
margin: 0 auto;
width: 570px;
}
.main-footer2 {
position: relative;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN contentH</div>
<footer class="main-footer">footer</footer>
</div>
Result in IE 11:
I have draggable element which has dynamic height and width. It's change based on content.
I have this to center fixed element, here is HTML :
<div class="option_dialog" id="profile">
<div class="close_option">Profile <img onclick="document.getElementById('profile').style.display='none';body.style.overflow='auto'" style="float:right;height:20px" src="img/close.PNG">
</div>
<div class="dialog_content" id="profile_content" style="overflow:scroll;max-height:400px">
</div>
<button onclick="MyWall()" class="common_btn" style="width:98%">My Wall</button>
</div>
css :
.option_dialog {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: fixed;
margin: auto;
display: none;
width: fit-content;
height: fit-content;
padding: 0;
background: #e4e4e4;
}
.dialog_content {
margin: 2px 2px 1px 1px;
border: 2px solid #f5f5f3;
border-radius: 0px;
overflow: scroll;
max-height: 350px;
}
js
function profile() {
var x = document.getElementById("profile");
x.style.display = "block";
x.style.zIndex = "1000";
document.body.style.overflow = "hidden";
}
Draggable Code : *I'm using touchpunch to enable moving in touch devices!
$(function() {
$(".option_dialog").draggable({
handle: ".close_option",
stack: ".option_dialog",
distance: 0
});
});
It's work fine in Desktop and Smart Phones but it's not centering in some mobile phones, in addition the width and height of it will fill the whole screen. I googled but found nothing for my problem.
I'm trying to develop following functionality for a sidebar. In a nutshell, Sidebar will have 100% height and will be absolutely positioned. Inside it there is content, which should scroll with the page, while sidebar is fixed. And as addition there is a shadow effect / response to show user if he can scroll down or up. So for example if there is something that can be scrolled down / up show shadow there, if not don't show shadow. I made a quick mockup, hopefully it will help you understand what happens if page is scrolled:
I made a quick jsfidle with content and sidebar, this is as far as I can get at the moment. http://jsfiddle.net/cJGVJ/3/
I assume this can't be achieved only with css and html and work cross browser, so jQuery solutions are welcome.
HTML
<div id="main"> <!-- Demo Content (Scroll down for sidebar) -->
<!-- Demo content here -->
</div>
<aside id="sidebar">
<div id="side-content-1"></div>
<div id="side-content-2"></div>
</aside>
CSS
body {
background: #f3f3f3;
margin: 0;
padding: 0;
}
#page-wrapper {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
width: 30%;
float: left;
background: #ffffff;
padding: 10px;
height: 100%;
position: fixed;
}
#main {
width: 60%;
float: right;
}
#side-content-1, #side-content-2 {
height: 400px;
}
#side-content-1 {
background: red;
opacity: 0.4;
}
#side-content-2 {
background: green;
opacity: 0.4;
margin-top: 10px;
}
EDIT
Bare in mind content in sidebar sums up to less than one of the page content, so once it reaches the bottom (so when bottom shadow disappears) it should stay there, while main content can be still scrolled down.
This is still a little rough, but its a start:
I went through and polished it a little more and took care of some window resizing issues.
I think this will work for you:
Updated Working Example
JS
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
var o = $('#side-content-1').offset().top;
var q = $('#side-content-1').offset().top + $('#side-content-1').height();
var u = $('#side-content-2').offset().top;
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0',
'width': '27%'
});
$('#bottomShadow').hide();
}
if (x < s) {
$('#sidebar').css({
'position': 'static',
'width': '30%'
});
$('#bottomShadow').show();
}
if (y > o) {
$('#topShadow').show().css({
'position': 'fixed',
'top': '-2px'
});
}
if (y < o) {
$('#topShadow').hide();
}
if (y > q - 4 && y < q + 10) {
$('#topShadow').hide();
}
if (x > u - 10 && x < u + 4) {
$('#bottomShadow').hide();
}
});
var shadow = (function () {
$('#topShadow, #bottomShadow').width($('#sidebar').width());
});
$(window).resize(shadow);
$(document).ready(shadow);
CSS
body {
background: #f3f3f3;
margin: 0;
padding: 0;
}
#page-wrapper {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
width: 30%;
float:left;
background: #ffffff;
padding: 10px;
}
#main {
width: 60%;
float: right;
}
#side-content-1, #side-content-2 {
height: 400px;
}
#side-content-1 {
background: red;
opacity: 0.4;
}
#side-content-2 {
background: green;
opacity: 0.4;
margin-top: 10px;
}
#topShadow {
display:none;
height:2px;
box-shadow:0px 5px 4px #000;
}
#bottomShadow {
position:fixed;
bottom:-3px;
height:2px;
width:99%;
box-shadow:0px -5px 4px #000;
}
CSS Tricks website have an article on Persistent Headers where they accomplish something similar with a bit of JQuery
Live link here: http://tbremer.com/
Try Architecture or Concert to see problem
My issue is that when my images are added the viewport doesn't scroll or extend to allow for the new content.
I need to understand what the root issue is here and hopefully find a work around.
Thanks!
OK, sorry here is the pertinent code.
CSS:
/* Content Wrapper */
#contentWrapper {
padding: 0px;
margin: 0px;
width: 100%;
height: 99%;
z-index: 0;
border: 0px solid #600;
}
/* Image Viewer */
#imageViewer{
position: fixed;
left: 0px;
top: 0px;
padding: 0px;
padding-left: 350px;
margin: 0px;
border: 0px solid #F0F;
visibility: hidden;
}
.portImage {
padding: 0;
margin: 4px;
border: 1px solid #000;
display: inline;
}
HTML:
<div id="contentWrapper">
<div id="imageViewer"></div>
</div>
JAVASCRIPT:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
$("#imageViewer").empty();
$("#imageViewer").css("visibility", "hidden");
//___ Get server response.
var responseArray = xmlhttp.responseText.split(',');
responseArray.pop();
//console.log(responseArray.length);
//console.log(responseArray);
for(var i=0;i<responseArray.length;i++){
$("#imageViewer").append("\
<div id='portImage"+i+"' class='portImage'>\
<img src='"+responseArray[i]+"' height='500'>\
</div>\
");
}
$(".portImage").each(function() {
var image = $("<img />").attr('src', this);
});
//$("#imageViewer").append("Test");
$("#imageViewer").css("visibility", "visible");
}
}
Position:Absolute on the imageViewer not fixed. That is all you have to change.
You need to remove the height from #contentWrapper and position: fixed from #imageViewer.
(And please post your code here.)