Can anyone tell me where I am going wrong in the following code?

1 New Member

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<html>
 
<head>
 
<style>

#wrapper {

    width: 2200px;

    transform: translate3d(0, 0, 0);

     transition: transform .5s ease-in-out;

}
 
.content {

    float: left;

    width: 550px;

    height: 350px;

    white-space: normal;

    background-repeat: no-repeat;

}

#contentContainer {

****width: 550px;

****height: 350px;

****border: 5px black solid;

****overflow: hidden;

}

#itemOne {

    background-color: #ADFF2F;

    background-image: url("http://www.kirupa.com/images/blueSquare.png");

}

#itemTwo {

    background-color: #FF7F50;

    background-image: url("http://www.kirupa.com/images/yellowSquare.png");

}

#itemThree {

    background-color: #1E90FF;

    background-image: url("http://www.kirupa.com/images/pinkSquare.png");

}

#itemFour {

    background-color: #DC143C;

    background-image: url("http://www.kirupa.com/images/graySquare.png");

}

#navLinks {

    text-align: center;

    width: 550px;

}

    #navLinks ul {

        margin: 0px;

        padding: 0px;

        display: inline-block;

        margin-top: 6px;

    }

        #navLinks ul li {

            float: left;

            text-align: center;

            margin: 10px;

            list-style: none;

            cursor: pointer;

            background-color: #CCCCCC;

            padding: 5px;

            border-radius: 50%;

            border: black 5px solid;

        }

            #navLinks ul li:hover {

                background-color: #FFFF00;

            }

            #navLinks ul li.active {

                background-color: #333333;

                color: #FFFFFF;

                outline-width: 7px;

            }

                #navLinks ul li.active:hover {

                    background-color: #484848;

                    color: #FFFFFF;

                }
 
</style>

</head>
 
<body>

<div id="contentContainer">

    <div id="wrapper">

        <div id="itemOne" class="content">
 
        </div>

        <div id="itemTwo" class="content">
 
        </div>

        <div id="itemThree" class="content">
 
        </div>

        <div id="itemFour" class="content">
 
        </div>

    </div>

</div>

<div id="navLinks">

    <ul>

        <li class="itemLinks" data-pos="0px"></li>

        <li class="itemLinks" data-pos="-550px"></li>

        <li class="itemLinks" data-pos="-1100px"></li>

        <li class="itemLinks" data-pos="-1650px"></li>

    </ul>

</div>
 
<script>

    // just querying the DOM...like a boss!

var links = document.querySelectorAll(".itemLinks");

var wrapper = document.querySelector("#wrapper");
 
// the activeLink provides a pointer to the currently displayed item

var activeLink = 0;
 
// setup the event listeners

for (var i = 0; i < links.length; i++) {

    var link = links[i];

    link.addEventListener('click', setClickedItem, false);
 
    // identify the item for the activeLink

    link.itemID = i;

}
 
// set first item as active

links[activeLink].classList.add("active");
 
function setClickedItem(e) {

    removeActiveLinks();

    resetTimer();

    var clickedLink = e.target;

    activeLink = clickedLink.itemID;
 
    changePosition(clickedLink);

}
 
function removeActiveLinks() {

    for (var i = 0; i < links.length; i++) {

        links[i].classList.remove("active");

    }

}
 
// Handle changing the slider position as well as ensure

// the correct link is highlighted as being active

function changePosition(link) {

    link.classList.add("active");
 
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";

    wrapper.style[transformProperty] = translateValue;

}

var transforms = ["transform",

            "msTransform",

            "webkitTransform",

            "mozTransform",

            "oTransform"];
 
var transformProperty = getSupportedPropertyName(transforms);
 
// vendor prefix management

function getSupportedPropertyName(properties) {

    for (var i = 0; i < properties.length; i++) {

        if (typeof document.body.style[properties[i]] != "undefined") {

            return properties[i];

        }

    }

    return null;

}
 
//

// The code for sliding the content automatically

//

var timeoutID;
 
function startTimer() {

    // wait 2 seconds before calling goInactive

    timeoutID = window.setInterval(goToNextItem, 2000);

}

startTimer();
 
function resetTimer() {

    window.clearInterval(timeoutID);

    startTimer();

}
 
function goToNextItem() {

    removeActiveLinks();
 
    if (activeLink < links.length - 1) {

        activeLink++;

    } else {

        activeLink = 0;

    }
 
    var newLink = links[activeLink];

    changePosition(newLink);

}

</script>

</body>

</html>

Attached Files

Slider.txt (1.1 KB, 177 views)

Jan 14 '15 #1

Subscribe Reply

1238

Dormilich

8,658

Recognized Expert Moderator Expert

line #21 - #24: CSS properties do not contain stars.

Jan 14 '15 #2

Exequiel

288

Contributor

delete the asterisk in #contentContainer. it must be

Expand|Select|Wrap|Line Numbers

 
#contentContainer {

    width: 550px;

    height: 350px;

    border: 5px black solid;

    overflow: hidden;

}

if you want to make your #contentContainer a comment use /* */ example:

Expand|Select|Wrap|Line Numbers

 
#contentContainer {

   /* width: 550px;

    height: 350px;

    border: 5px black solid;

    overflow: hidden;*/

}

Jan 14 '15 #3

by: Fang | last post by:

Hi, I'm new to PHP. I followed an example on the book and wanted to pass a variable from one html page to a php page, but it always tells me the passed variable is undefined. I've checked the...

PHP

Where am i going wrong ASP.NET

by: Vinodh | last post by:

Hi, I created an ASP.NET application in VB.NET. I put one text box (Textbox1) and a button (button1) to the web form (webform1). Then I clicked on the button and add the following code. ...

.NET Framework

Error with the following code

by: Materialised | last post by:

I am having some issues with the following code, basically what I am trying to do, is familierise myself with compiler warnings, when I try to access a private or protected class function. Here is...

C / C++

Can anyone tell me whats wrong with this code?

by: Tony | last post by:

I found similar code for encoding/decoding strings in VB which works fine. However I wanted to use it in a C# projected and can't get it to work. When it executes the TransformFinalBlock() call at...

C# / C Sharp

Can someone examine this link and tell me whats wrong?

by: Mike Barnard | last post by:

It's a simple test... VERY SIMPLE. But... In an external stlyesheet some attributes don't show. With the same styles cut and pasted to the test internally it works as expected. Anyone tell...

HTML / CSS

What's wrong with the following code snippet.

by: Jason Kid | last post by:

Hi, Please tell me what's wrong with the following code. private bool CheckIt( int iArg, bool fArg) { bool fIsGood = false;

C# / C Sharp

Can someone please tell me where I am going wrong??

by: E-Dot | last post by:

I am trying to write a program which asks the user to enter a number in the interval , the program then gives the natural logarithm of that number, using the series for log(x+1)... Here is what...

C / C++

Urgent:Can anyone tell me where i'm worng in this servlet program

by: ramadeviirrigireddy | last post by:

Hi All, I have the following code for form and servlet. when the form is submitted the servlet will print the values passed by the form. i'm not getting the servlet o/p when i submit the...

Java

can help me with this Update inventory funciton, where is wrong?

by: kang jia | last post by:

hi currently i am doing this car booking website. i would like to only update our inventory one day before customer's start booking time, thus before that, i am still able to rent to other...

Python

Error from Access when trying to add 'ranking' field using the following code:

by: adamnorsworthy | last post by:

I have a query called 'Query1' and it uses the following SQL: SELECT DISTINCT nps.Agent , nps. , (Select Count(*) from Where < .) AS Rank FROM

Microsoft Access / VBA

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

Can anyone tell me where I am going wrong in the following code?

Similar topics