Rectangle 27 10

Tested and working!

$(function() {

    var extraDays = 0;
    var combobox = $('#select1');
    var txtStartDate = $('#startdate');
    var txtEndDate = $('#enddate');
    var inputs = txtStartDate.add(txtEndDate);

    combobox.on('change', function() {

        inputs.val('');

        var val = $(this).val();
        if(val == 1) extraDays = 5;
        if(val == 2) extraDays = 7;

        txtStartDate.datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: 'mm/dd/yy',
            beforeShowDay: function(date) {

                /* Check for the first day */
                if (date.getDate() == 1) { return [true, '']; } 
                else { return [false, '', 'Unavailable']; }
            },
            onSelect: function(selected) {

                /* Add extra days to the date according to 'combobox' selection */
                var endDate = new Date(selected);
                endDate.setDate(endDate.getDate() + extraDays);

                var m = pad(endDate.getMonth() + 1, 2);
                var d = pad(endDate.getDate(), 2);
                var y = endDate.getFullYear();
                var endDateStr = [m, d, y].join('/');

                txtEndDate.val(endDateStr);
            }
        });

    });

});

/* This function just adds a zero to get this format: "01, 02, etc" in a number less than 10 */
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) { str = '0' + str; }
    return str;
};

Jquery datepicker make only 1 day selectable and copy date +x days in ...

jquery jquery-ui datepicker
Rectangle 27 10

Tested and working!

$(function() {

    var extraDays = 0;
    var combobox = $('#select1');
    var txtStartDate = $('#startdate');
    var txtEndDate = $('#enddate');
    var inputs = txtStartDate.add(txtEndDate);

    combobox.on('change', function() {

        inputs.val('');

        var val = $(this).val();
        if(val == 1) extraDays = 5;
        if(val == 2) extraDays = 7;

        txtStartDate.datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: 'mm/dd/yy',
            beforeShowDay: function(date) {

                /* Check for the first day */
                if (date.getDate() == 1) { return [true, '']; } 
                else { return [false, '', 'Unavailable']; }
            },
            onSelect: function(selected) {

                /* Add extra days to the date according to 'combobox' selection */
                var endDate = new Date(selected);
                endDate.setDate(endDate.getDate() + extraDays);

                var m = pad(endDate.getMonth() + 1, 2);
                var d = pad(endDate.getDate(), 2);
                var y = endDate.getFullYear();
                var endDateStr = [m, d, y].join('/');

                txtEndDate.val(endDateStr);
            }
        });

    });

});

/* This function just adds a zero to get this format: "01, 02, etc" in a number less than 10 */
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) { str = '0' + str; }
    return str;
};

Jquery datepicker make only 1 day selectable and copy date +x days in ...

jquery jquery-ui datepicker
Rectangle 27 2

I'm trying to get what's wrong and why it's not working but:

var currentSlide = $(visibleSlide).index() + 1;

You don't need to wrap visibleSlide in jQuery since it's already a jQuery object.

slideCount = $('#slider li').size();

Usually length is used in this situation instead of size().

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

Haven't tried, it might work, but I think it probably won't be a good solution for later on.

$('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');

It looks weird, is it missing a quote, or has too much white space, don't know, it just looks like that won't work but I might be wrong. Maybe here's where your problem comes from.

autoslide = setTimeout("nextSlide()", 6000);
val
$('#selection .scrollable .items a').live('click', function (e)

Do you need all those selectors? Also, I think live() is deprecated in favor of on().

var count = $('#selection .scrollable .items a').length - 1;
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

This just gives me the same feeling that it might work sometimes. I don't get why you define count and then you override it with a weird ternary operation. I feel like there might be a better way to do this.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - jQuery fadein and out is not working properly in Google C...

javascript jquery google-chrome
Rectangle 27 2

I'm trying to get what's wrong and why it's not working but:

var currentSlide = $(visibleSlide).index() + 1;

You don't need to wrap visibleSlide in jQuery since it's already a jQuery object.

slideCount = $('#slider li').size();

Usually length is used in this situation instead of size().

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

Haven't tried, it might work, but I think it probably won't be a good solution for later on.

$('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');

It looks weird, is it missing a quote, or has too much white space, don't know, it just looks like that won't work but I might be wrong. Maybe here's where your problem comes from.

autoslide = setTimeout("nextSlide()", 6000);
val
$('#selection .scrollable .items a').live('click', function (e)

Do you need all those selectors? Also, I think live() is deprecated in favor of on().

var count = $('#selection .scrollable .items a').length - 1;
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

This just gives me the same feeling that it might work sometimes. I don't get why you define count and then you override it with a weird ternary operation. I feel like there might be a better way to do this.

javascript - jQuery fadein and out is not working properly in Google C...

javascript jquery google-chrome
Rectangle 27 1

As I answered in my comment that is working now but in the click event it's not working so you can simply use

$('#slider_indicator a').bind('click', function(e){
    clearInterval(autoslide);
    autoslide=setInterval("nextslide", 6000);
});

javascript - jQuery fadein and out is not working properly in Google C...

javascript jquery google-chrome
Rectangle 27 1

As I answered in my comment that is working now but in the click event it's not working so you can simply use

$('#slider_indicator a').bind('click', function(e){
    clearInterval(autoslide);
    autoslide=setInterval("nextslide", 6000);
});

javascript - jQuery fadein and out is not working properly in Google C...

javascript jquery google-chrome
Rectangle 27 9

The CSS tag 'margin & padding' is actually a shorthand for the four separate margin/padding values, top/left/bottom/right. Use css('marginTop'), etc. - note they will have 'px' on the end if you have specified them that way.

Use parseInt() around the result to turn it in to the number value.

<input name="margin-top" />
<input name="padding-top" />
<input name="marginTop" />
<input name="paddingTop" />

This will give you the value. Using this technique you can get the value of margin and padding.

It's strange that the shorthands work in jQuery in Chrome, but not jQuery Firefox.

jQuery - css() not working properly in firefox - Stack Overflow

jquery
Rectangle 27 27

Do you know that Page Methods are working properly? If you use the the ScriptManager do they work?

It sounds like you might be missing a web.config entry. Specifically the HttpModules section.

Dangit! I knew it was going to be something easy. I guess I assumed that any configs that would be needed would've been handled by VS when I dropped in a ScriptManager (which was why I added it, cause I knew you don't need it. Thanks!

Been researching this problem for an hour+ and web.config and the ScriptModule httpModule ended up being the culprit. Thanks!

Call ASP.NET PageMethod/WebMethod with jQuery - returns whole page - S...

asp.net jquery web-services asmx pagemethods
Rectangle 27 5

This is happening because properties like margin and padding are short hand property and jQuery cannot give you these values you have use independant values such as margin-top and margin-right.

margin-top
marginTop

First letter of second word should be capital

For a full set of values:

<input name="marginTop" />
<input name="marginRight" />
<input name="paddingTop" />
<input name="paddingRight" />
<input name="fontSize" />
<input name="fontFamily" />

jQuery - css() not working properly in firefox - Stack Overflow

jquery
Rectangle 27 1

since the error in your code was pointed out by the other answer here is an alternate solution. if you want to format the number in the form (###) ###-#### here is a solution that uses regex to first stip non-digits, then depending on the length of the actual digits, format them. tested in chrome and safari. also handles deletes/backspace

$(document).ready(function(){
    
    $('input[name=user_phone]').keyup(function() {
        var number = $('input[name=user_phone]').val();
        var digits = number.replace(/[^0-9\.]+/g, '');
        var lastDigitIndex = (digits.length < 10) ? digits.length : 10;
        
        var key = event.keyCode || event.charCode; 
        
        if (key != 8 && key != 46) {
            if (digits.length >= 3) {
    
                var output = '(' + digits.substring(0, 3) + ') ';
                
                if (digits.length >= 6) {
                    output += digits.substring(3, 6) 
                        + '-' + digits.substring(6, lastDigitIndex);
                }
                else {
                    output += digits.substring(3, lastDigitIndex);
                }
                
                $(this).val(output);
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />

html input field value setter not working properly in chrome and safar...

jquery html google-chrome
Rectangle 27 7

Keypress is a confusing event. While keydown and keyup will tell you which specific key on your keyboard is down or just came back up, the keypress event is supposed to tell you what character would appear on the screen, that's why the jquery documentation that you referenced says:

For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.

To make things worse Safari doesn't trigger keypress events for stuff that doesn't write something onto the screenthats why arrow keys won't work. Firefox, however, does trigger keypress events for arrow keys. Both are reasonable implementations of the spec, so dont expect either to change. That's why there was the suggestion to just stick with keydown or keyup.

However, it looks like you want to take advantage of how the keypress event repeats (in Firefox) when a key is held down and you want to do this with an arrow key. If that's the case, you need to write a handler that looks at both keydown and keypress. here are the two different ways browsers react to an arrow key being held down:

  • Firefox registers a keydown event and also repeats keypress events (note: just hitting the key once will register both a keydown and a keypress event)
  • Safari registers a keydown event and repeats the keydown event

A quick hack to make that work reasonably well for arrow keys and get the key repeats to work is:

function moveItem(evt) {
    // do something with `this` and evt.keyCode here...
}

$(document.documentElement)
    .keypress(function(evt) {
        if ($.data(this, '_lastKeyEvent') != 'keydown') {
            // since firefox will do both a keydown and a keypress for the first
            // keydown, we ignore the very first keypress
            moveItem.call(this, evt);
        }
        $.data(this, '_lastKeyEvent', 'keypress');
    })
    .keydown(function(evt) {
        moveItem.call(this, evt);
        $.data(this, '_lastKeyEvent', 'keydown');
    });

+1 - Excellent explanation of the key* events.

keypress event not working properly in safari and in Firefox with jQue...

jquery
Rectangle 27 3

Although I couldn't find this specifically stated anywhere, .focus() only works on input elements and links. It also isn't supported properly in Chrome and Safari. I posted a demo here to show you what I mean. Also note that focus() and focusin() (v1.4) have the same results.

.click()
$("#recipientsDiv").click(function(e){ ... })

javascript - focus() not working in safari or chrome - Stack Overflow

javascript jquery focus keystroke dynamic-forms
Rectangle 27 88

$("html,body").animate({ scrollTop: 0 }, "slow");

This works for me in chrome.

Yes.Thanks.Simple and timesaving.

I had exactly the same issue, although I was also animating scrollTop. the interesting thing is that $("html") works in FF, and $("body") works in Chrome/Safari, but only $("html,body") has worked for me in both.

This has a side effect: a callback function will be called twice (once for each element). Any smart workaround for this, anybody?

Put: if (this.nodeName == "BODY") { return; } at the beginning of your callback function so only the callback from the html element will go through. Also, remember that the nodeName attribute on html elements is always uppercase.

jQuery scrollTop not working in Chrome but working in Firefox - Stack ...

jquery jquery-ui jquery-selectors
Rectangle 27 88

$("html,body").animate({ scrollTop: 0 }, "slow");

This works for me in chrome.

Yes.Thanks.Simple and timesaving.

I had exactly the same issue, although I was also animating scrollTop. the interesting thing is that $("html") works in FF, and $("body") works in Chrome/Safari, but only $("html,body") has worked for me in both.

This has a side effect: a callback function will be called twice (once for each element). Any smart workaround for this, anybody?

Put: if (this.nodeName == "BODY") { return; } at the beginning of your callback function so only the callback from the html element will go through. Also, remember that the nodeName attribute on html elements is always uppercase.

jQuery scrollTop not working in Chrome but working in Firefox - Stack ...

jquery jquery-ui jquery-selectors
Rectangle 27 238

It seems jQuery's :visible selector does not work for some inline elements in Chrome. The solution is to add a display style, like "block" or "inline-block" to make it work.

Also note that jQuery has a somewhat different definition of what is visible than many developers

Elements are considered visible if they consume space in the document.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

All option elements are considered hidden, regardless of their selected state.

During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

In other words, elements that consume space are visible, which means the element must have a width and a height to consume space and be visible. On the other hand, even if it's visibility is set to hidden or the opacity is zero, it's still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says it's visibility is hidden.

The easy way to look at it, is that if you can see the element on the screen, even if you can't see it's content, it's transparent etc., it's visible, i.e. it takes up space.

I cleaned up your markup a little and added a display style (i.e. setting the elements display to "block" etc), and this works for me:

:visible

As of jQuery 3, the definition of :visible has changed slightly

jQuery 3 slightly modifies the meaning of :visible (and therefore of :hidden). Starting with this version, elements will be considered :visible if they have any layout boxes, including those of zero width and/or height. For example, br elements and inline elements with no content will be selected by the :visible selector.

I also tried pasting the individual components in jsFiddle and it worked fine. I will try to replicate the error in jsFiddle and then post the link. Probably something else in the code is causing this error

I have replicated the problem on the following link: jsfiddle.net/WJU2r/3

Thanks alot that worked! I don't know why but setting #makespan { display: block; } made it work.

The comment from the original poster contains the actual solution, IE, making your spans display:block. Silly that spans are invisible by default in chrome, but, whatever.

jQuery `.is(":visible")` not working in Chrome - Stack Overflow

jquery google-chrome
Rectangle 27 236

It seems jQuery's :visible selector does not work for some inline elements in Chrome. The solution is to add a display style, like "block" or "inline-block" to make it work.

Also note that jQuery has a somewhat different definition of what is visible than many developers

Elements are considered visible if they consume space in the document.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

All option elements are considered hidden, regardless of their selected state.

During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

In other words, elements that consume space are visible, which means the element must have a width and a height to consume space and be visible. On the other hand, even if it's visibility is set to hidden or the opacity is zero, it's still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says it's visibility is hidden.

The easy way to look at it, is that if you can see the element on the screen, even if you can't see it's content, it's transparent etc., it's visible, i.e. it takes up space.

I cleaned up your markup a little and added a display style (i.e. setting the elements display to "block" etc), and this works for me:

:visible

As of jQuery 3, the definition of :visible has changed slightly

jQuery 3 slightly modifies the meaning of :visible (and therefore of :hidden). Starting with this version, elements will be considered :visible if they have any layout boxes, including those of zero width and/or height. For example, br elements and inline elements with no content will be selected by the :visible selector.

I also tried pasting the individual components in jsFiddle and it worked fine. I will try to replicate the error in jsFiddle and then post the link. Probably something else in the code is causing this error

I have replicated the problem on the following link: jsfiddle.net/WJU2r/3

Thanks alot that worked! I don't know why but setting #makespan { display: block; } made it work.

The comment from the original poster contains the actual solution, IE, making your spans display:block. Silly that spans are invisible by default in chrome, but, whatever.

jQuery `.is(":visible")` not working in Chrome - Stack Overflow

jquery google-chrome
Rectangle 27 51

If your CSS html element has the following overflow markup, scrollTop will not function.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}

it maybe more than 4 years old, but it was still the solution to my problem

@Leandro this is the solution in chrome 41. don't discourage an answer that answers the question.

jQuery scrollTop not working in Chrome but working in Firefox - Stack ...

jquery jquery-ui jquery-selectors
Rectangle 27 51

If your CSS html element has the following overflow markup, scrollTop will not function.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}

it maybe more than 4 years old, but it was still the solution to my problem

@Leandro this is the solution in chrome 41. don't discourage an answer that answers the question.

jQuery scrollTop not working in Chrome but working in Firefox - Stack ...

jquery jquery-ui jquery-selectors
Rectangle 27 15

input
val()
$input.trigger("input");
var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  // Change the value and trigger input
  $input.val($input.val() + 'x').trigger("input");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="myinput" type="text" />
<button id="change">Change value</button>

As mentioned you don't want to trigger input manually. This solution triggers the event automatically by overriding val().

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        var res = originalVal.apply(this, arguments);

        if (this.is('input:text') && arguments.length >= 1) {
            // this is input type=text setter
            this.trigger("input");
        }

        return res;
    };
})(jQuery);

Notice this.is('input:text') in the condition. If you want to trigger the event for more types, add them to the condition.

Best solution I've seen yet. I never thought about overriding, very nice!

@JaqenH'ghar What about setting the input.value = 'something'? Will it work for that?

OPs question and the answer both regard jQuery val(). If you wish to set the value without val() as by using input.value = 'something' the best and easiest way for you would probably be to trigger the event manually (something OP didnt want but might be best for you)

I would advise against overriding such an ubiquitous function as val. Some jQuery plugins you'd want to add later may rely on it not triggering an input event and start to act weird if you do. For instance, if a plugin does sanitizing on the user input and writes back a modified value using val you're stuck in an infinite loop.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

Input event not working if value is changed with jQuery val() or JavaS...

javascript jquery html events input
Rectangle 27 3

If you want unobtrusive client side validation in web config try setting both ClientValidationEnabled and UnobtrusiveJavaScriptEnabled to true. Then make sure you have removed all traces of MicrosoftAjax* client script libraries and have included jquery and jquery.validate as that's what MVC 3 uses:

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

I needed to turn on the unobtrusive JS, it all works fine now.

asp.net mvc 3 - Range validation not working properly in MVC3 - Stack ...

asp.net-mvc-3 data-annotations