Frinavale  9,735
Recognized Expert Moderator Expert
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
8 2907  
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: - <?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: - $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... - $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: - 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: - <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: - <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.
Dormilich 8,658
Recognized Expert Moderator Expert
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.
"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. - 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.
Dormilich 8,658
Recognized Expert Moderator Expert
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.
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.
Dormilich 8,658
Recognized Expert Moderator Expert
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
 Frinavale 9,735
Recognized Expert Moderator Expert
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.
-
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...likewis e 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: -
<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: - <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: -
<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: -
<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
Frinavale 9,735
Recognized Expert Moderator Expert
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
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 style="display:none"> can be displayed by setting the style attribute
to "display:", or hidden with "display:none". This gives the illusion that the person
filling out the form is switching from page to page...without the overhead of extra
hits on the server,...
|
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
construct, but if I use more that one it issues an object error which
states that: ExpCollTxt_ctrl_ex.style is not an object.
So the followin piece works fine:
|
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
in this code from a couple different sites but I'm not 100% sure what
each line is doing...This is the ASP code that I'm using for the
page....Take a look at the JavaScript code and please let me know what
each line is doing....I have been...
|
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 hidden rows take up page space even though their content is not
visible.
I have extracted the necessary code as shown below:
************************************************************************
|
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 there any other way to display/undisplay parts of web pages?
TIA
| | |
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
display: block or none.
Again this works in IE. In ff it has a bug. When the display is none
for a div in the first li, then the next li (the one underneath) moves
up to the right, looking very ugly. Is there someone who has had the
|
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 FireFox and Safari it appears as a narrow
column of text with only 2-3 words per line.
Here is the code:
function showAll()
|
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 with Firefox browser.
The firefox browser has problem to display a field after its style.display is reset. At the end of the JS function, I printed out the fields style.display value. They are set correctly. How to resovle this?
My JS is :
...
|
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 want only one instance of the FCKEditor on the screen at one time so I make tabs that the user can click and I store the values in variables behind the scenes. I change the CSS class on the link that is the currently selected one.
I have a really...
|
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, of course).
<!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-Language" content="en-us" />
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
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 then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
