console.log($('#dvTest').text());
You can also strip/remove HTML tags from any variable as well as text() is jQuery function, so the variable needs to be converted into a jQuery object so that text() can be used.var str = '<div>Sample <u>HTML</u> <b>Text</b> with <i>tags</i></div>';Feel free to contact me for any help related to jQuery, I will gladly help you.
console.log($(str).text());
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsAs you can see it is using HTTP protocol. The advantage of Google CDN files are cached up to one year which means that your users may not need to download jQuery at all. But when you move from HTTP to HTTPS pages, then you need to make sure that you are using https protocol for referencing jQuery as pages served via SSL should contain no references to content served through unencrypted connections.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsIt looks strange and initially I also felt the same but "protocol-less" URL is the best way to reference third party content that’s available via both HTTP and HTTPS. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.
$("#elm").css("display", "none"); //Line 1
$("#elm").css("display", ""); //Line 2
$("#elm").html(""); //Line 3
Above code lines are very common but its unfortunate because some faster and more readable shortcuts available, yet ignored. Find below jQuery code lines that does the exactly same thing but these are more readable and fast.$("#elm").hide(); //Line 1
$("#elm").show(); //Line 2
$("#elm").empty(); //Line 3
Related Post: There are many more examples which you can find in your code. For example, to add CSS Class to any element$("#elm").prop("class", "cssClass");
where the better approach would be,$("#elm").addClass("cssClass");
Another example is of setting height and width,$("#elm").css("height", "100px"); //Line 1
$("#elm").css("width", "100px"); //Line 2
using in-built jQuery functions,$("#elm").height(100); //Line 1
$("#elm").width(100); //Line 2
Another common situation is of toggling (show/hide) of element. For example, if($("#elm").is(":visible"))
$("#elm").css("display", "none");
else
$("#elm").css("display", "");
where the better approach is,$("#elm").toggle();
You can find many such situation where in-built jQuery functions can be used. Hope you find this useful and if you are also ignoring these shortcuts, then you need to move on...
.ui-datepicker-week-end {
display:none
}
Related Post: $('#txtNoWeekend').datepicker();
$("#txtNoWeekend").focus(function () {
$(".ui-datepicker-week-end").hide();
});
$("#txtNoWeekend").blur(function () {
$(".ui-datepicker-week-end").hide();
});
Feel free to contact me for any help related to jQuery, I will gladly help you.$(document).ready(function () {
window.setInterval(function () {
var iTimeRemaining = $("#spnSeconds").html();
iTimeRemaining = eval(iTimeRemaining);
if (iTimeRemaining == 0) {
window.location.href = "http://jquerybyexample.blogspot.com/";
}
else {
$("#spnSeconds").html(iTimeRemaining - 1);
}
}, 1000);
});
Feel free to contact me for any help related to jQuery, I will gladly help you.
// example HTML image galleryCollagePlus relies on all images being loaded before it can calculate the layout. It does not run off image sizes specified in the DOM.
<div class="Collage">
<img src="example1.jpg" />
<img src="example2.jpg" />
<img src="example3.jpg" />
</div>
//Call jQuery plugin function to create collage.
$('.Collage').collagePlus();
$(document).ready(function(){
if(window.location.hash) {
// # exists in URL
}
else {
// No # in URL.
}
});
Feel free to contact me for any help related to jQuery, I will gladly help you.
$(document).ready(function () {
$.get('http://jsonip.com', function (res) {
$('p').html('IP Address is: ' + res.ip);
});
});
$(document).ready(function () {
$.getJSON('http://smart-ip.net/geoip-json?callback=?', function(data) {
$('p').html('My IP Address is: ' + data.host);
});
});
Along with the IP address, this service also provide Geo location details as well like Country, latitude, longitude etc. Following are the properties which are returned as JSON response by this service.data.host;Feel free to contact me for any help related to jQuery, I will gladly help you.
data.countryName;
data.countryCode;
data.city;
data.region;
data.latitude;
data.longitude;
data.timezone;
$(document).ready(function () {
$('div').find('p').css("background", "yellow");
$('div').find('span').css("background", "pink");
});
Can this be done using chaining? The first line of code $('div').find('p'), will select all the <p> tag element in <div> and change background color. Since using find() we have filtered out all <p> elements so we need to use selector again to select <span>tag element and we can't use chaining. Fortunately, jQuery has .end() function which end the most recent filtering operation in the current chain and return to its previous state. Like,$(document).ready(function () {
$('div')
.find('p').css("background", "yellow")
.end()
.find('span').css("background", "pink");
});
This chain searches for <p> tag element in <div> and turns their backgrounds yellow. Then .end() returns the object to its previous state which was before the call to find(), so the second find() looks for <span> inside <div>, not inside <p>, and turns the matching elements' backgrounds to pink. The .end() method is useful primarily when exploiting jQuery's chaining properties.
$(document).ready(function () {
setInterval(function () {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 200;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}, 2000);
});
Now, there is an issue which above approach. That is, once you reach at the bottom of the page you setInterval will keep on calling the function after every 2 seconds which is not desired. One way is to disable the automatic scrolling once user reaches at bottom of the page.$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(function () {
var iScroll = $(window).scrollTop();
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
} else {
iScroll = iScroll + 200;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
}, 2000);
});
If the above solution don't work, then please make sure that you have include document type at top of the page. <!DOCTYPE HTML>The issue with above approach is that it gets executed only once. As once user reaches at bottom of the page, then setInterval is stopped. What if you want to have it again once user reaches at top of the page? Below jQuery code block exactly does the same thing.
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(AutoScroll, 2000);
function AutoScroll() {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 500;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
$(window).scroll(function () {
var iScroll = $(window).scrollTop();
if (iScroll == 0) {
myInterval = setInterval(AutoScroll, 2000);
}
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
}
});
});
If the above solution don't work, then please make sure that you have include document type at top of the page. <!DOCTYPE HTML>Feel free to contact me for any help related to jQuery, I will gladly help you.