Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old October 6th, 2007, 12:37 PM
Friend of Wrox
 
Join Date: Mar 2006
Location: , , Portugal.
Posts: 310
Thanks: 0
Thanked 0 Times in 0 Posts
Default replace css with javascript

Hello!

I have a couple of boxes like:

Code:
<div class="aaa">
                    <div class="bbb">
                     <div class="ccc">
                      <div class="ddddd"></div> 
                       <h2>
    My Title
   </h2>
                       </div>
                       <div class="yyyy">
                        <div class="uuuuu"><span></span></div>
                         <div class="kkkk">
                          <div class="clear"></div>
                          <div class="ssss">
                          <div class="mmmm">
     MY CONTENT HERE...
   <div class="clear5"></div>
                          </div>
                          </div>
                         <div class="clear"></div>
                         </div>
                        </div>
                       </div>
                      </div>
                      <div class="rrr">
                       <div class="www">
                        <div class="zzzz">
                          <span></span>                        </div>' +
                       </div>
                      </div>

    };
It's good politic use this script to facilitate me to add and edit my css boxes??

Code:
<script type="text/javascript">
   function cxHeader()
   {
   document.write('<div class="aaa">' +
                    '<div class="bbb">' +
                     '<div class="ccc">' +
                      '<div class="ddddd"></div>' +
                       '<h2>');
    };
    function cxMiddle()
   {
   document.write('</h2>' +
                       '</div>' +
                       '<div class="yyyy">' +
                        '<div class="uuuuu"><span></span></div>' +
                         '<div class="kkkk">' +
                          '<div class="clear"></div>' +
                          '<div class="ssss">' +
                          '<div class="mmmm">');
    };


   function cxEnd(movie)
   {
    document.write('<div class="clear5"></div>' +
                          '</div>' +
                          '</div>' +
                         '<div class="clear"></div>' +
                         '</div>' +
                        '</div>' +
                       '</div>' +
                      '</div>' +
                      '<div class="rrr">' +
                       '<div class="www">' +
                        '<div class="zzzz">' +
                          '<span></span>                        </div>' +
                       '</div>' +
                      '</div>');

    };
  </script>
...
<body>
...
<script>cxHeader()</script>
MY Title HERE...
<script>cxMiddle()</script>
MY CONTENT HERE...
<script>cxEnd()</script>
...
Thanks!

Reply With Quote
  #2 (permalink)  
Old October 6th, 2007, 06:10 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

There's all kinds of levels of good.

Here are the two questions that I would ask in your situation. One, what benefit do I get for writing the XHTML dynamically. Two, what problems do I run into if the javascript doesn't run? Also, factor in whether your script runs properly in both IE and Firefox. I've seen all kinds of guys justify doing something in javascript because "no one important has javascript turned off" and then write a script that fails in IE. That's bad.

I would probably try to write all your tags and XHMTL in the webpage first and use javascript to manipulate it, rather than using javascript to write XHTML in the first place. That would be a more robust solution. Another alternative (and you could do both) would be to write all your javascript into a separate js file. This is called unobtrusive javascript, and it generally has fewer issues than writing javascript inline in the webpage.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #3 (permalink)  
Old October 6th, 2007, 09:42 PM
Friend of Wrox
 
Join Date: Mar 2006
Location: , , Portugal.
Posts: 310
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks chronicle!

I already have my functions in a separately jscript.js file!
I think i'm gonna risk...

But if I write all my tags in xhtml... my javascript will be useless!

Thanks for your point of view!


Reply With Quote
  #4 (permalink)  
Old October 7th, 2007, 03:10 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quote:
quote:But if I write all my tags in xhtml... my javascript will be useless!
Yes, it will be, and I think that's good!! ;)

By writing out the entire page with JavaScript, you get your self into the following problems:

1. Your pages become a nightmare to maintain. What if you need to add a few elements, add a style here and there, change the structure and so on. Very *very* difficult and time-consuming to do.

2. You loose tools support. With code like this you can't use tools like Visual Studio that give you IntelliSense, color coding, code checking, code formatting, CSS tools and so on.

3. Bad for Search Engine Optimization. Search engines won't interpret your script as a normal browser does, so they won't understand much about your page and its structure.

4. Bad to exchange or reuse data. What if you want to share or reuse some of your content with another site?

5. Bad for non visual browsers. I think screen readers and other non-visual browsers have a real hard time understanding this.

I think there are more reasons not to do this, but these five are the most important ones. The list of benefits (can't think of one; but I am sure you can) of using your methodology should be long enough to justify ignoring these five very important benefits of using normal XHTML and CSS.

Hope this helps,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Reply With Quote
  #5 (permalink)  
Old October 7th, 2007, 09:07 AM
Friend of Wrox
 
Join Date: Mar 2006
Location: , , Portugal.
Posts: 310
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks very much Imar! You are very realistic as usual... :)

You talked about css... but my css file will be the same!

Think with me:
In js file I only will have:
Code:
doument.write('<div class="div1"><div class="div1"><div class="div2"><div class="div3">...')
and
Code:
doument.write('...</div></div></div></div>...')
So... all my design are saved on my css file!

You talked about search engines, but if i have:
Code:
<script>boxheader();</script>
 <h2>my box Title</h2>
<script>boxmidle();</script>
  <p class="bxTitle">my box Title</p>
  <p class="bxcontent">...</p>
<script>boxfooter();</script>
by that, all searh engines identify text words, and h1,h2,h3... tags!

In other hand, you said that it's harder to maintain!
But if have 6 or 7 divs to define 1 box and my home page has 7 identical boxes, it's very difficult to identify what is what from my page(without java help).
With java function, I just need to update one line of code to change all boxes(only add and remove div classes, because the style will be saved on css)!

But there is one thing that is important:
If one user has a problem with javascript he will only see text without css formating...

Thanks for yours comments!
Maybe I will think about using asp.net server controls...
I can do the same, and the end-user aspx file will have the div classes intact!

Max
Reply With Quote
  #6 (permalink)  
Old October 7th, 2007, 09:15 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quote:
quote:But if have 6 or 7 divs to define 1 box and my home page has 7 identical boxes, it's very difficult to identify what is what from my page(without java help).
If you insist on calling your divs div1, div2 and so on it's difficult indeed... However, I think this:
Code:
<body>
  <div id="Header">Header Stuff Goes here</div>
  <div id="LeftNav">Navigation Here</div>
  <div id="MainContent">Main content comes here</div>
  <div id="Footer">Footer Stuff Goes here</div>
</body>
is as clear as it gets, even if you add a few nested <div>s to the mix.

But I agree, it's probably best to use a server side solution for this. Server side includes, or ASP.NET Master Pages are designed to solved these kind of issues.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Reply With Quote
  #7 (permalink)  
Old October 7th, 2007, 10:06 AM
Friend of Wrox
 
Join Date: Mar 2006
Location: , , Portugal.
Posts: 310
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Imar, I called div1, 2, 3 just for this example... It's a waist of time if i have to think in div names just for this example! On my pages i try to name my divs with a logical reference!
but all this divs (div1... div6) belong to a single box!

You used a clean example of a box! In this way the need of script helper could be one forgotten...

But if you open for example the www.asp.net page, and see that "welcome" have this:

Code:
<div class="columns_container">
                <div class="columns_left">
                <div class="columns_left_padding">

                    <div class="columns_inner_container_3">
                <div class="columns_inner_floats first">

                <div class="heading_container"><div class="heading_right_top"></div>
                <h2>Box Title</h2>
            </div>

        <div class="bucket_container"><div class="bucket_top"><span></span></div><div class="bucket_content propped"><div class="clear"></div><div class="region_minheight">

                    <div class="welcome prop_home_box">
                        content
                        <div class="clear5"></div>
                    </div>

                    </div><div class="clear"></div></div></div>
            </div><div class="columns_inner_floats last2">

                <div class="heading_container"><div class="heading_right_top"></div>
                <h2>In the News<a title="ASP.NET News" class="icon_rss_header" href="./news/rss.ashx"></a></h2>
            </div>
And they have 4 identical boxes!
This is what i call a nightmare to maintain!!
If you want to add a div inside the four boxes you don't know very well what </div> belong to what!

My first question was because this type of css boxes... With many divs!

Cheers,
Max

Reply With Quote
  #8 (permalink)  
Old October 7th, 2007, 10:14 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

You asked for an opinion, and I gave you one. My opinion is that your initial JavaScript code is a nightmare to maintain and develop with.

With proper tools (Master Pages, CSS tools, User Controls and so on) and some proper refactoring of your CSS I think that having the HTML directly in a page or master page is the cleanest and best way to maintain your pages.

However, it's an opinion, and nothing more. Feel free to do whatever you think works best.

And if you think it's a waste of time to come up with a representative example with real world names when asking for an opinion, don't be surprised if you're judged on what you post. I can't see what else you have in your site (or head for that matter) and I can only give my opinion based on what I see.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Reply With Quote
  #9 (permalink)  
Old October 7th, 2007, 11:09 AM
Friend of Wrox
 
Join Date: Mar 2006
Location: , , Portugal.
Posts: 310
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by Imar
However, it's an opinion, and nothing more. Feel free to do whatever you think works best.
I know, but I always lead in good consideration what you write!

Quote:
quote:Originally posted by Imar
And if you think it's a waste of time to come up with a representative example with real world names when asking for an opinion, don't be surprised if you're judged on what you post. I can't see what else you have in your site (or head for that matter) and I can only give my opinion based on what I see.
my question was about javascript to display div tags. Not for ask good names to apply in divs!
Sometimes, and you should know it, if we post our code exactly as it is, the have some difficult to understand!
I preferred post a new basic "questionCode" that users can read and don't fly around with other things...

I only wanted to calm you saying you that I do not nominate mine divs of div1, 2, 3… etc

Thanks,
Max

Reply With Quote
  #10 (permalink)  
Old October 7th, 2007, 11:21 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quote:
quote:my question was about javascript to display div tags. Not for ask good names to apply in divs!
I understand that; don't worry.

However, it's all related to each other. If you choose the JavaScript route because otherwise your HTML is too complicated, it may help to look at simplifying the HTML first. Maybe you don't need all these nested divs, maybe you don't need 10 or more different classes. Maybe if you refactor the HTML and CSS and use contextual CSS selectors, you'll be able to create a clean, understandable code model without the need for the JavaScript work around.

I am not saying this is the case in your example (I don't know what you are trying to design with your HTML) but it's worth looking into if you ask me.

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to access CSS using JavaScript? Gary Frank Javascript How-To 2 February 28th, 2008 01:32 PM
Replace Method in JavaScript kwilliams Javascript How-To 2 April 3rd, 2007 12:50 PM
Javascript to replace auto refresh ? Mantis Java Databases 0 October 22nd, 2005 06:22 AM
from javascript to css jstewie CSS Cascading Style Sheets 3 August 8th, 2005 02:44 PM
from javascript to css jstewie Javascript How-To 0 August 3rd, 2005 07:09 AM



All times are GMT -4. The time now is 04:47 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.