Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

In SharePoint 2007 using Content Types and editting NewForm.aspx with jQuery I've managed to customize the look of a new item, adding a gradient color identity for each Content Type. I want to continue that look in the views, too. For the "All Items" view, I added a Content Editor Web Part into which I coded styles and jQuery script. I'd like to be able to display gradient colors in the view and I've got that accomplished in FireFox but IE8 seems resistent.

In the Content Editor Web Part I have code that works in ForeFox but not in IE8. The issue seems to be that IE8 doesn't handle jQuery statement: $Text.parent();.

Question: Does anyone know of a way to add a class to a parent without using obj.Parent()? Or is there an IE workaround for this issue?

BTW, this jQuery statement does work in IE8: $Text.parent().css("background-color", "#FF0000");, however, the it is without the gradient qualities.

Thanks in advance,

-Arnold

Code:

<style type="text/css">
.formRedBackground
{
    background: white;
    background: -moz-linear-gradient(top, white, #FF0000);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to  (#FF0000));
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='white', EndColorStr='#FF0000', gradientType='0');
    color:#FFFFFF;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Red')");
var myelement = $Text.parent();
myelement.addClass('formRedBackground');

});

share|improve this question
    
In looking over the question again, I think I missed the issue. jQuery.addClass() seems to be the function that doesn't work in IE8. Thanks, Arnold –  user1743 Dec 8 '10 at 16:22
add comment

1 Answer

up vote 0 down vote accepted

I found the answer to my question. I modified the jQuery to execute a function on the parent of the TD. I also ended up changing my requirement so that just the first two TD elements in a TR are colorized.

Here is the code in case it helps someone else:

<script type="text/javascript">
$(document).ready(function(){

$Text = $("td .ms-vb2:contains('Beige')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formBeigeBackground");});

$Text = $("td .ms-vb2:contains('Black')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formBlackBackground");});

$Text = $("td .ms-vb2:contains('Lavender')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formLavenderBackground");});

$Text = $("td .ms-vb2:contains('Pink')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formPinkBackground");});

$Text = $("td .ms-vb2:contains('Red')");
$Text.parent().each(function() { $("td:lt(2)", this).addClass("formRedBackground");});

});
</script>

This is a great site,

-Arnold

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.