How can I keep tabs fix in their places?

How can I keep tabs fix in their places? - javascript

Here is my code:
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
As you see, the hover of tabs which aren't active changes their position a bit. How can I keep them fix forever?

You should apply your borders to non-active tabs as well. You can either match a background color or make them transparent. This way there's no shifting in the elements height.
I've added the following lines to .sort_box_items a.
border: 1px solid transparent;
border-top-width: 3px;
From there it's a matter of adjusting the colors of the borders, no need to re-declare the width and style.
.sort_box {
padding: 25px 0px;
direction: rtl;
font-family: BYekan, 'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title {
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a {
display: inline-block;
margin-bottom: -1px;
font-size: 14px;
padding: 10px 20px;
border: 1px solid transparent;
border-top-width: 3px;
}
.sort_box_items a:hover {
color: black;
text-decoration: none;
background-color: rgba(132, 141, 149, 0.05);
border-color: rgba(228, 230, 232, 0.25);
}
.sort_box_items .sort_active {
border-color: #ccc;
border-top-color: orange;
border-bottom-color: white;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-color: #ccc;
border-top-color: #f48024;
border-bottom-color: white;
}
a {
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>

adding border is causing that:
remove following unless you really need it.
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);

remove border: 1px solid rgba(228,230,232,0.25); from .sort_box_items a:hover
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>

Related

Some bug in html,css file

I just learned some HTML and css so I tried to make a simple website with it
using this code
why "problem solving" is pink, not blue?
it's not a real problem but I really didn't know how to solve it
this is the website i've made
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
</style>
and this is the css on it so what is the proplem ?

Your problem is that tag, used in links, when visited, by default is changed to pink.
In CSS when you use this to change a LINK in your comum state.
a {
color : blue;
}
Using this way, you will change HOVER state :
a:hover {
color : red;
}
This way, you will change VISITED state :
a:visited {
color : orange;
}
And This way, you will change ACTIVE state :
a:active {
color : pink;
}
Each CSS will apply CSS relative to the state of the link.
Try this to solve :
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color:#17202A;
}
h1{
color:#AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
/* This is the key */
a, a:hover, a:visited, a:active{
color:#0000ff;
}
<html>
<head>
<meta charset="UTF-8">
<title>Only a test</title>
</head>
<body>
<h1>Hello there!</h1>
<h2>Hello there!</h2>
<h2 class="x">Hello there!</h2>
<h3>Hello there!</h3>
<h4>Hello there!</h4>
<ul id="ul1"><li>Test</li></ul>
<ol id="ol1"><li>Test</li></ol>
<ul id="ul2"><li>Test</li></ul>
<ol id="ol2"><li>Test</li></ol>
<p id="p1">Test</p>
<p id="p2">Test</p>
Your link
</body>
</html>

This is due to the fact that all HTML links have 4 states.
link , visited , active and hover.
And for each of these states it takes a particular color in HTML by default. By default in normal state it appears blue.
If you want to override any of these you can use the CSS for that:
eg,
a:visited {
color:orange; /*or which ever color you need*/
}
a:hover {
color: red; /*your CSS value*/
}
Similarly for other two.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class = "xd"><h1>Things you must learn to be good at programming:</h1>
<ol class="ol1">
<li>Proplem Solving</li>
<p id ="p1">Problem solving consists of using generic or ad hoc methods in an orderly manner to find solutions to difficulties.</p>
<li style = "font-size:25px">Logical Thinking </li>
<p id ="p2">Logical thinking is the act of analyzing a situation and coming up with a sensible solution. Similar to critical thinking, logical thinking requires the use of reasoning skills to study a problem objectively, which will allow you to make a rational conclusion about how to proceed.</p>
<li>Mathematics</li><p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as numbers (arithmetic and number theory), formulas and related structures (algebra), shapes and spaces in which they are contained (geometry), and quantities and their changes (calculus and analysis). There is no general consensus about its exact scope or epistemological status.</p>
</ol>
<ul class="ul1"><h2>Things you must learn to be a good front-end developer:</h2>
<li>CSS</li>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<li>JavaScript</li>
<li>ReactFramework</li>
</ul>
<ol class="ol2"><h3>Things you must learn to be good at CSS:</h3>
<li>CSS specifity</li>
<li>Floats</li>
<li>Positioning</li>
<li>Display</li>
<li>Box Model</li>
<li>CSS Grid</li>
<li>Flex Box</li>
<li>Media Queries</li>
</ol>
<ul class="ul2"><h4>Things you must learn to be good at JavaScript:</h4>
<li>Basic Syntax</li>
<li>OOP</li>
<li>Dom manupilation</li>
<li>Ajax/Fetch Api/Promises</li>
<li>Asynchronous JS(Async/Await)</li>
<li>Scoping/Hoisting/Closures</li>
<li>Refrence/Value</li>
<li>JSON</li>
</ul>
</div>
</body>
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.xd{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
a:visited {
color: blue;
}
</style>
</html>

multi-range slider with html5 input range in Angular 4

If you are using Angular 4, you are probably suffering if you need to use a range slider. Most of the packages available are for AngularJS or Angular 2 that doesn't work flawless.
So, I'm trying to build up a cross browser multiple range slider with native html5 input ranges. However, when it comes to IE and Edge, it seems there is a little issue understanding the pointer events for pseudo elements and it doesn't work.
Although I'm using Angular 4, I just created a JSFiddle in AngularJS as an example as I believe this is more a CSS issue maybe with a Javascript workaround.
I appreciate your help. Thanks,
#filter .slider_container{
display: block;
width: 99.5%;
background-color: rgba(0,0,0,0);
height: 15%;
min-height: 85px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
margin-top:1px;
border-bottom: 1px solid gray;
}
#filter .slider_container p{
font-weight: 300;
margin-left: 5%;
font-size: 0.8em;
text-align: center;
display: block;
margin:0;
margin-bottom: 15px;
color: #000000;
}
#filter .slider_container p:nth-of-type(1){
font-weight: 500;
font-size: 0.8em;
margin-bottom: 0;
padding-top:10px;
}
#filter .slider_container .gender{
outline: 0;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
width: 45%;
height: 20px;
max-width: 150px;
border-radius: 20px;
margin: 0.8%;
cursor: pointer;
font-size: 0.65em;
}
#filter .slider_container .gender:focus{
outline: 0;
}
#filter .slider_container .gender:hover{
background-color: #EA0A8A;
background-image: -webkit-linear-gradient(#EA0A8A, #ec5aae);
background-image: -moz-linear-gradient(#EA0A8A, #ec5aae);
background-image: -o-linear-gradient(#EA0A8A, #ec5aae);
background-image: linear-gradient(#EA0A8A, #ec5aae);
/*text-shadow: 1px 1px 2px black , 0 0 25px black , 0 0 5px black;
-webkit-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);*/
cursor: pointer;
color: #ffffff;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
border: 0px solid #ffffff;
}
#filter .slider_container .active{
background: #EA0A8A;
color: #ffffff;
border: 0px solid #ffffff;
}
#filter input[type=range]{
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 80%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
margin-left: 10%;
}
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#filter input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
#filter input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* Special styling for WebKit/Blink */
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for Firefox */
#filter input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for IE */
#filter input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 15px;
width: 15px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -3px;
}
#filter input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 0px solid #010101;
}
#filter input[type=range]:focus::-webkit-slider-runnable-track {
background: none transparent;
}
#filter input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
z-index: -9;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[name='distanceslider']::-ms-fill-lower {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-lower {
background: #EA0A8A;
}
#filter input[name='distanceslider']::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .ghost{
position: absolute;
z-index:1;
pointer-events: none;
}
#filter .ghost::-webkit-slider-thumb{
z-index:1;
pointer-events: all;
}
#filter .ghost::-moz-range-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-ms-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost:focus::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost::-moz-range-track {
z-index: -10;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-track {
z-index: -40;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-fill-lower {
background: none transparent;
border: 0px solid #010101;
border-radius: 2.6px;
visibility: hidden;
z-index: -9;
}
#filter .ghost:focus::-ms-fill-lower {
background: none transparent;;
}
#filter .ghost::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .ghost:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .main{
position: absolute;
z-index: 0;
pointer-events: none;
}
#filter .main::-webkit-slider-thumb{
z-index: 0;
pointer-events: all;
}
#filter .main::-moz-range-thumb {
z-index: 0;
pointer-events: all;
}
#filter .main::-ms-thumb{
z-index: 1;
pointer-events: all;
}
#filter .main::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main:focus::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main::-moz-range-track {
z-index: -11;
border: 0px solid #FFFFFF;
pointer-events: none;
height: 15px;
}
#filter .main::-ms-track {
z-index: 0;
pointer-events: none;
}
#filter .main::-ms-fill-lower {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-lower {
background: #c5c5c5;
}
#filter .main::-ms-fill-upper {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-upper {
background: #EA0A8A;
}
https://jsfiddle.net/guarinex/00Lh7kfd/28/

Onload set divs to visible?

I have a drop down with two options 'yes' and 'no' in relation to the question 'Was there a Witness to the Incident?' if option 'yes' is selected then two more questions appear and the option value is then saved in a php value and if 'no' then the two questions are hidden. Which loads fine when the page is refreshed or the form is submitted however if the option is set to 'yes' then two questions load as hidden, and can only be visible if the drop down is set to 'no' and then 'yes' again. What I'm looking for is if it was set to 'yes' then the form is submitted when the page reloads the drop down is still set to 'yes' (which I already have working) and the two questions are visible as well.
Thanks guys,
Matt.
$(window).on("load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
var witness = '<?php echo $A18 ?>';
});
p {
margin: 0;
font-size: 16px;
}
textarea {
overflow: hidden;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: 40px;
width: 98%;
margin: 0;
background: #fff;
}
.dropDown {
width: 99.5%;
height: 46px;
margin: 0;
border: none;
background: none;
}
#irMain {
background-color: #ddebf7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
}
#irMainWitness {
background-color: #ddebf7;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
display: none;
}
#irQMainWitness {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
display: none;
}
#irBottomWitness {
background-color: #FFF;
border: 2px solid #000;
height: 50px;
margin: 0;
display: none;
}
#irQMainDD {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
<p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMainDD">
<select name="a18" class="dropDown">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="irMainWitness">
<p>Name of Witness:</p>
</div>
<div id="irQMainWitness">
<textarea name="a19" cols="1" rows="2">
</textarea>
</div>
<div id="irMainWitness">
<p>Contact Number of Witness:</p>
</div>
<div id="irBottomWitness">
<textarea name="a20" cols="1" rows="2">
</textarea>
</div>
UPDATE 1:
The variable 'witness' is set to the option value on form submit. (Still not working)
Code:
<script>
$( window ).on( "load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "<?php echo $savedA18 ;?>";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});
</script>
Output:
$( window ).on( "load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "Yes";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});

You can manually trigger the change event after the code where you have set the value to Yes.
$('select[name="a18"]').triggerHandler("change");
$(window).on("load", function() {
$('select[name="a18"]').val("Yes");
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
var witness = '<?php echo $A18 ?>';
// set the value on onload
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
});
p {
margin: 0;
font-size: 16px;
}
textarea {
overflow: hidden;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: 40px;
width: 98%;
margin: 0;
background: #fff;
}
.dropDown {
width: 99.5%;
height: 46px;
margin: 0;
border: none;
background: none;
}
#irMain {
background-color: #ddebf7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
}
#irMainWitness {
background-color: #ddebf7;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
display: none;
}
#irQMainWitness {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
display: none;
}
#irBottomWitness {
background-color: #FFF;
border: 2px solid #000;
height: 50px;
margin: 0;
display: none;
}
#irQMainDD {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
<p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMainDD">
<select name="a18" class="dropDown">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="irMainWitness">
<p>Name of Witness:</p>
</div>
<div id="irQMainWitness">
<textarea name="a19" cols="1" rows="2">
</textarea>
</div>
<div id="irMainWitness">
<p>Contact Number of Witness:</p>
</div>
<div id="irBottomWitness">
<textarea name="a20" cols="1" rows="2">
</textarea>
</div>

You can change this:
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
to this:
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle();
});
Because the first one only hides and does not show these back.

Do something like below, create a function to toggle question divs and call it on page load and call it whenever drop down changes.
$(document).ready(function(){
var witness = '<?php echo $A18 ?>';
$.toggleQuestions = function(drpDown){
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(drpDown.val() == 'Yes');
};
$('select[name="a18"]').on("change", function(e) {
$.toggleQuestions($(this));
});
$(window).on("load", function() {
$.toggleQuestions($('select[name="a18"]'));
});
});

Input[type=range] CSS not working on android device

This is the desired slider css which works on dekstop.
But only on mobile device (android) it shows like this. I wonder where the textfield like input shows like attached to the slider.
Here's the fiddle http://jsfiddle.net/p5zo31q8/
CSS
/* INPUT RANGE*/
/*chrome*/
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 1px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 36px;
width: 36px;
border-radius: 50%;
background: #4BDAFF;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
/*firefox*/
input[type=range]{
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 200px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/*internet*/
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
margin-top:30px;
margin-bottom:30px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
background-color:#00B0F0;
}
input[type='range']{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}

waves js wont initialize in a button that was created through jquery/javascript

I use this beautiful google inspire waves effect (called waves js). It works fine in all button but im having an issue where wave js dont work on a button that was created through jquery (refer to my snippets below). Any ideas, clues, suggestions, recommendations, help to make this work?
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>

it will work if you move the attach event ( Waves.attach('.green_button') ) after the append if the button like this:
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
Waves.attach('.green_button');
});
I tested it and it work well.

This library doesn't work this way...
It doesn't "attach" to an active selector list, it attaches to the static list matching the selectors at the time the attach function is called.
You can remedy this simply by attaching each new button as well:
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
var newButton = $('<button class="green_button">test 2</button>');
$("body").append(newButton);
Waves.attach(newButton.get(0));
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>

Develop Reference

JavaScript is the programming language of the Web.

How can I keep tabs fix in their places? - javascript

adding border is causing that: remove following unless you really need it. border: 1px solid rgba(228,230,232,0.25); border-top: 3px solid rgba(228,230,232,0.25);

Related

Some bug in html,css file

multi-range slider with html5 input range in Angular 4

Onload set divs to visible?

Input[type=range] CSS not working on android device

waves js wont initialize in a button that was created through jquery/javascript

Categories

Resources