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.)
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)
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
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.
What I need to do is similar to this post, but I need the user to be able to change the Pseudo Element using a custom field. Still learning JavaScript and this has been a struggle!
User needs ability to change ~ border-right: 500px solid #4679BD;
The custom field is ~ $angle = get_field('contact_angle_color');
Here is my code without my failed JavaScript attempts:
.relative-wrap {
position: relative;
min-height: 150px;
}
.triangle-down-right {
width: 50%;
height: 0;
padding-top: 54%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.triangle-down-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
border-right: 500px solid #4679BD;
}
<div class="triangle-down-right"></div>
I could not understand the part about custom field, but if you are planning on having unlimited control over pseudo-elements, well, good luck with that. Currently, manipulating pseudo-elements with Javascript is possible through injecting inline css into DOM as described in this post, but it is not recommended unless, of course, you absolutely have to.
So, the other way to change pseudo-elements is to add/remove/modify class names on the element. Please see the example code below and the JSFiddle: https://jsfiddle.net/9w4d6mts/
HTML:
<input type="button" id="direction" value="Change Direction">
<br>
<input type="button" id="color" value="Change Color">
<div id="demo" class="triangle-down-right alt"></div>
CSS:
.relative-wrap {
position: relative;
min-height: 150px;
}
.triangle-down-right,
.triangle-down-left {
width: 50%;
height: 0;
padding-top: 54%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.triangle-down-right:after,
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
}
.triangle-down-right:after {
border-right: 500px solid #4679BD;
}
.triangle-down-left:after {
border-left: 500px solid #4679BD;
}
.triangle-down-right.alt:after,
.triangle-down-left.alt:after {
border-color: transparent #D4679B transparent;
}
JS:
document.getElementById('direction').addEventListener('click', function(){
var d = document.getElementById('demo');
d.className = (d.className.replace(' alt','') === "triangle-down-right") ? d.className.replace('right','left') : d.className.replace('left','right');
});
document.getElementById('color').addEventListener("click", function(){
var d = document.getElementById('demo');
console.log(d.className);
d.className = (d.className.slice(-3) === "alt") ? d.className.replace(' alt','') : d.className + ' alt';
});
Basically, we are preparing the classes in CSS beforehand and switch them with Javascript based on user interaction. That's it.
I have a 10 x 10 with data table that is created using html tags. If it is possible to create a onClick function to each cell? I mean, if I click on a cell, then it gives me its value in a n alert window? If yes, then how?
Plain JS - assuming <table id="table1">:
window.onload=function() {
var cells = document.getElementById('table1').getElementsByTagName('td');
for (var i=0, n=cells.length;i<n;i++) {
cells[i].onclick=function() { alert(this.innerHTML) }
}
}
A good example could be found here
HTML CODE:
<div id='page-wrap'>
Your content goes here.
<a id='show' href='#'>show overlay</a>
JavaScript & JQuery:
$(document).ready(function() {
$("#show").click(function() {
showPopup();
});
$("#popup").click(function() {
$(this).hide();
$("#mask").hide();
});
});
function showPopup() {
// show pop-up
$("#mask").fadeTo(500, 0.25);
// show the popup
$("#popup").show();
}
---------------------------------------
CSS CODE:
* { margin: 0, padding 0}
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 10000;
}
#popup
{
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #333;
background-color: #ffffdd;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 10001;
display: none;
}
[![enter image description here][1]][1]