What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. I have attempted using "position:fixed" in the CSS, but it results in the text appearing on every slide, whereas I require different text for each individual slide.

The HTML code snippet is as follows:


    <body>
<div class="section" id="section1">
    <div class="slide" id="slide1"><img src="imgs/Lowe-Clothing-logo.png" width="30%">
            <div id="left-text">Business Opportunities</div><!--left-text-->
  <div id="right-text">Introduction</div><!--right-text--></div><!--Slide1-->
    <div class="slide" id="slide2"><h1>Totally customizable</h1></div><!--Slide2-->
</div>


</body>

Here is the relevant CSS code:

#left-text{
    position: absolute;
    top: 50%;
    left: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
 }

 #right-text{
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
    z-index:100;
 }

I am striving to align the text with the arrows while ensuring smooth transitions between content sections. Additionally, I aim to have unique text displayed next to the arrows on each page. For further examination, you can download the complete site here.

Your advice and assistance would be highly appreciated. Thank you, Rob

Answer №1

Begin by using a single type of CSS unit, such as pixels or em, for consistency.

After implementing this change, experiment with relative and absolute units to see if it produces the desired effect.

Answer №2

It seems like there may be a flaw in the logic here.

Consider using position: relative instead of fixed or absolute and setting top, left, and right to auto or a percentage value.

The crucial element is making sure the position, top, left, and right properties work harmoniously together.

Answer №3

To customize the text for each slide, utilize the plugin's callback functions. For example, you can use the afterSlideLoad callback.

This allows you to dynamically change the text on each slide using jQuery. Here's an example:

$('textLeft').text('demo');
$('textRight').text('demo');

To ensure proper positioning of the text, consider using absolute positioning since the sections have a position:relative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to Export HTML to Document without any borders or colorful text

How can I make a contentEditable area visible when filling text and then disappear when exporting the document? I found a script online that allows you to do this, but the issue is that the contentEditable area is not visible until clicked on. To address t ...

What is the process for marking a form field as invalid?

Is it possible to validate the length of a field after removing its mask using text-mask from here? The problem is that the property "minLength" doesn't work with the mask. How can I mark this form field as invalid if it fails my custom validation met ...

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

How to retrieve headers using Express.js middleware

My middleware creates authentication API keys that are then added to the header. const loger = require("easy-loger"); require('dotenv').config(); function authMiddleware(req, res, next){ const appApiKey = process.env.API_KEY; l ...

The functionality of react-router-dom's NavLink isActive feature seems to be unreliable

We are currently immersed in a React.js project. I am in the process of setting up multiple pages using react-router-dom and my goal is to alter the active icon by using NavLink. The icon+sel signifies the active page. render() { const oddEvent = (mat ...

What is the best way to incorporate an icon into my HTML search bar?

I'm having trouble getting the search icon from font awesome to display properly within my search bar. Here is the code I'm using: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> ...

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

Nested function unable to assign values to variables

I am currently working on a function in Discord.js that collects users who reacted to a message. I have managed to gather all the user IDs inside a nested function, but when trying to return the array to the caller, it does not seem to work as expected. He ...

Angular2 Event:keyup triggers the input to lose focus

I am working on a component with an input element that is bound to a property. I want the input field to update in real time as I type in it. Here is my current code: <input type="text" #updatetext [value]="item.name" (keyup)="updateItem(item.$key, up ...

The functionality of the JQuery $.post method may be compatible with Firefox but may encounter issues when

I've encountered an issue with my website where certain functions that update the database using $.post work perfectly in Firefox, but fail to function properly in Internet Explorer. I'm struggling to identify the root cause of this problem. Here ...

Retrieve metadata using the jQuery $.post() method

I've been working on extracting meta tag information using the following code snippet. $(pageDetailsSecond).('head').find('meta[name="description"]').attr("content"); I also attempted this approach: $(pageDetailsSecond).('m ...

Incorporating React into a non-React website

I am currently working on a project where the server renders all views using the Twig template engine. Therefore, I tend to write all my scripts within the .twig templates. Take, for instance, the aside-buttons.twig template: <div class="aside-butto ...

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

In search of a dynamic jQuery plugin to enhance the main banner on our home page

Just to clarify, I'm not asking for help with coding in this question. Take a look at the banner on this website. A client has requested a similar banner for one of my upcoming projects. The project uses jquery, so I'm wondering if anyone here k ...

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

Refreshing div with updated form/content using jQuery and AJAX

Is it possible to use jQuery/AJAX functions to replace a form (or any content) with another form when a button is clicked, without reloading the page? Essentially creating a multi-part form dynamically. Can I achieve this with the following code snippet? ...

Sort your list efficiently with a custom hook in React using Typescript

I've been working on developing a custom hook in React that sorts an array based on two arguments: the list itself and a string representing the key to sort by. Despite trying various approaches, I haven't been able to find a solution yet. I&apos ...

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

What would be the ideal technology stack (modules, frameworks) to use for delving into node.js and creating a successful first project that allows for learning and growth?

A year ago, I took my first small steps into the world of Node.js. Back then, I was overwhelmed by the sheer number of modules and frameworks available. Now, I am determined to dive deeper into the Node environment and kickstart a web-based project that wi ...

Troubles with Angular Js: Issues with using $http.put with absolute URLs

Having an issue with $http.put in AngularJS. My server is built with Node.js and my app is in AngularJS. I am trying to make requests from AngularJS to access data on the Node.js server (same host). This code works: $http.put("/fraisforfait", elements); ...