As I design my website, I have a vision of incorporating fixed-type links at the bottom. These links would allow visitors to navigate through the page by moving one picture down with each click. Additionally, I want the ability for users to scroll seamlessly without visible scroll bars. This feature would enable users to move up and down the page effortlessly without any indication of their current location on the site.
My suggestion would be to create a comprehensive HTML container and then dynamically move child content based on user events. For instance, you can trigger the same event by onClick of 'fixed-type' links or onScroll of the window.
Here is an example:
<div id="container">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="links">
<a href="0" class="contentLink">link 1</a> |
<a href="1" class="contentLink">link 2</a> |
<a href="2" class="contentLink">link 3</a> |
<a href="3" class="contentLink">link 4</a>
</div>
</div>
CSS:
#container, #content1, #content2, #content3, #content4 {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
overflow: hidden;
z-index: 1;
}
#content1 { top: 0%; background: green; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }
#links {
position: absolute;
bottom: 10px; left: 10px;
z-index: 2;
}
JS:
$(function() {
var currentPos = 0,
scrollDirection;
$(".contentLink").click(function(evt) {
evt.preventDefault();
var newPos = $(this).attr("href");
if (newPos > currentPos) {
$("#content1, #content2, #content3, #content4").animate({
top: "-=" + ((newPos-currentPos) * 100) + "%"
}, 1000);
} else if (newPos < currentPos) {
$("#content1, #content2, #content3, #content4").animate({
top: "+=" + ((currentPos-newPos) * 100) + "%"
}, 1000);
}
currentPos = newPos;
});
});
I hope this solution proves helpful!
I have a webpage named index.php. This page is designed to implement infinite scrolling using AJAX, PHP, and MySQL. The PHP MySQL codes are located at the top while JavaScript is placed at the bottom. I am trying to display the total number of rows in th ...
The issue arises in the "addToWishlist" function as I attempt to concatenate the result of the outer observable with the inner observable array and then call the next method on the inner observable. The "addToWishlist" method is triggered by the click ha ...
When the two script statements below are combined, they cause an error: "Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter." Can someone explain why this happens? 1st segment Find Person: <input type="text" ng-m ...
Can external JSON Data be linked within JSFiddle? Here is the code snippet I'm using to fetch the JSON Data: var xhr = new XMLHttpRequest(); xhr.open('GET', url: 'www.myurl.com/js/data/data.json', true); xhr.send(null); I have ...
I have a project in Ruby on Rails that showcases illustrations. The top of the page features category links that fade out the current illustrations, replace them with new content, and then fade back in. Currently, I am utilizing jQuery version 1.6.2 for t ...
I am working on a feature where I need to store data in local storage multiple times using a dropdown menu and some input fields. Currently, I am able to retrieve all the values from the input fields and see them in the console log. My goal is to save thes ...
I am currently working on displaying images upon mouse over actions. While the functionality is working perfectly, I am facing an issue where the displayed images appear below and the last image takes up space at the bottom. To rectify this problem, I woul ...
Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...
<div class="content"> <div> <input type="text" name="newname[name]0"/> <div> <input type="text" name="newname[utility]0"/> <div> <textarea name="newname[text]0 ...
I currently have a Wix website along with a customer portal hosted on a separate platform. My goal is for customers to seamlessly log in to my website and be redirected straight to the customer portal without encountering an additional login screen. Behin ...
Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...
After attempting to divide my code into modules, I encountered the following error: Error: Query root type must be provided. at assertValidSchema (C:\Users\aironsid\Documents\tatooify\server\node_modules\graphql\ ...
I'm encountering a bit of a challenge with this task... My javascript skills are a bit rusty, and I can't seem to pinpoint what's going wrong. My goal is to have a navbar that disappears when a user clicks on a small arrow, revealing a seco ...
When I declare an array on an @Injectable provider, my intention is to use it across different components. normeList: any[] = [ { name: 'choice 1', type:'false' }, { name: 'choice 2', typ ...
Hello, I am new to Django and I have been searching for tutorials on how to style Django forms without using Bootstrap. Is it possible to style Django forms using pure CSS without Bootstrap? If so, could you please provide some examples? I prefer not to u ...
I've been working on a React web application in Typescript that involves loading a tensorflow.js model and then applying it each time the component updates. While I successfully implemented this in a small demo app without React, I am facing some chal ...
I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...
Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...
<body> <%@page import="java.sql.*" %> <%@page import="javax.sql.*" %> <% String user=request.getParameter("username"); session.putValue("uname",user); String pass=request.getParameter("pass"); ...
Having difficulty with a piece of jQuery code due to lack of sleep or misunderstanding. Seeking help from the community for a solution! The issue is with a jQuery function that should be executed on an element's onClick attribute: <div id="next" ...