jquery tabslideout plugin and wired behavior - JavaScript Discussion Boards

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

Hey Guys,
Got the datePicker working to select multiple dates. When the user selects multiple dates and closes the calendar the textbox displays the dates in the format:
Thur Jan 03 2013 00:00:00 GMT +0000
Fri Jan 03 2013 00:00:00 GMT +0000
Sat Jan 04 2013 00:00:00 GMT +0000,

My Code:

JavaScript

<script>

           $("#HolidayDate").addClass('date-pick');
           $('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();
           (
                   {
                       createButton: false,
                       displayClose: true,
                       closeOnSelect: false,
                       selectMultiple: true,
                   }
           )
           .bind(
               'click',
               function () {
                   $(this).dpDisplay();
                   this.blur();
                   return false;
               }
           )
           .bind(
               'dateSelected',
               function (e, selectedDate, $td, state) {
                   console.log('You ' + (state ? '' : 'un') // wrap
                       + 'selected ' + selectedDate);
               }
           )
           .bind(
               'dpClosed',
               function (e, selectedDates) {
                   console.log('You closed the date picker and the ' // wrap
                       + 'currently selected dates are:');
                   console.log(selectedDates);
                   $('#HolidayDate').val( selectedDates );
               }
           );

   </script>

----------------------------------------

However I would like the date to display as dd-mm-yy.
If I use the commented out line

JavaScript

$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();

The textbox will return the date in the correct format but now it only allows me to select one date at a time.

Please advice?

Thanks

http://keith-wood.name/datepick.html[^]
this may help u

Srinivas NV

Thank you, it was a great help

Hi All,

I am using vb.net web application and in this application I create a dynamic table for displaying db query result.

At this point, I want to use a javascript function which is called in Pageload. This function will delete selected rows by using table id.

By the way there is no checkbox, linkbutton, etc... in the table.

Thanks for your help,

You can assign id to the TR element and when you want to delete the row then just set the innerText of that tr to '' blank. Hope this will help.

Could you please an example? How can i handle the selected row id and how can i use innerText?

Thanks,

Tables actually have some useful methods for this kind of thing - you can delete the rows by position using deleteRow()[^].

This weekend, I wrote a HTML5 web page with some javascript. This page is composed of eight canvases, each of which displays a certain set of images. The background image is a christmas tree, and each succeeding layer displays a group of ornaments or lights. What ornaments are displayed is determined by the contents of an XML data file. It works fine in the following browsers:

- FireFox v16+
- Google Chrome 23+
- iOS Safari v5.1+

It works partially in the following browsers:

- Opera 12.11 - the background image shows up, but nothing else.
- Android 4.2 Phones - the nutcracker ornament doesn't show up

And doesn't work at all in IE9. (!) This is a *big* problem.

I haven't tried Windows Safari because I hate installing Apple crap on my system, and IE8 (and earlier) is probably a waste of time.

Here's the link to the page: Tree of hope demo[^]

And to download the page source: Zipped web site files[^]

I have no idea why IE9 and Opera refuse to work, but I suspect the problem might be similar in nature. I could really use some help here, because I know just enough about javascript to be considered a deadly weapon.

IE breaks when it tries to call context.drawImage() the first time. I thought it might be because I was only specifying the x/y coordinate, so I added the width and height, but that didn't fix it. Opera breaks in the *2nd* call to context.drawImage() - it draws the tree, but none of the ornament canvases. In both cases, the context in question is indeed valid,and the image it's trying to draw is defined (not null).

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

modified 3-Dec-12 7:35am.

Running it in the IE9 debugger I found that the "complete" member of the current image was false when the script fails. So the browser hasn't loaded the relevant image before trying to draw it.

I managed to get the page to work in Opera by changing both occurrences of

context.drawImage(collection[i].OnImage.ItemImage, collection[i].ImageX, collection[i].ImageY);

to

context.setTransform(1, 0, 0, 1, collection[i].ImageX, collection[i].ImageY);    
context.drawImage(collection[i].OnImage.ItemImage, 0, 0);

I don't know why that should make any difference though.

Graham Breach wrote:
Running it in the IE9 debugger I found that the "complete" member of the current image was false when the script fails. So the browser hasn't loaded the relevant image before trying to draw it.

Is there a way to wait until complete is true before continuing with processing? I got the background image from someone else, and neglected to post-process the background image so that it was a reasonable size on disk. Maybe doing that will fix it...

Graham Breach wrote:
I managed to get the page to work in Opera by changing both occurrences of
context.drawImage(collection[i].OnImage.ItemImage, collection[i].ImageX, collection[i].ImageY);
to
context.setTransform(1, 0, 0, 1, collection[i].ImageX, collection[i].ImageY);    
context.drawImage(collection[i].OnImage.ItemImage, 0, 0);
I don't know why that should make any difference though.

I wonder why that would even matter...

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I have it working in IE9 now - the problem wasn't the images taking too long to load, it was looking in the wrong place for them.

The contents of the XML node is not in a "textContent" member in IE9, it is in "text" instead, so I've changed the parseConfigNodes function like this:

if (child.tagName == "ImageFolder")
{
  _cfgImageFolder = (child.text || child.textContent) + "/";
}
else if (child.tagName == "PetPicsFolder")
{
  _cfgPetsFolder = (child.text || child.textContent) + "/";
}

This should do the trick unless the folder name happens to be falsy.