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";
}
Related
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 need to update calendar with some date highlighted, it's highlighting on initially if I call the function Highlight() where as it's not highlighting when I click the button and try to highlight. What could be the issue.
function Highlight() {
jQuery_cal('.calendar').datepicker('remove');
var eventDates = {};
eventDates[new Date('06/04/2018')] = new Date('06/04/2018');
eventDates[new Date('06/06/2018')] = new Date('06/06/2018');
eventDates[new Date('06/20/2018')] = new Date('06/20/2018');
eventDates[new Date('06/25/2018')] = new Date('06/25/2018');
setUPRecordingCalendar(eventDates);
}
setUPRecordingCalendar({});
//Highlight();
function setUPRecordingCalendar(eventDates) {
// datepicker
jQuery_cal('#calendar').datepicker({
beforeShowDay: function(date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", highlight];
} else {
return [true, '', ''];
}
}
});
}
.event a {
background-color: #42B373 !important;
background-image: none !important;
color: #ffffff !important;
}
.ui-datepicker {
font-size: 12px;
margin: 0 0 0 20px;
}
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>
<script type="text/javascript">
var jQuery_cal = $.noConflict(true);
</script>
<div id="demo">
<div style="width:300px;height:225px;" id="calendar"> </div>
</div>
<button onclick="Highlight()"> Highlight</button>
</body>
</html>
Here is the fiddle link https://jsfiddle.net/20tszxbz/
I am working on a pdf viewer in angular and I want to display a div on top of a dynamic object. The div displays above the object in every browser but IE. To see this in action here is a plunker : http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview .
You'll see that it works fine in Chrome, and FireFox but not in IE. Any help would be nice. or even a point in the right direction.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.documentSrc = "http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf";
$scope.frameSrc = $sce.trustAsHtml($scope.documentSrc);
$scope.frameCode = $sce.trustAsHtml('<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" type="application/pdf"></object>');
$scope.display = false;
$scope.changeDoc = function(){
$scope.documentSrc = 'https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf';
};
$scope.changeDocAgain = function (){
$scope.documentSrc = 'http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}})
.directive('embedSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.embedSrc;
},
function() {
element.attr('src', attrs.embedSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<object data="' + newValue + '" type="application/pdf"></object>');
});
}
};
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="documentSrc"></dynamic-object>
style.css
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
.pdfView{
height: 710px;
width :100%;
z-index : 50;
}
Above is the demo code used in plunker as an example. The below code is what i have in my project.
.directive('objectReloadable', function ($rootScope) {
var link = function (scope, element, attrs) {
var currentElement = element;
var watchFunction = function () {
return scope.searchCriteriaService.documentSrc;
};
var updateHTML = function (newValue) {
scope.searchCriteriaService.documentSrc = newValue;
var html = '';
if (attrs.datatype == 'pdf') {
html = '<iframe type="application/pdf" src="' + newValue + '" class="mp-document-size" ></iframe>';
} else if (attrs.datatype == 'html') {
html = '<object data="' + newValue + '" type="text/html" class="mp-document-size"></object>';
} else {
html = '<img src="' + newValue + '" width="100%" style="overflow:scroll"/>'
}
var replacementElement = angular.element(html);
currentElement.replaceWith(replacementElement);
currentElement = replacementElement;
};
scope.$watch(watchFunction, function (newValue, oldValue) {
if (newValue !== oldValue) {
updateHTML(newValue);
}
});
if (scope.searchCriteriaService.documentSrc) {
updateHTML(scope.searchCriteriaService.documentSrc);
}
};
return {
restrict: 'E',
scope: false,
link: link
};
})
The following is the smallest working app.js I could make. It uses an iframe and Google Docs viewer to work, found here and here.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.iframeSrc = "http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true";
$scope.display = false;
$scope.changeDoc = function(){
$scope.iframeSrc = 'http://docs.google.com/gview?url=https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf&embedded=true';
};
$scope.changeDocAgain = function (){
$scope.iframeSrc = 'http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}
})
.directive('iframeSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.iframeSrc;
},
function() {
element.attr('src', attrs.iframeSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<iframe src="' + newValue + '" type="application/pdf"></iframe>');
});
}
};
});
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="iframeSrc"></dynamic-object>
</body>
</html>
I'm new to use Kendoui, HTML 5 for web , i have create one small Demo app in html 5,in this i need to change the Theme by dynamically , means when i select the color from Combo-box or Drop-down it should be apply for entire page. I searched in Google but i did not get right solution , please guide me how to do .
Here is the code what fallow sample .
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" typ e="text/css" />
<script src="Scripts/kendo/2013.2.716/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
<style>
html, body
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.5 Tahoma,sans-serif;
padding: 2em;
}
span.themeChooser
{
float: right;
}
#tree
{
height: 9em;
}
</style>
</head>
<body class="k-content">
<div id="example" class="k-content">
<input class="themeChooser" value="default" />
<div id="tree">
</div>
<p>
Note: in order for the whole page to be styled, the <body> element has a <code>
k-content</code> class.</p>
</div>
<script>
$(function () {
$("#themeChooser").kendoDropDownList({
dataSource: [
{ text: "Black", value: "black" },
{ text: "Blue Opal", value: "blueopal" },
{ text: "Default", value: "default" },
{ text: "Metro", value: "metro" },
{ text: "Silver", value: "silver" }
],
change: function (e) {
var theme = (this.value() || "default").toLowerCase();
changeTheme(theme);
}
});
// sample widget on the page
$("#tree").kendoTreeView({
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar", selected: true }
]
},
{ text: "baz" }
]
});
// loads new stylesheet
function changeTheme(skinName, animate) {
var doc = document,
kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
commonLink = kendoLinks.filter("[href*='kendo.common']"),
skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
href = location.href,
skinRegex = /kendo\.\w+(\.min)?\.css/i,
extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension),
exampleElement = $("#example");
function preloadStylesheet(file, callback) {
var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
setTimeout(function () {
callback();
element.remove();
}, 100);
}
function replaceTheme() {
var oldSkinName = $(doc).data("kendoSkin"),
newLink;
if ($.browser.msie) {
newLink = doc.createStyleSheet(url);
} else {
newLink = skinLink.eq(0).clone().attr("href", url);
}
newLink.insertBefore(skinLink[0]);
skinLink.remove();
$(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
}
if (animate) {
preloadStylesheet(url, replaceTheme);
} else {
replaceTheme();
}
}
});
</script>
Thank you .
How would I add a progress bar to my website, that looks like the one on this website?
Progress Example
It looks like the Apple one!
<progress max="Maximum Value" value="Initial Value" />
See this for more details.
Note that this only works for browsers that support HTML5.
You can use jQuery instead. There in no restriction of HTML5. Also you can apply styles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Custom Label</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">Loading...</div></div>
</body>
</html>
Source code available here http://jqueryui.com/progressbar/