Click here to Skip to main content
16,004,653 members
Search within:


how to set template timer with show time in grid dynamicaly
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
VB
Javascript
I want to set timer (count down) in a grid for each row dynamically
by default i set 15:00 minute and
14:59
14:58
.
.
.
00:00
how i write it?
please help me.
more explain:
i like have coutdown time for every row like below site:

https://www.beyondtherack.com/

i think it is javascript in grid
but i don't know how call the javascript function for each row in grid

i need it for web site
i program in visual studio 2010 with vb.net and asp.net
please help me
I need it
Posted
Updated 2-Dec-11 21:33pm
v5
Add a Solution
Comments
Kschuler 28-Nov-11 15:38pm    
Are you saying that you want a new row to appear every second? That's going to be a lot of rows when you're done. Are you sure you really want that? And you've tagged both vb and javascript...which one do you want it in? Is this for a website? What code have you tried so far and why isn't it working?
Maciej Los 30-Nov-11 16:01pm    
I think he (or she) is trying to write program to count down the time in each row (line), starting from 15 minutes. But i have no idea what event will cause start.

1 solution

html code:

XML
<head>
    <script src="js/jquery.anythingslider.js"></script>
    <script src="js/jquery.anythingslider1.js"></script>
    <script>
        // DOM Ready
        $(function() {
            $('#slider').anythingSlider();
        });
        $(function() {
            $('#slider1').anythingSlider();
        });
    </script>
        <script>
            // DOM Ready
            $(function() {
                $('#add_slider').anythingSlider1();
            });
    </script>
    <script type="text/javascript">
        $(function() {

            //remove js-disabled class
            $("#viewer").removeClass("js-disabled");

            //create new container_img for images
            $("<div>").attr("id", "container_img").css({ position: "absolute" }).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

            //add images to container_img
            $(".wrapper").each(function() {
                $(this).appendTo("div#container_img");
            });

            //work out duration of anim based on number of images (1 second for each image)
            var duration = $(".wrapper").length * 3000;

            //store speed for later (distance / time)
            var speed = (parseInt($("div#container_img").width()) + parseInt($("div#viewer").width())) / duration;

            //set direction
            var direction = "rtl";

            //set initial position and class based on direction
            (direction == "rtl") ? $("div#container_img").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container_img").css("left", 0 - $("div#container_img").width()).addClass("ltr");

            //animator function
            var animator = function(el, time, dir) {

                //which direction to scroll
                if (dir == "rtl") {

                    //add direction class
                    el.removeClass("ltr").addClass("rtl");

                    //animate the el
                    el.animate({ left: "-" + el.width() + "px" }, time, "linear", function() {

                        //reset container_img position
                        $(this).css({ left: $("div#imageScroller").width(), right: "" });

                        //restart animation
                        animator($(this), duration, "rtl");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;

                    });
                } else {

                    //add direction class
                    el.removeClass("rtl").addClass("ltr");

                    //animate the el
                    el.animate({ left: $("div#viewer").width() + "px" }, time, "linear", function() {

                        //reset container_img position
                        $(this).css({ left: 0 - $("div#container_img").width() });

                        //restart animation
                        animator($(this), duration, "ltr");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null;
                    });
                }
            }

            //start anim
            animator($("div#container_img"), duration, direction);

            //pause on mouseover
            $("a.wrapper").live("mouseover", function() {

                //stop anim
                $("div#container_img").stop(true);

                //show controls
                ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outercontainer_img").css({ opacity: 0.7 }).slideDown("slow") : null;
                ($("a#rtl").length == 0) ? $("<a>").attr({ id: "rtl", href: "#", title: "rtl" }).appendTo("#controls") : null;
                ($("a#ltr").length == 0) ? $("<a>").attr({ id: "ltr", href: "#", title: "ltr" }).appendTo("#controls") : null;

                //variable to hold trigger element
                var title = $(this).attr("title");

                //add p if doesn't exist, update it if it does
                ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title);
            });

            //restart on mouseout
            $("a.wrapper").live("mouseout", function(e) {

                //hide controls if not hovering on them
                (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null;

                //work out total travel distance
                var totalDistance = parseInt($("div#container_img").width()) + parseInt($("div#viewer").width());

                //work out distance left to travel
                var distanceLeft = ($("div#container_img").hasClass("ltr")) ? totalDistance - (parseInt($("div#container_img").css("left")) + parseInt($("div#container_img").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container_img").css("left"))));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container_img"), newDuration, $("div#container_img").attr("class"));

            });

            //handler for ltr button
            $("#ltr").live("click", function() {

                //stop anim
                $("div#container_img").stop(true);

                //swap class names
                $("div#container_img").removeClass("rtl").addClass("ltr");

                //work out total travel distance
                var totalDistance = parseInt($("div#container_img").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#container_img").css("left")) + parseInt($("div#container_img").width()));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container_img"), newDuration, "ltr");
            });

            //handler for rtl button
            $("#rtl").live("click", function() {

                //stop anim
                $("div#container_img").stop(true);

                //swap class names
                $("div#container_img").removeClass("ltr").addClass("rtl");

                //work out total travel distance
                var totalDistance = parseInt($("div#container_img").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container_img").css("left"))));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container_img"), newDuration, "rtl");
            });
        });
        </script>
</head>
<body>
  <div id="slider_wrapper">
            <ul id="slider">
                <li><img src="images/other/1.jpg" width="823" height="267" alt="slider" /></li>
                <li><img src="images/other/2.jpg" width="823" height="267" alt="slider" /></li>
                <li><img src="images/other/3.jpg" width="823" height="267" alt="slider" /></li>
                <li><img src="images/other/4.jpg" width="823" height="267" alt="slider" /></li>
                <li><img src="images/other/5.jpg" width="823" height="267" alt="slider" /></li>
            </ul>
        </div>
</body>


css

CSS
/* change the ID to match your slider */
#add_slider {
    width: 181px;
    height: 247px;
    list-style: none;
    display:block;
    margin-top:25px;
}
#add_slider{ overflow:hidden;}

#slider1 {
    width: 530px;
    height: 180px;
    list-style: none;
    display:block;
    margin-top:5px;
}
#slider1{ overflow:hidden;}

#slider {
    width: 823px;
    height: 267px;
    list-style: none;
}
#slider{ overflow:hidden;}
/* Opera width restriction */
.anythingBase { max-width: 32766px; }

/*****************
  SET COLORS HERE
 *****************/
/**** Default state (no keyboard focus) ****/
/* slider window - top & bottom borders, default state
div.anythingSlider .anythingWindow {
    border-top: 3px solid #777;
    border-bottom: 3px solid #777;
}*/
/* Navigation buttons, default state */
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
    background: #777;
    color: #000;
}
/* start-stop button, stopped, default state */
div.anythingSlider .start-stop {
    background-color: #040;
    color: #fff;
}
/* start-stop button, playing, default state */
div.anythingSlider .start-stop.playing {
    background-color: #800;
}
/* start-stop button, default hovered text color (when visible) */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
    color: #ddd;
}

/**** Active State (slider has keyboard focus) ****/
/* slider window - top & bottom borders, active state */
div.anythingSlider.activeSlider .anythingWindow {
    border-color: #7C9127;
}
/* Navigation buttons, active state */
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
    background-color: #7C9127;
}
/* start-stop button, stopped, active state */
div.anythingSlider .start-stop {
    background-color: #080;
    color: #fff;
}
/* start-stop button, playing, active state */
div.anythingSlider .start-stop.playing {
    background-color: #d00;
}
/* start-stop button, active slider hovered text color (when visible) */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
    color: #fff;
}

/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider {
    display: block;
    margin: 0 auto;
    overflow: visible !important; /* needed for Opera and Safari */
    position: relative;
    padding: 0 45px 28px 45px;
}
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
/* anythingSlider base (original element) */
.anythingBase {
    background: transparent;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
/* all panels inside the slider */
.anythingBase .panel {
    background: transparent;
    display: block;
    overflow: hidden;
    float: left;
    padding: 0;
    margin: 0;
}
.anythingBase .panel.vertical {
    float: none;
}

/* Navigation Arrows */
div.anythingSlider .arrow {
    top: 50%;
    position: absolute;
    display: block;
}
div.anythingSlider .arrow a {
    display: block;
    height: 40px;
    margin: -30px -5px 0 -5px; /* half height of image */
    width: 40px;
    text-align: center;
    outline: 0;
    background: url(../images/slider_arrows.png) no-repeat;
}

/* hide text, target the span so IE7 doesn't text-indent the link */
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
/* back arrow */
div.anythingSlider .back { left: 0; }
div.anythingSlider .back a { background-position: left top; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left bottom; }
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* forward arrow */
div.anythingSlider .forward { right: 0; }
div.anythingSlider .forward a { background-position: right top; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -40px; }
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */

/* Navigation Links */
div.anythingSlider .anythingControls { outline: 0; display: none; }
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
div.anythingSlider .anythingControls ul li { display: inline; }
div.anythingSlider .anythingControls ul a {
    font: 11px/18px Georgia, Serif;
    display: inline-block;
    text-decoration: none;
    padding: 2px 8px;
    height: 18px;
    margin: 0 5px 0 0;
    background-image: url(../images/default.png);
    background-position: center -288px ;
    background-repeat: repeat-x;
    text-align: center;
    outline: 0;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .anythingControls ul a:hover {
    background-image: none;
}
/* Navigation size window */
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }

/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .anythingControls ul { float: left; }    /* move nav link group to left */
div.anythingSlider.rtl .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */

/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
    background-image: url(../images/default.png);
    background-position: center -288px;
    background-repeat: repeat-x;
    padding: 2px 5px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    float: right;
    z-index: 100;
    outline: 0;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
/* hide cell shading on hover - makes the button appear to come forward */
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }

/* probably not necessary, but added just in case */
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
    transition-duration: 0;
    -o-transition-duration: 0;
    -moz-transition-duration: 0;
    -webkit-transition-duration: 0;
}


/*+++++++++++++++++++++++++*/

/* Opera width restriction */
.anythingBase { max-width: 32766px; }

/*****************
  SET COLORS HERE
 *****************/
/**** Default state (no keyboard focus) ****/
/* slider window - top & bottom borders, default state
div.anythingSlider1 .anythingWindow {
    border-top: 3px solid #777;
    border-bottom: 3px solid #777;
}*/
/* Navigation buttons, default state */
div.anythingSlider1 .anythingControls ul a.cur, div.anythingSlider1 .anythingControls ul a {
    background: #777;
    color: #000;
}
/* start-stop button, stopped, default state */
div.anythingSlider1 .start-stop {
    background-color: #040;
    color: #fff;
}
/* start-stop button, playing, default state */
div.anythingSlider1 .start-stop.playing {
    background-color: #800;
}
/* start-stop button, default hovered text color (when visible) */
div.anythingSlider1 .start-stop:hover, div.anythingSlider1 .start-stop.hover {
    color: #ddd;
}

/**** Active State (slider has keyboard focus) ****/
/* slider window - top & bottom borders, active state */
div.anythingSlider1.activeSlider .anythingWindow {
    border-color: #7C9127;
}
/* Navigation buttons, active state */
div.anythingSlider1.activeSlider .anythingControls ul a.cur, div.anythingSlider1.activeSlider .anythingControls ul a {
    background-color: #7C9127;
}
/* start-stop button, stopped, active state */
div.anythingSlider1 .start-stop {
    background-color: #080;
    color: #fff;
}
/* start-stop button, playing, active state */
div.anythingSlider1 .start-stop.playing {
    background-color: #d00;
}
/* start-stop button, active slider hovered text color (when visible) */
div.anythingSlider1 .start-stop:hover, div.anythingSlider1 .start-stop.hover {
    color: #fff;
}

/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider1 {
    display: block;
    margin: 0 auto;
    overflow: visible !important; /* needed for Opera and Safari */
    position: relative;
    padding: 0 0px 0px 0px;
}
/* anythingSlider1 viewport window */
div.anythingSlider1 .anythingWindow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
/* anythingSlider1 base (original element) */
.anythingBase {
    background: transparent;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
/* all panels inside the slider */
.anythingBase .panel {
    background: transparent;
    display: block;
    overflow: hidden;
    float: left;
    padding: 0;
    margin: 0;
}
.anythingBase .panel.vertical {
    float: none;
}

/* Navigation Arrows */
div.anythingSlider1 .arrow {
    top: 50%;
    position: absolute;
    display: block;
}
div.anythingSlider1 .arrow a {

}

/* hide text, target the span so IE7 doesn't text-indent the link */
div.anythingSlider1 .arrow a span { display: block; text-indent: -9999px; }
/* back arrow */
div.anythingSlider1 .back { left: 0; }
div.anythingSlider1 .back a { background-position: left top; }
div.anythingSlider1 .back a:hover, div.anythingSlider1 .back a.hover { background-position: left bottom; }
div.anythingSlider1 .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* forward arrow */
div.anythingSlider1 .forward { right: 0; }
div.anythingSlider1 .forward a { background-position: right top; }
div.anythingSlider1 .forward a:hover, div.anythingSlider1 .forward a.hover { background-position: right -40px; }
div.anythingSlider1 .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */

/* Navigation Links */
div.anythingSlider1 .anythingControls { outline: 0; display: none; }
div.anythingSlider1 .anythingControls ul { margin: 0; padding: 0; float: left; }
div.anythingSlider1 .anythingControls ul li { display: inline; }
div.anythingSlider1 .anythingControls ul a {
    font: 11px/18px Georgia, Serif;
    display: inline-block;
    text-decoration: none;
    padding: 2px 8px;
    height: 18px;
    margin: 0 5px 0 0;
    background-image: url(../images/default.png);
    background-position: center -288px ;
    background-repeat: repeat-x;
    text-align: center;
    outline: 0;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider1 .anythingControls ul a:hover {
    background-image: none;
}
/* Navigation size window */
div.anythingSlider1 .anythingControls .anythingNavWindow { overflow: hidden; float: left; }

/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider1.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
div.anythingSlider1.rtl .anythingControls ul { float: left; }    /* move nav link group to left */
div.anythingSlider1.rtl .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}
/* div.anythingSlider1.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */

/* Autoplay Start/Stop button */
div.anythingSlider1 .start-stop {
    background-image: url(../images/default.png);
    background-position: center -288px;
    background-repeat: repeat-x;
    padding: 2px 5px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    float: right;
    z-index: 100;
    outline: 0;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
/* hide cell shading on hover - makes the button appear to come forward */
div.anythingSlider1 .start-stop:hover, div.anythingSlider1 .start-stop.hover { background-image: none; }

/* probably not necessary, but added just in case */
div.anythingSlider1, div.anythingSlider1 .anythingWindow, div.anythingSlider1 .anythingControls ul a, div.anythingSlider1 .arrow a, div.anythingSlider1 .start-stop {
    transition-duration: 0;
    -o-transition-duration: 0;
    -moz-transition-duration: 0;
    -webkit-transition-duration: 0;
}
 
Share this answer
 
Posted
Comments
sahabiswarup 3-Dec-11 4:09am    
check nayumaonline.com/test
will u want this type of slider???
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How to set index position of dynamicaly added column in grid view
Wpf checkbox template shows error
Kitchen chaos adding and subracting time on the timer.
Set validation expression property dynamicaly in asp.net
Gridview Edit Template
Countdown Timer
countdown timer
how to set timer?
Set a timer in VB.NET
set timer for slider

Advertise
Privacy
Cookies
Terms of Use
Last Updated 3 Dec 2011
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-07-22:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900