Imagine having a webpage structured like this:
<header>...</header>
<body>
<section id="A">...</section>
<section id="B">...</section>
<section id="B2">...</section>
<section id="C">...</section>
</body>
<footer>...</footer>
How can we implement horizontal scrolling to view section B2 when section B is in focus, without affecting the other sections' visibility?
We would greatly appreciate any insights or suggestions on achieving this functionality.
Thank you!
Hopefully, by diving into the comments, you'll grasp the reasoning behind my actions :)
Outcome: http://jsfiddle.net/Tymek/8kvk91kz/
This is My HTML:
<head></head>
<body>
<article>
<header>…</header>
<section id="A">…</section>
<div class="wrap">
<div class="pan">
<section id="B">…</section>
<section id="B2">…</section>
</div>
</div>
<section id="C">…</section>
<footer>…</footer>
</article>
</body>
Here's the SCSS styling:
article.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
}
article {
section {
position: relative;
padding-bottom: 2em;
float: left;
width: 100%;
}
.wrap {
width: 100%;
overflow: hidden;
position: relative;
.pan {
width: 200%; /* <- Space for two sections here */
position: relative;
section {
width: 50%;
}
}
}
footer {
padding-bottom: 1em;
}
}
Lastly, let's delve into the 24 lines of jQuery-infused JavaScript:
$(document).ready(function(){
var h = $(window).height(),
pan = $(".pan").width()/2,
offset = Math.abs(h - $(".wrap").height()) / 2,
start = $(".wrap").offset().top - offset,
stop = start + pan;
$("body").css("height", $("body").height() + pan + "px");
$("article").addClass("fixed"); // Commandeering the Scroll
$(window).scroll(function(e){
var scroll = $(this).scrollTop();
if(scroll < start){ // Above horizontal section
$("article").css("margin-top", 0-scroll);
$(".pan").css("margin-left", 0);
} else {
if(scroll <= stop){ // Horizontally Scrolling
$("article").css("margin-top", 0-start);
$(".pan").css("margin-left", 0-scroll+start);
} else { // Below horizontal section
$("article").css("margin-top", 0-scroll+pan);
$(".pan").css("margin-left", 0-pan);
}
}
});
});
I fine-tuned the scrolling mechanism.
Utilizing the Scroll Path Plugin allows for a unique scrolling experience on your website.
To learn more about it, visit this link:
If you're looking to arrange your sections in a grid layout, consider the following setup:
A (blank)
B B2
C (blank)
To achieve this layout, apply CSS to position B2 relative to the right side and enclose both B and B2 within a <div> element to maintain their alignment in the document. You may need to rearrange the order of the sections slightly for better flow. Refer to the code snippet below for guidance.
<section id="A">...</section>
<div>
<section id="B2" style="float:right">...</section>
<section id="B">...</section>
</div>
<section id="C">...</section>
Additionally, ensure that the widths of sections A, B, and C span the entire width of your reading area. This way, B2 will extend beyond the reading area, allowing scrolling. Keep in mind that a horizontal scrollbar will always be present with a blank space on the right when near sections A or C. If this isn't satisfactory, consider using JavaScript to toggle the visibility of the B2 section as needed.
The code below is functioning correctly. obj = { go: function() { alert(this) } } obj.go(); // object (obj.go)(); // object (a = obj.go)(); // window (0 || obj.go)(); // window However, an error arises when I comment out the first two lines. obj ...
There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...
My goal is to separate various headlines (along with their images) by using a bottom-border. I attempted this, but instead of putting a border between headlines, it ends up on the image. Using jQuery $(document).ready(function() { $.ajax({ url: "h ...
Currently, I am utilizing Laravel 5.7 and VueJs 2.5.* in my project. The issue I am facing is related to a Bootstrap Model that I use for creating and editing TicketInvoice and its associated TicketInvocieItems. When I try to edit, the Bootstrap Model open ...
Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...
I've been delving into the concept of the "combination selector" by referring to resources on MDN. This selector involves selecting elements that match both criteria A and B simultaneously when they are placed together. Can someone shed some light on ...
I recently came across a sample demonstrating routing in AngularJS. I am curious about the connection between the dependency 'ngRoute' and the module mainApp, as shown in the syntax var mainApp = angular.module("mainApp", ['ngRoute']);. ...
I am currently utilizing Tailwind CSS in conjunction with next.js for my project. I have a total of 8 images, each varying in size, and my goal is to display 4 images per row on medium and large devices, while displaying 2 images per row on small devices. ...
Having transitioned from the world of Java to working with Node.js + AngularJS for my current project, I have encountered a dilemma. There are certain "key Strings" that are used frequently in both client and server-side code. In Java, it is common practi ...
I'm facing an issue with my dynamic array "slots" of objects which looks something like this: [{"availability": 1},{"availability": 3}] I render multiple inputs in Vue.js using v-for like so: <div v-for="slot in array"><input v-model="slot.av ...
I need to include a plotline in the legend. Check out my example here. $('#container').highcharts({ xAxis: { tickInterval: 24 * 3600 * 1000, // one day type: 'datetime' }, yAxis: { plotLines: ...
According to the information found at https://v2.vuejs.org/v2/guide/events.html#exact-Modifier, I am attempting to build an element that triggers different methods based on additional keys pressed at the time of clicking. <span @click.exact="method ...
I am trying to position an image at the end of a sentence within a div element. No matter what I try, the image always appears next to the end of my text. Here is the code I am using: <div id='xi' class='xc'>Text comes here and ...
Can a html value be permanently modified using javascript? I am trying to edit a local file. Below are the codes I'm using: function switchPic(){ top.topPage.activeDef = top.topPage.document.getElementById('h1'); top.topPage.activeDef. ...
In my search bar layout, the main parent component consists of three child components - location dropdown, date picker (calendar), and duration dropdown. By default, the user's location is pre-selected in the location dropdown. I want the focus to shi ...
I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...
When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...
I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...
Is there a straightforward way to retrieve JSON data using jQuery? I have valid JSON that needs to be pulled efficiently. The JSON output looks like this: { "title": "blog entries", "items" : [ { "title": "Can Members of the D ...
I recently started using ES6 class for defining my controller, and here is the syntax I am using: export class SearchBarController { constructor($log) { 'ngInject'; $log.debug("Hello"); } textTyped($log){ $ ...