Category Archives: Jquery Blog

Bootstrap change tooltip content on click


Bootstrap change tooltip content on click jQuery– We can change tooltip content such as title on click event using jQuery. Here in this article we are going to create one example to dynamically change the tooltip content.


Bootstrap change tooltip content on click jQuery Example

You can change the title of tooltip in bootstrap using jQuery Simply as below –

Bootstrap change tooltip Title on click:

                            




     




                                                                                                                                                                        

Try it »

If you run the above example it will produce output something like this –

Bootstrap change tooltip content on click

jQuery trigger function when element is in viewport


jQuery trigger function when element is in viewport : Sometimes we need to call function when element appears in viewport. There are many ways to check the element postion, we are going to explain the easiest way to check the position of an element using jQuery and then call the function. You can also use our online editor to edit and run the demo online.


jQuery trigger function when element is in viewport | Example

You use the following method to check that element is in viewport or not –

jQuery trigger function when element is in viewport?



   	

Demo Div

Try it »

Select element by data attribute in JavaScript


Select element by data attribute in JavaScript : We sometimes need to select element by data attribute in javascript. You can select the element simply using the document.querySelectorAll() in javascript. Here in this tutorial we are going to explain how you can select the element using the data attribute in javascript with example and demo.


Select element by data attribute in JavaScript

You can select the attribute using the data attribute as below –

javascript get element by data attribute value Example:

19293049503  

Try it »

If you run the above example it will show you the 19293049503. The output will look something like this-

Select element by data attribute in JavaScript: example

JavaScript get current url


JavaScript get current url- Working with JavaScript we sometimes need to get current url of the address. There are several ways to get the current url of the web page. It can be useful when you are working with javascript and need to redirect on current url or want to perform some other action with url. Here in this tutorial we are going to explain the ways how we can get the current url with several example which might be helpful for us. Let us go with very basic examples which will make the things clear to understand.


JavaScript get current url

You can get the current url simply in javascript as –

JavaScript get current url :

  

The above example will give you the full url with query strings.

More About Current Url In JavaScript

Let us have more information about the current url in javascript-

JavaScript get current url parameters

Some times we only need the url parameters in javascript.

JavaScript get current url parameters:

  

In the above example we have created a function which accepts parameter name from query string and will give you its value if it is found.

Javascript Current url protocal name

If you want to get the protocal you can use the below method to get the protocal from url in javascript.

JavaScript get query strings from url:

  

location.protocal gives the protocal name from the current url example - http::, https::.The above example will give the protocal name from url.

Javascript Current url hostname

If you want to get the hostname only you can use the below method to get the hostname from url in javascript.

JavaScript get query strings from url:

  

The above example will give the hostname from url. location.hostname is used to get the hostname from the current url in javascript.

JavaScript get current url without parameters

Some times we only need the url without parameters in javascript. Here is simple example to get the current url without parameters-

JavaScript get current url without parameters:

  

In the above example will give you the current url without parameters.

JavaScript get query strings from url

If you want to get the query strings only you can get as below -

JavaScript get query strings from url:

  

The above example will give the query string from url. location.pathname will give you the query string from the current url in javascript.

JavaScript get current url

JavaScript Get Timestamp


JavaScript Get Timestamp: You can use Date.now() to get the UTC Timestamp in milliseconds. Date.now() Works for all major browsers. Here in this tutorial we are going to explain how to get current timestamp in javaScript. We will also learn how to use the timestamp in javaScript.


JavaScript Get Timestamp

Here is simple example which will give you timestamp in javascript-

JavaScript Get Timestamp:

  

Try it »

In the above example we have shown how to get current date and timestamp in javascript. The UTC timestamp shown above will work in all modern browsers.

Note :For older browsers use Date().getTime() instead of using Date.now().

The output of the above example will look something like this –

JavaScript Get Timestamp

More About JavaScript Timestamp

Let’s have look over the JavaScript time & Date with more example and demo here.

Convert UTC date time to local date time in JavaScript

You can convert the UTC time to local date time as below-

Convert UTC date time to local date time in JavaScript:


  
  

Try it »

The above example will give you the converted time local time from the UTC. When you run the above demo it will produce the output like this-

JavaScript Get Timestamp

jQuery get selected option text


jQuery get selected option text: You can get selected option text in select box as below.


Syntax : jQuery get selected option text

Syntax to get selected option textof dropdown menu can be as :
Suppose we have following drop down list




You can get selected value in jquery as :


$("#demo").change(function () {
$("#demo :selected").text();

});

Try it »

jQuery get selected option value


jQuery get selected option value: You can get selected option value of html select box as below.


Syntax : jQuery get selected option value

Syntax to get selected option value of dropdown menu can be as :
Suppose we have following drop down list




You can get selected value in jquery as :


$("#demo").change(function () {
$("#demo :selected").attr('value');

});

Try it »

Jquery call function on scroll down bottom


Jquery call function on scroll down bottom : If are going to bind and event with the scroll bar of page when it reaches to the bottom of the page. You can following jQuery method for this type of events.


Jquery call function on scroll down bottom Syntax

The event will be fired when scroll bar goes to the bootom of the page. The best example for this event can be auto loading data on scroll down. For Example Facebook auto loads posts when you scrolls down.

Here is syntax for scroll down bottom event-

jQuery(document).ready(function(){  
    jQuery(window).scroll(function(){
    if (jQuery(document).height() - (jQuery(window).scrollTop() + jQuery(window).height()) < 100){
         //jQuery('#myDiv').slideUp();
         // your_function();
         alert("Scroll Bottom Reached.");
      }else{
         //jQuery('#myDiv').slideDown();
      }
    });
  });

Here is an image which have scroll bar at the bottom of the page -

Jquery call function on scroll down bottom

jQuery has Method Example


jQuery “has() Method ” is used to select all elements which have descendants that matches the selector element.


Syntax : jQuery has() method

$(selector).has(element);

element : Required , is used to match the elements against.

jQuery has Method Example

jQuery has() Method Example with syntax

  

Try it »