Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. 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 →

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 →
Subscribe to: Posts (Atom)

Popular Posts