Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


Jony Ive’s iOS 7 redesign described as ‘black, white, and flat all over’ in Back Page News

[Javascript] Change CSS Attribute

Started by Axel, Feb 02 2013 13:39

7 replies to this topic - - - - -

#1 Axel

    --[Est. 1986]--

  • 5,304 posts
    • 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;}

Ad Bot


#2 winlonghorn

    Resident Elite

  • 1,037 posts
    • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 14:29

View PostAxel, on 02 February 2013 - 13:39, said:

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

    --[Est. 1986]--

  • 5,304 posts
    • 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

    Resident Elite

  • 1,037 posts
    • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 15:15

View PostAxel, on 02 February 2013 - 15:02, said:

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

    --[Est. 1986]--

  • 5,304 posts
    • 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

    Resident Elite

  • 1,037 posts
    • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 15:50

View PostAxel, on 02 February 2013 - 15:34, said:

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

    --[Est. 1986]--

  • 5,304 posts
    • 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

    Resident Elite

  • 1,037 posts
    • Joined: 17-March 05
  • Location: Erie, PA

Posted 02 February 2013 - 16:09

View PostAxel, on 02 February 2013 - 16:06, said:

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/
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming