Basically in IE, if a CSS width is defined for a cell (<td> element) as well as having a colspan attribute allowing the cell to span more than one collumn, the cell (eg the border etc.) will occupy the width*colspan but the content will only occupy the width.
View 2 Replies
All i want is the width of a table cell...in pixels...here's one way I've tried to get it that's not working.
$('#mytable').find('thead th').each(function(){
console.log( $(this).width() ); // <== returns 0 ???
})
However, I finally ran into a problem that I can't figure out. When I try and get the width of any cell in a table it's returning a width of 83 or 84. I have the table inside a div that has a width of 757px. I don't have a width set on the table itself, but each cell is set to 100px. I've tried to set the width in a css file and inline neither of which give me the 100px that I'm thinking it should return. I've tried both width(), outerWidth() and innerWidth(). The only one that returns a different number is outerWidth.
View 6 Replies View RelatedI've created a table in HTML but I need to specify the cell width client side. I need to loop through the cells and set the size based on the rendered size of some other elements.
I'm using the following doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is causing me problems in Firefox. The width attribute is being set correctly but the actual table cells aren't being resized. Has anybody seen this before and does anybody have a workaround?
To build a horizontal floating menu that matches the first row (header row) of my dynamically built table (to include text and cell height/width - needs to match exactly). I have accomplished 90% of this task by extracting the text and building the row in my floating menu header and placing the floating menu where it needs to be. However, I'm having a problem aligning the table (<TD></TD>) cells because of my dynamically built table.
Scenario:
I have a table that is built dynamically. Before it is displayed, I format the table row data (code that adds text/deletes rows etc…), which alters the width of all the table cells (via JavaScript). We'll call this (for lack of a better phrase) "pre_floater_table_format_code."
I then loop through the DOM (<TD></TD>) in the first row of the table to get the text and width from each cell (using offsetWidth and/or clientWidth) and assign the text and cell width(s) to variables that I use to build my floating menu with. We'll call this (for lack of a better phrase) "get_cell_text_width_code."
Problem:
The problem is that once the table is built (and before it is altered by the "pre_floater_table_format_code") it seems as though my "get_cell_text_width_code" reads the un-processed table cell width(s) and sets these variables to the un-processed width values. The "pre_floater_table_format_code" runs much earlier than the "get_cell_text_width_code." So why wouldn't the "get_cell_text_width_code" read the cell width(s) after they've been adjusted by the "pre_floater_table_format_code?" Does this make sense? Anyone have any recommendations? Alternative solutions?
Using Jquery 1.4.4
I m currently trying to capture table cell width using jquery function width(), i m currently getting 1px width more in certain cells.
how to calculate exact width, also i believe the calulation goes wrong if i have borders.
(I believe drupal might be doing similar thing in admin panel)
(If somebody has query why i want table cell width: When a table is long and has scroll to add floating header like in drupal admin panel, by getting width of actual table cells i adjust floating header cells width using jquery)
In IE (tested 7 and 8), $('td[colspan]') seems to match every single td. In Firefox and Safari, though, it (correctly) returns only those which do have a colspan attribute. Here is a simple test:
[Code]...
i have the following code which creates tr and td elements then adds them to a table. combArray is a global array and there are no problems inserting all the values. the only problem is assigning a colspan = 7 has no effect; everything is still squished into 1 row. The entire function runs and is not crashing. i even try and assign colspan twice, once on line 11 and again after the row has been appended at the end of the function on line 40. why isnt colspan working?
[Code]...
I have the following code which creates tr and td elements then adds them to a table. combArray is a global array and there are no problems inserting all the values. The only problem is assigning a colspan = 7 has no effect; everything is still squished into 1 row. The entire function runs and is not crashing. I even try and assign colspan twice, once on line 11 and again after the row has been appended at the end of the function on line 40. Why isn't colspan working?
Code:
<script type="text/javascript">
function fillVariables( idDigit ) {
var tbody = document.getElementById("zrow" + idDigit + "tbody");
var newNodeText = "";
var varCount = 1;
var fixedCount = 1; .....
I tried to dynamic add a row to table(tbody) it works in IE and Firefox with the following codes. But when I try to set the "colspan" attribute to the TD, it only take efffect in Firefox but not in IE.
Code:
var contentsTable = $("searchResults");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("colspan", "3");
[Code]....
I have this layout
And then I have this code to determine the cell height.
So basically I need both my first and last cells to be able to have the mainbody cells height, but that code only works when placed in or after the cell being measured, in this case "mainbody", my question is this, is their a way to get the size of the mainbody cell before its done loading somehow?
I have a javascript program that uses a HTML table as an Excel-like grid. The user can use arrow keys to navigation the grid. When the user selects a cell and then hits <Enter> key, the program turns the cell from read-only to editable (an input box), and select all the text in the input box. When the user hits <Esc>, the program cancels the changes that the user has made and turns the cell back to read-only. So far so good. The problem is that as soon as the user hits <Esc> key and turns the cell back to read-only, I find that I cannot move the input focus back to the cell any more. Actually I cannot move the input focus back to _any_ cell in the table. When this happens, the user cannot use arrow keys to navigate the grid any more (like the grid has lost the input focus). The user needs to use the mouse to click at a cell in the table to get things working again.
The user can get around with this problem by un-selecting the text from the input-box before hitting <Esc>. But this is not something that I expect the user to remember to do. I need a way to fix this problem. I tried the logical thing and programmatically un-select the text before turning the cell back to read-only. But this actually made thing worse - this causes the workaround to stop working.
The only browsers that I have tested this program is IE6 and IE8. I have not tested this in any other browser.
Attached is a simplified version of the program that can show this problem in action. This simplified program first adds an empty table on the web page, and then creates an instance of the CEstGrid class that takes care of the grid. CEstGrid will add two rows of test data into the table with two columns in each row. The user should use a mouse to click at one of the cell, and the cell should be highlighted. The user uses arrow keys to navigate the table. When he reaches the end of the table, he will wrap around to the other side of the table. Let say the user reaches the cell in row-1 column-2, he hits <Enter> to change the cell to editable. He will find the text in that cell to be highlighted. When he hits <Esc> at this moment, he will find that he cannot use the arrow keys to navigate the table any more, and this is the problem. Please rename the test program from .TXT to .HTML to test it.
imagine table with 15 rows and 3 columns. If I move mouse over any cell I want some other specific cells to change their borders like with pseudo-class :
example
<style>
.boryellow {border: 3px solid yellow}
.borblue {border: 3px solid black}
</style>
this will work, a cell can change itself
<td name="third" class="boryellow" onmouseover="this.className='borblue'" onmouseout="this.className='boryellow'">cell</td>
even when dealing with empty images - click on link will change border of different element - imgs, but not span or td ...
<a href="#" onclick="document.all.xxx.className='borblue'; document.all['name'].className='borblue';
[code].....
Replacing any element link by "third" or "spanx" will cause stuck ant not executing other actions.
let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. [URL]... I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works.
View 6 Replies View Related<script language="JavaScript">
function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}}
</script>
what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working.
Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.
View 1 Replies View RelatedI currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies View RelatedI've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{
[Code].....
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
I am trying to setup a javascript function that sets a div's width based on the combined width of the li's with the name "navItem". The problems I have been running into when trying to define the width of the li's is that they do not have a width defined in css. Can anyone help me out with this? The javascript function setWindow is suppose to show the div loginWindow and set the width of it.
Code:
<div id="topNav">
<ul>
<li><img src="<?php print $site->folder['images']['header']; ?>topmenu_left.jpg" border="0" alt="" /></li>
<li name="navItem"><a href="<? print $site->url['about']; ?>">About Us</a></li>
<li name="navItem"><a onmouseover="setWindow('loginWindow');" href="<? print $site->url['billing']; ?>">Client Services</a></li>
[Code]...
Is the next jQuery code the best way to decrease an elements width?[code]I tried using the next code:[code]but that's not working, also not with '-20'.Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
View 3 Replies View RelatedI need a code that when a button or image is clicked then a div's width and height are changed.
Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work.
I need a code that when a button is clicked then the div's and the flash's width and height are changed.
please have a look at the temp website latinunit net / temp / , you will understand where im coming from.
on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down.
My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file.
I have a table with two rows and 4 columns, the first cell has rowspan of 2. How do I insert something into the first cell only? How can I get the cell index of the first cell?
View 4 Replies View RelatedI got a table, first tr got 10 td, how to get the sum of the first three td's width
All I know is like:
Is there any solution via jQuery?
I want to set the width of a div to be the same width of the image inside the div.The following code works great. But...The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier?
jQuery:
$(document).ready(function(){
var newWidth = $('div.wrapper img').attr('width');
$('div.wrapper').width(newWidth);
});
HTML:
<div class="wrapper">
<p><img src="image1.jpg" width="200" /><br />
Caption</p>
</div>
[code].....
I have a simple HTML table that I want to use as a progress bar - by
changing the width of the two TD elements with javascript, you show
progress. The problem is that when I change the width to 100 and 0
resp., you still see a sliver of white for the right cell... any way
to do this, it's drivin me nuts! I tried also changing the back color
of the right cell to blue when it hits 100, but it only works in
Mozilla/Firefox, not IE....
I've got this code that creates a new new row and cell. I then put some
text into the cell with innerHTML - works beautifully with Firefox but
fails with IE. I guess IE doesn't support this way of doing it, but is
there another way of doing it with DOM?
newr = document.createElement('tr');
stbl.appendChild(newr);
newc = document.createElement('td');
newr.appendChild(newc);
newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";
(works in firefox but fails in IE 6+ too...)
