Scroll to top JavaScript in HTML Website - javascript

I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.
The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.
Here is the javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
HTML Code (Head Tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--back to top links-->
<link rel="stylesheet" type="text/css" href="back_to_top.css">
<script src="/scripts/back_to_top.js" type="text/javascript"></script>
<!--end of back to top links-->
<meta property="fb:admins" content="{793705343}"/>
<!--Google Analytics-->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
ga('send', 'pageview');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Arrow Tv Show">
<meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
<!--IPAD setting-->
<meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5, maximum-scale = 1.25"/>
</head>
CSS Code:
#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}
#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
Please feel free and let me know if you require further code or information.
Thanks

Try this and let me know if it is not working:
<!DOCTYPE html>
<html>
<head>
<style>
input.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
<script>
function scrollWindow()
{
window.scrollTo(0,0);
}
</script>
</head>
<body>
<br>
<input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
<br>
</body>
</html>

You can do the same thing with below code:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Try this. Hope it helps.

You could do something like this:
JSFiddle demo
$(window).scroll(function() {
// if you have scrolled down more than 200px
if($(this).scrollTop() > 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').bind('click', function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},800);
});

The problem is that your javascript file is actually written in HTML.
In your HTML head section, you should have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/back_to_top.js" type="text/javascript"></script>
Then your back_to_top.js should contain only the following:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});

Related

Progress bar not redirecting to another page and not disappearing

There is a variation of threads on this topic but unfortunately none appears to address my issue.
Our progress bar is design to display when page loads and this progress bar is doing just that.
The issue is that after showing progress bar briefly, user is supposed to be redirected to another page called classes.aspx.
This is not happening. The progress bar does not disappear and does not redirect to another page.
Any ideas what I am missing?
Below is the exact code I am using.
//HTML
<%# Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Class Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$(window).load(function () {
ShowProgress();
});
</script>
<link rel="shortcut icon" href="~/images/favicon.ico" />
<style type="text/css">
.modal {
position:relative;
top:-1em;
z-index:100;
}
.loading{
font-family: Arial;
font-size: 10pt;
width: 200px;
height: 100px;
display: none;
position: fixed;
margin-top:400px;
margin-left: 0px;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="loading" style="margin-top:100px;margin: auto;">
Loading. Please wait.<br />
<br />
<img src="images/loader.gif" alt="" />
</div>
</form>
</body>
</html>
//VB
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Threading
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class Main
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs)
Response.Redirect("classes.aspx")
End Sub
End Class
Thanks in advance

angular-ui-layout - resize doesn't work properly with an iframe

As you can see in the example, resizing doesn't work properly when using an iframe. You can move the splitter to the left, but not to the right. Does anybody know why this is and how it could be fixed?
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container size="50%" class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>
The problem seems to be that the iframe steals the focus. I managed to prevent this by adding an overlay div while moving the split bar.
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ng-controller="AppController">
<div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
class AppController {
constructor($document, $element, $scope) {
this.$document = $document;
this.$element = $element;
this.$scope = $scope;
this.mouseDown = this.mouseDown.bind(this);
this.mouseUp = this.mouseUp.bind(this);
this.$scope.$on("ui.layout.loaded", () => {
this.splitter = this.$element.find(".ui-splitbar");
this.splitter.on("mousedown", this.mouseDown);
});
this.overlay = angular.element("<div></div>");
this.overlay.css({
width: "100%",
height: "100%",
"z-index": 1,
position: "absolute",
top: 0,
left: 0
});
}
mouseDown() {
if (!this.splitViewContainer) {
this.splitViewContainer = this.$element.find("#splitViewContainer");
}
this.splitViewContainer.append(this.overlay);
this.$document.one("mouseup", this.mouseUp);
}
mouseUp() {
this.overlay.remove();
}
}
const app = angular.module("x", ["ui.layout"]);
app.controller("AppController", AppController);
</script>
</body>
</html>

How to get mouse position from a iframe that contains a page?

I want to get mouse position from an IFRAME that contains a HTML page .
But before Iframe HTML page load , this code work nice .
After loading Iframe HTML page , this code don't work !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<style>
#divid {
height: 600px;
width: 300px;
border: 2px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<iframe id="iframe" src="http://www.google.com/" >
</iframe>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
</script>
</body>
</html>
can you help me please ?

Missing Images on print

I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>

Detect human faces in an immersive panorama image

Is this possible to use a jQuery face-detection plugin (I'm using this)
to detect human faces in an immersive 360 panorama image (I've used krpano 1.19-pr5 (build 2016-05-24) tools (demo version) to build the panorama files and krpano html5 viewer for rendering. You can download the whole package from here)?
The face-detection plugin works fine with simple 2D images and HTML5 canvases. The krpano viewer also renders the target panorama tiles in a canvas. Below is the code for the html file that renders the panorama image in browser.
<!DOCTYPE html>
<html>
<head>
<title>krpano - test_pano_3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
#-ms-viewport { width:device-width; }
#media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
Try It
<script src="test_pano_3.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"test_pano_3.swf", xml:"test_pano_3.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});
</script>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.facedetection.js"></script>
<script>
$(function () {
"use strict";
$('#try-it').click(function (e) {
e.preventDefault();
$('.face').remove();
var canvas = $("#krpanoSWFObject").find("canvas")[0];
$(canvas).faceDetection({
complete: function (faces) {
console.log(faces);
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'face',
'css': {
'position': 'absolute',
'left': faces[i].x * faces[i].scaleX + 'px',
'top': faces[i].y * faces[i].scaleY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
},
error:function (code, message) {
alert('Error: ' + message);
}
});
});
});
</script>
</body>
</html>
This:
var canvas = $("#krpanoSWFObject").find("canvas")[0];
should not work as find is not implemented in KRpano plugin. You should try this instead:
var canvas = $("#krpanoSWFObject canvas");
that returns the canvas element :)
Regards,

Categories