By phpdan on

Hi,

I have a basic phptemplate with which I would like to be able to set the background image for the body property using jquery.

Just before the body html tag I have:

<?php

drupal_add_js(
  '$(document).ready(function(){
    $("body").css("background", "white");
  });',
  'inline'
);
?>

and my css style sheet is simply

body{
  background-image: url('oldphoto_fade.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

And, it does not work. I have tested that jquery is working with a simple hello world alert.

Thoughts?

Dan

⋅ Categories: Drupal 5.x

Comments

mfer’s picture

mfer commented

Your background could very likely be white. It's just behind the image you have. What you did is essentially like adding background-color: white to your css. This would know get rid of the image. It would just do white where the image wasn't.

If you want to get rid of the image you need to unset it.

--
Matt
www.mattfarina.com
www.innovatingtomorrow.net
www.geeksandgod.com

phpdan’s picture

phpdan commented

Hmm,

background is the shorthand property, and it was my assumption that setting it would override the other background properties.

I have now also tried setting the background-image to a non-existing url, but doing so does not change the page either.

$("body").css("background-image", "url(null)");

I have the webdeveloper toolbar for firefox installed. When I view the css, there are no changes to the body property. Though I am not sure css modified by javascript would show up in the view css.

From reading about jquery, it is my understanding that $(document).ready(function(){ replaces window.onload = but it seems to me that my jquery code is not getting executed as I added the following:

drupal_add_js(
  '$(document).ready(function(){
    $("body").css("background-image", "url(null)");
    alert("test");
  });',
  'inline'
);

Dan

tjholowaychuk’s picture

tjholowaychuk commented

What you should really do in this case is simply add a class to the body tag, or "toggle" classes so maybe

// shorthand for document.ready
$(function(){
$('body').addclass('white');
});

then have you css as:

body.white {
// attributes
}

having classes on the body tag can be VERY helpful and very powerful, hope that helped.
____________________________________________________
Tj Holowaychuk

Vision Media
350designs

phpdan’s picture

phpdan commented

Sweet! Works with using a class.

drupal_add_js(
  '$(document).ready(function(){
    $("body").addclass("white");
  });',
  'inline'
);

body.white{
  background-color: "white";
}
body.image{
  background-image: url('oldphoto_fade.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}
tjholowaychuk’s picture

tjholowaychuk commented

:)

I honestly use body classes on every site, you can do many useful things

have role specific body classes so you can remove things for manager roles or for other roles that do not need to see input formats or things like that

use path specific classes to swap an image replacement background

have random range of body class numbers to toggle images on each page refresh

all kinds of things :D I am making a module called "themer" which I have not released yet but it will be vary simple and for now will just provide all of these body classes
___________________________________________________
Tj Holowaychuk

Vision Media
350designs