Page 1 of 1

Styling dynamic content

Posted: Mon Oct 16, 2006 6:08 pm
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??

Posted: Wed Oct 18, 2006 6:37 pm
by Luke
bump

Posted: Wed Oct 18, 2006 6:46 pm
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>

Posted: Wed Oct 18, 2006 7:26 pm
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.

Re: Styling dynamic content

Posted: Wed Oct 18, 2006 8:46 pm
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