Posts

Showing posts with the label css

Get Combo of two classes at same tag by Css.

-
<div class=" treeview-menu menu-open "  >  User Menu </div> Issue: To get the combination of two classes " treeview-menu   " and  " menu-open " , we have to call like this: Solution: div .treeview-menu.menu-open{   background-color:#f00;  color:#000 } Notice: There is no single space between both classes.
Post a Comment
Read more

Css for HTML fieldset and legend tag.- Manual

-
 HTML==> <fieldset class="scheduler-border"> <legend class="scheduler-border">Search by Offender Details</legend> <div class="col-md-12"> <p> This is just test. </p> </div> </fieldset>  CSS==> <style> /* fieldset Css starts*/ fieldset.scheduler-border {     border: 1px groove #ddd !important;     padding: 0 1.4em 1.4em 1.4em !important;     margin: 0 0 1.5em 0 !important;     -webkit-box-shadow:  0px 0px 0px 0px #000;      box-shadow:  0px 0px 0px 0px #000; } legend.scheduler-border {     font-size: 1.2em !important;     font-weight: bold !important;     text-align: left !important;     width:auto;     padding:0 10px;     border-bottom:none; } /* end of fieldset Css*/ </style>
Post a Comment
Read more

Scroll to top button with Jquery and Css

-
Sometimes you have too much content in your page, so you need a button there which help you to move/ scroll / return to top/bottom of that page. Here we are implementing the bottom to top button with the help of Css and Jquery. HTML==> <a  id="return-to-top" data-toggle="tooltip" title="bottom to top"><span class="glyphicon glyphicon-chevron-up"></span></a> <div class="container-fluid" style="padding:0;">   <div class="well" style="=float:left; width:100%; height:1500px; background:orange; color:#fff;"> Scroll down to test the scroll.</div> JQuery==> <script>   /* scroll/return to top button  */   $(document).ready(function(){        $(window).scroll(function(){            if ($(this).scrollTop() > 200) {                $('#return-to-top').fadeIn();            ...
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

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