I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be
compatible with that plug-in.
I have a table as shown:
Day010203040506070809101112131415161718192021222324252627282930DutyYYYYYYYYYYYYYYYYYYYYYYYNNNNNNN
When a particular 'Y' is clicked I need the header value. I can detect the click but I am not sure how to get the header (the day value). It appears that the click event is passing the 'Y'. Does the click event pass other information that can be used to get the header value?
why doesn't work the "jQuery Fixed Table Header" PlugIn on a iPad? [code]
View 2 Replies View Relatedhere is the script as it sits: I need it to add a row following the first row (header) in the table...am thinking I need to use insertBefore but not sure how.
function addTeaGrade(s){
var tableElem, trElem, tdElem, textElem
//get a handle for the table[code].....
Scrollable table widget with fixed header is there such thing ?
View 2 Replies View Relatedi am using two tables. one for the header, one for the body content. has anyone done table sorting in this situation?
View 6 Replies View RelatedI've just come across this example at cross-browser.com. Does anyone know if it is possible to lock more than 1 column?
View 12 Replies View RelatedI am looking for a way to highlight the row and column header cells as the cursor moves over a cell within the HTML table. This is the code I'm using, but I'm not sure how to identify the TH node of a current (highlighted) cell.
Code:
var table = document.getElementByID("tableId");
var row = table.parentNode();
var col = table.childNodes();
I am wondering if "this" would help in that regard, as in
[Code]...
I'm trying to create a table that has a fixed header but the table contents can be scrolled and also sorted by column headings.I'm already using sortable.js (http://www.surfmind.com/musings/2003/12/01/) library to sort the columns.I can find examples where I can scroll the table with fixed headers, but most of these use a dual table approach, with sortable.js, I think only one table is required. I've found examples how to scroll within a table element using autoflow and scrolling using CSS that I can't follow (I'm new to all of this).How can I get the contents to flow with a single table? Forgive me if it's too easy. If you can help me with a solution, you can ridicule me 'til the cows come home...I'm ok with that. Here is the basic table I have layed out.
<table id="viewKeysetTable" class="sortable">
<tbody>
<tr>
[code]....
I am looking for a javascript way to make a table header visible as the user scrolls down my web page. The table header is produced by php from a mysql db. The table is populated by results based on the user filter inputs.
see: [URL]
The table cells can be any width depending on the search results. I think a copy of the table header needs to be made and this would then float at the top of the page staying at the top no matter how far the user scrolls down, so that it's position would depend on the scroll bar position.
i have 1 div with scrollbars and another div with a table inside. when user scroll horizontal bar in div1 i want application to scroll the table header from the same amount of pixels and in the same direction. i did not find anything under jQuery about that.. :-(
1. how can i detect in which direction the scroll is done (to the right, or to the left) ?
2. how can i determine how many pixels this scrolling is about ?
3. how to scroll the table header (table tag or th tag) from the same amount of point ?
i found just scrollLeft for now and i'm not successful to use it
I am working on a website that uses a random header. I have been trying to figure out how to adjust the code so that the header also serves as a clickable link.
Here is the code that I have:
What do I need to add in order for the header to also serve as a link? I am completely new to JavaScript and I don't understand it very well.
I need to keep a log in a test application, so I'm using a textarea for that, and I'm appending text using the+= operator.Follows the trace function which fills the textarea:
window.trace = function(s) {
if ($('#enableLogCheckBox').attr("checked")) {
var logArea = $('#logArea')[0];
[code]....
I have around 30 check boxes in a form and I need to keep track of their status if they are checked or not and based on that change the data in the dom.
I am stuck on the logic of how to implement or code for 30 check boxes. I was using the below example code but there will be a lot of if statements as I need to always know what their status is. Is there a better way I can manage so many check boxes ?
if($(this).is(":checked"))
Can I remove div1 but div2 keep there?
<div id="1">
<div id="2"></div>
</div>
I have several conditional select boxes that populate from a database, using .ajax(). When the first select has an onchange, the second select populates normally. The same goes for the second and third selects. When I change the value of the second select box, the third box drops all dynamically created options and repopulates. When I change the value of the first select box, I can only empty the second box and repopulate. The third and future boxes keep their values.
The delete and repopulate piece of my function uses this bit of code: var dynamic_options = $("#" + next_dropdown_ID).children(".dynamic_option"); if ( dynamic_options ){ $("#"+ next_dropdown_ID + " .dynamic_option").remove()};
where next_dropdown_ID is the ID of the child select box. I've played with .find() and .filter() but the results are always either (a) ALL options with this class are removed, including the select I'm currently in, or (b)NO options with this class are removed.
Is it possible to delete ALL options on the page that have the ".dynamic_option" class, except for the children of the select box I'm currently in? I was hoping to be somewhat dynamic about it and not have to write an IF statement for every potential select box, so the code will be reusable. I can post the full function and HTML if more context is needed.
I'm working on a mysql browser / edit-in-place app which presents the user with a floating UI (think lightbox), that contains widgets appropriate for the given field they've clicked on.
Presently, rather than centering the UI element like a lightbox however, I find it best to keep it relative to their mouse, so that they don't have to traverse halfway across the screen with their mouse to interact with the interface if they've clicked something (for instance) on the bottom left.
The problem however should be apparent: if they click something towards the bottom of the screen, we need to adjust the css top/left properties so that the UI remains within the viewable area and doesn't run beyond the viewport, if possible. I've seen this done tons of times with tooltips.
I've thrown some basic awareness together using$(window).height() / width(), but if anyone could point me to a maturealgorithmfor harvesting the appropriate offset.
I am currently using:
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
[Code]....
There are 2 options I could use but I don't know how to do it.
1. Using a get parameter to select the tab
2. Using the cookie plugin (not sure how that works)
I have a site that I'm building at [URL] which use the jquery cycle plugin for a slideshow. I won't post the code here because it's all there with view source at the above address. It's a work in progress. The slideshow is full width (the images in it are actually 2000px wide but looks full width), and works fine apart from when the browser window is resized. This is most noticable when you start with a smaller browser window and then resize it to be bigger.
The slides stay the same width as when the page loaded - I need them to adapt to the new width. I need the slideshow to be centered at all widths, so I've put the images in as backgrounds to divs with center positioning on them. I've tried getting the window width on resize and then applying it to the slides using jQuery, but the original calculated size overrides it when the slide changes.
i have created an option on a website to give the possibity to the user to change the font size (smaller, bigger, reset), like the famous x3 'A' that we see in most of the websites. the code i have is based on a plugin copywrite to [URL]. now i'm facing a problem with different font size for different elements. to make the text bigger and smaller works like a charm but to reset the font size is not working so good. here is the code of the plug in the reset part:
//on clicking default font size button, font size is reset
jQuery(container + " .defaultFont").click(function(){
jQuery("#content *").css('font-size', defSize);
// coockie to rememebr the selected font size
updatefontCookie(target, defSize);
});
here is how i'm calling the function: fontSize("#container", "#content *", 8, 12, 20); container is where i have the images to make the text smaller or bigger content is the div that has the content that i want it to be changed 8 is the smallest fonr size 12 default 20 max now the thing is that i have different font sizes in the page and some of them don't have a class just the <font> ....</font> when i'm clicking the rest button then i'm getting everything with size 12 and this is what i want to change. i want to remember the current font size and set it back.
I'm having a really hard time trying to solve a problem. I have a container DIV aligned center that holds an image. The container is max 940 X 609. The image is set to be 100% width and height.
The objective is to have the container shrink as the user resizes the browser up until a minimum size - say, 400 X 259. I also need the container to stay centered with consistent margins on the right and left.
I'm currently redesigning a forms in which one ore more objects (eg members) can be added to a selection. JQuery is a huge help with that, but now I don't know *how* to achieve the following:
Currently I add the selected members to an selection-list with option value = memberID and option label = memberName. I want to change that to the following:
AAutocomplete search inputto find a member. On select I want the memberName to be added to a span (or something) as text with an X-to delete (just like tagify does for instance). I could use tagify, but I don't know how to keep the memberID field coupled with the selected tags (and especially how to get the memberID removed when removing a value).
And for bonus points: I'd like to make the selected values draggable so I can change the order (and of course: on submittal my form must know the order too).
I use the jQueryUi widget for my website and I want put a form or function header (to redirect) from the dialog..
My content code in the dialog is :
<form action="page.php" method="post">
<select name="name1">
[...]
</select>
[Code].....
And when I click on the input button, it reacts as a <input type="button" />
I'm designing a one page portfolio site. I was able to make this work when I redid it last year but I'm having problems again. I have a fixed header with the content scrolling underneath it. I want the user to be able to click a link and it eases to that point. I got this script from web designers wall. I am such a novice with jquery I don't know where to begin to make this work. I'm not sure how to call from the link in the header to the element on the page. The thing is, inside the contain div underneath the header I have split it into two columns and i've had to rename the divs, I don't know if this is what is causing the problem. For example, in the navigation it is called "work" but I need to call it to I'm guessing "content-work"?? Also would the fact that the jquery loading in the page from google is 1.7.0 while the script is only written in 1.4.2...does that matter?? If I need to post my css I will.
[Code]...
i have two table header rows, one with Captions and one with controls, dropdown, checkbox etc like this:
[Code]...
I'm new to using forums to help solve my coding problems, but here it goes. Basically, I have a JavaScript header ad that appears automatically on page load. There is a button on the ad that allows the user to close the ad, which disappears when clicked. The code looks like this:
[Code]...
What I need to do is have an option for the user to make that ad reappear by clicking a button. I'm sure this is done using an onClick event, but I don't know what the code should look like.