So I rewrote the program from scratch, works pretty good now, feel free to build on it - JavaScript Discussion Boards

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>

Actually, you should put the script tag in the head tag.

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

You will need to change the contents of the divs AFTER the page loads.

vbmike

hey guys..So I am using datepicker http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.htmlto select start and end dates.I have the controller coded so that if the user attempts to select a date from the calendar (which is already stored for them-from a previous selection) it will not add it to the DB. I also have the weekends blocked out so they cant be used (done using
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html)

E.g say the user has previously selected fri 14th and added it to the DB, if they try to make a new record selecting from thur 13th to mon 17th- only thur 13, and mon 17th will be added to the DB. As fri 14th was previously added and 15 and 16th are weekendsone using the following code:

C#

[HttpPost] public ActionResult listHolidays(Holiday holiday, int? PersonId, string HolidayDate, string endDate, string AlreadyExists) 
{ DateTime startDates = Convert.ToDateTime(HolidayDate); 
DateTime endDates = Convert.ToDateTime(endDate); 

while (startDates <= endDates)
{
if (startDates.DayOfWeek != DayOfWeek.Saturday && startDates.DayOfWeek != DayOfWeek.Sunday)
{ 
ViewBag.CantDuplicateHolidays = String.IsNullOrEmpty(AlreadyExists) ? "date" : "";
var dates = from d in db.Holidays
where d.HolidayDate == startDates && d.PersonId == PersonId
select d;


// <= 0..so if it does not already exist
if (dates.Count() <= 0)
{
Holiday holiday1 = new Holiday();
holiday1.PersonId = PersonId.Value;
holiday1.HolidayDate = startDates;


db.Holidays.AddObject(holiday1);
db.SaveChanges();
//say start date is 10. AddDays(1) will make it 11 then return it to startDates in 'startDates' = startdates,
//but doesnt chage the value of startdates = 'startdates'
}


}


startDates = startDates.AddDays(1);
}


return RedirectToAction("Index");
}

---------------
my view

HTML

Date.format = 'dd/m/yyy';
$("#HolidayDate").addClass('date-pick');
$("#endDate").addClass('date-pick');
//$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();


// clickInput: true


$(function () {
//3 methods below dont allow user to select weekends
$('.date-pick').datePicker(
{
createButton: false,
renderCallback: function ($td, thisDate, month, year) {
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}


}
}
)


.bind('click',
function () {
$(this).dpDisplay();
this.blur();
return false;
}
)


.bind('dateSelected',
function (e, selectedDate, $td) {
console.log('You selected ' + selectedDate);
}
);


// HolidayDate is start date
$('#HolidayDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#endDate').dpSetStartDate(d.addDays(0).asString());
}
}
);


//end date is end date
$('#endDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#HolidayDate').dpSetEndDate(d.addDays(0).asString());
}
}
);
});

can any suggest how to disable a date on the calendar if it is already in the DB

XML

our company has web site called http://www.bba-reman.com. i tried to put the sliding behavior on the left side of our web site but the div is not showing properly when page load and when we click on expand button then nothing happen. here is the sample code of tabslideout plugin.

when i add the above script in blank page then it works fine but when i add this code in our live site then it didn't work properly.

may be i put the div called "slide-out-div" in wrong div or in wrong place. so it is my request please go to our website http://www.bba-reman.com and inspect the page structure with firebug or by any other tool and tell me how could i setup the above script as a result feedback button should come at left and when user click on feedback button then div called "slide-out-div" should expand. thanks

<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

Did you put your slide-out-div div inside any other divs? Try putting it right before the </body> tag.

thanks ur tips works

tbhattacharjee

Hi all,

I'm an old C++ programer who has dabbled in web coding and javascript over the years. Lately I've been trying to get a handle on the mooTools framework for javascript. I'm having a bit of trouble understanding how javascript handles binding, or it may be a mootools binding thing, I'm not sure. Any insight is appreciated.

The following code works:

C#

var myMenu = new Class({

    initialize: function(elements, options){
    <!-- <snip>  -->
    // Add mouseenter and mouseleave events to each of the menu elements
        this.elements.each(
        function(el,i){
                var obj = this;
                el.addEvent('mouseenter', function(evnt){
                   obj.menuOpen(i);
                });
                el.addEvent('mouseleave', function(evnt){
                   obj.menuOpen(null);
                });
            }.bind(this) // end of function(el,i)
    );  // end of this.elements.each

    }, // End of initialize function
  menuOpen(evnt, i) {
     .... do menu stuff ....
  }
  <!-- <snip>  -->
});

The anonymous function coded in-line with the call to addEvent works properly and my menu items open and close as expected. What I tried, because it looks better to my C++ trained eyes, and to see if I understood things correctly was this:

C#

var myMenu = new Class({

    initialize: function(elements, options){
    <!-- <snip>  -->

    mouseEnter: function(evnt, i){
                   this.menuOpen(evnt, i);
                },
    mouseLeave: function(evnt){
                   this.menuOpen(null);
                },

    // Add mouseenter and mouseleave events to each of the menu elements
    this.elements.each(
            function(evnt,i){
                var obj = this;
                el.addEvent('mouseenter', obj.mouseEnter(evnt, i));
                el.addEvent('mouseleave', obj.mouseLeave(evnt, i));
            }.bind(this) // end of function(el,i)
    );  // end of this.elements.each

  }, // End of initialize function

  menuOpen(evnt, i) {
     .... do menu stuff ....
  }
  <!-- <snip>  -->
});

This does not work (nothing happens), yet to me it looks like it should. I'm pretty sure it has to do with binding the functions to the proper object in the addEvent calls (or something) but none of the things I've tried have worked.

If you can give some clues to help me understand what's going wrong here I'd appreciate it.

Thanks,

Steve

I have a text box andit will accept only time in the format 00:00(maximum value can be 12:59) . If user enter any of the value greater than this that part only needs to become 00. i have the code like this,but it will change the whole value to 00:00 . In the greater than conditions, what i have to write .

JavaScript

function ValidateTimeControl(s, e) {
    var isValid = true;
    if (e.value != null) {
        if (e.value.substring(0, 1).trim() == "" || e.value.substring(1, 2).trim() == "" || e.value.substring(3, 4).trim() == "" || e.value.substring(3, 4).trim() == "") {
            isValid = false;
        }
        else {
            var hours = parseInt(e.value.substring(0, 2), 10);
            var minutes = parseInt(e.value.substring(3, 5), 10);

            if (hours > 12) {alert(hours)
                isValid = false;
                
            }

            if (minutes > 59) {
                isValid = false;
            }
        }
    }
    else {
        isValid = false;
    }

    if (!isValid) {
        e.value = '00:00';
        
    }
}

Thanks
Rks

You need to rewrite the text value with the hours or minutes set to zero. Something like:

JavaScript

else {
    var hours = parseInt(e.value.substring(0, 2), 10);
    var minutes = parseInt(e.value.substring(3, 5), 10);
    
    if (hours > 12) {
        alert(hours)
        hours = 0;
    }
    if (minutes > 59) {
        minutes = 0;
    
    }
    // I'm not sure about this but you can probably figure out the exact statement
    e.value = hours.toString() + ":" + minutes.toString();
}

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

Thanks for the reply . i Found a solution like this

JavaScript

function ValidateTimeControl(s, e) {
    var isValidHour = true;
    var isValidMin = true;
    var hours, minutes;
    if (e.value != null) {
        if (e.value.substring(0, 1).trim() == "" || e.value.substring(1, 2).trim() == "" ) { 
            isValidHour = false;
        }
        if (e.value.substring(3, 4).trim() == "" || e.value.substring(3, 4).trim() == "") {
            isValidMin = false;
        }
        else {
            hours = parseInt(e.value.substring(0, 2), 10);
            minutes = parseInt(e.value.substring(3, 5), 10);
 
            if (hours > 12) {alert(hours)
                isValidHour = false;
                
            }
 
            if (minutes > 59) {
                isValidMin = false;
                
            }
        }
    }
    else {
        isValidHour = false;
        isValidMin = false;
    }
 
    if (isValidHour == false && isValidMin == false) {
        e.value = '00:00';
    } else if (isValidHour == false) {
        e.value = e.value.replace(hours, '00');
    } else if (isValidMin == false) {
        e.value = e.value.replace(minutes, '00');
    }
}<pre lang="Javascript">