Presentation Slider (HTML, CSS, JavaScript)

Embarking on my journey of creating webpages, I am eager to replicate the Windows 10 start UI and its browser animations. However, my lack of JavaScript knowledge presents a challenge. Any help in reviewing my code for potential issues would be greatly appreciated. Thank you.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>WinCalc</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
    <form method="POST" action="" autocomplete="off">
        <div id="holder">
            <div id="wrapper">
                <div id="savButtondesc">
                    <div id="savDesc"> Sum, Average & Max</div>
                    <div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
                </div>
                <input id="savButton" type="button" name="sav">


            </div>
        </div>
    </form>
</body>
</html>

CSS

@font-face {
    font-family: RobotoL;
    src:url(fonts/Roboto-Light.ttf);
}

body {
    overflow: hidden;
}
#holder {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    position: absolute;
    background-color: #34495e;
}
#wrapper {
    background-color: white;
    position: absolute;
    margin-top: 24%;
    margin-bottom: 25%;
    margin-right: 25%;
    margin-left: 25%;
    width: 50%;
    height: 50%;
}
#savButton {
    border-style: none;
    background-color: #3498db;
    position: relative;
    opacity: .1;
    height: 50%;
    width: 100%;
}
#savButtondesc {
    background-color: red;
    width: 100%;
    height: 50%;
    position: absolute;
}
#savDesc {
    width: 100;
    margin-top: 17%;
    margin-bottom: 20%;
    margin-right: 10%;
    margin-left: 10%;
    font-family: RobotoL;
    font-size: 30px;
    color: white;
    transition: 1s;
}
#savDesc1 {
    font-family: RobotoL;
    font-size: 15px;
    color: white;
    margin-left: 1%;
    margin-top: -50%;
    transition: 1s;
    opacity: 0;

}

JavaScript

function slideShow() {
    setInterval(function show(){
        var next = 0;
        if (next == 0) {
            animate();
            next++:
        }
        else {
            reverse();
            next--;
        }
    }, 1000);

}
function animate(){
        document.getElementById('samDesc').style.marginTop = "-2%";
        document.getElementById('samDesc1').style.marginTop = "25%";
        document.getElementById('samDesc1').style.opacity = "1";
        document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
        document.getElementById('samDesc').style.marginTop = "17%";
        document.getElementById('samvDesc1').style.marginTop = "-55%";
        document.getElementById('samDesc1').style.opacity = "0";
        document.getElementById('samDesc').style.opacity = "1";
}

Answer №1

Make sure to include slideShow(); at the conclusion of your javascript script.

In addition, I suggest utilizing as a jQuery plugin for an enhanced experience.

Answer №2

Hey there! Please take a look at this corrected code. The issue was caused by a misplaced semicolon symbol and an incorrect element id in the JavaScript function. I have fixed these errors, so you can review the updated code below.

<!DOCTYPE html>
<html>
<head>
    <title>WinCalc</title;
  <style>

body {
    overflow: hidden;
}
#holder {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    position: absolute;
    background-color: #34495e;
}
#wrapper {
    background-color: white;
    position: absolute;
    margin-top: 24%;
    margin-bottom: 25%;
    margin-right: 25%;
    margin-left: 25%;
    width: 50%;
    height: 50%;
}
#savButton {
    border-style: none;
    background-color: #3498db;
    position: relative;
    opacity: .1;
    height: 50%;
    width: 100%;
}
#savButtondesc {
    background-color: red;
    width: 100%;
    height: 50%;
    position: absolute;
}
#savDesc {
    width: 100;
    margin-top: 17%;
    margin-bottom: 20%;
    margin-right: 10%;
    margin-left: 10%;
    font-family: RobotoL;
    font-size: 30px;
    color: white;
    transition: 1s;
}
#savDesc1 {
    font-family: RobotoL;
    font-size: 15px;
    color: white;
    margin-left: 1%;
    margin-top: -50%;
    transition: 1s;
    opacity: 0;

} 
 </style>
<script type="text/javascript" > 
function slideShow() {  
 var next = 0;
 setInterval( function show(){ 
    if (next == 0) {
        animate();
        next++;
    }
    else {
        reverse();
        next--;
    }
},1000);

}
function animate(){ 
    document.getElementById('savDesc').style.marginTop = "-2%";
    document.getElementById('savDesc1').style.marginTop = "25%";
    document.getElementById('savDesc1').style.opacity = "1";
    document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
    document.getElementById('savDesc').style.marginTop = "17%";
   // document.getElementById('samvDesc1').style.marginTop = "-55%";
    document.getElementById('savDesc1').style.opacity = "0";
    document.getElementById('savDesc').style.opacity = "1";
} 
</script>
</head>
<body onload="slideShow()">
    <form method="POST" action="" autocomplete="off">
        <div id="holder">
            <div id="wrapper">
                <div id="savButtondesc">
                    <div id="savDesc"> Sum, Average & Max</div>
                    <div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
                </div>
                <input id="savButton" type="button" name="sav"> 

            </div>
        </div>
    </form>
</body>
</html>

Answer №3

To implement the setInterval method within the slideShow function, you can use one of the following options:

setInterval('slideAnimation()', 1500);

Alternatively, you can use:

setInterval(slideAnimation, 1500);

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

Data can be retrieved in a React/Next.js application when a button is clicked, even if the button is located in a separate

Whenever the button is clicked, my function fetches weather data for the current location. I am trying to figure out how to transfer this data from the Location component to the pages/index.tsx. This is where another component will display the data. This ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

Problem with $http.post() in Angular where Codeigniter is not able to receive data

I'm facing a peculiar issue with Codeigniter and Angular. My approach was to configure the controller in the following way: index is a simple Angular page with just one app and one controller get retrieves data from the database set saves data sent u ...

Tips for sending information from a controller to jQuery (Ajax) in CodeIgniter

Code snippet in controller: $rates['poor'] = 10; $rates['fair'] = 20; $this->load->view('search_result2', $rates); //Although I have attempted different ways, the only successful method is using the code above. Other ...

Creating a unique Voronoi Diagram wrap

I am currently working on the creation of a fantasy-style map that is procedurally generated using the cells of a Voronoi diagram to determine different terrains. While working on the tectonic plate generation, I came to the realization that having wrappi ...

What causes the reflection of JavaScript variables when there is a change in ng-model?

By declaring the object globally and assigning it during an HTTP call when the Angular controller loads, I am able to update the values of this object in the Angular scope variables and access them through ng-models. When a button is clicked and one of the ...

Can you explain the function of .modal('dispose') in Bootstrap 4?

As stated in the documentation, the .modal('dispose') method is used to destroy a modal. .modal('dispose') This method destroys the specified modal element. However, after creating an eventListener like this: $('#myModal') ...

Tips on adjusting the label size of a radar chart in chart.js

My radar chart labels are appearing skewed and messed up on mobile devices, so I decided to scale them using the following code within ComponentDidMount(): const plugins = [{ beforeDraw: function(c) { var chartHeight = c.chart.height; c ...

Difficulty in transmitting two boolean values using ajax and setTimeout()

I am working on two functions that are supposed to send either 0 or 1 to a PHP page using AJAX. When a key is pressed on the keyboard, the function that sends 1 should start, followed by the second function that sends 0 three seconds later using setTimeout ...

Next.js horizontal scrollbar appearing unexpectedly

As I work on my Next.js project, I've noticed an issue with unwanted horizontal scrollbars appearing on every subpage. These scrollbars allow scrolling about 30px horizontally, but only appear when the content extends beyond the viewport. I attempted ...

Using AngularJS Material's mdDialog to show locally stored data in a template

In the controller, the section responsible for spawning mdDialog appears as follows: $scope.removeAttendee = function(item) { console.log(item); $mdDialog.show({ controller: DialogController, templateUrl: 'views/removeMsg.tm ...

Unable to convert data to a JSON string

I've created a tool for building dynamic tables: <div class="container"> <div class="row"> <div class="col"> <hr> <h3>Add your data</h3> <button id="addTd" type="button" class="btn btn-pr ...

What is the impact of sending a JavaScript request to a Rails method every 15 seconds in terms of efficiency?

I have a method that scans for notifications and initiates a js.erb in response. Here is the JavaScript code triggering this method: setInterval(function () { $.ajax({ url: "http://localhost:3000/checkNotification", type: "GET" }); }, 15000); ...

Warning: Typescript is unable to locate the specified module, which may result

When it comes to importing an Icon, the following code is what I am currently using: import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg" When working in Visual Studio Code 1.25.1, a warning from tslint appears: [ts] Cannot ...

Centralized Title / Side-aligned Menu

Good day, I am in need of assistance with a menu layout for my website. My goal is to have the title centered with the menu flexed out to the sides, but I'm encountering some issues. The colors included are just for testing purposes and will be update ...

Trouble with serving CSS files using Express static directory

In my app.js file, I have the following code: app.use(express.static(path.join(__dirname, '../public'))); This code snippet is from my main layout page: <link rel="stylesheet" href="/css/styles.css"> Despite trying various combinations, ...

Obtaining a cookie in Vue.js independently: a step-by-step guide

After setting a cookie using laravel, I'm looking to retrieve it in vue.js without relying on or installing any external dependencies. Can anyone please suggest a way to achieve this without extra tools? Your guidance would be greatly appreciated! ...

Using AJAX to pass the ID name when clicking in PHP

Currently, I am in the process of implementing an Ajax-driven filtered search system that consists of three distinct tabs. These tabs allow users to search by names, category, and location. I have successfully enabled searching when a user types a name int ...

If a DOM element contains any text node, completely remove the element

Currently, I am using WordPress and my theme automatically generates a menu where all the items are marked with "-". It can be quite annoying. I have tried to fix it by replacing all the option values instead of just removing the "-", but I couldn't g ...

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...