Posts

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

Nested Accordion with another Jquery script.- glyphicon:first

-
HTML==> <!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.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> </head> <body> <div class="panel-group" id="accordion1">     <div class="panel panel-default">         <div class="panel-heading">             <h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" dat...
Post a Comment
Read more

How to write script for changing '+' , '-' symbol in nested accordion?

-
what happen is that you have 2 div with the class  panel-group  one inside the other so when you click in the second  panel-group  you fire the event two times witch cause the problem. so we added one more class " .inner " with second panel-group.  So Now it will not create an issue. <!DOCTYPE html> <html lang="en"> <head>i   <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.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> /* CSS==> */ <style>     .panel-group .panel {         border-radius: 0;...
Post a Comment
Read more

What's the difference between 'mouseup', 'mousedown' and 'click' events?

-
Image
mostly guys confused in these events. So a coder must always clear about it. Mouup, mousedown and click event  are the different events. There is a basic difference as I mentioned and tried to clear it by diagram also.🔽🔽🔽 With a mouseup() event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer. A click event requires the mousedown and mouseup event to happen on that element. The normal expectation is that a click requires both the mousedown and mouseup event , so I'd recommend the click event. I think this blog will help you to understand about mouseup, mousedown and click events. so if you like this blog then like it and subscribe to my blog also. Thankyou.
Post a Comment
Read more