Styling dynamic content

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Styling dynamic content

Post by Luke »

I have a list of letters that, when clicked, generate html inside of a div w/id "show_category". So it looks like this...

Code: Select all

 <a href="#" onclick="showLetter('A', 'show_category'); new Effect.Appear('show_category');">A</a>
  <a href="#" onclick="showLetter('B', 'show_category'); new Effect.Appear('show_category');">B</a>
  <a href="#" onclick="showLetter('C', 'show_category'); new Effect.Appear('show_category');">C</a>
  <a href="#" onclick="showLetter('D', 'show_category'); new Effect.Appear('show_category');">D</a>
  <a href="#" onclick="showLetter('E', 'show_category'); new Effect.Appear('show_category');">E</a>
<div id="show_category"></div>
The showLetter function just makes a list that was previously invisible appear inside the show_category div... it looks like this...

Code: Select all

	 <ul id="category_G" class="category">
  	         <li><a href="member/view/category/golf-courseshop">Golf Course/Shop</a></li>
             <li><a href="member/view/category/government-officesagencies">Government Offices/Agencies</a></li>
             <li><a href="member/view/category/graphic-design">Graphic Design</a></li>
             <li><a href="member/view/category/groceries">Groceries</a></li>

      	 </ul>
Now I attempt to style my ul:

Code: Select all

.category ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

#show_category ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

#categories ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

WHY??
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

bump
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

how are you trying to dynamically add the html?

I whipped this up and it works fine:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style>
ul
{
	list-style-type: none;
}
</style>
<script>
function addIt()
{
	var string = '<ul id="category_G" class="category"><li><a href="member/view/category/golf-courseshop">Golf Course/Shop</a></li><li><a href="member/view/category/government-officesagencies">Government Offices/Agencies</a></li><li><a href="member/view/category/graphic-design">Graphic Design</a></li><li><a href="member/view/category/groceries">Groceries</a></li></ul>';
	document.getElementById('somediv').innerHTML = string;
}
</script>
</head>

<body>
<div id="somediv">

</div>
<input type="button" onClick="addIt()" value="add it">
</body>
</html>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Is the content in a hidden div that is unhidden after a click? If so, your JS needs to trigger the style change.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Styling dynamic content

Post by Zoxive »

The Ninja Space Goat wrote:I have a list of letters that, when clicked, generate html inside of a div w/id "show_category". So it looks like this...

Code: Select all

 <a href="#" onclick="showLetter('A', 'show_category'); new Effect.Appear('show_category');">A</a>
  <a href="#" onclick="showLetter('B', 'show_category'); new Effect.Appear('show_category');">B</a>
  <a href="#" onclick="showLetter('C', 'show_category'); new Effect.Appear('show_category');">C</a>
  <a href="#" onclick="showLetter('D', 'show_category'); new Effect.Appear('show_category');">D</a>
  <a href="#" onclick="showLetter('E', 'show_category'); new Effect.Appear('show_category');">E</a>
<div id="show_category"></div>
The showLetter function just makes a list that was previously invisible appear inside the show_category div... it looks like this...

Code: Select all

	 <ul id="category_G" class="category">
  	         <li><a href="member/view/category/golf-courseshop">Golf Course/Shop</a></li>
             <li><a href="member/view/category/government-officesagencies">Government Offices/Agencies</a></li>
             <li><a href="member/view/category/graphic-design">Graphic Design</a></li>
             <li><a href="member/view/category/groceries">Groceries</a></li>

      	 </ul>
Now I attempt to style my ul:

Code: Select all

.category ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

#show_category ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

#categories ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

Code: Select all

ul{
	list-style-type: none;
	margin: 20px;
}
Does nothing!

WHY??
Why? look at it one more time, i belive your using the wrong tags to apply the style to.

Code: Select all

<ul id="category_G" class="category">

Code: Select all

#category_G il{
     list-style-type: none;
     margin: 20px;
}
OR

Code: Select all

.category il{
     list-style-type: none;
     margin: 20px;
}
#category_G is Ul, so is .category, so i dont think CSS knows what to put the style on..

-NSF
Post Reply