JavaScript and client side scripting.
Moderator: General Moderators
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Sat Dec 24, 2011 11:07 am
The code below is what i currently have; it changes the color of the link (and adds padding) by using jQuery's css() function. The problem is that it doesn't work once the page is loaded; i have to click it once (it turns into 'Hide') and when i click it again, the styling is applied. After this the styling seems to function like it should. Any ideas on why the styling isn't applied when the pages loads?
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
$('a.more').click(function() {
$('a.more').text('Hide');
$('a.more').click(function() {
if ($(this).text() == 'Hide') {
$(this).text('Show');
$(this).css({
backgroundColor: '#006',
padding: '1%',
});
}
else {
$(this).text('Hide');
$(this).css({
backgroundColor: '#f00',
padding: '1%',
});
}
});
});
});
</script>
</head>
<body>
<a href="#" class="more">Show</a>
</body>
</html>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
phpHappy
Forum Commoner
Posts: 33 Joined: Wed Oct 26, 2011 1:58 pm
Post
by phpHappy » Sun Dec 25, 2011 12:05 am
phpHappy
Forum Commoner
Posts: 33 Joined: Wed Oct 26, 2011 1:58 pm
Post
by phpHappy » Sun Dec 25, 2011 12:13 am
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.js" ></script>
<script>
$(document).ready(function() {
$('a.more').click(function() {
if ($(this).text() == 'Hide') {
$(this).text('Show');
$(this).css({
backgroundColor: '#006',
padding: '1%',
});
}
else {
$(this).text('Hide');
$(this).css({
backgroundColor: '#f00',
padding: '1%',
});
}
});
});
</script>
</head>
<body>
<a href="#" class="more">Show</a>
</body>
</html>
social_experiment
DevNet Master
Posts: 2793 Joined: Sun Feb 15, 2009 11:08 am
Location: .za
Post
by social_experiment » Sun Dec 25, 2011 5:55 am
Thanks, i had to add styling to the link to get it to display in the initial state but it works now
Edit
I also made my initial function into 2 functions because the hide part is relevant to the script and it's still working
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
phpHappy
Forum Commoner
Posts: 33 Joined: Wed Oct 26, 2011 1:58 pm
Post
by phpHappy » Sun Dec 25, 2011 9:58 pm
good deal
I should have elaborated better - a click function wrapped in a click function