Develop Reference

Displaying background image behind row in div table [duplicate]

Is it possible to have a background gradient that spans an entire table row? I'm only able to apply the background to individual table cells, even when I'm specifically trying to prevent that. Here is a boiled-down sample that targets Webkit on jsfiddle:
http://jsfiddle.net/cGV47/2/
As you can see, I am using border-collapse:collapse and I am specifying background:transparent for the <tr> and <th> child elements, yet the red gradient to the left is repeated for each table cell. I've tried applying the background to the <tr> as well, but with the same result as you see now.
To view the code without going to jsfiddle, here it is:
html
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
</tr>
</tbody>
</table>
css
* {margin:0;padding:0;border:0;border-collapse:collapse;}
table { width:100%; }
thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); }
thead tr, thead th { background:transparent; }

set background-attachment:fixed; on thead and it will work fine
http://jsfiddle.net/cGV47/64/

I think there is a better solution to these:
Apply the gradient background to the whole table.
Then apply a solid background for thead and tfooter.
table { border:0; border-collapse:collapse;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
table thead, tfoot {
background: #fff;
}
Take a look:
http://jsfiddle.net/5brPL/

I have found myself testing the brand new repeating-linear-gradient, which apparently works for <tr> elements (I have only tested in Google Chrome though).
The trick is to provide the widest repeating pattern, so that... it does not repeat.
Try this:
tr {
background: repeating-linear-gradient(
45deg,
red 0%,
blue 100%
);
}
http://jsfiddle.net/slyy/2pzwws0d/

Not the prettiest solution, but it does do the trick. You just set up each th to have 25% of the color range. The example below uses a color range from 0 to 255.
http://jsfiddle.net/cGV47/3/
Same HTML that you already have. Here's the CSS:
table { width:100%; }
th {
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,
rgba(191,191,191,1) 100%);
}
th + th {
background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%,
rgba(128,128,128,1) 100%);
}
th + th + th {
background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%,
rgba(64,64,64,1) 100%);
}
th + th + th + th {
background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%,
rgba(0,0,0,1) 100%);
}
I found this issue on Google: http://code.google.com/p/chromium/issues/detail?id=122988 but there is no solution.
Firefox does not have this issue (didn't check any other browsers):
http://jsfiddle.net/cGV47/4/

'Height: Toggle' on JQuery's 'animate' makes Div keep toggling

What I am trying to do is: to make the top bar of a website toggle down when a certain amount of page slide is reached. I.E., when the user slides down 328px, the top bar slides down and stay fixed on top.
The problem is that when the user reaches the 328px sliding down, the top bar div starts toggling up and down and it doesn't stop! It only stops when I move the page slide back to the top.
How do I make it toggle down when it reaches 328px and the toggle up when it gets below 328px?
This is my code:
<script type="text/javascript">
$( document ).ready(function() {
$( window ).scroll(function() {
if ($( window ).scrollTop() > 328) {
$("#header-fixed").css({"display": "block"});
$("#header-fixed").animate({"height": "toggle"});
}
if ($( window ).scrollTop() <=328) {
$("#header-fixed").css({"display": "none"});
$("#header-fixed").animate({"height": "toggle"});
}
});
});
</script>
<div id="header-fixed">
<img id = "logo" src = "img/logo-new.png"/>
<div id = "menu-links-div">
<ul id = "ul-links">
<li class = "menu-links"> Home </li>
<li class = "menu-links"> Media </li>
<li class = "menu-links"> Sobre </li>
<li class = "menu-links"> Contatos </li>
</ul>
</div>
</div>
CSS:
#header-fixed {
position: fixed;
width: 100%;
top: 0px;
display: none;
height: 100px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(60%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* IE10+ */
background: linear-gradient(135deg, #1e5799 0%,#7db9e8 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient
}

change your html to
<script type="text/javascript">
$( document ).ready(function() {
$( window ).scroll(function() {
if ($( window ).scrollTop() > 328) {
$("#header-fixed").css('height','100px');
}
if ($( window ).scrollTop() <=328) {
$("#header-fixed").css('height','0');
}
});
});
</script>
and your css to
#header-fixed {
position: fixed;
width: 100%;
top: 0px;
overflow: hidden;
height: 0px;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-o-transition: height 0.5s;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(60%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1e5799 0%,#7db9e8 60%); /* IE10+ */
background: linear-gradient(135deg, #1e5799 0%,#7db9e8 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient
}

$(window).scroll() is fired everytime the user scrolls. Everytime the user scrolls $("#header-fixed").animate({"height": "toggle"}); is called. So that means even when a user only scrolls for 1px the topbar will animate again. You have to be more careful with finding out when and how to animate the topbar.
Another problem is the initial state of the topbar and the use of the jQuery keyword toggle. Apparently toggle as an animation property also sets the display value to none for your topbar.
The suggested solution with CSS transitions is a good way to solve this.

problems displaying content [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Clicking the response back to the other user in the private message system, a box will appear,
when I click on it so it will not be
HTML
<form action="#" method="post">
<input type="submit" name="svar" value="Svar" id="indholdcklik" class="click svarpm">
</form>
content to show up on the page
<div id="indholdbeksed">
hey
</div>
CSS
#indholdbeksed {
display: none;
margin: 10px 0px;
}
.click {
font-weight: bold;
color: #ffffff;
background: #79bbff;
background: -moz-linear-gradient(top, #79bbff 0%, #4197ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79bbff), color-stop(100%,#4197ee));
background: -webkit-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: -o-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: -ms-linear-gradient(top, #79bbff 0%,#4197ee 100%);
background: linear-gradient(to bottom, #79bbff 0%,#4197ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bbff', endColorstr='#4197ee',GradientType=0 );
}
.click:hover {
background: #4197ee;
background: -moz-linear-gradient(top, #4197ee 0%, #79bbff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4197ee), color-stop(100%,#79bbff));
background: -webkit-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: -o-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: -ms-linear-gradient(top, #4197ee 0%,#79bbff 100%);
background: linear-gradient(to bottom, #4197ee 0%,#79bbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4197ee', endColorstr='#79bbff',GradientType=0 );
}
and at the top of the page will be shown here:
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$("#indholdcklik").click(function() {
$("#indholdbeksed").slideDown("slow",function() {
// Animation complete.
});
});

I created the jsfiddle and add document.ready to start your javascript then document is ready and add return false to prevent form submit.
Now all works fine.

Make sure your javascript code is between <script> tags and within
$(document).ready(function() {
// your code here
});
You should prevent the form from submitting. Pass the event to the callback function and stop the submit.
$("#indholdcklik").click(function(ev) {
ev.preventDefault();
// everything else..

Multiple background color for div

I have a div
<div class="test">
Some text
</div>
I would like to have different background color for the same div by percent (Horizontal coloring)
-----------------------------
| 20% | 30% | 50% |
| Red | Yellow | Green |
-----------------------------
Is this possible with CSS?

You can use CSS3 Gradients[1] to achieve such effect
div {
background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
height: 400px;
}
Demo
You can create such gradients over here
You can also use px as a unit, along with % if you are looking for static gradient widths
Demo (Please add browser-prefixes if you are looking for a cross browser solution, I've not added all the rules in this demo)
Demo 2 (Vertical Split, just change to right to to bottom)
1. More on CSS3 Gradients
2. Browser Support

You could achieve this by using a gradient:
Either google it and create an own.
Or use a generator like this:
http://www.colorzilla.com/gradient-editor/
which gives you the following css-code:
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */

You could create three descendant divs within the parent. Absolutely position them, make the parent transparent, then give the three divs a z-index of 0 so they sit underneath the text, not on top.

This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required
#div{
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#div:before,
#div:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
DEMO

animate CSS3 gradient-positions using jQuery

Is it possible to animate the position of a CSS3-gradient-color using jQuery?
I'd like to animate from this
background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%,
#FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),
color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */
to this
background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%,
#FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000),
color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */
in xx milliseconds
thank you in advance!

Be creative.. This is an example of how I do gradient transitions without extra plugins..
I use 2 identical divs with different gradients layered one on top of the other. Then I use jquery to animate the opacity of the one on top..
Here is it step by step
create a wrapper with a fixed size lets say "width:200px" and "height:100px" (I use a wrapper so that its easier to adjust the position of the divs inside it)
create 2 divs that are the same size as the wrapper give both different background gradients but use the same content for both so visually the only thing that changes is the background gradient.
add "position:relative;" and adjust the position of the div that will be on top, in this case box2 with "bottom:100px;" (notice its the same value as the height of the wrapper and the divs. This makes the div that will be on top to move up 100px positioning itself right over the lower div, relative to the wrapper... this is not possible without using "position:relative;" on the top div)
animate the opacity of the div with your preferred method i use fadeToggle in this example
HTML-----
Click to change gradient<br>
<div align="center" style="width:200px; height:100px;">
<div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div>
<div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div>
</div>
GRADIENTS IN CSS-----
.box1 {
background: rgb(237,144,23); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
}
.box2 {
background: rgb(246,230,180); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
jQuery animation----
$(document).ready(function(){
$("a").click(function(){
$("#box2").fadeToggle(100, "linear");
});
});
you can layer a third div so that you dont need to write the same content twice by adding a second wrapper outside the first one and placing the third div after the inside wrapper closes..
to view this go to the following link..
Link to example

You can make the gradient twice as big (meaning incorporate the first gradient in the first 50%, and the second gradient in the last 50%) as it needs to and use this code:
-webkit-background-size: 200%;
-moz-background-size: 200%;
-o-background-size: 200%;
-ms-background-size: 200%;
background-size: 200%;
on the initial item and.
Not all the prefixes will work, but I do it for compatibility if they add it later
background-position:bottom;
On the hover

CSS gradient transitions haven't been implemented in any of the browsers yet, although it's in the spec. So, you can't do this. You'll need to do this with SVG (if you're brave).

This is a code snippet of one of my project where I use gradient transition using jquery.This may help you:
<div id="gr_anim"> Change Gradient </div>
var p1 = t = 0;
var p2 = 100;
function hello() {
p1 = p1 + 5;
p2 = 100 - p1;
if(p1 <= 100 && p2 >= 0) {
$('#gr_anim').css({
'background-image':'-moz-linear-gradient('+ p1 +'% '+ p2 +'% 45deg, #000, #fff)'
});
} else {
clearTimeout(t);
}
t = setTimeout('hello()',1000);}
$( function() {
hello();});

I think you should try it by using jquery ui's switchClass, you need to add JqueryUI and a link to the dependency effects core
http://jqueryui.com/demos/switchClass/
something like this:
<script type="text/javascript">
$(function() {
$("#button").click(function () {
$(".divPropertyStart").switchClass("divPropertyStart", "divProperty", 1000);
$(".divProperty").switchClass("divProperty", "divPropertyStart", 1000);
return false;
});
});
</script>
<style type="text/css">
.divPropertyStart { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000), color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); }
.divProperty { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); }
</style>
<div class="divPropertyStart"></div>
Toggle Effect
This works for me #localhost
Lauw

what about animating the width of the container to which the gradient applies ?
(example for Chrome with JQuery)
html:
<div id='test'>
</div>
<span id='click_me'>
</span>
css:
#test
{
width:400px; height: 400px; float:left;
background: linear-gradient(90deg, #5e5e5e 0%, #000 100%);
}
js:
$('#click_me').on('click',function ()
{
$('#test').animate({'width':'+=400'},400);
}
);
works a treat
EDIT: I've made a mistake here as regards the original question. I am going to leave the answer here though as I think that by using more elements than just one the position of the fade could be moved about with the animate() function within a container div, creating the effect of the fade position sliding