Scroll to anchor JS not working - javascript

So what I try to achieve is as the title says. I've gone through quite many threads and websites so far, but just can not get it working.
I can somehow see different scripts working when they have the time it takes to scroll editable. It just doesn't scroll smoothly, it jumps to the anchor after that time.
What I am currently using:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var hashTagActive = "";
$(".scroll").click(function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 2000, 'swing', function(){
hashTagActive = "";
});
hashTagActive = this.hash;
}
});
});
</script>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Tervetuloa</li>
<li>Sivupohjia</li>
<li>Tilaa sivut</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
</ul>
</div>
<div class="container">
<div class="wrapper">
<div class="content_primary">
<a name="1" id="1"></a>
<h3>Tervetuloa</h3>
<p>Tekstiä</p>
</div>
</div>
<div class="wrapper">
<div class="content_secondary">
<a name="2" id="2"></a>
<h3>Sivupohjia</h3>
<p>Tulossa</p>
</div>
</div>
<div class="wrapper">
<div class="content_primary">
<a name="3" id="3"></a>
<h3>Tilaa</h3>
<p>Tekstiä</p>
</div>
</div>
</div>
<div class="footer">
<p>© Marko Ahola</p>
</div>
</body>
</html>
I simply have no idea where to go from here. I have no experience in this, I'm just a hobbyist. Any help is appreciated.
I have the website running on a Raspberry PI and Apache2.

You forgot to add your class name scroll to your first three anchor tags that you want smooth scrolling
<li>Tervetuloa</li>
<li>Sivupohjia</li>
<li>Tilaa sivut</li>
Snippet below
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var hashTagActive = "";
$(".scroll").click(function(event) {
if (hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 2000, 'swing', function() {
hashTagActive = "";
});
hashTagActive = this.hash;
}
});
});
</script>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Tervetuloa</li>
<li>Sivupohjia</li>
<li>Tilaa sivut</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
<li>Linkki</li>
</ul>
</div>
<div class="container">
<div class="wrapper">
<div class="content_primary">
<a name="1" id="1"></a>
<h3>Tervetuloa</h3>
<p>Tekstiä</p>
</div>
</div>
<div class="wrapper">
<div class="content_secondary">
<a name="2" id="2"></a>
<h3>Sivupohjia</h3>
<p>Tulossa</p>
</div>
</div>
<div class="wrapper">
<div class="content_primary">
<a name="3" id="3"></a>
<h3>Tilaa</h3>
<p>Tekstiä</p>
</div>
</div>
</div>
<div class="footer">
<p>© Marko Ahola</p>
</div>
</body>
</html>

Related

Making JS items links to other pages

So I'm using some code from CodePen to make my nagivation buttons as well as my cursor. All of the button creation seems to happen within the JavaScript file, however. I want to add links to each of the buttons to redirect to separate HTML pages. I'm hoping to find a way to do it within the JS file, but all solutions are welcome!
Also, I'm aware this may be a very silly question but I'm still new to web development so bear with me! I'm going to post snippets of the HTML and JS files. I can't include the CSS snippet because the file is much too large.
The website is ryanhursh.xyz for reference of how it's built.
const app = Vue.createApp({
data() {
return {
items: [{ page: "about" }, { page: "works" }, { page: "contact" }],
cursorPosX: 960,
cursorPosY: 540,
cursorFollowActiveBuffer: 16,
buttonHoverFlag: false
};
},
mounted() {
this.cursorPointer = this.$refs.cursorPointer;
this.cursorFollow = this.$refs.cursorFollow;
this.button = document.querySelectorAll(".js-button");
window.addEventListener("mousemove", (e) => {
if (this.buttonHoverFlag === true) {
return;
}
this.mouseMoveCursor(this.cursorPointer, e, 1.0);
this.mouseMoveCursor(this.cursorFollow, e, 1.0);
});
this.onMouseMove();
this.onMouseLeave();
},
methods: {
mouseMoveCursor(element, event, friction) {
this.cursorPosX += (event.clientX - this.cursorPosX) * friction;
this.cursorPosY += (event.clientY - this.cursorPosY) * friction;
element.style.transform = `translate(${
this.cursorPosX - element.clientWidth / 2
}px,${this.cursorPosY - element.clientHeight / 2}px)`;
},
onMouseMove() {
for (let i = 0; i < this.button.length; i++) {
this.button[i].addEventListener("mousemove", (e) => {
this.buttonHoverFlag = true;
this.cursorPointer.style.backgroundColor = "transparent";
this.cursorFollow.style.transform = `translate(${
e.target.getBoundingClientRect().left -
this.cursorFollowActiveBuffer
}px,${
e.target.getBoundingClientRect().top - this.cursorFollowActiveBuffer
}px)`;
this.cursorFollow.style.width =
e.target.getBoundingClientRect().width + "px";
this.cursorFollow.style.height =
e.target.getBoundingClientRect().height + "px";
this.cursorFollow.style.padding =
this.cursorFollowActiveBuffer + "px";
this.cursorFollow.style.borderRadius = 0;
});
}
},
onMouseLeave() {
for (let i = 0; i < this.button.length; i++) {
this.button[i].addEventListener("mouseleave", () => {
this.buttonHoverFlag = false;
this.cursorPointer.style.backgroundColor = "#fff";
this.cursorFollow.style.width = 10 + "px";
this.cursorFollow.style.height = 10 + "px";
this.cursorFollow.style.padding = 32 + "px";
this.cursorFollow.style.borderRadius = "100%";
});
}
}
}
});
app.mount("#app");
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ryan R. Hursh</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="app">
<header class="header">
<nav class="header__nav">
<ul class="header__list">
<li v-for="item in items" class="header__item"><a class="button js-button">{{ item.page }}</a></li>
</ul>
</nav>
</header>
<div class="cursor">
<div class="cursor__pointer" ref="cursorPointer"></div>
<div class="cursor__follow" ref="cursorFollow"></div>
</div>
</div>
</head>
<!-- content-->
<body>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!--
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
-->
<div id='title'>
<span>
Ryan R. Hursh
</span>
<br>
<span>
HTML, CSS, JavaScript
</span>
</div>
<!-- end content-->
<!-- embedded scripts -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://unpkg.com/vue#next'></script>
<script src="./script.js"></script>
</script>
<!-- end scripts -->
</body>
</html>
For buttons that take you to other HTML pages, you can just do:
Html:
<button id="whateveruwant" onclick="whateverfunctionuwant()">text here</button>
The JS is also simple:
function whateverfunctionuwant() {
location.href = "whateverhtmlpageuwant.html"
}
So then the button will direct you to a different HTML page. If Location doesn't work, try Window.href. The Id is for CSS purposes if you wanted to change its appearance and location of it. If you still don't understand, then just go to W3 Schools and search for how to make a button change to another HTML page. (BTW JUST CHANGE THE STUFF THAT I LEFT AS WHATEVER FUNCTION U WANT TO WHAT YOU WANT)

Is there a way to change the href of an a tag with javascript

I need to change the href of the a tag with id="cont".
The code I've got so far.(I was told to post the whole code here)
HTML:
<html>
<head>
<title>Adventure Game</title>
<link rel="stylesheet" href="../../styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="../../js/main.js"></script>
<script src="../../js/knightClass.js"></script>
<script src="../../js/choices.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<i class="fa fa-fw fa-home"></i>Home
How 2 Play
<div>
<button onclick="goBack()">Back</button>
</div>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()"><div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</span>
<div id="main">
<h1 class="header"><b>Stage 2 - Knight1</b></h1>
<div id="options" class="option hide">
<a id="cont" href="#">Continue</a>
<!--Hero
Paladin
Holy Knight
Assassin-->
</div>
</div>
</body>
</html>
JavaScript
window.onload=function(){
setTimeout(knight,1);
}
function knight(){
let rand=Math.floor(Math.random() * 10) + 1;
var cont=document.getElementById("cont");
if (rand==10){
cont.href("hero/hero1.html");
} else if (rand>=7){
cont.href("paladin/paladin1.html");
} else if (rand>=3){
cont.href("holyKnight/holyKnight1.html");
} else if (rand<3){
cont.href("assassin/assassin.html");
}
}
1.Change 2.Go
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>
Ref Link

Using tag key to insert text and change the size of text in Web application

I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.

Dynamic load Panel with PageContainer

I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>

reduce <DIV> width when external page loaded in same page

Am using the following code to load external in same page,in <div id="menu"> i have menu and when option is clicked external page will be loaded inside <div class="page"></div>
menu width is 25%
page is 70%
Now how do i change width of <div id="menu"> to 10% when external page is loaded
FULL CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#menu{width:25%;background-color:beige;float: left}
.page{width: 70%;height:200px;float: left;background-color: #99ffff}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div id="leftmenu">
<ul id="leftmenuidfrmslt">
<li><span class="flaticon-smart"></span><text> Mobile & Tablet</text>
<ul>
<li><a class="reveal" href="postpage/mobile.php">Ξ Mobile Phones</a></li>
<li><a class="reveal" href="postpage/tablet.php">Ξ Tablets</a></li>
<li><a class="reveal" href="postpage/mobileaccessories.php">Ξ Mobile Accessories</a></li>
</ul>
</li>
</div>
<div class="page"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.reveal').on('click', function(e) {
e.preventDefault();
var link = $(this).attr('href');
$('.page').load(link);
$('#leftmenu').css('width', '70px');
$("#leftmenu text").hide();
$('#leftmenu').off("click");
$(this).show();
});
});
</script>
</body>
</html>
change width using jquery css $('#menu').css('width', '10%');
$(document).ready(function() {
$('.reveal').on('click', function(e) {
e.preventDefault();
var link = $(this).attr('href');
$('.page').load(link);
$('#menu').css('width', '10%');
$(this).show();
});

Categories