Jump to content
  • 0
Sign in to follow this  
Followers 0

Question

Posted

Hi there.

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

[code]#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;
}[/code]

using:

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

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

.post p {margin: 0;}
[/code]

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted

[quote name='Axel' timestamp='1359812393' post='595496666']
Hi there.

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

[code]#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;
}[/code]

using:

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

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

.post p {margin: 0;}
[/code]
[/quote]

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:

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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:

[code]

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


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

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

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Axel' timestamp='1359817332' post='595496750']
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:

[code]

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


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

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

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:

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

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

Share this post


Link to post
Share on other sites
  • 0

Posted

Thanks for your reply.

Unfortunately I get this error if I run the code:

[code]


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

this is in the head:

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

Could there be another way to do this?

If I add
[code]<style>.post p {margin-right: -50px;} </style>[/code] 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:

[code]
<script>

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

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

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Axel' timestamp='1359819280' post='595496816']
Thanks for your reply.

Unfortunately I get this error if I run the code:

[code]


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

this is in the head:

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

Could there be another way to do this?

If I add
[code]<style>.post p {margin-right: -50px;} </style>[/code] 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:

[code]
<script>

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

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

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

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

To this:

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

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): [url="http://stackoverflow.com/questions/2079115/uncaught-typeerror-property-of-object-object-global-is-not-a-function"]http://stackoverflow...-not-a-function[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted

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:

[code]

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

Wish I'd thought of that first thing!

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Axel' timestamp='1359821196' post='595496888']
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:

[code]

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

Wish I'd thought of that first thing!
[/quote]

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: [url="http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/"]http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/[/url]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.