I can't get the scroll-bar to actually scroll on either axis
I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. I added the html file but removed all the content except what has to do with styling.
html
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div>...
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
css:
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
width: 100%
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content.
You need some content which is wider than the viewport in order to be able to scroll. I have added some in the code snippet below, without making any other changes to your code.
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
Basically, overflow will allow the page to scroll if the content larger than the screen.
Try this CSS: overflow: auto;.
Another way around if you still can't scroll is using this JavaScript:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and call the function from the <body> tag or from a <button> tag, whatever the event you want to use.
I am trying to make a analytics platform using basic HTML,Tableau JS API. Here I am successfully getting the visualizations independently,
here is my problem:
when first selection div tag refreshing and able see dashboard same time if I select next option div tag not refreshing
example- if select on claims-->OPS Report working fine, same time
if I select Claims-->LSP Report not able to see the visualisation
/* Menu Styles */
html,body{
height:100%;
width:100%;
}
.third-level-menu
{
position: absolute;
top: 0;
left: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #222222;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
.navbar-inverse {
background-color: #d9edf7;
border-color: #d9edf7;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #151313fa;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 50px;
background-color: #d9edf7;
}
.top-level-menu a:hover { color: #000000; }
element.style {
display: block;
width: 811px;
height: 1000px;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Visualization</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
function ReportARC() {
//alert("function1");
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Flights",
options = {
hideTabs: false,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
// Create a viz object and embed it in the container div.
var viz = new tableau.Viz(containerDiv, url, options);
}
function ReportOPS() {
//alert("function2");
var containerDiv1 = document.getElementById("vizContainer"),
url1 = "http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
options = {
hideTabs: false,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
// Create a viz object and embed it in the container div.
var viz1 = new tableau.Viz(containerDiv1, url1, options);
}
function ReportLSP() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
function ReportUW() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
function ReportSales() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
// Create a viz object and embed it in the container div.
var viz = new tableau.Viz(containerDiv, url, options);
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse" style="background-color:#d9edf7;">
<a class="navbar-brand" href="#">
</a>
<div class="container-fluid">
<ul class="top-level-menu" style="FLOAT:right;">
<li>About Us</li>
<li>
Claims
<ul class="second-level-menu">
<li>OPS REPORT</li>
<li>LSP DASHBOARD</li>
<li>
ARC REPORT
<ul class="third-level-menu">
<li>REPORT-1</li>
<li>REPORT-2</li>
<li>REPORT-3</li>
<li>REPORT-4</li>
</ul>
</li>
</ul>
</li>
<li>Sales</li>
<li>Underwriter</li>
<li>Finance</li>
</ul>
</div>
</nav>
<div class="vizContainer"></div>
</body>
</html>
Ravi, you need to make your viz objects global, then call the dispose method to destroy the object currently rendered. This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Visualization</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz;
var workbook;
var containerDiv;
function ReportARC() {
//alert("function1");
containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Flights",
options = {
hideTabs: false,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
//workbook = viz.getWorkbook();
}
};
// Create a viz object and embed it in the container div.
viz = new tableau.Viz(containerDiv, url, options);
}
function ReportOPS() {
//alert("function2");
containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Obesity",
options = {
hideTabs: false,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
//workbook = viz.getWorkbook();
}
};
// Create a viz object and embed it in the container div.
viz = new tableau.Viz(containerDiv, url, options);
}
function ReportLSP() {
containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
//workbook = viz.getWorkbook();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function ReportUW() {
containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
//workbook = viz.getWorkbook();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function ReportSales() {
containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
options = {
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
//workbook = viz.getWorkbook();
}
};
// Create a viz object and embed it in the container div.
viz = new tableau.Viz(containerDiv, url, options);
}
function dispose() {
if (viz == null) {
console.log("No Viz has been rendered, so I can't dispose anything");
return;
} else {
viz.dispose();
}
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse" style="background-color:#d9edf7;">
<a class="navbar-brand" href="#">
</a>
<div class="container-fluid">
<ul class="top-level-menu" style="FLOAT:right;">
<li>About Us</li>
<li>
Claims
<ul class="second-level-menu">
<li>OPS REPORT</li>
<li>LSP DASHBOARD</li>
<li>
ARC REPORT
<ul class="third-level-menu">
<li>REPORT-1</li>
<li>REPORT-2</li>
<li>REPORT-3</li>
<li>REPORT-4</li>
</ul>
</li>
</ul>
</li>
<li>Sales</li>
<li>Underwriter</li>
<li>Finance</li>
</ul>
</div>
</nav>
<div class="vizContainer"></div>
</body>
</html>
How can I set the label of a paper-badge with JavaScript?
I have tried this but is does not work:
Polymer.dom(document.getElementById("id_of_tag")).label = "5";
A more complete code snippet is here:
<script type="text/javascript">
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
stompClient = Stomp.over(socket); stompClient.debug = null;
stompClient.connect({}, function(frame) {
stompClient.subscribe("/user/queue",
function(m, h) {
response = JSON.parse(m.body);
badge = Polymer.dom(document.getElementById("notificationsLabel"));
badge.label = "5";
} ,{ "id" : "${currentUserId}" }
);
}, function(e) {
console.log("openWebSocket error", e);
});
</script>
<!-- a lot more stuff -->
<paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>
If you are trying to set it inside a Polymer element prefer
this.$.id.label
or if it's inside a dom-repeat or dom-if
this.$$('#id').label
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="insideBadge" class="myDiv">badge inside element</div>
<paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
<div on-tap="_changeLabel">Click me to change all labels</div>
</template>
</dom-module>
<script>
Polymer({
is: 'accessing-element',
_changeLabel: function() {
this.$.insideOwnDom.label = 2;
var docLevel = document.getElementById('inSameDoc');
docLevel.label = 3;
var anotherElement = document.querySelector('another-element');
var ele = Polymer.dom(anotherElement.root);
var badge = ele.getEffectiveChildNodes()[3];
badge.label = 4;
// or
// anotherElement.label= 4;
}
})
</script>
<dom-module id="another-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
<paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
</template>
</dom-module>
<script>
Polymer({
is: 'another-element',
properties: {
label: {
type: Number,
value: 1
}
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title>Change labels</title>
</head>
<body>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div style="height:100px;"></div>
<div id="docBadge" class="myDiv">badge at same doc level</div>
<paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
<another-element></another-element>
<accessing-element></accessing-element>
</body>
</html>
now that I got a progress bar, I need to know how to make the bar vanish after it's finished loading. If possible, I want it to vanish and then redirect to another website. Thanks for all of the help guys.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Initializing...</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Initializing...</div></div>
</body>
</html>
complete: function() {
this.hide();
window.location.href = "http://stackoverflow.com";
}
I am trying to customise audio tag in HTML5. To play around with controls is easy but is there a way to show and customise the progress bar of the track and volume controller?
Here's an example of javascript controlled audio player that uses css stylable elems:
<!doctype html>
<html lang="en">
<head>
<style>
html, body {padding:50px;}
* {margin:0px;padding:0px;}
#audioWrapper {position:relative;display:inline-block;}
.audioPlayer {position:absolute;left:0px;bottom:0px;
display: block;height:48px;width:400px;}
#playPauseButton {position: absolute;top: 13px;left: 10px;
display:inline;width: 18px;height: 22px;
background: url(/images/player.png) no-repeat -20px -2px;
cursor: pointer;}
#playPauseButton.playing {background-position:0px -2px;}
#playPauseButton:active {top:10px;}
#timeRemaining {position:absolute;top:17px;right:5px;font-size:11px;
font-weight:bold;color:#fff;}
#timeLine {position: absolute;top: 19px;left: 50px;right: 50px;
height: 6px;padding: 2px;border-radius: 5px;background: #546374;}
#slideHandle {position: absolute;top: -6px;left: 0;width: 20px;
height: 20px;margin-left: -10px;
background: url(/images/player.png) no-repeat -39px -3px;
cursor: pointer;}
.audioPlayerBackground {height:400px;width:400px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
function setupAudio(){
var userSetSliderPosition = false;
var audioSliderCreated = false;
if(!!document.createElement('audio').canPlayType) {
var audioElemStr = '<audio><source src="/sound/Mozart_-_Bassoon_Concerto_in_Bb_major_-_Allegro.ogg" type="audio/ogg"></source></audio>';
$(audioElemStr).insertAfter(".audioPlayer #timeRemaining");
audioPlayer = $('.audioPlayer audio').get(0);
slideHandle = $('.audioPlayer #slideHandle');
timeRemainingElem = $('.audioPlayer #timeRemaining');
$("#playPauseButton").click(function() {
if (audioPlayer.paused) { audioPlayer.play(); }
else { audioPlayer.pause(); }
});
$(audioPlayer).bind('play',function() {
$("#playPauseButton").addClass('playing');
}).bind('pause ended', function() {
$("#playPauseButton").removeClass('playing');
});
$(audioPlayer).bind('timeupdate', function() {
var audioPlayerDuration = audioPlayer.duration;
if (!userSetSliderPosition){
var audioPlayerCurrentTime = audioPlayer.currentTime;
var audioPlayerRemainingTime = parseInt(audioPlayerDuration - audioPlayerCurrentTime);
var slideHandlePercentComplete = (audioPlayerCurrentTime / audioPlayerDuration) * 100;
var minutes = parseInt(audioPlayerRemainingTime/60);
var seconds = parseInt(audioPlayerRemainingTime%60);
slideHandle.css({left: slideHandlePercentComplete + '%'});
timeRemainingElem.text(minutes + ':' + (seconds < 10 ? ('0' + seconds) : seconds));
}
if (!audioSliderCreated) {
audioSliderCreated = true;
$('.audioPlayer #timeLine').slider({
max: audioPlayerDuration,
step: 0.01,
animate: "slow",
slide: function() {
userSetSliderPosition = true;
},
stop:function(e,ui) {
userSetSliderPosition = false;
audioPlayer.currentTime = ui.value;
}
});
}
});
}
}
</script>
</head>
<body onload="setupAudio();">
<div id="audioWrapper">
<img class="audioPlayerBackground" alt="" src="/images/spaceJunk.png" />
<div class="audioPlayer">
<div id="playPauseButton"></div>
<div id="timeLine">
<div id="slideHandle" class ="ui-slider-handle"></div>
</div>
<div id="timeRemaining"></div>
<!--audio and source tags will be inserted here, if the browser supports them-->
</div>
</div>
</body>
</html>
You can see an example of it running here: http://www.vdstudios.net/tutorials/html/stylableAudioPlayer.html
I'd recommend playing the audio in the background, control it with your own custom built interface via JavaScript.