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.
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.
I need to create horizontal menu with sliding option and submenu. Because of sliding option I have to set overflow on hidden, but than I have problem with submenu. I would appreciate any help or idea how to solve this problem.
.horizontalni {
border:solid 1px rgba(0,0,0,0.3);
border-radius:4px;
box-shadow:0 0 0 4px rgba(125,125,125,0.1);
padding:0;
position:relative;
width:auto;
max-width:800px;
background:silver;
overflow:hidden;
}
/* navigation items */
.horizontalni .navigation {
background:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.1);
display:block;
font-family:verdana,sans-serif;
font-size:3em;
height:55px;
padding-top:0px;
position:absolute;
text-align:center;
text-shadow:rgba(0,0,0,0.1); 0 0 2px;
width:50px;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
.horizontalni:hover .navigation {
background:rgba(0,0,0,0.3);
color:rgba(255,255,255,0.8);
text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}
.horizontalni .navigation:hover {
background:rgba(0,0,0,0.5);
}
.horizontalni .previous {
left:0;
}
.horizontalni .next {
right:0;
}
/* carousel container */
.horizontalni ul {
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:-o-box;
display:box;
list-style-type:none;
margin-top:5px;
margin-bottom:5px;
padding:0;
}
/* standard width and height for the carousel items */
.horizontalni li {
border:solid 1px #333;
height:40px;
margin-right:10px;
width:auto;
min-width:150px;
max-width:300px;
}
/* animation properties for the carousel */
.animate ul {
-moz-transition:margin 1s;
-ms-transition:margin 1s;
-webkit-transition:margin 1s;
-o-transition:margin 1s;
transition:margin 1s;
}
/* different color for each of our items */
.horizontalni li {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
text-align: center;
}
.horizontalni a {
color: #ffffff;
display: inline-block;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
.horizontalni > ul > li a {
padding-left:10px;
padding-right:10px;
line-height: 40px;
filter: none;
}
.horizontalni > ul > li:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
.horizontalni .has-sub:hover ul {
display: block;
z-index:1;
}
.horizontalni .has-sub ul {
display: none;
min-width: 100%;
text-align: center;
IE7
*width: 100%;
}
.horizontalni .has-sub ul li {
text-align: center;
}
.horizontalni .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
z-index:1;
}
<div id="carousel" class="horizontalni wrapper">
«
»
<ul>
<li >Test1</li>
<li ><a>Test2</a></li>
<li><a>Test3</a></li>
<li ><a>Test4</a></li>
<li ><a>Test5</a></li>
<li class="has-sub parent"><a>Test6</a>
<div class="wrapper">
<ul class="sub">
<li><a>Test61</a></li>
<li><a>Test62</a></li>
<li><a>Test63</a></li>
</ul>
</div>
</li>
<li class="child-element"><a>Test7</a></li>
<li class="child-element"><a>Test8</a></li>
<li class="child-element"><a>Test9</a></li>
</ul>
</div>
<script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script>
<script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script>
Here is demo of this code: sliding menu demo
Setting the submenu to a fixed position should work.
.has-sub.parent .wrapper {
position: fixed;
}
Here is the JSFiddle
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).
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;
}