Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Wednesday, April 5, 2023

How to close browser window or tab once click on button / link using jquery and Javascript

        , ,     No comments   

Hi, Today I will explain about how to close a browser winow when click on a button or link using Javascript or Jquery, Below piece of snippet work for only CHROME and IE 11 onwards browsers only. The browser does not allow this behavior. Javascript can only close a tab that it opened. Scripts may close only the windows that were opened by it. 

This solution will only work if the window was opened by window.open(...)





<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="close_window();return false;">If you click on this the window will be closed after 1000ms</a>
<script>
function close_window() {
if (confirm("Close Window?")) {
var ww = window.open(window.location, '_self');
ww.close();
//setTimeout(function(){var ww = window.open(window.location, '_self'); ww.close(); }, 1000);
}
}
</script>
</body>
</html>

You return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL (which it obviously isn't).

You can't close any tab via JavaScript. "This method is only allowed to be called for windows that were opened by a script using the window.open method." In other words, you can only use JavaScript to close a window/tab that was spawned via JavaScript.




Continue Reading →

Monday, March 19, 2018

How to create simple vertical timeline using HTML and CSS

        , , , , , ,     1 comment   

In this post, we will learn how to build a simple vertical timeline using HTML and CSS from scratch. First, we will create the basic structure with minimal markup and the power of CSS pseudo-elements. We implemented this example without using Javascript and jQuery etc. Please follow the steps to create a basic vertical timeline

 Following are the steps to creating HTML and CSS code.



Step 1 : ( Create HTML )

<div class="timeline-wrapper"> 
<ul class="StepProgress">
        <li class="StepProgress-item is-done">
            <div class="bold time">10:00 Am</div> 
            <div class="bold">Step 1</div>
        </li>
        <li class="StepProgress-item is-done">
            <div class="bold time">11:00 Am</div> 
            <div class="bold">Step 2</div>
            <div>Post a contest</div>
        </li>
        <li class="StepProgress-item current">
            <div class="bold time">12:00 Pm</div> 
            <div class="bold">Step 3</div>
        </li>
        <li class="StepProgress-item">
            <div class="bold time">01:00 Pm</div> 
            <div class="bold">Step 4</div>
        </li>
        <li class="StepProgress-item">
            <div class="bold time">02:00 Pm</div> 
            <div class="bold">Step 5</div>
        </li>
    </ul>
</div>

Step 2 : ( Apply CSS Styles to HTML )

<style> 
.bold{font-weight:bold;}
.time{position:absolute; left:-110px;}
.timeline-wrapper {
padding-left:80px;
min-width: 400px;
font-family: 'Helvetica';
font-size: 14px;
/*border: 1px solid #CCC;*/
}
.StepProgress {
position: relative;
padding-left: 45px;
list-style: none;
}
.StepProgress::before {
display: inline-block;
content: '';
position: absolute;
top: 0;
left: 15px;
width: 10px;
height: 100%;
border-left: 2px solid #CCC;
}
.StepProgress-item {
position: relative;
counter-increment: list;
}
.StepProgress-item:not(:last-child) {
padding-bottom: 20px;
}
.StepProgress-item::before {
display: inline-block;
content: '';
position: absolute;
left: -30px;
height: 100%;
width: 10px;
}
.StepProgress-item::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: -37px;
width: 12px;
height: 12px;
border: 2px solid #CCC;
border-radius: 50%;
background-color: #FFF;
}
.StepProgress-item.is-done::before {
border-left: 2px solid green;
}
.StepProgress-item.is-done::after {
/*content: "?";*/
font-size: 10px;
color: #FFF;
text-align: center;
border: 2px solid green;
background-color: green;
}
/*.StepProgress-item.current::before { 
border-left: 2px solid green;
}
.StepProgress-item.current::after {
content: counter(list);
padding-top: 1px;
width: 19px;
height: 18px;
top: -4px;
left: -40px;
font-size: 14px;
text-align: center;
color: green;
border: 2px solid green;
background-color: white;
}*/
.StepProgress strong {
display: block;
}
</style>

I hope you like this article very much & Please don't forget to share.

Thank you.
Continue Reading →

Tuesday, January 24, 2017

Adding and Display data using AngularJS

        , , , , , ,     No comments   

Hi Folks,

In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.

Below is the code, you can directly copy and paste and run in your application.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 <script>
var mainApp = angular.module("mainApp", []);

 mainApp.controller('studentController', function ($scope) {
    $scope.student = {
        firstName: "",
        lastName: "",
        email: ""
    };

     $scope.reset = function () {
        $scope.student.firstName = "";
        $scope.student.lastName = "";
        $scope.student.email = "";
    };
    $scope.reset();
    $scope.users = [];
    $scope.addUser = function () {
        console.log($scope.student);
        $scope.users.push({
            firstName: $scope.student.firstName,
            lastName: $scope.student.lastName,
            email: $scope.student.email
        });
        $scope.reset();
    };
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>

 <div ng-app="mainApp" ng-controller="studentController">
    <form name="studentForm" novalidate>
        <table border="0" class="table">
       
            <tr>
                <td>Enter first name:</td>
                <td>
                    <input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
      <span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Enter last name:</td>
                <td>
                    <input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
      <span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
      <span ng-show="studentForm.student.email.$error.required">Email is required.</span>
 <span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
                <td>
                <button class="btn btn-primary" ng-click="reset()">Reset</button>
                    <button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
                </td>
            </tr>
        </table>
        <p>Total User: {{ users.length }}</p>
        <table class="table table-striped">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="usr in users track by $index">
                <td>{{ usr.firstName }}</td>
                <td>{{ usr.lastName }}</td>
                <td>{{ usr.email }}</td>
            </tr>
            </tbody>
        </table>

 </body>
</html>

  I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Friday, January 20, 2017

Back to top page scroll using Jquery, CSS, HTML5

        , , , , , , , ,     No comments   

Hi, Today i will explain about how to scroll page to top from bottom.

 This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

 This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

 Below is the working code you can directly copy and paste ,

 <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    $(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
  <style>
 #toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
  </style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 </p>

 </div>
</div>

 </body>
</html>
I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Thursday, January 19, 2017

Javascript shorten string without cutting words (Or) Javascript trim multiline string without cutting words

        , , , , , ,     1 comment   

In this article i will give Javascript code for trim multiline string without cutting words.
Here i am giving an example,

say i had the string text = "this is a long string i cant display" i want to trim it down to 10 characters but if it does't end with a space finish the word i don't want the string variable to look like this "this is a long string i cant dis" i want it to finish the word until a space occurs.

So here is the solution. You can directly copy and paste the code and run your code.

Solution One:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   // SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}\\S*"))||[s])[0];
}
alert( shorten("The quick brown fox jumps over the lazy dog", 5) );
});
</script>
</head>
<body>
</body>
</html>

Solution Two:

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
infotext="this is a longish string of test.\n bla bla bla bla text here";
infotext = infotext.match(/^.*$/m)[0].replace(/^([\s\S]{10}\S*).*/, "$1");
alert(infotext);
</script>
</head>
<body>
</body>
</html>

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.
Thankyou

Continue Reading →

Thursday, June 16, 2016

How to display thumbnail preview link on whatsapp

        , , , , , , , , ,     10 comments   

Hai Folks,

In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link,  Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.

For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.

The following meta tags are used for solve the problem:

<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />
<meta property="og:description" content="Site-Description-Here" />
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

The meta tag property og:image is enough for getting thumbnail.

If you still facing problem after adding above tags you can add following two kind of code in your page.

First, Add meta tag og:image inside of <head> </head> section.

<meta property="og:image" content="url_image">

Second, Thumbnail schema from schema.org inside <body> section

 <link itemprop="thumbnailUrl" href="Image_url here"> 

 <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
      <link itemprop="url" href="Image_url here"> 
</span>

I hope you like this article very much & Please don't forget to share.

Thankyou.





Continue Reading →

Wednesday, June 15, 2016

How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. )

        , , , , , ,     1 comment   

Hai my dear blog readers,

In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.

We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.

Here is the code regarding this please copy and paste code as it is.

Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file  <head> </head> section (or) bottom of page.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

HTML Code:

<a data-text="How to share content on whatsapp using jQuery.." data-link="http://tekinfotree.blogspot.in/" class="whatsapp whatsapp-btn btn-large">Share on Whatsapp</a>

CSS Style:
.whatsapp-btn {
            background-image: url('');
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: inline-block !important;
            position: relative;
            font-family: Arial,sans-serif;
            letter-spacing: .4px;
            cursor: pointer;
            font-weight: 400;
            text-transform: none;
            color: #fff;
            border-radius: 2px;
            background-color: #5cbe4a;
            background-repeat: no-repeat;
            line-height: 1.2;
            text-decoration: none;
            text-align: left;
        }
        .btn-small {
            font-size: 12px;
            background-size: 16px;
            background-position: 5px 2px;
            padding: 3px 6px 3px 25px;
        }
        .btn-medium {
            font-size: 16px;
            background-size: 20px;
            background-position: 4px 2px;
            padding: 4px 6px 4px 30px;
        }
        .btn-large {
            font-size: 16px;
            background-size: 20px;
            background-position: 5px 5px;
            padding: 8px 6px 8px 30px;
            color: #fff;
        }
        a.whatsapp { color: #fff;}

jQuery Code:
$(document).ready(function() {
    $(document).on("click",'.whatsapp',function() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {   
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text)+" - "+encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text="+message;
            window.location.href= whatsapp_url;
        } 
        else {
              alert("Oh Sorry! Please share this content in mobile device");
           } 
    });
});

The encodeURIComponent() function encodes a URI component. This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

The IF statement is used to identify the mobile device because In desktop, whatsapp share will not work.


I hope you like this article very much & Please don't forget to share .

Thankyou
Continue Reading →
Subscribe to: Posts (Atom)

Popular Posts