javascript

javascript is da language which is spoken by God

?
 
You can use jquery's scrollable function.
It's very easy, this is a basic way.

!! Remember to add this jquery library to the html !!
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

*html*
<div class="scrollable">
<div class="items">
<div>scroll me first</div>
<div>scroll me second</div>
</div>
</div>


*css*
.scrollable {
position:relative;
overflow:hidden;
width: 75.000em;
height:250px;
}
.scrollable .items {
/* this cannot be too large */
width: 20000em;
position:absolute;
}
.items div {
float:left;
width: 75em;
}

*javascript* add this to the bottom of your html
<script>
$(function() {
$(".scrollable").scrollable({speed: 2000, circular: true, effect: 'fade'}).autoscroll({ autoplay: true });
});
</script>
 
Last edited:
DevSign said:
You can use jquery's scrollable function.
It's very easy, this is a basic way.

!! Remember to add this jquery library to the html !!
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

*html*
<div class="scrollable">
<div class="items">
<div>scroll me first</div>
<div>scroll me second</div>
</div>
</div>


*css*
.scrollable {
position:relative;
overflow:hidden;
width: 75.000em;
height:250px;
}
.scrollable .items {
/* this cannot be too large */
width: 20000em;
position:absolute;
}
.items div {
float:left;
width: 75em;
}

*javascript* add this to the bottom of your html
<script>
$(function() {
$(".scrollable").scrollable({speed: 2000, circular: true, effect: 'fade'}).autoscroll({ autoplay: true });
});
</script>
Click to expand...

Devsign which part of html do I code? En can u please re-type da code clearly coz it looks complicated..tnx 4 ur help
 
Hey, this is how the WHOLE html page will look.

HTML: 
<!DOCTYPE html>
<html>
<head>

<!-- This adds the jquery library to your html page -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<!-- This is the styling -->
<style>

/*Styling for the entire scrollable class*/
.scrollable {
    position:relative;
    overflow:hidden;
    width: 75.000em; /*width of the scrollable div, you can change this to pixels, just remember to convert, will be something like 900px*/
    height:250px;
}

/*This styles the div wrapping the items that'll be scrolling*/
.scrollable .items {
    width: 20000em; /*this is potentially the width of all items next to each other, but dont let this worry you yet*/
    position:absolute;
}

/*This styles the items*/
.items div {
    float:left; /*the aligns all items next to each other*/
    width: 75em; /*this will be the width of each item scrolling*/
}
</style>


</head>
<body>

<div class="scrollable">
    <div class="items">
        <!-- These divs in sequence will be the order of the scrolling -->
        <div>Add something in here, a image or whatever</div>
        <div>You can also add something in here, whatever you feel like.</div>
    </div>
</div>

<!-- javascript -->
<script>
$(function() {
    // This handles the scrolling, effects have been added
    $(".scrollable").scrollable({speed: 2000, circular: true, effect: 'fade'}).autoscroll({ autoplay: true });
});
</script>

</body>
</html>
 
Come on guys, the solution I gave IS THE JQUERY JAVASCRIPT rotator. That is as basic as it gets.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X