Triad of Dots for Vertical Presentations

In the past, I successfully added 3 vertical dots to a slideshow by using absolute positioning and moving them into place. Then, I used JavaScript to cycle through the active class during the animation. However, when resizing down to smaller screen resolutions, the dots would shrink inside of each other causing an issue.

I am wondering if there is a more efficient way to achieve this, preferably using just CSS3 but open to incorporating JavaScript as well. Currently, my slideshow can be viewed on my Github page.

I am currently experimenting with adding the dots using a UL/LI setup, although I am unsure if it will behave differently than the previous method. Any suggestions or input from anyone who has experience in this area would be greatly appreciated.

My preference at the moment is to accomplish this task using Vanilla CSS/JS.

Answer №1

Applying the CSS transform: rotate(); property could help you achieve the desired effect.

If you include transform: rotate(90deg); to the dot container in your code, it will rotate vertically.

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

Embedding a line chart created with chart.js into an SVG container with the help of d3.js

My initial attempt was successful using a button element with the necessary classes and attributes. <button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button> However, my next endeavor involve ...

Determining the length and angle of a shadow using X and Y coordinates

I'm currently tackling the task of extracting data from a file generated by a software program that has the ability to add a shadow effect to text. The user interface allows you to specify an angle, length, and radius for this shadow. https://i.stack ...

Tips for displaying a hyperlink in an Angular 6 component template

In my Angular 6 application, I am facing an issue with a component that is used to display messages on the page. Some of the messages include hyperlinks in HTML markup, but they are not being rendered properly when displayed (they appear as plain text with ...

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

The output from `http.send` on the Node + Express backend is displayed as [object object]

When I make a request using http.send in my Node.js backend, it returns [object object]. <script> const newExerciseForm = document.getElementById("newExercise"); newExerciseForm.addEventListener("submit", function (e) { e.pre ...

Managing the event of a browser/tab being closed in React using Javascript

Currently, I have implemented the beforeunload event handler in order to detect when the user closes the browser. However, when this event is triggered, a popup appears with options for 'leave' and 'cancel'. Is it possible to capture th ...

It is impossible to change the text color to white

I am working on some JSX code which looks like the following: <div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}> <div styles={styles.overimposingText}> <h2 styles={{color: 'white !important& ...

An error occurred in react-dates where the property 'clone' of null could not be read, resulting in a new DayPicker

I'm encountering an issue with the following code snippet: const [focusedInput, setFocusedInput] = useState('startDate'); const onFocusChange = fInput => { setFocusedInput(!fInput ? 'startDate' : fInput); }; <DayPickerRang ...

Attempting to retrieve an array within a Mustache JavaScript template

I'm attempting to retrieve data from a mustache array using this.location.coordinates.0: <div class="block"> <label>Location (longitude/latitude):</label> {{location.coordinates.0}}/{{location.coordinates.1}} </d ...

Error TS2322: The object with properties "ready: false" and "session: null" cannot be assigned to the type "Readonly<S & withAuthState>"

Here is the interface I'm currently working with: export interface withAuthState { ready: boolean, session: any } Additionally, I have developed the following Higher Order Component (HOC): const withAuth = <P extends withAuthProps, S extends ...

ng-disabled is failing to interact with the $scope variable

Attempting something like this: <button class="btn btn-lg btn-block btn-section" ng-disabled="{{ selectedfruits.length }} < 5" > Show selected fruits</button> When inspecting in Chrome developer tools, the code appears as follows: &l ...

Javascript does not have the capability to interact directly with HTML code

I am facing an issue with my JSP code that is supposed to validate password and confirm password before submitting the form to a Java servlet. The problem is, even though I have written the validation script, it does not show alert messages or focus on t ...

Traversing through asp:GridView information with javascript

Is it possible to iterate through the data in an asp:GridView on the Client-side using JavaScript? If so, I would like to understand how this can be achieved... My objective is to extract the values of two fields in the Grid and add an image to each row b ...

Does CSS Horizontal Padding Percentage Stop Relative to Element Once Maximum Width is Reached?

I'm currently in the process of developing my latest portfolio website at and I'm facing a perplexing padding dilemma that has left me stumped. The approach I'm taking with the layout involves each row of content consisting of both an outer ...

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Can someone help me with this code issue? <!doctype html> <title>Test case</title> <div style="float: left"> <div style="float: left;">Short.</div> <div></div> <div style="overflow: hidden;"&g ...

Limit the use of Javascript specifically within a section of HTML that includes a rich-text editor

Currently, I am working on a web application that has a historic background. This application uses the summernote editor, a rich-text editor that allows users to save formatted notes to the server. Along with this, there are numerous instances of inline Ja ...

Using CSS and Bootstrap together in the Yii2 framework

Hey there, I'm new to Yii2 and recently put together a layout page. However, I seem to be having some trouble with my CSS - it's not fully loading, only parts of it are displaying correctly. Is there anyone out there who can lend a hand? This is ...

Is it possible to have multiple divs online that automatically move to the next line when the screen size changes?

How can I ensure that each pair of dropdown and label elements stays on the same line, and moves to the next line based on screen size? Here is my current approach: <div style="display:inline-block; vertical-align:middle; width:100%;"> <div ...

Error: THREE.MTLLoader is not a constructor, version 3.0 bug uncovered

function loadModel(path, objName, mtlName) { var onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloade ...

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

After successfully creating an email form with jquery validation error style that appears when there's an error, I encountered a problem. When the screen width is reduced or viewed on a small screen, the error message pushes down the button. I&apos ...