CSS on Android app Phonegap not working - javascript
So today I tried building up an Android app using this tutorial: http://iphonedevlog.wordpress.com/2012/08/25/phonegapcordova-android-app-in-mountain-lion-with-eclipse-from-install-to-google-play/
All worked fine, but when I emulate the app, some elements of the css dont work.
The java script works and the html too. But for example word colors and sizes, gradients and much more simply doesnt work.
The only css that did work was the background color that was blue. I dunno if that helps.
http://jsfiddle.net/wsxWZ/
and the css:
#font-face {
font-family: 'CallunaSansRegular';
src: url('../fonts/calluna-sans/CallunaSansRegular-webfont.eot');
src: url('../fonts/calluna-sans/CallunaSansRegular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/calluna-sans/CallunaSansRegular-webfont.woff') format('woff'),
url('../fonts/calluna-sans/CallunaSansRegular-webfont.ttf') format('truetype'),
url('../fonts/calluna-sans/CallunaSansRegular-webfont.svg#CallunaSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: franchise-bold;
src: url('../fonts/Franchise-Bold.ttf');
font-weight:normal;
}
body {
font: 15px CallunaSansRegular;
width: 980px;
height: 900px;
background-color: black;
}
nav{
width: 100%;
display: block;
overflow: hidden;
}
nav>a{
padding-top: 5px;
text-decoration: none;
color: white;
margin-right: 1%;
background-color: gray;
float: left;
padding-right: 5%;
padding-left: 5%;
height: 20px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#friends{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
/* background-color: blue; */
width: 100%;
height: 1200px;
padding-top: 2%;
}
article{
position: relative;
/* background-color: gray; */
width: 200px;
height: 200px;
margin-left: 3.5%;
float: left;
display: block;
margin-bottom: 3.5%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/* box-shadow: 0px 10px 10px #000000; */
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
}
.online{
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}
h1{
position: absolute;
bottom: 4px;
left: 43%;
color: white;
}
.coisos{
padding: 5%;
overflow: hidden;
display: block;
text-align: center;
margin-bottom: 10px;
}
.coisos>a{
margin-left: 5%;
margin-right: 5%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 50px;
padding-right: 50px;
font-size: large;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/* box-shadow: 0px 10px 10px #000000; */
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
}
.coisos>a:hover{
background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
article:hover{
background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
#search{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
/* background-color: blue; */
width: 100%;
height: 1200px;
padding-top: 2%;
}
.search{
padding-top: 20px;
margin-left: 3%;
float: left;
width: 93%;
height: 90px;
/* background-color: red; */
background: #55aa9e; /* Old browsers */
background: -moz-linear-gradient(top, #55aa9e 0%, #b6eace 50%, #0a302d 51%, #285760 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55aa9e), color-stop(50%,#b6eace), color-stop(51%,#0a302d), color-stop(100%,#285760)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* IE10+ */
background: linear-gradient(to bottom, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aa9e', endColorstr='#285760',GradientType=0 ); /* IE6-9 */
}
.sear{
margin-left: 20px;
}
input{
height: 60px;
}
.seartex{
width: 80%;
}
.butsear{
width: 10%;
margin-left: 30px;
}
.log{
margin-top: 200px;
padding-top: 20px;
margin-left: 3%;
float: left;
width: 93%;
height: 200px;
/* background-color: red; */
background: #55aa9e; /* Old browsers */
background: -moz-linear-gradient(top, #55aa9e 0%, #b6eace 50%, #0a302d 51%, #285760 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55aa9e), color-stop(50%,#b6eace), color-stop(51%,#0a302d), color-stop(100%,#285760)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* IE10+ */
background: linear-gradient(to bottom, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aa9e', endColorstr='#285760',GradientType=0 ); /* IE6-9 */
}
form{
color: white;
font-weight: bolder
}
.un{
float: left;
display: block;
overflow: hidden;
width: 700px;
margin-bottom: 40px;
}
.un>input{
width: 60%;
}
.pwd{
float: right;
float: left;
display: block;
overflow: hidden;
width: 80%;
}
.pwd>input{
width: 60%;
}
#login{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
/* background-color: blue; */
width: 100%;
height: 1200px;
padding-top: 2%;
}
.navlog{
background-color: #c5deea;
}
.navfrien{
background-color: #c5deea;
}
.navsear{
background-color: #c5deea;
}
.navperfil{
background-color: #c5deea;
}
.navlog:hover{
background-color: gray;
}
.navfrien:hover{
background-color: gray;
}
.navsear:hover{
background-color: gray;
}
.navperfil:hover{
background-color: gray;
}
.offline{
background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}
.coisos1{
margin-top: 500px;
padding: 5%;
overflow: hidden;
display: block;
text-align: center;
margin-bottom: 10px;
}
.coisos1>a{
margin-left: 5%;
margin-right: 5%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 50px;
padding-right: 50px;
font-size: large;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/* box-shadow: 0px 10px 10px #000000; */
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
}
.coisos1>a:hover{
background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.log1{
padding-top: 20px;
margin-left: 3%;
float: left;
width: 93%;
height: 200px;
/* background-color: red; */
background: #55aa9e; /* Old browsers */
background: -moz-linear-gradient(top, #55aa9e 0%, #b6eace 50%, #0a302d 51%, #285760 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55aa9e), color-stop(50%,#b6eace), color-stop(51%,#0a302d), color-stop(100%,#285760)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* IE10+ */
background: linear-gradient(to bottom, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aa9e', endColorstr='#285760',GradientType=0 ); /* IE6-9 */
}
.log2{
margin-top: 20px;
padding-top: 20px;
margin-left: 3%;
float: left;
width: 93%;
height: 500px;
/* background-color: red; */
background: #55aa9e; /* Old browsers */
background: -moz-linear-gradient(top, #55aa9e 0%, #b6eace 50%, #0a302d 51%, #285760 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55aa9e), color-stop(50%,#b6eace), color-stop(51%,#0a302d), color-stop(100%,#285760)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* IE10+ */
background: linear-gradient(to bottom, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aa9e', endColorstr='#285760',GradientType=0 ); /* IE6-9 */
}
.log3{
margin-top: 20px;
padding-top: 20px;
margin-left: 3%;
float: left;
width: 93%;
height: 120px;
/* background-color: red; */
background: #55aa9e; /* Old browsers */
background: -moz-linear-gradient(top, #55aa9e 0%, #b6eace 50%, #0a302d 51%, #285760 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55aa9e), color-stop(50%,#b6eace), color-stop(51%,#0a302d), color-stop(100%,#285760)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* IE10+ */
background: linear-gradient(to bottom, #55aa9e 0%,#b6eace 50%,#0a302d 51%,#285760 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aa9e', endColorstr='#285760',GradientType=0 ); /* IE6-9 */
}
.titulo{
float: left;
font-size: 50px;
color: white;
text-transform: capitalize;
font-weight: bolder;
margin-left: 20px;
}
.foto{
margin-right: 20px;
float: right;
height:90%;
width: 20%;
background-color: gray;
}
.contain{
margin-top: 50px;
margin-left: 20px;
float: left;
height:40%;
width: 20%;
}
.contain>p{
font-size: 30px;
color: white;
margin-bottom: 20px;
}
.contain1{
margin-top: 50px;
margin-left: 20px;
float: left;
height:40%;
width: 70%;
}
.contain1>p{
font-size: 30px;
color: white;
margin-bottom: 20px;
line-height: 35px;
}
#perfil{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
/* background-color: blue; */
width: 100%;
height: 1200px;
padding-top: 2%;
}
For the moment the way I fixed this was to use css within the html file.
ex:
<a style="color: red;"></a>
And everything works now (except the gradients and shadows, but that prolly has to do with the webkits I used).
Related
How do I make my background colour start off as light blue gradually become dark blue?
I would really like to know how to create this effect in Javascript where the background gradient changes radially. How do they do this?
You do not need javascript in this work, just use CSS radial-gradient
#grad {
width: 100px;
height: 100px;
background: radial-gradient(circle, #474747, #999); /* Standard syntax */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="grad"></div>
</body>
</html>
With ColorZilla you can generate the following, that is compatible with almost all browsers:
.gradient-class
{
background: #7db9e8; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7db9e8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #7db9e8 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Hope this will be helpful
<div class="abc">
</div>
.abc{
width:200px;
height:200px;
display:inline-block;
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(32%, rgba(73,155,234,1)), color-stop(60%, rgba(32,124,229,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}
jsfiddle
How can I make a span change color when a link is clicked
Ok so I have 4 Spans, and what I want is when I click the link in a span the color of the span that the link is in changes. I also want it so when another link in a span is clicked that span changes color and the previously clicked span goes back to it's original color. Sorry if it's not explained well.
Below is js I got from a question another user asked. I tried to use it and change it to work for me but after lots of failed attempts, no luck. Thanks for the patience I'm very new to JavaScript, any advice or help is greatly appreciated. Thanks in advance!
<script>
$(document).ready(function() {
$("#sec1").click(function() {
$("#sec1").removeClass('active');
$(this).addClass('active');
});
});
</script>
CSS:
#sec1 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:0; background: rgb(238,238,238); /* Old browsers */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
display:inline; white-space:nowrap; overflow:hidden;
}
#sec1.active {
background:grey;
}
#sec2 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:10.25%; background: rgb(238,238,238); /* Old browsers */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
display:inline; white-space:nowrap; overflow:hidden;
}
#sec2.active{background:grey;}
#sec3 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:20.5%; background: rgb(238,238,238); /* Old browsers */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
display:inline; white-space:nowrap; overflow:hidden;
}
#sec3.active{background:grey;}
#sec4 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:30.75%; background: rgb(238,238,238); /* Old browsers */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
display:inline; white-space:nowrap; overflow:hidden;
}
#sec4.active{background:grey;}
html:
<span id="sec1" class="box"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</p></div>
<span id="sec2" class="box"><p style="margin-top:2.5vh; font-size:1.25em"><b>MUSIC</b></p></div>
<span id="sec3" class="box" ><p style="margin-top:2.5vh; font-size:1.25em"><b>RADIO</b></p></div>
<span id="sec4" class="box"><p style="margin-top:2.5vh; font-size:1.25em"><b>COMICS</b></p></div>
I would use the box class selector instead of the IDs, and clean up your HTML.
$(document).ready(function() {
var $boxes = $(".box").click(function() {
$boxes.removeClass('active');
$(this).addClass('active');
});
});
a {color: #ffffff; text-decoration:none; font-family:arial;}
.box {
color: #ffffff;
background: rgb(238, 238, 238);
/* Old browsers */
background: #7d7e7d;
/* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* IE10+ */
background: linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
/* IE6-9 */
;
display: inline-block;
padding:10px 20px;
white-space: nowrap;
}
.active {
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="sec1" class="box">
<a href="#" class="one"style="margin-top:2.5vh; font-size:1.25em;">
MOVIES
</a>
</span>
<span id="sec2" class="box">
<a href="#" class="two" style="margin-top:2.5vh; font-size:1.25em">
MUSIC
</a>
</span>
<span id="sec3" class="box" >
<a href="#" class="three" style="margin-top:2.5vh; font-size:1.25em">
RADIO
</a>
</span>
<span id="sec4" class="box">
<a href="#" class="four" style="margin-top:2.5vh; font-size:1.25em">
COMICS
</a>
</span>
There are some problems with the markup you posted.
Here a span tag is opened <span>, but it's incorrectly closed as a div </div>. It should be closed as a span. </span>:
<span id="sec1" class="box"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</p></div>
Also your hrefs need to point to a hash so the page does not redirect.
(change all instances of href="" to href="#")
Here's a quick and dirty way to do what you want. It has repeating code which isn't best practice (not DRY), but it does the trick. I simplified the js, css, and html to show the concept.
javascript
$(document).ready(function() {
// click box 1
$("#sec1").click(function() {
$(this).addClass('active');
$("#sec2").removeClass('active');
$("#sec3").removeClass('active');
$("#sec4").removeClass('active');
});
// click box 2
$("#sec2").click(function() {
$(this).addClass('active');
$("#sec1").removeClass('active');
$("#sec3").removeClass('active');
$("#sec4").removeClass('active');
});
// click box 3
$("#sec3").click(function() {
$(this).addClass('active');
$("#sec1").removeClass('active');
$("#sec2").removeClass('active');
$("#sec4").removeClass('active');
});
// click box 4
$("#sec4").click(function() {
$(this).addClass('active');
$("#sec1").removeClass('active');
$("#sec2").removeClass('active');
$("#sec3").removeClass('active');
});
});
css
.box {
text-align:center;
top:9vh;
left:0;
background-color: #7d7e7d;
display:inline;
white-space:nowrap;
overflow:hidden;
margin: 3px;
padding: 3px;
}
.active {
background-color: green;
}
html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span id="sec1" class="box">
<a href="#">
MOVIES
</a>
</span>
<span id="sec2" class="box">
<a href="#">
MUSIC
</a>
</span>
<span id="sec3" class="box" >
<a href="#">
RADIO
</a>
</span>
<span id="sec4" class="box">
<a href="#">
COMICS
</a>
</div>
</body>
</html>
http://jsbin.com/riranefuri/edit?html,css,js,output
Just remove class off every span, then add it to being clicked one.
<script>
$(document).ready(function() {
$("span.box").click(function() {
$("span.box").removeClass('active');
$(this).addClass('active');
});
});
</script>
But if you wish to use a-tags to walk through different pages, you should add active class to appropriate link via your server programming, not js.
Javascript not executing on page reload
When my page reloads via a user clicking one of my checkboxes, my JS does not execute.
What happens is that URL variables are appended to the URL (for size, color, price, etc etc., depending on what the user is clicking) and when that happens, the JS is somehow left unexecuted.
What the JS does is create a class to my UL called SizeChicklets. Also, I am only able to use jQuery 1.3.2 due to SaaS platform limitations.
Here is what my boxes look like on a successful page load, before I click any of the boxes:
And here is what my boxes look like on an unsuccessful page load, when I click any of the boxes:
This happens because the class I am appending to my UL is being done via Javascript. Then, that class is being styled. However, I want the JS to execute when the page reloads, so I don't have this problem.
My URL when I first arrive at the Product Refinement page looks like this:
.com/s?defaultSearchTextValue=Search&searchKeywords=*&Action=submit
Then, upon clicking one of the boxes (Value: 9M), the URL changes to look like this:
.com/s?defaultSearchTextValue=Search&searchKeywords=*&Action=submit&field_subjectbin=&field_brandtextbin=&field_price=&field_generic_text_2-bin=&field_generic_text_1-bin=&field_size_name=9M&searchRank=generic-one-desc-rank&searchSize=12&searchPage=1&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name
Here is my Javascript:
jQuery( document ).ready(function() {
var sizeUL = jQuery('.binName').filter(function(){
return this.innerHTML.trim() == 'Size';
}).next("ul")
sizeUL.addClass('SizeChicklets');
/*Prepend and Append clear div*/
jQuery('.binName').filter(function(){
return this.innerHTML.trim() == 'Size';
}).prepend('<div style="clear: both;">').append('</div>');
/* AJAX SIZE SELECTOR */
jQuery("li a", sizeUL).click(function() {
if(jQuery(this).hasClass('SizeChickletSelected')) {
jQuery(this).removeClass('SizeChickletSelected');
} else {
jQuery(this).addClass('SizeChickletSelected');
}
});
});
Here is my HTML (before SizeChicklets is appended to the UL):
<ul class="linkList" id="binValue-6">
<li class="binValue">
<input name="binId" value="size_name" type="hidden">
<input name="binValue" value="0-3 Months" type="hidden">
<a href=".com/s?field_size_name=0-3+Months&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchKeywords=*&searchNodeID=5690131011&searchRank=generic-one-desc-rank&searchSize=12" rel="nofollow">
<input type="checkbox">0-3 Months
</a>
</li>
</ul>
Here is my CSS:
.SizeChicklets {
/* JUST UL STYLES */
clear: both;
}
.SizeChicklets:after {
/* JUST UL STYLES */
clear: both;
display:block;
width:100%;
}
.binName {
clear:both;
}
.SizeChicklets li {
/* JUST LI STYLES */
float: left;
color: #ffffff;
margin-top: 5px;
}
.SizeChicklets li a input{
display:none;
}
.SizeChicklets li a {
/* JUST A STYLES */
border: 1px solid #cacaca;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
display: inline-block;
background: -moz-linear-gradient(top, #666666 0%, #5f5f5f 20%, #3f3f3f 75%, #343434 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(20%,#5f5f5f), color-stop(75%,#3f3f3f), color-stop(100%,#343434)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* IE10+ */
background: linear-gradient(to bottom, #666666 0%,#5f5f5f 20%,#3f3f3f 75%,#343434 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
min-width:33px;
padding:2px 2px 2px 2px;
width: auto;
height: auto;
font-size: 11px;
color: white!important;
}
.SizeChicklets li a:visited {
color: #FFFFFF;
}
.SizeChicklets li a:hover {
/* JUST A STYLES */
border: 1px solid #cacaca;
font-size: 11px;
color: #222222;
text-decoration: none;
text-align: center;
display: inline-block;
background: #de9b00; /* Old browsers */
background: -moz-linear-gradient(top, #de9b00 0%, #d99505 25%, #c47d0f 95%, #c37c0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de9b00), color-stop(25%,#d99505), color-stop(95%,#c47d0f), color-stop(100%,#c37c0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* IE10+ */
background: linear-gradient(to bottom, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de9b00', endColorstr='#c37c0d',GradientType=0 ); /* IE6-9 */
width: auto;
height: auto;
font-size: 11px;
color: white;
}
.SizeChickletSelected {
/* JUST A STYLES */
border: 1px solid #cacaca;
font-size: 11px;
color: #222222;
text-decoration: none;
text-align: center;
display: inline-block;
background: #de9b00; /* Old browsers */
background: -moz-linear-gradient(top, #de9b00 0%, #d99505 25%, #c47d0f 95%, #c37c0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de9b00), color-stop(25%,#d99505), color-stop(95%,#c47d0f), color-stop(100%,#c37c0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* IE10+ */
background: linear-gradient(to bottom, #de9b00 0%,#d99505 25%,#c47d0f 95%,#c37c0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de9b00', endColorstr='#c37c0d',GradientType=0 ); /* IE6-9 */
width: auto;
height: auto;
font-size: 11px;
color: white;
}
Thank you.
Menu item onclick call a muti css onhover event
Have some trouble figuring this out any help wold be great thank you in advance
I have a menu that looks something like this
HTML
<li class="menuItem">Phones
<div class="flyout">
<div class="col_1">
<h3>Phones</h3>
<ul>
<li>Nokie</li>
<li>Iphone</li>
<
</ul>
</div>
</li>
with 2 css
.menuItem:hover {
border: 1px solid #777777;
/* Background color and gradients */
background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top, #fafafa 0%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(70%,#fcfcfc), color-stop(100%)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #fafafa 0%,#fcfcfc 100%); /* W3C */
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menuItem:hover .flyout
{
display:block;
top:auto;
left:0px;
}
how would you call those 2 class on a onclick function?
Use jQuery to add/remove or toggle a class:
$( document ).ready(function() {
$("p").click(function () {
$('.menuItem').addClass('flyout');
});
});
This in CSS:
.flyout {
display:block;
top:auto;
left:0px;
}
Flexible scroll
How to add Scroll bars to div when window is minimized and remove when maximized i try to use this script but its not work
<script type="text/javascript">
$(document).ready(function () {
var bodywidth = $(document).width();
$("#tabMain").width(bodywidth);
});
</script>
here my div:
<div class="tabsMainCont" id="tabMain">
<ul class="tabsMenu">
<li>Profile</li>
<li>My Clinics</li>
<li>My Assistants</li>
<li>Mangment</li>
</ul>
<div class="tabsContent">
<p>test</p>
</div>
</div>
and this the css i do so far:
.tabsMainCont
{
margin: 0 auto;
padding-top: 19px;
width: 1257px;
}
.tabsMenu
{
float:left;
overflow: hidden; margin: 0 0 0 0; background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid #D1D1D1;
width:100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:43px;
}
.tabsMenu li
{
float:left;
list-style-type:none;
border-right: 1px solid #DEDEDE;
height:43px;
width:340px;
}
.tabsMenu li a
{
padding:11px 26px 26px 118px;
display:block;
color:Black;
}
.tabsMenu li a:hover
{
text-decoration:none;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
color:Black;
}
.tabsMenu li a:focus
{
background: rgb(244,244,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.tabsMainCont .tabsContent
{
background-color:White;
border-radius:4px;
overflow:auto;
float:left;
width:100%;
}
the tabsContent div is that one i want it to scroll
if you are looking to use a horizontal and vertical scroll outside of what the browser gives you then you need to set the width and height of the element you want to scroll on (in this case .tabsContent) this can be px or % based. Given the fact you have already set .tabsMenu to have overflow hidden, then if you just add:
float: left;
overflow: auto;
to the .tabsMainCont element then that will scroll horizontally only when there is additional content in the .tabsContent element.
EDIT: the only problem i foresee with this is that the vertical scroll bar will be on right most edge of the .tabsMainCont which will cause you usability issues, that being the case I would strongly recommend only using overflow-x on the element and use the browsers vertical scroll, so updated css would be:
.tabsMainCont
{
margin: 0 auto;
padding-top: 19px;
width: 1257px;
float:left;
overflow-x: auto;
}