Jump to content



Photo

[Javascript] Change CSS Attribute


  • Please log in to reply
7 replies to this topic

#1 Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 02 February 2013 - 13:39

Hi there.

I've managed to change the padding of an element using javascript. I changed:

#content {
border-right: 1px solid #e6e6e6;
margin: 0 -31px -9999px -5.1%;
padding: 106px 30px 9999px 5.1%;
background: #fff url(../images/bg-content.gif) repeat-y;
position: relative;
z-index: 2;
}

using:

document.getElementById("content").style.padding = "106px 0px 9999px 0%";

How would I go about changing a css attribute that's a class?
i.e.:

.post p {margin: 0;}



#2 winlonghorn

winlonghorn

    Neowinian

  • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 14:29

Hi there.

I've managed to change the padding of an element using javascript. I changed:

#content {
border-right: 1px solid #e6e6e6;
margin: 0 -31px -9999px -5.1%;
padding: 106px 30px 9999px 5.1%;
background: #fff url(../images/bg-content.gif) repeat-y;
position: relative;
z-index: 2;
}

using:

document.getElementById("content").style.padding = "106px 0px 9999px 0%";

How would I go about changing a css attribute that's a class?
i.e.:

.post p {margin: 0;}


You could get all child elements of ".post" using the jquery children function and set the values using the css function. :) Here is an example:

//jquery example
$(".post").children().css('padding', '106px 0px 9999px 0%');


#3 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 02 February 2013 - 15:02

Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document.

At the moment I've added this into the body of a post:


<script>
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
</script>


<button onclick="myFunction();">click</button>
This changes the padding in the matching css #content rule.

I want to change .post p {margin: 0;} to .post p {margin-right: -50px;}

#4 winlonghorn

winlonghorn

    Neowinian

  • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 15:15

Sorry I'm not familiar with how to use jquery but I know jquery.js is included in the head of the document.

At the moment I've added this into the body of a post:


<script>
function myFunction() {
document.getElementById("content").style.padding = "106px 0px 9999px 0%";
}
</script>


<button onclick="myFunction();">click</button>
This changes the padding in the matching css #content rule.

I want to change .post p {margin: 0;} to .post p {margin-right: -50px;}


I actually made one mistake in my example code. The children function call should look like this: ".children('p')". What you would do is modify your javascript function as shown below:

<script>
	function myFunction() {
		document.getElementById("content").style.padding = "106px 0px 9999px 0%";
	   $(".post").children('p').css('margin-right', '-50px');
	}
</script>

So you would basically just add the line of code that I gave you below the existing line of code in your javascript function.

#5 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 02 February 2013 - 15:34

Thanks for your reply.

Unfortunately I get this error if I run the code:



Uncaught TypeError: Property '$' of object [object Window] is not a function
myFunction
onclick

this is in the head:

<script type="text/javascript" src="http://website.com/wp-content/themes/yerba/js/jquery.main.js"></script>

Could there be another way to do this?

If I add
<style>.post p {margin-right: -50px;} </style>
to the bottom of the <head>

it adds the proper margin to the element.

Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page

I tried adding:

<script>

if (document.title == "Contact Us") {
document.write("<style>.post p {margin-right: -50px;} </style>");
}
</script>

to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js.

#6 winlonghorn

winlonghorn

    Neowinian

  • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 15:50

Thanks for your reply.

Unfortunately I get this error if I run the code:



Uncaught TypeError: Property '$' of object [object Window] is not a function
myFunction
onclick

this is in the head:

<script type="text/javascript" src="http://website.com/wp-content/themes/yerba/js/jquery.main.js"></script>

Could there be another way to do this?

If I add
<style>.post p {margin-right: -50px;} </style>
to the bottom of the <head>

it adds the proper margin to the element.

Trouble is it occurs across the whole wordpress site. I only want it to load upon a certain page

I tried adding:

<script>

if (document.title == "Contact Us") {
document.write("<style>.post p {margin-right: -50px;} </style>");
}
</script>

to the end of the head section but that doesn't work. I may be using it incorrectly though. Very new to js.


No problem at all! :) Ok, it may not be properly accessing jquery in that case. Try changing this line:

<script type="text/javascript" src="http://website.com/wp-content/themes/yerba/js/jquery.main.js"></script>

To this:

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

Here is a link to describe additional issues that could cause the error message that you are seeing (just in case my solution fails for some reason): http://stackoverflow...-not-a-function

#7 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 02 February 2013 - 16:06

Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long.

I've solved it presently using php:


<?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "<style>#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}</style>";
}
?>

Wish I'd thought of that first thing!

#8 winlonghorn

winlonghorn

    Neowinian

  • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 16:09

Thanks buddy. I'm packing up for today and my heads spinning focusing on such a simple problem for so long.

I've solved it presently using php:


<?php
$currentpageurl=$_SERVER['REQUEST_URI'];
if ($currentpageurl = "/contact-us/") {
echo "<style>#content {padding: 106px 0px 9999px 0%} .post p {margin-right: -50px;}</style>";
}
?>

Wish I'd thought of that first thing!


You are very welcome! :) I don't blame you at all. Working on problems like this for so long can bring headaches very easily. I know from past experience. lol. Also, just in case you want to use jquery in the future, I found another link that may help. I noticed from your code that you may be using wordpress. If so, the following link should be helpful for future use: http://www.ericmmart...with-wordpress/