Posts

Disable right click, copy, cut and paste in HTML.

-
  Disable/Prevent to  Right Click on your site.==> You can do that with JavaScript by adding an event listener for the "contextmenu" event and calling the  preventDefault()  method: document . addEventListener ( 'contextmenu' , event => event . preventDefault ());   Disable/Prevent to  copy , cut and paste the text/ content from your site.==> You cannot prevent people from copying text from your page. If you are trying to satisfy a "requirement" this may work for you: <body oncopy = " return false " oncut = " return false " onpaste = " return false " >
Post a Comment
Read more

Jump to a specific div through smooth scrolling

-
<!-- SCRIPT FOR FOCUSING ON CLICKED DIV --> window.smoothScroll = function(target) { var scrollContainer = target; do { //find scroll container scrollContainer = scrollContainer.parentNode; if (!scrollContainer) return; scrollContainer.scrollTop += 1; } while (scrollContainer.scrollTop == 0); var targetY = 0; do { //find the top of target relatively to the container if (target == scrollContainer) break; targetY += target.offsetTop-20; } while (target = target.offsetParent); scroll = function(c, a, b, i) { i++; if (i > 30) return; c.scrollTop = a + (b - a) / 30 * i; setTimeout(function() { scroll(c, a, b, i); }, 20); } // start scrolling scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0); } ================================== smoothScroll(document.getElementById(' jumpDiv2')); <div  class="col-md-12 no_padding" id="jumpDiv2"> </div>
Post a Comment
Read more

Get table id after clicking on tr

-
$("table tr").on("click",function(){ alert($(this).closest("table").attr("id")); }); Example==> <!DOCTYPE html> <html lang="en"> <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.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Basic Table</h2>   <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>       ...
Post a Comment
Read more

Change position of Menu or Div when mouse scroll above than a fixed height.

-
Let we want to change the menu position by default from the   t op:101px ,     but when you scroll the mouse greater than the 50px of window height, menu top position should be change to top:0px;   .  so for that we have coded here : HTML=>  <div class="subAboutHeader">   <h2>About The Page</h2>   </div> JS=> window.onscroll = function() {posChange()}; function posChange (){ if(window.pageYOffset > 50){ $('.subAboutHeader').css({"top" : "0px"}); } else{ $('.subAboutHeader').css({"top" : "101px"}); } }
Post a Comment
Read more

Scroll Indicator with css and Jquery.

-
Image
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {   margin: 0;   font-size: 28px;   font-family: Arial, Helvetica, sans-serif; } .header {   position: fixed;   top: 0;   z-index: 1;   width: 100%;   background-color: #f1f1f1; } .header h2 {   text-align: center; } .progress-container {   width: 100%;   height: 8px;   background: #ccc; } .progress-bar {   height: 8px;   background: #4caf50;   width: 0%; } .content {   padding: 100px 0;   margin: 50px auto 0 auto;   width: 80%; } </style> </head> <body> <div class="header">   <h2>Scroll Indicator</h2>   <div class="progress-container">     <div class="progress-bar" id="myBar"></div>   </div> </div> <div class="co...
Post a Comment
Read more

calling Modal in JAVA / Script not working in modal

-
Sometimes JS/ Jquery doesn't work in the modal when you  call it  on a button by onclick() or any other method. i.e.==> <a href="#" onclick=" getViewFIRDetail ("8165007160050","8165007160050") ">8165007160050</a> if we are displaying modal on   getViewFIRDetail method/function, the jQuery script will not work properly. for work properly do it===> $('#modalId').on('shown.bs.modal', function () { `enter code here` } ----------------------------- but remember when you call  modal on a button by data-target, the script will work fine, i.e.==> < button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</ button >    - - on displaying modal by this method will work fine 
Post a Comment
Read more

Making progress bar update with javascript.

-
<html>   <head>     <style>       #Progress_Status {         display: block;         position: relative;         width: 100%;         height: 35px;         background-color: #ddd;         margin: auto;         text-align: center;       }       #myprogressBar {         position: absolute;         left: 0;         width: 1%;         height: 35px;         background: #4CAF50;         text-align: center;         line-height: 32px;         color: black;         margin: auto;               }     </style>   </head> ...
Post a Comment
Read more