CSS Display Style

9,735 Expert Mod 8TB

Since you're hiding and showing table rows your display CSS should probably be "table-row".

See the valid values you that you can set the display property to on w3c: CSS Display.

**Edit**

This thread has been split off of a PHP thread.
The original thread can be found here:
http://bytes.com/topic/php/answers/8...cript-question

-Frinny

Dec 2 '09 #1

Subscribe Post Reply

2890

Samishii23

246

100+

Nope it doesn't matter if you have <?php ?> Tags inside the <body> tags. You can have as many <?php ?> tags are you want, where ever you want. On the user's end they'll never see any of them unless theres a problem on the server.

Ok I'm going to break down your original post, and give you some hints about how to code this stuff. I've seen a few errors you need to know about if the code from post #1 is exactly your code.

Problem 1:

Expand|Select|Wrap|Line Numbers

 <?php

<script type="text/javascript">

Do not have the ANY HTML tags enclosed within the <?php ?> tags. They will never run and will cause PHP errors.

Problem 2:

Expand|Select|Wrap|Line Numbers

$sql = mysql_query("select * from table where Name like '%$term%'");

In my experience, its good practice, and sometimes nessecary to encase the names of the SQL tables, and rows within ' ' and ` ` like so...

Expand|Select|Wrap|Line Numbers

 $sql = mysql_query("SELECT * FROM `table` WHERE `Name` LIKE '%".$term."%'");
 

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

Suggestion 1:
Personally I always have all the Javascript <script> tags within the <head> tags at the top to declare functions. While it shouldn't be a problem to put them anywhere, its good practice, and makes the code more readable.

Suggestion 2:

Expand|Select|Wrap|Line Numbers

 echo "<table border='1'>

<tr id="table">

Since you want to Show and Hide the table, it would be a better idea to litterally hide the whole table but puting the ID in the <table> tag, and hiding that. Generally tables have alot of <tr> tags so you might end up hiding part of the table, and it might look weird after hiding.

Suggestion 3:

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

function displayRow(){

var row = document.getElementById("table");

if (row.style.display == '') row.style.display = 'none';

else row.style.display = '';

}

</script>

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off. So, I would personally have the code like this:

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

function displayRow() {

var dRow = document.getElementById("table").style;

if ( dRow.display == "block" ) { dRow.display == "none"; }

else { dRow.display == "block"; } </script>

Now. I noticed that you have multiple rows. I can suggestion some other code if you would like to hide each row. Good Luck.

Dec 3 '09 #2

Dormilich

8,658

Expert Mod 8TB

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off.

"block" is not the correct choice for tables, use "table" (as Frinny posted earlier)

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

LIKE is a valid SQL operator, nothing wrong there.

Dec 3 '09 #3

Samishii23

246

100+

"block" is not the correct choice for tables, use "table" (as Frinny posted earlier)

Tested on Windows XP, with Fire Fox (Up to Date), Chrome, and IE 6. All work fine. Although in FF, when the Table was shown again, the table width extended to "100%" of the screen. So might want to use a width deceleration.

Expand|Select|Wrap|Line Numbers

 function dRow() {

    var ele = document.getElementById("Table").style;

    if ( ele.display == "none" ) { ele.display = "block"; }

    else { ele.display = "none"; }

    }

Since Block is a general CSS term I would use it personally, rather then worry about using one term for the Table element, and another one for another element. It works on 3 browsers.

Dec 3 '09 #4

Dormilich

8,658

Expert Mod 8TB

Although in FF, when the Table was shown again, the table width extended to "100%" of the screen.

well, that’s what block elements usually do.

Since Block is a general CSS term I would use it personally

what makes "block" a general and "table" a special term? the frequency you use it would defy any logic.

Dec 3 '09 #5

Samishii23

246

100+

what makes "block" a general and "table" a special term? the frequency you use it would defy any logic.

Until this thread, I hadn't even heard of display having another 'option' in it. I've been using Block and None for years now. As for Block being a general term. You can use Block on all HTML elements that allow for a Style attribute. The most popular are DIV, SPAN, and of course TABLE and its inner tags.

Dec 3 '09 #6

Dormilich

8,658

Expert Mod 8TB

Until this thread, I hadn't even heard of display having another 'option' in it.

every page discussing the display property should have listed the allowed values.

you should have observed that a table and a block element are different (like the mentioned stretching ("bock" uses full width*, "table" uses minimum width* (similar to "inline-block")), "block" does not have vertical align, etc.)

* - by default

Dec 3 '09 #7

Frinavale

9,735

Expert Mod 8TB

Tested on Windows XP, with Fire Fox (Up to Date), Chrome, and IE 6. All work fine. Although in FF, when the Table was shown again, the table width extended to "100%" of the screen. So might want to use a width deceleration.

Expand|Select|Wrap|Line Numbers

function dRow() {

    var ele = document.getElementById("Table").style;

    if ( ele.display == "none" ) { ele.display = "block"; }

    else { ele.display = "none"; }

    }

Since Block is a general CSS term I would use it personally, rather then worry about using one term for the Table element, and another one for another element. It works on 3 browsers.

Samishii23, you should not be using a CSS display style of "block" for a table...likewise you should not be using a display style of "block" for a table-row.

Why?
Tables are not Blocks of data. They are Tables of data.

Here's what w3c has to say on the block dispaly style:

block:The element will generate a block box (a line break before and after the element)

Here's what w3c has to say on the table display style:

table: The element will behave like a table (like <table>, with a line break before and after)

And here's what w3c has to say about a table-row display style:

table-row: The element will behave like a table row

Now, a "table" display style and a "block" display style sounds like the same thing.

I mean, both are displayed with a line break before and after the element....but the big difference is that a table style treats the element like a table and the block style does not.

You can really mess things up using CSS. Sometimes it's very helpful to be able to turn a table into a block...but only if you know what you're doing and only if you have to do this.

Take a look at what happens to the table if you set the table element, the row elements, and the table data elements to have display styles of block:

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

</head>

<body>
 
<table id="tableID" border='1' style="display:block">

  <tr id="row1" style="display:block">

    <td style="display:block">first row, first column</td>

    <td style="display:block">first row, second column</td>

  </tr>

  <tr id="row2" style="display:block">

    <td style="display:block">second row, first column</td>

    <td style="display:block">second row, second column</td>

  </tr>

</table>
 
</body>

</html>

Messed up eh?
Now put it back to normal:

Expand|Select|Wrap|Line Numbers

 <html>

<head>

</head>

<body>
 
<table id="tableID" border='1'>

  <tr id="row1">

    <td>first row, first column</td>

    <td>first row, second column</td>

  </tr>

  <tr id="row2">

    <td>second row, first column</td>

    <td>second row, second column</td>

  </tr>

</table>
 
</body>

</html>

Looks like a normal table again.

You can do the same weird thing with blocks (divs)...you can force them to behave like a table.

This is how they would normally behave:

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

</head>

<body>
 
<div id="tableID" style="border:solid 1px black;">

  <div id="row1" style="border:solid 1px black; margin:1px;">

    <div style="border:solid 1px black;margin:1px;">first row, first column</div>

    <div style="border:solid 1px black;margin:1px;">first row, second column</div>

  </div>

  <div id="row2" style="border:solid 1px black; margin:1px; margin-top:0px;">

    <div style="border:solid 1px black;margin:1px;">second row, first column</div>

    <div style="border:solid 1px black;margin:1px;">second row, second column</div>

  </div>

</div>
 
</body>

</html>

Now let's force the divs (blocks) to behave like a table:

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

</head>

<body>
 
<div id="tableID" style="display:table; border:solid 1px black;">

  <div id="row1" style="display:table-row;border:solid 1px black; margin:1px;">

    <div style="display:table-cell;border:solid 1px black;margin:1px;">first row, first column</div>

    <div style="display:table-cell;border:solid 1px black;margin:1px;">first row, second column</div>

  </div>

  <div id="row2" style="display:table-row; border:solid 1px black; margin:1px; margin-top:0px;">

    <div style="display:table-cell;border:solid 1px black;margin:1px;">second row, first column</div>

    <div style="display:table-cell;border:solid 1px black;margin:1px;">second row, second column</div>

  </div>

</div>
 
</body>

</html>

Cool huh?

CSS is very powerful.

It is very important to use the appropriate styles for the appropriate purpose. This will save you many CSS bugs/headaches that may appear in the future.

You should always try to use the correct style for the correct application or
else you could end up with some very unexpected results.

-Frinny

Dec 3 '09 #8

Frinavale

9,735

Expert Mod 8TB

Since the discussion about the CSS display style was hijacking the original thread I have moved any posts regarding the CSS display style into a new thread in the HTML forum.

This will make it easier for the poster of the original thread to get help with their problem because they won't have to read through an unrelated topic regarding the CSS display style.

The original thread can be found here:
http://bytes.com/topic/php/answers/8...cript-question

Cheers!

-Frinny

Dec 3 '09 #9

by: Dan R Brown | last post by:

I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...

Javascript

Can only use one In-Line display/hide construct. Object err if > 1. Help please?

by: FrankBooth | last post by:

Hello, I have a list of names, and when I click ona name I want the extar info to show and then I want to clcik and hide it again. I have the following HTML which works perfectly if I use one...

HTML / CSS

JavaScript - HIDE/DISPLAY text boxes

by: dmiller23462 | last post by:

Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...

Javascript

Display problem in Firefox

by: shreddie | last post by:

Could anyone assist with the following problem? I'm using JavaScript to hide/show table rows depending on the option selected in radio buttons. The script works fine in IE but in Firefox the...

Javascript

Mobile IE changing display properties in CSS

by: Stefan Finzel | last post by:

Hi, is there a way to change the display property on Windows Mobile 2003 SE Mobile/Pocket Internet Explorer? See following example. Please note: visibilty property has the same problem. Is...

Javascript

cross browser display block none

by: ruby_bestcoder | last post by:

Hi Im having problem in firefox with display:none/block. I have essentially 3 li elements. In each element there are a few nested div:s. Clicking on one of the divs, makes another div to...

Javascript

Display a block of text in Firefox & Safari

by: drew197 | last post by:

I am a newbie. I am editing someone elses code to make it compatible with Firefox and Safari. In IE, when you click on the proper link, a block of text is shown in a nice paragraph form. But, in...

Javascript

Firefox browser style.display issue (IE works fine)

by: RonY | last post by:

I have a dropdown which calls SetTimePeriod method on change the selection. In the JS function, I reset the field style.display based on what the selection is. This works fine with IE but not working...

Javascript

Firefox inserts spaces when changing display

by: rbinington | last post by:

Hi, I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I...

Javascript

problem display:none/block divs via JavaScript

by: cssExp | last post by:

hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...

Javascript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Similar topics