Posts

Showing posts from October, 2018

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

Accordion with background change on panel-heading on click

-
Hi I am using Bootstrap-3 and I need to change the background-color of class .panel-heading to any other color. When I click on accordion the background color of that particular accordion should be changed.. Here is the code with solution.=> CSS ==> .panel-group .panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; } .panel-default > .panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE; } .panel-title { font-size: 14px; } .panel-title > a { display: block; padding: 15px; text-decoration: none; } .more-less { float: right; color: #212121; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE; } /* ----- v CAN BE DELETED v ----- */ body { background-color: #26a69a; } .d...
Post a Comment
Read more

UI Interview Questions

-
Diffrence between UI and UX UI  means  USER Interface  and  UX  means  User Experience . UI Is mainly related to look and feel, colors, layout. But UX is related to how UI is used, i.e. usabity, wireframing, interaction with UI. Design of button is UI, but interaction with button is UX. How to test website performance. Website performance plays an major role. As per  Think With Google  website, a website is excellent id its  loading time is under 5 seconds . A website is fair if  loading time is 5 to 8 seconds.  But a website is poor if  loading time is more than 8 seconds. Use of Jquery ready function. Jquery recommends use of  $(document).ready(function(){ })  or  $(function(){ })  in script tag to write jquery syntax. Jquery ready function execute jquery functions after all html elements are loaded, before images, iframes, ads are loaded. Difference between Jquery read...
Post a Comment
Read more