jquery tabslideout plugin and want to detect when div slide in and out - JavaScript Discussion Boards

i am trying to show multiple locations its showing proper but the pop box showing same at every place

for (i = 0; i < loc1.length; i++) {
var sunloc = loc1[i].split(',');
marker = new google.maps.Marker({ position: new google.maps.LatLng(sunloc[1], sunloc[2]), map: map });
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(sunloc[0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

kapil sharma 49 wrote:
loc1

What is the value in it?

kapil sharma 49 wrote:
infowindow.setContent(sunloc[0]);

You sure that the value of sunloc[0] is not same for all?

Sandeep Mewara
Microsoft ASP.NET MVP 2012 & 2013

[My Latest Article(s)]:
How to extend a WPF Textbox to Custom Picker
Server side Delimiters in ASP.NET

I have some Javascript code that if I have a null value in the return of any of the below I get " " in my receiving ASP.net page... any clues? I think I need an if/then to handle the " " and return "":

function GetRowValue(val1, val2, val3, val6, val4, val7) {
window.opener.document.getElementById("txtTransferFromLANID").value = val1;
window.opener.document.getElementById("txtTransferFromFName").value = val2;
window.opener.document.getElementById("txtTransferFromLName").value = val3;
window.opener.document.getElementById("txtUnitPrice").value = val6;
window.opener.document.getElementById("txtSoftwareShortName").value = val4;
window.opener.document.getElementById("txtOriginalTransactionNumber").value = val7;
window.close();
}

Are you sure your expressions are the right way round? You are setting elements in the window from the input parameters and then immediately closing the window.

One of these days I'm going to think of a really clever signature.

Everything is transfering properly to the ASP.net textboxes, except when there is a null value.

Well it's better than having the code crash.

One of these days I'm going to think of a really clever signature.

Javascript doesn't know what to do with a null value, so you have to write more code to handle the null value like = "";

XML

i am working with jquery tabslideout plugin. it wporks fine but i want to detect when tabslideout plugin slide in and out. if i could detect then i can call another routine. no idea is coming to my head to determine how to capture when tabslideout div slide-in and out. so please guide me. thanks

here is my code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
    imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
    tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                               //speed of animation
    action: 'click',                          //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                          //position from the top/ use if tabLocation is left or right
    leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

});

</script>

<style type="text/css">
.slide-out-div {
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
 }
 </style>

 <div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users.html">Content</a>
    <h3>Contact me</h3>
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
    </p>
    <p>This can be a form to submit feedback, or contact info</p>
 </div>

tbhattacharjee

Would jquery blur() function assist you? I added this to your code and it functions:

JavaScript

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

vbmike

thanks

tbhattacharjee

You are welcome, I hope it works for you.

vbmike

Is there a way to convert a html to pdf file, without making a call to the server ?

Can you explain more why you don't want to go to the server?

There are only 10 types of people in the world, those who understand binary and those who don't.

The thing is that the app we are creating is targeting the mobile phones(read iPhones). We do not want any network issues. So we are wanting to do as much as possible on the client side itself. Of course if there is no other option we will make a server call.

There's an app for that[^]

Or are you using PhoneGap?[^]

I'm kind of baffled here. This is a script that came in a customer project. I thought I fixed it, but when I run it, the slide counter goes 0 then 3 then 2 instead of 0 1 2

$(document).ready(function () {

    var slideContainer = $('[id*="_slideshow_container"]');
    var slidesHolder = $(slideContainer).children();
    var slideWidth = $(slideContainer).width();
    var slides = $(slidesHolder).children();
    var slidePos = 0;
    var slideTotal = slides.length;
    var currentSlide = 0;
    var delay = 5000;
    var slideTime = 1000;

    $(slideContainer).css({
        "overflow": "hidden",
        "position": "relative"
    });

    $(slidesHolder).css({
        "position": "absolute",
        "top": "0px",
        "left": "0px"
    });

    for (var i = 0; i < slides.length; i++) {
        $(slides[i]).css({
            "position": "absolute",
            "top": "0",
            "left": slidePos + "px"
        });
        slidePos = slidePos + slideWidth;
    }

    $(slidesHolder).css('width', slidePos + slideWidth);

    $(slides).first().clone().css({
        "left": slidePos + "px"
    }).appendTo(slidesHolder);

    animate();

    function animate() {

        $('[id*="_lbl_SS_Collapse"]').text(currentSlide);

        $(slidesHolder).delay(delay).animate({
            left: "-=" + slideWidth
        }, slideTime, function () {
            if (currentSlide < slideTotal) {
                currentSlide++;
                animate();
            }
            else {
                $(slidesHolder).css({
                    "left": "0px"
                });
                currentSlide = 0;
                animate();
            }

        });
    }
});

OK I get it now. The Javascript runs full speed until complete, but the delay in the animation function drags behind the execution of the code, so You can never really detect the end of the animation loop.

So for now, I'll just loop through some marketing messages, and then stop

I put a for loop in the function instead

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

            });
        }
    }

So this takes all the div and makes a filmstrip out of them, and moves each cell left, and then rewinds and starts again. I think it's simple in design. Feel free to comment on it.

///////////////////////////////////////////////////////////////////////////////
//  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);

                    });
                }
            });            
        }       
    }
}

The HTML Side

<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>

With a bit more detailed description this would be worth posting[^] as a Tip/Trick. It will soon get lost here, whereas Tips & Tricks and Articles can be searched and browsed quite easily.

One of these days I'm going to think of a really clever signature.

I thought about that last night, but sure if it was worthy of it, or if the code was clean enough. But based on the quality I usually see here, I should not doubt myself.

Thanks, this will be my first publish here on CJ

jkirkerx wrote:
if it was worthy of it

Only one way to find out.

One of these days I'm going to think of a really clever signature.

Why some java script run under tag only just lick following code

XML

<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"
        
</body>

And what's the question?

ProgramFOX

Please be more clear. I cannot understand what you are asking.

There are only 10 types of people in the world, those who understand binary and those who don't.

sir i am just asking to you following java script run under body tag why he cant run out side body tag

XML

<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>