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)
Related
I'm using Bootstrap 4 and I have two JS-functions which I want to work together but I can't figure out how..
The first function is for showing the "alt" as caption below images.
The second function is an onClick function which shows the next image by clicking on the image.
My Problem is that when I activate the onClick function and the next image is shown, the "alt" caption doesn't change.
Here is the part of the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row my-row">
<div class="col-md-3 ">
<!--thumbnail container-->
<div class="thumbnailContainer">
</div>
<div class="col-md-9 ">
<!--START MAIN CONTENT-->
<div class="hideMobile">
<div class="d-flex justify-content-center">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid img-overlay" id="expandedImg" style="max-height: 80vh;" onClick="nextImage(this)" src="https://images.pexels.com/photos/12233047/pexels-photo-12233047.jpeg?cs=srgb&dl=pexels-chandan-suman-12233047.jpg&fm=jpg">
</div>
<div class="container expandedImgSize d-flex justify-content-center" id="imgtext">
<figcaption style="color: #999999; font-size: 12px;" class="figure-caption">CAPTION
</figcaption>
</div>
</div>
<!--END MAIN CONTENT-->
</div>
<!--col-md-9-->
</div>
</div>
<!--END Wrapper-->
<script type="text/javascript">
// Data
const imagesArr = [{
image: 'https://media.istockphoto.com/photos/stack-of-books-picture-id157482029?b=1&k=20&m=157482029&s=170667a&w=0&h=EVs9M4nx2kPCdIBYMULaSfj75k-wqjEAsaE8GkLwkbw=',
alt: '<br>Test<br>Test1<br>Test1',
},
{
image: 'https://media.istockphoto.com/photos/large-stack-of-papers-on-a-white-background-picture-id178580846?k=20&m=178580846&s=612x612&w=0&h=agODFyEclthiTCyRGMtKoYDGsXRD0GmVpvJnEPhSQws=',
alt: '<br>Test<br>Test2<br>Test2',
},
{
image: 'https://st2.depositphotos.com/2769299/7314/i/450/depositphotos_73146765-stock-photo-a-stack-of-books-on.jpg',
alt: '<br>Test<br>Test3<br>Test3',
},
];
const createImage = (image, alt, index) => {
return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`;
};
// Logic
const createImages = (images) => {
let final = '';
for (let i = 0; i < images.length; i++) {
const e = images[i];
final += createImage(e.image, e.alt, i);
}
return final;
}
document.addEventListener("DOMContentLoaded", function() {
console.log('Loaded')
const container = document.querySelector('.thumbnailContainer');
container.innerHTML = createImages(imagesArr)
});
const nextImage = (img) => {
const current = +img.getAttribute('currentimage');
if (current < imagesArr.length - 1) {
img.setAttribute('src', imagesArr[current + 1].image)
img.setAttribute('currentimage', current + 1)
}
}
function expandingImage(imgs) {
const expandImg = document.getElementById("expandedImg");
const imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'))
expandImg.parentElement.style.display = "block";
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
this is my first time asking a question on Stack Overflow, any help would be greatly appreciated.
I have a website that displays images from the pixabay api. When i click the button, next, the next page of images is shown. The problem is that with each click, the page slows down at an exponential rate. I know this because i added a success console.log after every completion.
This is the image before:
Image Link Here.
and after
Image Link Here
I think the problem has something to do with the .getJSON call and the for loop inside that call, but I havn't been able to figure it out.
This is the Javascript and HTML
/*
Pixabay api key:
*/
$(document).ready(function () {
var searchValue = "rice"
var defaultPage = 1;
returnPhotos(searchValue, defaultPage);
$("#searchForm").on("submit", function (event) {
//obtain value from user input
searchValue = $("#searchText").val();
returnPhotos(searchValue, defaultPage);
//stops form from submitting to a file
event.preventDefault();
});
});
/*
1. Return Photos from pixabey API
*/
function returnPhotos(searchValue, pageNum) {
let key = "8712269-5b0ee0617ceeb0fd2f84487c3";
let startURL = "https://pixabay.com/api/?key=" + key;
let page = "&page=" + pageNum;
let imagesPerPage = "&per_page=" + 22
let addWH = "&min_width&min_height";
let safeSearch = "&safesearch=true";
let endingURL = "&q=" + searchValue + page + addWH + safeSearch + imagesPerPage;
// activate api and get data
$.getJSON(startURL + endingURL, function (data) {
let image = data.hits;
var imageLength = image.length;
arrayLength = image.length;
if (data) {
let output = ""
for (let x = 0; x < arrayLength; x++) {
//imageObject contains information on each image passed through the array
let imageObject = {
// id: image[x].id,
// pageURL: image[x].pageURL,
// tags: image[x].tags,
// previewURL: image[x].previewURL,
// previewWidth: image[x].previewWidth,
// previewHeight: image[x].previewHeight,
// webformatURL: image[x].webformatURL,
// webformatWidth: image[x].webformatWidth,
// webformatHeight: image[x].webformatHeight,
largeImageURL: image[x].largeImageURL,
// fullHDURL: image[x].fullHDURL,
// views: image[x].views,
// user_id: image[x].user_id,
// user: image[x].user,
// userImageURL: image[x].userImageURL
}
// output this template to the website
output += `
<div class="brick">
<img src="${imageObject.largeImageURL}">
</div>
`
}
$(".masonry").imagesLoaded(function () {
localStorage.clear();
$(".masonry").html(output);
});
console.log("success");
} else {
console.log("Didn't work");
}
getPage(searchValue, pageNum, arrayLength);
// console.log(arrayLength);
});
}
/*
2. INCREASE/Decrease PAGE
*/
function getPage(searchValue, defaultPage, max) {
if (defaultPage <= max + 1) {
$("#pagination2").click(function () {
if (defaultPage <= max) {
defaultPage++;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
$("#pagination1").click(function () {
if (defaultPage != 1) {
defaultPage--;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4z/L/pMLv//j6/f///////v7//6vG8P+lwu//5u76/3ek5/+70fP///////7+/v+wyvH/daLn/9Hg9////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8///////H2vX/CFnU/4yy6v/W4/j/ClvU/4St6f//////y9z2/xVi1v9QiuD/9Pf9////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/9Pf9/z9+3f9Egd7/8/f9/9bj+P8KW9T/hK3p/+7z+/8ob9n/LXLa//D0/P////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ/87e9v+Bqun/CVrU/8zc9v//////1uP4/wpb1P9+qej/ZZfk/xdj1v/J2/X//////////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/jrPr/zB02/8RX9X/e6bo//X4/f/W4/j/ClvU/2+e5v8faNj/oL/u////////////////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/+vz+/6zH8P8EVtP/p8Tv/9bj+P8KW9T/cqDm/yRs2f9ek+P/+fv+//////////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ//D1/P///////v7//xJf1f9vnuX/1uP4/wpb1P+ErOn/nb3t/wdY1P+cvO3//v7//////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8//7+///J2/X/BFbT/5G17P/W4/j/ClvU/4St6f/5+/7/RoLe/xZi1v/e6fn/////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f+au+3/RYLe/xdj1v9bkeL/7/T8/9bk+P8MXNX/ha3q///////W4/f/GmXX/0iE3//1+P3///////////////////////////////////////////////////////////////////////////////////////////+70fP/p8Tv/8fZ9f+jwe//xtn1/8nMz/+Ojo7/vcDG/77S8v/f6fn///////7+/v/P3/b/wNT0//T4/f/////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/f/aWlp/9jY2P9ycnL/29vb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v7+/9LS0v/CwsL/9/f3//r6+v9oaGj/vr6+/2xsbP/f39//7Ozs/729vf/j4+P//v7+//////////////////////////////////////////////////////////////////////////////////////////////////////+7u7v/f39//6CgoP+JiYn//v7+/+Hh4f+pqan/29vb//n5+f9mZmb/qqqq/2xsbP/h4eH//////////////////////////////////////////////////////////////////////////////////////////////////////6urq/+ampr/0NDQ/3d3d//9/f3/rMfw/9nl+P+zzPH/9vb2/2RkZP/c3Nz/eXl5/9jY2P//////////////////////////////////////////////////////////////////////////////////////////////////////9/f3/5mZmf+Li4v/5OTk/+Hr+f+Msuv/ydv1/42y6//u9Pz/ysrK/4aGhv+0tLT//Pz8/////////////////////////////////////////////////////////////////////////////////////////////////////////////Pz8//j4+P/4+v3/XJHi/+Xt+v//////irHq/7nQ8//+/v7/9fX1//7+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////9nZ2f9ra2v/b29v/7e3t//k7fr/bp3l/6C/7v+xyvH//Pz8/42Njf91dXX/eHh4//Dw8P//////////////////////////////////////////////////////////////////////////////////////////////////////o6Oj/7a2tv/t7e3/bW1t//b4/P/U4vf/4Or5/+nw+//z8/P/ZmZm//b29v+FhYX/09PT///////////////////////////////////////////////////////////////////////////////////////////////////////g4OD/eXl5/3l5ef+/v7///Pz8/6Kiov+FhYX/vr6+//39/f+Xl5f/gYGB/4WFhf/z8/P////////////////////////////////////////////////////////////////////////////////////////////////////////////4+Pj/9PT0///////Ozs7/hoaG/97e3v9tbW3/6+vr//39/f/w8PD//f39/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+fn5/9vb2//mpqa/3d3d//09PT//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Dg4P/IyMj/7e3t////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
rel="icon" type="image/x-icon" />
</head>
<body>
<div class="container">
<nav class="nav">
<h1>
<a class="brand-logo" href="index.html">Photo Gallery</a>
</h1>
</nav>
<!-- IMAGE search box-->
<div class="header">
<div>
<h3 class="text-center">Search For Any Image</h3>
<form id="searchForm" autocomplete="off">
<input type="text" class="form-control" id="searchText" placeholder="Search Image Here">
</form>
<h4 class="from-pixabay">Images from Pixabay</h4>
</div>
<div class="paginations">
Previous
<p class="pageNumber">Page 1</p>
Next
</div>
</div>
<!-- IMAGES GO HERE -->
<div class="masonry">
</div>
</div>
<!-- Pre-footer -->
<!--SECTION Contact-Footer -->
<footer class="footer-section" id="contact">
<div class="rows-container">
<div class="footer-con">
<div class="homepage-link">
<a href="http://rkdevelopment.org" target="_blank">
<h3>Rkdevelopment.org</h3>
</a>
</div>
<ul class="social-list center">
<li>
<a href="https://github.com/RexfordK" target="_blank">
<i class="ion-social-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/rexford-koduah" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.freecodecamp.org/rexfordk" target="_blank">
<i class="ion-fireball"></i>
</a>
</li>
</ul>
<p>Copyright © 2018 by Rexford Koduah. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>
Every time you call getPage, you are adding another $("#pagination2").click handler. Which means the first time you click it, you do one ajax request. The second time you do two, the third time you do three, etc. You need to either only setup the click handler once, and make sure your logic reflects that, or clear the old one each time with $("#pagination2").off('click').click(
I am trying to create a responsive one page web application. On clicking the list of items on the side bar you the markers and on the map should animate and display info window. It seems to be working perfect on normal browser layout but when I toggle display to smaller screens or on a mobile device, The click function does not work. The logic seems to be correct. Please help me understand where I am going wrong and what I should do. Thank you.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/knockout-3.4.0.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-xs-12 col-sm-5 col-md-3">
<h1 class="center" > Chennai City Culture </h1>
<div class="input-group col-xs-12 col-sm-6 col-md-12" >
<input id="text-search" type="text" class="form-control" placeholder="Enter here" data-bind="textInput: query">
</div>
<div class= "list-box" data-bind="foreach: filteredItems">
<hr>
</div>
</div>
<div class="col-xs-16 col-sm-6 col-md-8">
<div id="map">
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBf9eFadPLrD3QIQT7ygrYN8aRO5YuAUyE&callback=initMap" onerror="error()">
</script>
</body>
</html>
JS:
function appViewModel(){
var self = this;
this.query = ko.observable('');
this.locationArray = ko.observableArray([]);
locations.forEach(function(item){
self.locationArray().push(item);
});
self.setLoc = function(clickedLoc) {
var clickedData = clickedLoc.marker;
google.maps.event.trigger(clickedData, 'click');
};
self.filteredItems = ko.computed(function(){
var filter = self.query().toLowerCase();
if(!filter){
for (i = 0; i < locations.length; i++) {
if (locations[i].marker) //checks to see that markers exist
locations[i].marker.setVisible(true);
}
return self.locationArray();
}
return this.locationArray().filter(function (item){
var passedFilter = item.title.toLowerCase().indexOf(filter) > -1;
item.marker.setVisible(passedFilter);
return passedFilter;
});
}, self);
}
ko.applyBindings(new appViewModel());
click events aren't the same as touch events; try including a library like touchpunch that will handle those events for you for mobile devices. I had the same issue with a KO app I was building and that seemed to solve it.
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>
I am trying to call newsize(picture_src) after the function resizeimg().
It appears that the function newsize(picture_src) is always called first.
The function resizeimg() has to be called first because it sets the sizepic() function that newsize(picture_src) uses to change the image src.
Here's my html:
<html>
<head>
<meta charset="UTF-8" />
<title>TP n°1 - Mise en place d'une grille responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script>
if(window.innerWidth>1200){
var sizepic='1200';
}
else if(window.innerWidth<1200 && window.innerWidth>900){
var sizepic='990';
}
else if(window.innerWidth<990 && window.innerWidth>768){
var sizepic='768';
}
else if(window.innerWidth<768 && window.innerWidth>590){
var sizepic='590';
}
else if(window.innerWidth<590){
var sizepic='petit';
}
function newsize(picture_src, picture){
picture_src.src=='img/'+sizepic+'/'+picture+sizepic+'.jpg';
alert(picture_src.src);
}
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- 1ère ligne -->
<div class="row">
<div class="col100">
<div class="row">
<div class="col60 cs100">
<div id='september'class="xs-contenu">
<h1>Experience the web</h1>
<p><strong>September 2013 Club Theme</strong></p>
</div>
</div>
<div class="col40 cs100">
<div class="xs-contenu">
<div id='dv-icon'>
<img src='img/1200/iconchat.jpg'>
<img src='img/1200/icontwitter.jpg'>
<img src='img/1200/iconbasket.jpg'>
<img src='img/1200/iconfacebook.jpg'>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2nde ligne -->
<!-- 3ème ligne -->
<div class="row">
<div class='col20 cs50'>
<div class="row">
<div class="col100">
<div class="contenu">
<p class='square'>Design and styled with Ulkit.</p>
</div>
</div>
<div class="col100">
<div class="contenu">
<img onload='newsize(this, 'cube')'src=""/>
</div>
</div>
</div>
</div>
sizepic appears local to resizeimg; picture_src does not set src of img element.
Try this:
Define sizepic outside of and before calling resizeimg().
Remove the onload event from body that calls resizeimg().
Pass this to newsize() (setting picture_src to this). Make sure to set the onload event to null during the function to prevent recursive calls the newsize after setting src of picture_src.
<body>
<script>
// declare variable `sizepic`
var sizepic;
function resizeimg() {
if (window.innerWidth > 1200) {
sizepic = '1200';
alert(sizepic);
} else if (window.innerWidth < 1200 && window.innerWidth > 900) {
sizepic = '990';
} else if (window.innerWidth < 990 && window.innerWidth > 768) {
sizepic = '768';
} else if (window.innerWidth < 768 && window.innerWidth > 590) {
sizepic = '590';
} else if (window.innerWidth < 590) {
sizepic = 'petit';
}
console.log("resizeimg called")
};
// call `resizeimg` here
resizeimg();
function newsize(picture_src) {
picture_src.src ="http://lorempixel.com/" + sizepic + "/" + sizepic;
console.log("newsize called", picture_src, event);
// remove `onload` event from `picture_src`
picture_src.onload = null;
}
</script>
<img onload="newsize(this)" src="http://lorempixel.com/1/1/" />
</body>