JavaScript

kapil sharma 49 wrote:

loc1

kapil sharma 49 wrote:

infowindow.setContent(sunloc[0]);

$('.slide-out-div').click(function() {
  $('.slide-out-div').blur();
});
$('.slide-out-div').blur(function() {
  alert('Handler for .blur() called.');
});

function animate() {

        for (var i = 0; i < slideTotal - 1; i++) {

            $(slidesHolder).css({
                'left': '0px'
            });

            $(slidesHolder).delay(delay).animate({
                "left": "-=" + slideWidth
            }, slideTime, 'swing', function () {
                //Animation Complete - do something

            });
        }
    }

///////////////////////////////////////////////////////////////////////////////
//  jquery.displayadvertising.js
//
//  writen by Jim Kirker on December 18, 2012
//  Copyright by redCopper, Inc. 2013
//
//  Jquery and dynamic javascript to build a filmstrip out of current elements,
//  destroy the current elements and run the new filmstrip instead in the container;
//  then run the filmstrip in a loop, and rewind, then run again until a stop command is issued.
//
///////////////////////////////////////////////////////////////////////////////

$(document).ready(function () {
    
    load_DisplayAdvertising_Horizontal();
});

///////////////////////////////////////////////////////////////////////////////
//  load_DisplayAdvertising_Horizontal
//  Create a dynamic filmstrip in the DOM from current webform elements of text
//  We will run the filmstrip in another function below
///////////////////////////////////////////////////////////////////////////////
function load_DisplayAdvertising_Horizontal() {

    // Some fixed preset values
    var view_Width = 980;   // width of each filmstrip cell
    var view_Height = 250;  // height of each filmstrip cell
    var view_Time = 4000;   // amount of time to view the filmstrip cell
    var ease_Time = 1400;   // amount of time to pan the filmstrip cell left
    
    // Count how many Display Ads that we have in the slide container
    var child_Count = parseInt($('[id*="_slide_container"]').children().length);

    // We should build a dynamic message if no child objects exist


    //Prepare the slide_container as a fixed object with the correct css
    $('[id*="_slide_container"]').css({
        "position": "relative",
        "width": view_Width + "px",
        "height": view_Height + "px",
        "overflow": "hidden"        
    });

    // Alright, Setup all the the Child Panels 
    // within the Parent Container as a long film strip of panels
    var fsWidth = 0;
    var fsHeight = 0;

    // Loop through the Display Ads and reprogram the CSS
    $('[id*="_slide_container"]').find("._slide_child").css({
        //Program each child container to display and othe specs
        "display": "inline",
        "position": "relative",
        "float": "left",
        "top": "0px",
        "left": "0px"                        
    }).each(function (index) {
        // Measure the total width and max height of all child containers
        // to make a long horizontal filmstrip that just pans left to right
        fsWidth = fsWidth + parseInt($(this).css("width"));
        if (fsHeight < parseInt($(this).css("height"))) {
            fsHeight = parseInt($(this).css("height"));
        }
    })

    // Create a dynamic long FilmStrip container 
    // to put all the child panels in like movie film
    var div_filmStrip = document.createElement("div");
    div_filmStrip.style.textAlign = "left";
    div_filmStrip.style.width = fsWidth + "px";
    div_filmStrip.style.height = fsHeight + "px";
    div_filmStrip.style.position = "relative";
    div_filmStrip.style.left = "0px";
    div_filmStrip.style.top = "0px";
    
    // Copy the html from each child container to reinsert into the Dom
    var temp_InnerHTML = $('[id*="_slide_container"]').html();
    div_filmStrip.innerHTML = temp_InnerHTML;

    // Replace the old container content with this new filmstrip and copied content
    $('[id*="_slide_container"]').empty();
    $('[id*="_slide_container"]').append(div_filmStrip);

    // Run the Display Advertising in a seperate function for play and rewinding
    // The function should be just below this function
    run_DisplayAdvertising_Horizontal(
        div_filmStrip,
        fsWidth,
        view_Width,
        child_Count,
        view_Time,
        ease_Time
    ); 
}

///////////////////////////////////////////////////////////////////////////////
//  run_DisplayAdvertising_Horizontal
//  External run function that plays and rewinds over and over
///////////////////////////////////////////////////////////////////////////////
function run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT) {
    if (cC > 0)
    {
        var fsWidth = parseInt(cW - vW);
        var fsRewind = parseInt(vT / cC);
        for (var i = 0; i < cC-1; i++)
        {
            $(obj).delay(vT).animate({
                left: '-=' + vW
            }, eT, "linear", function () {
                //Animate Complete             
                var fsPosition = parseInt($(obj).css("left"));
                if (fsPosition == -fsWidth) {
                    $(obj).delay(vT).animate({
                        left: '0px'
                    }, fsRewind, "linear", function () {
                        // rewind complete, run the Display Ad again
                        run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT);

                    });
                }
            });            
        }       
    }
}

<div id="_slide_container" style="width: 980px; height: 254px; text-align: center; margin: 0px auto; display: block;">

       <div id="slideChild_0" class="_slide_child" style="width: 980px; height: 250px; display: block;">
           <asp:Image ID="img_slideshow_child_0" runat="server"
               ImageUrl="~/EN-US/images/SlideShows/SS_StrategyPlanning_980x250.png" />
       </div>

       <div id="slideChild_1" class="_slide_child" style="width: 980px; height: 250px; display: none;">
           <asp:Image ID="img_slideshow_child_1" runat="server"
               ImageUrl="~/EN-US/images/SlideShows/SS_WebDesign_980x250.png" />
       </div>

       <div id="slideChild_2" class="_slide_child" style="width: 980px; height: 250px; display: none;">
           <asp:Image ID="img_slideshow_child_2" runat="server"
               ImageUrl="~/EN-US/images/SlideShows/SS_WebDevelopment_980x250.png" />
       </div>

       <div id="slideChild_3" class="_slide_child" style="width: 980px; height: 250px; display: none;">
           <asp:Image ID="img_slideshow_child_3" runat="server"
               ImageUrl="~/EN-US/images/SlideShows/SS_HKB_Project_2_980x250.png" />
       </div>

       <div id="slideChild_4" class="_slide_child" style="width: 980px; height: 250px; display: none;">
           <asp:Image ID="img_slideshow_child_4" runat="server"
               ImageUrl="~/EN-US/images/SlideShows/SS_InternetCommerceEngine-5_980x250.png" />
       </div>

   </div>

jkirkerx wrote:

if it was worthy of it

<body>

    <form id="form1" runat="server">

    <p id ="Demo0">
    A pragraph
    </p>
    <div id="Demo1">
    B Pragraph
    </div>

<p id="demo">A Paragraph.</p>

<div id="myDIV">A DIV.</div>
    </form>
    <script type ="text/javascript">
        document.getElementById("Demo0").innerHTML = "My Javascript Page0";
        document.getElementById("Demo1").innerHTML = "My Javascript Page1"

    </script>
</body>