We Keep Coding

jQuery .Click event trigger goes beyond input element that it's assigned to

I have this problem where an input .remove-button is not working as intended. When I click on the div(.tag) that contains .remove-button or around it, the .remove-button code will trigger, even though it was only set to it. Also for some reason, the code seems to be running multiple times deleting everything in the array
edit:
it seems to be triggering the click when I click anywhere inside the #course-tag-container.
course_splice.
script:
//...
jQuery("input.remove-button").click((event)=>{
//find course text
course_inv.splice( course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
event.target.closest(".tag").remove();
});
//...
html for tag:
<div class="tag">
<div class="course-wrap">
<p class="course">LEED v4 Project Management</p>
<div class="input-wrapper">
<input type="image" name="removeButton"
src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg"
alt="remove button" class="remove-button">
</div>
</div>
</div>
screenshot of what it looks like:
full script:
<script>
let course_inv = [];
jQuery( document ).ready(function() {
//course field
let course_field = document.getElementById("course-field");
course_field.placeholder = "LEED v4 Project Management,LEED for Homes Workshop: Part2,...";
jQuery(".wpcf7").wrap('<div id="form-container"/>');
//add tag container
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
jQuery("#form-container").append('<button id="fake-submit" type="button">Send</button>');
jQuery("#fake-submit").click((event)=>{
jQuery("#course-field").val("");
jQuery("#course-field").val(course_inv.join(", "));
jQuery("#submit-button").click();
})
});
jQuery(document).on('ready ajaxComplete', function () {
//add button functionality
jQuery(".et_pb_post").wrap('<div class="course-wrapper" />');
jQuery(".et_pb_post").after('<input type="image" name="addButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_add.svg" width="100px" height="auto" alt="add button" class="add-button">');
jQuery(".add-button").wrap('<div/>');
//adding button functionality
jQuery(".add-button").click((event)=>{
let course_name = jQuery(event.target).closest(".course-wrapper").find(".entry-title").text();
if(course_inv.indexOf(course_name) === -1){
course_inv.push(course_name);
jQuery("#course-tag-container").append('<div class="tag"><div class="course-wrap"><p class="course">'+course_name+'</p><div class="input-wrapper"><input type="image" name="removeButton" src="http://builtenvironmentplus.org/wp-content/uploads/2021/07/course_remove.svg" alt="remove button" class="remove-button"> </div></div></div>');
jQuery("input.remove-button").click((event)=>{
console.log("start------------\n"+"courses:" +course_inv.join(","));
//find course text
console.log( "index: "+course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()) );
course_inv.splice(
course_inv.indexOf(jQuery(event.target).closest(".tag").find(".course").text()), 1
);
console.log("courses:" +course_inv.join(",")+"\n end----------------");
event.target.closest(".tag").remove();
});
}else{
jQuery(".tag:contains('"+course_name+"')").addClass('animate')
jQuery(".tag:contains('"+course_name+"')").on("animationend", ()=>{
jQuery(".tag:contains('"+course_name+"')").removeClass('animate');
});
}
})
});
</script>
CSS:
input,select{
border-radius: 20px !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-bottom: 10px !important;
font-size: 18px !important;
}
ul input:nth-of-type(2){
border:none;
}
.searchandfilter p
{
margin-top: 1em;
display: block !important;
}
.searchandfilter ul
{
display: block !important;
}
.searchandfilter h4
{
margin:20px 0;
font-size:20px !important;
}
.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
display:block !important;
}
/*style the wp-pagenavi pagination links*/
.wp-pagenavi a,
.wp-pagenavi span {
color: #000000;
background: #f1f3f5;
font-size: 1em !important;
line-height: 1em;
font-weight: bold !important;
padding: 0.45em 0.8em !important;
border-radius: 100px;
transition: all .5s;
}
/*style the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #0070fc !important;
font-size: 17px !important;
border-radius: 100px;
}
/*style the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff!important;
background: #0070fc!important;
}
/*style the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
/*remove border and center the wp-pagenavi links*/
.wp-pagenavi {
border-top: none;
text-align: center;
}
/*contact form css*/
.wpcf7 {
background-color: #DBDBDB;
border-radius: 5px;
}
.wpcf7-form{
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
margin-bottom: 5px;
padding: 0px;
}
#course-field{
background-color: #deddbd;
}
.wpcf7-textarea {
width: 100% !important;
}
.wpcf7 input {
margin-top: 5px;
width: 100%;
height: 43px;
font-size: 17px !important;
padding-left: 10px;
border-radius: 1px !important;
margin-bottom: 5px !important;
}
.wpcf7 label{
color: black !important;
font-size: 19px;
}
.textarea{
height: 150px !important;
margin-bottom: -10px;
font-family: verdana !important;
}
#submit-button{
background: #0078d3;
border: 0px solid !important;
border-radius: 5px !important;
font-size: 18px;
color: white;
transition: background-color 250ms;
cursor: pointer;
margin-bottom: -10px !important;
}
#submit-button:hover {
background-color: #3382BE;
}
.title{
display: inline-block;
}
.color{
background-color: #ededed !important;
}
.course-wrapper{
display: flex;
}
.add-button{
transition: transform 250ms;
margin-top: 50%;
}
.add-button:hover{
transform: rotate(-90deg);
background: url(black.png);
filter: invert(15%) sepia(100%) saturate(7499%) hue-rotate(196deg) brightness(94%) contrast(102%);
}
#blog-container{
left: 10px;
}
#fake-submit{
width: 100%;
border: none;
height: 44px;
border-radius: 5px;
background-color: #005DA4;
color: white;
font-size: 15px;
margin-top: 36px;
transition: background-color 250ms;
cursor: pointer;
margin-top: -14px;
}
#fake-submit:hover{
background-color: #3382BE;
}
/*css for the tags*/
.tag {
background-color: rgb(220 220 220);
display: inline-block;
margin-bottom: 5px;
border-radius: 25px;
}
.course{
border-radius: 15px;
margin:0px;
margin-top: 15px;
margin-bottom: 15px;
font-size:15px;
margin-left:15px !important;
}
.input-wrapper{
margin-left: -10px;
margin-right: -15px
}
.remove-button{
width:60px !important;
height:auto;
margin-top:10% !important;
margin-bottom:0px !important;
}
.course-wrap{
display:flex;
align-items: center;
margin-bottom:-10px;
margin-top:-10px;
}
#course-tag-container{
margin-top: 10px;
margin-bottom: -10px !important;
background-color: white;
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 1px;
border: #BBBBBB 1px solid;
min-height: 43px;
}
#form-container{
background-color: #DBDBDB;
padding: 10px;
padding-top: 12px;
border-radius: 5px;
}
#course-field, #submit-button{
display: none;
}
.tag-label {
color: black;
font-size: 19px;
}
#keyframes highlight-tag {
50%{
background-color: #75ACD8;
}
100%{
background-color: #DBDBDB;
}
}
.animate{
animation: highlight-tag 1s ease-in-out;
}

It was the label all along!
In this line I wrap the entire container that's holding my tags with a label. This for some reason expands my iput to the entire label region.
jQuery(".wpcf7").before('<label class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span><div id="course-tag-container"/></label>');
When changing the label to a paragraph and stopping it right before the div, it worked as intended.
jQuery(".wpcf7").before('<p class="tag-label">Selected Course<span style="font-size: 18px">(s)</span><span style="color:red;">*</span></p><div id="course-tag-container"/>');

Stop hover after specific time period CSS or Pure JS

I'm trying to find a way to show an hover for a specific time and stop it.
I'd like to show a background for 1 second and then hide it even when the mouse is still on.
My preferences are in css or javascript but I'd like to keep jquery out of my code.
Here is a JSFiddle of my current code.
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
color: transparent;
background: red;
}

You can use CSS animations, something like:
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
animation-name: background;
animation-duration: 1s;
}
#keyframes background {
from {
background-color: transparent;
color: #999;
}
to {
background-color: red;
color: white;
}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
color: transparent;
animation: backg 5s;
-webkit-animation: backg 5s;
}
#keyframes backg
{
0% {background: red;}
50% {background: red;}
100% {background: white;}
}
#-webkit-keyframes backg
{
0% {background: red;}
50% {background: red;}
100% {background: white;}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

You can use an animation and keyframes to do that. In this case, your animation would look like:
#keyframes hover-effect {
0% {
background-color: transparent;
color: #999999;
}
1% {
color: transparent;
background: red;
}
100% {
color: transparent;
background: red;
}
}
.class:hover {
animation: hover-effect 1s ease;
}
Here is the jsfiddle updated: https://jsfiddle.net/gk3nfmnj/1/

You can use css animation to get it.
like following
#social {
min-width: 350px;
font-size: 11pt;
text-align: center;
width: 60%;
margin: auto;
margin-top: 3vh;
word-spacing: 25pt;
}
#social a {
padding: 4px 9px 4px 9px;
color: #999999;
text-decoration: none;
}
#social a:hover {
animation: hover 2s;
}
#keyframes hover {
from {
background: transparent;
}
to {
background: red;
}
}
<div id="social">
showreel
linkedin
instagram
vscocam
</div>

Wrap the text into the next line for Drop down

Hi i have created a drop down in which the first element length is very high and when i executed it the text in element expands more than that of drop down area . Is there any way of making the text for element into next and with the same width of drop down
var name1 = "Ajnjkbndgjkdrhgkhtgjkdrhtjkrhtukhrtjkjerthrjklthkretklejkltjrkltjekltjklejtklejrkltjerkltjklert kqh4ui3hui4h23uio4 uiheruiwhruio3h 2ruihuihw3uirh34uirhuioh e riohewiorh wioriorh weuiohriowe4",
name2 = "B",
name3 = "C";
var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;
.setMyWidth{width: 5000px;}
<select id="names" style=width:500px class='setMyWidth'>
<option value="a">fill1</option>
<option value="b">fill2</option>
<option value="c">fill3</option>
</select>

It is not possible to customise width of a option, if you want to achieve this then you can use custom select plugins like
https://select2.github.io/examples.html
https://harvesthq.github.io/chosen/
See Chosen Demo in the below snippet.
var name1 = "Ajnjkbndgjkdrhgkhtgjkdrhtjkrhtukhrtjkjerthrjklthkretklejkltjrkltjekltjklejtklejrkltjerkltjklert kqh4ui3hui4h23uio4 uiheruiwhruio3h 2ruihuihw3uirh34uirhuioh e riohewiorh wioriorh weuiohriowe4",
name2 = "B",
name3 = "C";
var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;
$("#names").chosen({
width: "200px"
});
/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com
Version 1.6.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2016 Harvest http://getharvest.com
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* #group Base */
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
left: 0;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #999999;
}
.chosen-container .search-choice .group-name:after,
.chosen-container .chosen-single .group-name:after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
/* #end */
/* #group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 25px;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
background-clip: padding-box;
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 24px;
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: url('chosen-sprite.png') no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: white url('chosen-sprite.png') no-repeat 100% -20px;
background: url('chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
left: -9999px;
}
/* #end */
/* #group Results */
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* #end */
/* #group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto;
border: 1px solid #aaa;
background-color: #fff;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url('chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* #end */
/* #group Active */
.chosen-container-active .chosen-single {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
/* #end */
/* #group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* #end */
/* #group Right to Left */
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
left: 9999px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: white url('chosen-sprite.png') no-repeat -30px -20px;
background: url('chosen-sprite.png') no-repeat -30px -20px;
direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
/* #end */
/* #group Retina compatibility */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
.chosen-rtl .chosen-search input[type="text"],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type="text"],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url('chosen-sprite#2x.png') !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* #end */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="names" style="width:500px" class='setMyWidth'>
<option value="a">fill1</option>
<option value="b">fill2</option>
<option value="c">fill3</option>
</select>

If someone is coming here now, I didn't manage to make Rohan Kumar answer work (that's probably my bad), but I found another way to solve it.
One simple modification to chosen.css file:
.chosen-container .chosen-results {
overflow-x: scroll;
}
It does not wrap text into next line but I think it can be considered a solution too.

Apache Cordova app using Firebase Database

I am having trouble with a JavaScript function for sending data to my Firebase Database. I have got it working where if I do it outside a function, it will work fine, but when it's called from on click, it will alert to me the values okay, but it won't go up to the database.
I spent 6 hours on this one page and it still won't work. I have a form you fill out first, I can use prompt boxes to use it, but I don't want to use the boxes when I have a form, here is my code. Can anyone see anything wrong with this?
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints,
// and then run "window.location.reload()" in the JavaScript Console.
var email1;
var username1;
var password1;
var cpassword1;
var balance1;
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
})();
function insertUser() {
email1 = document.getElementsByName("email")[0].value.trim();
username1 = document.getElementsByName("username")[0].value.trim();
password1 = document.getElementsByName("password")[0].value.trim();
cpassword1 = document.getElementsByName("cpassword")[0].value.trim();
balance1 = 20; // welcome new user with 20 euro complimentary credit!
var Users = new Firebase("https://seqr-payments.firebaseio.com/users");
alert(email1);
alert(username1);
alert(password1);
alert(balance1);
Users.push({
email: email1,
username: username1,
password: password1,
balance: balance1
});
}
// Validation code from:
// http://codepen.io/diegoleme/pen/surIK
function validatePassword() {
var password = document.getElementsByName("password")[0];
var cpassword = document.getElementsByName("cpassword")[0];
if (password.value != cpassword.value) {
cpassword.setCustomValidity("Passwords Don't Match");
document.getElementsByName("password")[0].style.boxShadow = "0 0 35px #FF0000";
document.getElementsByName("cpassword")[0].style.boxShadow = "0 0 35px #FF0000";
document.getElementsByName("password")[0].style.border = "3px solid #FF0000";
document.getElementsByName("cpassword")[0].style.border = "3px solid #FF0000";
} else {
cpassword.setCustomValidity('');
document.getElementsByName("password")[0].style.boxShadow = "0 0 35px #74ebe6";
document.getElementsByName("cpassword")[0].style.boxShadow = "0 0 35px #74ebe6";
document.getElementsByName("password")[0].style.border = "3px solid #74ebe6";
document.getElementsByName("cpassword")[0].style.border = "3px solid #74ebe6";
}
};
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#signin {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
background-color:#32383d;
font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
}
/*start of login*/
.app {
background: url(../images/Logo.jpg) no-repeat center top;
position: absolute;
left: 50%;
top: 30%;
height: 50px;
width: 225px;
text-align: center;
padding: 180px 0px 0px 0px;
margin: -115px 0px 0px -112px;
/*
width: 100%;
padding: 12px 0px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
*/
}
#Error {
position:relative;
top:-100%;
}
#login_form1 {
width: 150%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:absolute;
top:100%;
left:-25%;
}
#login_form1:focus{
border: 3px solid #66ff33;
}
#login_form2:focus{
border: 3px solid #66ff33;
}
#login_form2 {
width: 150%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
box-shadow: 0 0 35px #74ebe6;
transition: 0.5s;
outline: none;
position:absolute;
top:130%;
left:-25%;
}
#login_text1 {
position:absolute;
top:95%;
left:40%;
font-weight:200;
font-size:15px;
font-weight: bold;
}
#login_text2 {
position:absolute;
top:125%;
left:33%;
font-weight:200;
font-size:15px;
font-weight: bold;
}
#login_part1 {
}
#login_part2 {
position:absolute;
left:10%;
top:150%;
}
#login_login {
background-color: #74ebe6;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width: 150%;
font-weight:bold;
top:80%;
left:-55%;
}
#login_register {
background-color: #74ebe6;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width: 150%;
font-weight:bold;
top:150%;
left:-55%;
}
/* End of Login Page*/
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px;
margin:-90px 0px 0px -198px;
}
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
#keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
#-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
/*
For menu across the whole site for uniform looking buttons
*/
.menu {
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:auto;
background-color:lightblue;
}
.menuImage {
width:15%;
margin-left:4.5%;
margin-right:4.5%;
height:50px;
}
/* card payment form text box holders*/
#cvc {
width:50px;
}
#month, #year
{
width:50px;
}
#Error
{
color:red;
}
.menuIcon
{
width:45%;
height:45%;
padding:1%;
}
.background
{
background-color:aqua;
height:100%;
}
#register {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, white),
color-stop(0.51, white)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
background-color:#32383d;
font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
}
/* Profile Page */
#profile_heading {
font-weight:900;
font-size:30px;
}
.profile {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.profile_2 {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: lightgray;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.profile:focus{
border: 3px solid #66ff33;
}
.profile_background {
background-color:white;
}
#profile_botton {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:25px;
padding:5px;
margin-top: 0.10cm;
width:40%;
}
.profile_font {
font-weight:200;
font-size:15px;
font-weight: bold;
}
/*end of profile page*/
/* card */
.card {
width: 100%;
padding: 12px 0px ;
margin: 8px 0;
box-sizing: border-box;
background-color: #f0f5f5;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.card:focus{
border: 3px solid #66ff33;
}
.card_background {
background-color:white;
}
#card_botton {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
padding:5px;
margin-top: 0.10cm;
width:40%;
}
.card_font {
font-weight:200;
font-size:15px;
font-weight: bold;
}
/*The end of Card page*/
/*Pay1*/
#amount {
width: 90%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color: white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:absolute;
top:40%;
}
#amount:focus {
border: 3px solid #5BF68A;
}
#top_text {
color: black;
font-weight: bold;
display: block;
width: 90%;
position: absolute;
font-weight:200;
font-size:40px;
top:20%;
}
#pay1_button {
background-color: #66ff33;
position: absolute;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #66ff33;
border: 3px solid #66ff33;
padding:5px;
margin-top: 0.10cm;
width:40%;
font-weight:bold;
top:50%;
}
/*End of Pay1*/
/*The history style*/
#transactionTable {
font-family:"Helvetica Neue", Helvetica, sans-serif
}
#tHead {
background: SteelBlue;
color: white;
}
/*
.th,
.td {
padding: 5px 10px;
}
*/
#transactionTable td, #transactionTable tr, #transactionTable th {
padding: 5px 10px;
}
#tBody tr:nth-child(even) {
background: WhiteSmoke;
}
#tBody tr td:nth-child(2) {
text-align:center;
}
#tBody tr td:nth-child(3),
#tBody tr td:nth-child(4) {
text-align: right;
font-family: monospace;
}
/*The end of history page*/
/* Register page */
.register_box {
width: 100%;
padding: 12px 20px ;
margin: 8px 0;
box-sizing: border-box;
background-color:white;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
position:relative;
}
#control_height {
padding-top:80px;
}
.register_box:focus {
border: 3px solid #5BF68A;
}
#reg_submit{
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:50px;
padding:5px;
margin-top: 0.10cm;
width:40%;
top:75%;
font-weight:bold;
}
#reg_back {
background-color: #74ebe6;
position: relative;
border: none;
color: black;
text-decoration: none;
margin-left: 30%;
cursor: pointer;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
height:50px;
padding:5px;
margin-top: 0.20cm;
width:40%;
top:86%;
font-weight:bold;
}
#reg_colour {
background-color:white;
}
#reg_text {
font-weight:800;
font-size:50px;
}
.reg_font {
color: blue;
font-weight: bold;
display: block;
width: 50%;
position: absolute;
}
/*end of register page*/
/*The Pay 2 style*/
.pay_button, .scan_button {
background-color: #74ebe6;
box-shadow: 0 0 35px #74ebe6;
border: 3px solid #74ebe6;
border: 0;
width: 350px;
height: 40px;
position:relative;
margin-top:25%;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.pay_button:hover, .scan_button:hover {
animation-name: shake;
}
/*The end of Pay 2*/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/index.css">
<title>Registration</title>
</head>
<body id="register">
<h1 id="reg_text">Register</h1>
<div id="control_height">
<div id="register_form">
<form action="../index.html" onsubmit="insertUser()">
<label class="reg_font">Email Address:</label><br />
<!-- email regex found at https://www.wired.com/2008/08/four_regular_expressions_to_check_email_addresses/ on 05-12-2016 at 11.55 AM -->
<input type="text" class="register_box" name="email" title="I need a real email address" pattern="([a-z0-9][-a-z0-9_\+\.]*[a-z0-9])#([a-z0-9][-a-z0-9\.]*[a-z0-9]\.(arpa|root|aero|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|([0-9]{1,3}\.{3}[0-9]{1,3}))" required /><br />
<label class="reg_font">Username:</label><br />
<input type="text" class="register_box" name="username" required /><br />
<label class="reg_font">Password</label><br />
<input type="text" class="register_box" name="password" title="Password Must include one uppercase letter, one special character, one lowecase letter and one number" onchange="validatePassword()" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required /><br />
<label class="reg_font">Confirm Password</label><br />
<input type="text" class="register_box" name="cpassword" onkeyup="validatePassword()" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required /><br />
<button id="reg_submit" type="submit">Sign Up</button>
</form>
<button id="reg_back" onclick="window.location.href='../index.html';">Go back to login screen</button>
</div>
</div>
<!--<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>-->
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../scripts/platformOverrides.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script type="text/javascript" src="../scripts/register.js"></script>
</body>
</html>

Removing the page flicker when loading javascript/css

I tried putting the inline javascript code after</body> , but it didn't help.
HTML code:
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP"><img src="images/house.png" width="40" height="32" />
</li>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"> <img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-container"><div class="arrow-up"></div></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
<span id="papersl">
<img src="images/paperslant5.png" />
</span>
<div id="mybook">
<div>
<img src="images/CC1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/WC.png" width="100%" height="100%" />
</div>
<div>
<img src="images/ss1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/beverages.png" width="100%" height="100%" />
</div>
</div>
<form action="" id="search-form" class="SF">
<fieldset>
<input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
<figure id="foot">
<img src="images/footer-comb1.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html">
<area shape="rect" coords="710,44,866,84" href="#0" id="se" >
</map>
</figure>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#numb1').hide().delay(800).fadeIn('normal');
$('#se').click(function() {
$('.SF').css('visibility','visible');
});
$(function() {
$('#mybook').booklet({
width:600,
height:350
});
});
});
</script>
</html>
CSS:
* {
margin: 0;
padding:0;
}
body {
background-image: url('images/BG-W1.png');
font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif;
/*height: 800px !important;*/
}
#font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
/*height: 762px !important;*/
/*border: 2px solid blue;*/
}
#logo {
float:left;
/*border: 1px solid black;*/
height: 180px;
}
#abtex {
float: left;
/*border: 1px solid black;*/
height: 180px;
}
#navbar {
}
.ftex {
position: relative;
}
#qqq {
position: static !important;
border: 1px solid black;
background-image:url('images/bg-fs-5.png');
background-repeat:no-repeat;
height: 125px;
width: 800px;
/*padding:25px 0 0 0;*/
/*padding-top: 50px;
padding-left: 34px;*/
}
.ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
.ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
.ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
.ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#footerBg {
position: relative;
bottom:-90px;
left:-50px;
}
#foot {
padding-top: 10px;
}
#foot img {
display: block;
}
#foothome{
padding-top:100px;
}
#foothome img {
display: block;
}
#numb1 {
position: absolute;
/*border:10px solid red;*/
top:10px;
right:-124px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
#abt {
position: relative;
/*border: 1px solid red;*/
height: 400px;
left:180px;
top:-60px;
z-index: -2;
}
#papersl {
position: absolute;
left: 60px;
top: 222px;
z-index: -4;
}
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
/*position: relative;
top:-50px;*/
clear:both;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
.arrow-container { margin-top:-16px; height:16px; }
fieldset {
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#main {
border: medium none;
/*height: 500px;*/
margin: 50px auto;
padding: 15px 0;
width: 326px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.or1 input {
background-color: #303030;
border: medium none;
border-radius: 0.4em 0.4em 0.4em 0.4em;
box-shadow: 0 -1px 0 0 #000000;
color: #FFFFFF;
font-size: 1.2em;
height: 27px;
letter-spacing: 2px;
margin: 15px 0;
padding: 0 0 0 10px;
width: 316px;
}
.ico {
float: right;
}
button {
background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border: medium none;
border-radius: 0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius: .2em;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
color: #FFFFFF;
float: right;
height: 24px;
text-align: right;
width: 79px;
}
button:hover {
background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent;
}
button:active {
border: medium none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.note1 {
padding-top: 40px;
padding-left: 20px;
font-size: 20px;
text-align: center;
color: #F74E09;
}
#search-form { width: 190px; position: absolute; right: 100px;
bottom:55px;
visibility: hidden; display: block;}
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0}
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;}
#search-submit img {
display: block;
}
#search-submit:hover { background-color: #c7bba7;}
/* CSS3 */
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
text-shadow: rgba(0,0,0,.2) 0 0 5px;
display: inline;
}
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block;
/* Webkit-transition */
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in;
}

Use css to set the visibility setting for body to hidden before the js is loaded then remove the property with js onload using jquery.
css:
body { visibility: hidden;}
javascript:
$().ready(function(){ $("body").css({visibility:'visible'})});

If I understand the question correctly, put this in testCSS.css...
#numb1 { visibility:hidden; }
or...
#numb1 { display:none; }
Whichever is more pleasing to you.
Doing that will hide the numb1 element before the page is displayed. What you're doing lets the page load before hiding it and then fading it in, so it's briefly visible.