|
JavaScript - Freeze Row Header And First Column
Hi all!
I am trying to implement the "Freeze pane" feature in javascript as it is in excel. I am almost there but am not able to get one last thing. The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen. Prompt help is highly appreciated! Please find the html file and the js file being used. Thanks a bunch! Ree Similar Tutorialshave a div & a grid i want the div to be displayed on the column header click & be positioned with the specific column suppose 3rd grid header column is clicked the div shld be positioned near 3 column Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code:
<SCRIPT LANGUAGE="JavaScript">
var Tborder = .05
var howmanyIMG = 15
var winHeight = Math.floor(window.innerHeight);
var winWidth = Math.floor(window.innerWidth);
var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3);
var BoxWidth = BoxHeight;
var howmanyx = Math.floor(winWidth / BoxWidth) + 1;
var howmanyy = 3;
var HowMany = howmanyx * howmanyy;
var used = new Array(howmanyIMG);
var CMYG = ["00AEEF","EC008C","FFF200","41AD49"]
function RNDy(numby){
return Math.floor(Math.random()*numby);
}
function getUniq(){
/* alert("run getuniq");*/
var n;
while ( used[ n = RNDy(howmanyIMG) ] ){}
used[ n ] = true;
return n;
}
function ColorRND() {
if (RNDy(4) ==1) {
return true;
}else{
return false;
}
}
function PlacePop (HMx,HMy){
var counter = 0;
var countc = 0;
for(x=0;x<=HMx;x++){
var countr = 0;
for(y=0;y<HMy;y++){
var divy = document.createElement("div");
var divyID = 'box' + counter;
divy.setAttribute('id', divyID)
divy.style.position="absolute";
divy.style.zIndex = counter + 3;
divy.style.visibility = 'visible';
divy.style.borderWidth = '1';
divy.style.borderColor = '#000000';
divy.style.pixelLeft= x * BoxWidth + (2 * countc);
divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr);
divy.style.pixelWidth= BoxWidth;
divy.style.pixelHeight= BoxHeight;
if (ColorRND()){
/*divy.innerHTML = 'color';*/
divy.style.backgroundColor = "#" + CMYG[RNDy(4)];
}else{
/*divy.innerHTML = 'image';*/
divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)";
divy.style.backgroundPosition = "center";
/*RNDy(100) + "% " + RNDy(100) + "%";*/
}
document.body.appendChild(divy);
counter++;
countr++;
}countc++;
}
/*
alert("ran" + counter + " times");*/
}
/* used = null;*/
</script>
THANKS FOR ANY HELP YOU CAN GIVE! Hi I'm really new to this and don't really know if I'm in the right place as for posting. I'm trying to figure out if there is a way to have like a news column on each html page that can be updated by making changes to one file. Kinda like a embedded window that gives a sample of some of the text on the highlights page and then has a click to read more. I was thinking a javascript app would be best but I new at this and don't really understand everything. If someone has an idea or can help it'd be appreciated
Hi, I'm trying to change the column from javascript using. cell.width='7'; or cell.style.width="7px"; when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to. Please let me know. Thank you for your help with this. I am newer to JS and appreciate the assistance. I am using iScroll for an image gallery on the iPad. I can place 120 columns equalling 122,880 pixels in width. After that the content fails to display. How can I get additional 180 columns that I have to display? Hello all ~ It's been a long time since I've been on here, but I am trying to insert a header into my pages at http://www.dreamsonthefly.com the header being "Guided Fly Fishing on the Owyhee & Grande Ronde Rivers". I am not finding any .css on the page so I am hoping I can place in where it sits now but using the JS below and getting more space so the drop down menus don't interfere with the h1. I use Homestead and found when I was working with the JS Homestead put's their own code in as needed for their site. I am not well versed in all of this but I do understand what I need just not certain how to do it. I sure hope this all makes sense and appreciate the help. Code:
<div align="center">
<img src="headerforflybooklarger.jpg" alt="Fly fishing for Steelhead, Brown Trout & Smallmouth Bass" width="1020" height="126" hspace="0"/>
</div>
<div align="center">
<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu3374",430,"","blank.gif",0,"","",1,2,2,2,1000,1,1,1,"","100%",83886335],this);
stm_bp("p0",[0,4,0,0,15,3,0,7,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,100,0,0,"#000000","transparent","",0,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"http://www.dreamsonthefly.com/index.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000"," bold 12pt Garamond"," bold 12pt Garamond",0,0],10,0);
stm_aix("p0i1","p0i0",[0,"The Fish","","",-1,-1,0,"http://www.dreamsonthefly.com/thefish.html"],10,0);
stm_aix("p0i2","p0i0",[0,"Destinations","","",-1,-1,0,"http://www.dreamsonthefly.com/destinations.html","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7],10,0);
stm_bp("p1",[1,4,0,-1,4,3,0,0,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,69,2,8,"#A87F09","",0,1,1,"#000000"]);
stm_aix("p1i0","p0i0",[0,"Owyhee Trout","","",-1,-1,0,"http://www.dreamsonthefly.com/owyhee.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i0","p0i0",[0,"Grande Ronde","","",-1,-1,0,"http://www.dreamsonthefly.com/granderonde.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i1","p1i0",[0,"Owyhee Bass","","",-1,-1,0,"http://www.dreamsonthefly.com/ofloat.html"],10,0);
stm_ep();
stm_aix("p0i3","p0i2",[0,"Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/Newguides.html"],10,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Dave Tucker","","",-1,-1,0,"http://www.dreamsonthefly.com/dtguide.html"],10,0);
stm_aix("p2i1","p1i0",[0,"Rhonda Price","","",-1,-1,0,"http://www.dreamsonthefly.com/rkpguide.html"],10,0);
stm_aix("p2i2","p1i0",[0,"Our Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/guidesbios.html"],10,0);
stm_ep();
stm_aix("p0i4","p0i0",[0,"Rates","","",-1,-1,0,"http://www.dreamsonthefly.com/newlodging.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_aix("p0i5","p0i2",[0,"Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/allflyinfo.html"],10,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[0,"Steelhead Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/steelheadflies.html"],10,0);
stm_aix("p3i1","p1i0",[0,"Trout Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/troutflies.html"],10,0);
stm_aix("p3i2","p1i0",[0,"Atlantic Salmon Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/atlanticsalmonflies.html"],10,0);
stm_ep();
stm_aix("p0i6","p0i4",[0,"Photos","","",-1,-1,0,"http://www.dreamsonthefly.com/photogallery.html"],10,0);
stm_aix("p0i7","p0i2",[0,"Contact Us","","",-1,-1,0,"http://www.dreamsonthefly.com/Contact.html"],10,0);
stm_bpx("p4","p1",[]);
stm_aix("p4i0","p1i0",[0,"Airline Reservations","","",-1,-1,0,"http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly"],10,0);
stm_ep();
stm_aix("p0i8","p0i2",[0,"Links","","",-1,-1,0,"http://www.dreamsonthefly.com/links.html"],10,0);
stm_bpx("p5","p1",[]);
stm_aix("p5i0","p1i0",[0,"Education","","",-1,-1,0,"http://www.dreamsonthefly.com/education.html"],10,0);
stm_aix("p5i1","p1i0",[0,"Resources","","",-1,-1,0,"http://www.dreamsonthefly.com/resources.html"],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Blog","","",-1,-1,0,"http://www.dreamsonthefly.com/blog.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Book Trip ","","",-1,-1,0,"http://www.theflybook.com/Default.aspx?shop=108e506d-f6f6-4356-8e19-1e682ece3bf1","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
;
;
stm_ep();
stm_ep();
stm_em();
//-->
</script>
</div>
I HAVE CHANGED THE LOCATION
using a javascript function to determine if a string is all digits or not and return result based off the decision. if it is all digits, mask all digits except the first two, if not all digits just return the string. these are the snippets however i am not seeing anything returned in the column Code: <script >
var start = function RenderRC(CodeOwner) {
var Rcode = CodeOwner.toString();
var pattern = new RegExp("^\d{2,}$ ");
if (Rcode.match(pattern)) {
if (Rcode.length > 2)
{
var newcode = Rcode.substr(0, 2) + Array(Rcode.length - 2 + 1).join("*");
return newcode;
}
}
else
{
return Rcode;
}
};
</script>
<ext:RecordField Name="CodeOwner" />
<ext:Column Header="<%$ Resources:Text, CodeOwner %>"DataIndex="CodeOwner" Width="110" >
<Renderer Fn ="start" />
</ext:Column>
Hello, I need your help. I'd like to be able to populate a combo box (drop down box) from a column in my mdb database: Ex. of whats in mdb database Name -------------- Joey Jacob Smith Jerrod Patrick What should appear in drop down: [ ==== COMBO BOX ==== ] Joey Jacob Smith Jerrod Patrick I cant seem to find any help on the web for this? Thanks for all your help in advance. Hi I read a lot of data from excel sheets into JS arrays. I have a situation where i have name, hours, product id and other few entries. I have all these details as array in array concept. eg. array.push(new Array(name,hours,pid,price,place)) Redundant entries that include same names,pid, places will be found in the array. My prob is to sum up all the hours of the records that belong to same name and product id and store the unique records in one array and ofcourse the hours column sumed up. name pid hours place ---------------------- aaaa 11 100 chennai aaaa 11 200 chennai cccc 22 30 coimbatore dddd 33 45 chennai dddd 22 100 chennai dddd 33 200 chennai my output should be name pid hours place --------------------- aaaa 11 300 chennai cccc 22 30 coimbatore dddd 33 245 chennai dddd 22 100 chennai can anyone help?? I cannot figure out how to total my column data correctly with JavaScript. The code I have will enter a new row, but it is not summing the columns. The new row is just filled with zeros. Code: function totalColumns() {
var tds = document.getElementById('users_table').getElementsByTagName('td');
var sum = 0;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'dataRow') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('users_table').innerHTML += '<tr><td>' + sum + '</td><td>' +sum+ '</td><td>' +sum + '</td></tr>';
alert ("Columns have been totalled and listed at the bottom of each");
} //end totalColumns
I can't figure out how to get the rows to total at all. Any insight would be appreciated! Thanks! Any help would be greatly appreciated... I'm trying to get cross-browser column support working using the "css3-multi-column.js" script included in the following tutorial: http://www.cvwdesign.com/txp/article/360 The javascript works, making columns when the site is loaded in Firefox but I keep getting "access denied" errors for the ""css3-multi-column.js" script in Internet Explorer 8, resulting in no columns. I tested the tutorial's example in IE 8 (worked fine), then referred to the tutorial's example time and again checking for discrepancies but I can't seem to figure out where I'm going wrong. Here's an example on my site where columns are to appear: http://www.burnmyeye.org/site/about-us Thanks once again. I am attempting to sync the column widths of two tables. Currently, I have a working method that uses the DOM to traverse each cell of a given row of two tables and set the style.width element to the largest offsetWidth of the the two cells. However, when the divs my tables are in are given an overflow: auto property, causing scrollbars, the widths no longer sync. They style.width elements are still being set (I'm using a debugging method to check the style.width elements for their values), but no sizes are changing. Ideas? ASPX Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@language = "C#" inherits="APTEIT.Default"%>
<!--
Default.aspx
Author: Steven T. Norris Created: 2/28/2012
Last Updated: Updated By:
Default page of APTEIT
-->
<link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/>
<script type="text/javascript" src="Utilities/Javascript/Utilities.js"></script>
<script type="text/javascript" src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
HtmlLoggerControlInstance.getInstance().setLevel("debug",HtmlLogger.ALL);
syncColumnWidths("headers",null,"data",null);
});
</script>
<html>
<head>
<title>APTEIT</title>
</head>
<body>
<!--#include file="Utilities/Debug.aspx"-->
<img src="Images/logo.png" />
<div id="headersDiv">
<table class="tbl" id="headers">
<tr>
<td>head1</td>
<td>head2reallyreallylong</td>
<td>hd3</td>
<td>4</td>
</tr>
</table>
</div>
<div id="dataDiv" onscroll="syncScrolling('dataDiv','headersDiv');">
<table class="tbl" id="data">
<tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr>
<tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdasdfaf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdfs</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr>
</table>
</div>
</body>
</html>
CSS Code: /*
APTEIT.css
Author: Steven T. Norris Created: 2/28/2012
Updated By: Last Updated:
Copyright 2012
CSS stylesheet for default page of APTEIT
*/
/*Utilities Styles*/
.debug
{
display:block;
}
.LOG_INFO
{
color:blue;
}
.tbl
{
border-collapse:collapse;
}
.tbl tr td
{
border-width:1px;
border-color:black;
border-style:solid;
}
#headersDiv
{
max-width:200px;
overflow:hidden;
}
#dataDiv
{
max-width:200px;
overflow:auto;
}
#headers
{
table-layout:fixed;
}
#data
{
table-layout:fixed;
}
Javascript Code: /*
Utilities.js
Author: Steven T. Norris Created: 3/2/2012
Updated By: Last Updated:
Copyright 2012
Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/
/*
Syncs column sizes between two tables.
@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow ,table2, table2HeadRow){
UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
&& (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
tableOne = document.getElementById(table1);
tableTwo = document.getElementById(table2);
//Set row to check and get row
if(table1HeadRow == null){
t1Start = 0;
}
else{
t1Start = table1HeadRow;
}
if(table2HeadRow == null){
t2Start = 0;
}
else{
t2Start = table2HeadRow;
}
t1Row = tableOne.rows[t1Start];
t2Row = tableTwo.rows[t2Start];
//Get end number
if(t1Row.cells.length < t2Row.cells.length){
tEnd = t1Row.cells.length;
}
else{
tEnd = t2Row.cells.length;
}
//Sync widths
for(i = 0; i < tEnd; i++){
UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+" t2 width:"+t2Row.cells[i].offsetWidth);
if(t1Row.cells[i].offsetWidth > t2Row.cells[i].offsetWidth){
t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width);
}
else{
t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width);
}
}
}
else{
alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
}
UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}
/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div
@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
$("#"+div2).scrollLeft($("#"+div1).scrollLeft());
}
else{
alert("syncScrolling takes parameters (string, string)");
}
}
hi all. i'm still newbie with programming. i have created a table with two columns with a list of scholarship and a read more link. this is the table that i made: what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column. if the user click "read less" it will show both column back like normal. i try to use the javascript for hide column but it cannot link with my "read more" script. i hope that anyone can help me. thanks in advance Hi All, I have HTML table with couple of columns with combobox in each row.when I select value in any of the combobox, I want to determine the column number of the combobox which is clicked.Is there any function which can be used to do this?Please help. Thanks, Anil Dear All Please see the script below. This is a scrolling table. First row & last row are fixed, they don't moved. I also want to fixed the first two column (column1 & column2). Please help me. Code:
/* CSS Document */
table#table-body, table#table-header, table#table-footer
{
border-spacing:0;
border-collapse:collapse;
border:1px solid;
table-layout:fixed;
width:1000px;
border:1px solid #000;
}
table#table-header th
{
background:#c2a1a1;
}
table#table-footer td
{
background:#a39393;
}
table#table-body td
{
background:#e1d9d9;
}
table#table-body td, table#table-header th, table#table-footer td
{
border:1px solid #000;
width:100px;
height:30px;
overflow:hidden;
white-space:nowrap;
}
div#header-container, div#footer-container
{
overflow:hidden;
}
div#scroll
{
width:500px;
overflow:hidden;
max-height:150px;
padding-left:1px;
}
div#fake-scroll-container
{
width:500px;
overflow:hidden;
position:relative;
}
div#y-fake-scroll
{
overflow-y:scroll;
overflow-x:hidden;
background:transparent;
position:absolute;
right:0;
position:absolute;
max-height:149px;
top:31px;
}
div#x-fake-scroll
{
height:40px;
margin-top:-23px;
overflow-x:auto;
overflow-y:hidden;
margin-top:expression('0px');/* IE 7 fix*/
height:expression('17px'); /* IE 7 fix*/
}
div#y-scroll
{
max-height:150px;
overflow-y:auto;
overflow-x:hidden;
overflow:scroll;
width:1010px;
padding:0px 1px 1px 1px;
}
div#header-container
{
padding:1px 1px 0 1px;
}
div#footer-container
{
padding:0 1px;
}
Code:
// JavaScript Document
var YtableEmulator = document.getElementById('y-table-emulator');
var XtableEmulator = document.getElementById('x-table-emulator');
var table = document.getElementById('table-body');
YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
XtableEmulator.style.width = table.clientWidth + "px";
var scrollablePanel = document.getElementById('scroll');
var headerContainer = document.getElementById('header-container');
var footerContainer = document.getElementById('footer-container');
var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
var XfakeScrollablePanel = document.getElementById('x-fake-scroll');
YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
scrollablePanel.onscroll = function (e) {
XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
}
YfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
}
XfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
}
Code: <!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-Type" content="text/html; charset=iso-8859-1" /> <title>Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome</title> <link type="text/css" rel="stylesheet" href="style.css"></link> </head> <body> <div id="fake-scroll-container"> <div id="header-container"> <table id="table-header" cellpadding="0" cellspacing="0"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> <th>Column 8</th> <th>Column 9</th> <th>Column 10</th> </tr> </table> </div> <div id="scroll"> <table id="table-body" cellpadding="0" cellspacing="0"> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> <td>Cell 1.4</td> <td>Cell 1.5</td> <td>Cell 1.6</td> <td>Cell 1.7</td> <td>Cell 1.8</td> <td>Cell 1.9</td> <td>Cell 1.10</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> <td>Cell 2.4</td> <td>Cell 2.5</td> <td>Cell 2.6</td> <td>Cell 2.7</td> <td>Cell 2.8</td> <td>Cell 2.9</td> <td>Cell 2.10</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> <td>Cell 3.4</td> <td>Cell 3.5</td> <td>Cell 3.6</td> <td>Cell 3.7</td> <td>Cell 3.8</td> <td>Cell 3.9</td> <td>Cell 3.10</td> </tr> <tr> <td>Cell 4.1</td> <td>Cell 4.2</td> <td>Cell 4.3</td> <td>Cell 4.4</td> <td>Cell 4.5</td> <td>Cell 4.6</td> <td>Cell 4.7</td> <td>Cell 4.8</td> <td>Cell 4.9</td> <td>Cell 4.10</td> </tr> <tr> <td>Cell 5.1</td> <td>Cell 5.2</td> <td>Cell 5.3</td> <td>Cell 5.4</td> <td>Cell 5.5</td> <td>Cell 5.6</td> <td>Cell 5.7</td> <td>Cell 5.8</td> <td>Cell 5.9</td> <td>Cell 5.10</td> </tr> <tr> <td>Cell 6.1</td> <td>Cell 6.2</td> <td>Cell 6.3</td> <td>Cell 6.4</td> <td>Cell 6.5</td> <td>Cell 6.6</td> <td>Cell 6.7</td> <td>Cell 6.8</td> <td>Cell 6.9</td> <td>Cell 6.10</td> </tr> <tr> <td>Cell 7.1</td> <td>Cell 7.2</td> <td>Cell 7.3</td> <td>Cell 7.4</td> <td>Cell 7.5</td> <td>Cell 7.6</td> <td>Cell 7.7</td> <td>Cell 7.8</td> <td>Cell 7.9</td> <td>Cell 7.10</td> </tr> <tr> <td>Cell 8.1</td> <td>Cell 8.2</td> <td>Cell 8.3</td> <td>Cell 8.4</td> <td>Cell 8.5</td> <td>Cell 8.6</td> <td>Cell 8.7</td> <td>Cell 8.8</td> <td>Cell 8.9</td> <td>Cell 8.10</td> </tr> </table> </div> <div id="footer-container"> <table id="table-footer" cellpadding="0" cellspacing="0"> <tr> <td>Summary 1</td> <td>Summary 2</td> <td>Summary 3</td> <td>Summary 4</td> <td>Summary 5</td> <td>Summary 6</td> <td>Summary 7</td> <td>Summary 8</td> <td>Summary 9</td> <td>Summary 10</td> </tr> </table> </div> <div id="y-fake-scroll"> <div id="y-table-emulator" style="width:40px;"> </div> </div> <div id="x-fake-scroll"> <div id="x-table-emulator"> </div> </div> <script type="text/javascript" src="script.js"> </script> </div> </body> </html> Hey all, I have the old Yahoo! chess engine and Im making a webpage with a chessboard. Currently everything involved with this chessboard is wrapped up inside the code and dynamically creates everything it needs to operate. I have made a few customizations on several elements such as the PHP dropdown box that it dynamically creates as a quickjump to games. But i am wondering if someone wouldn't mind helping me in finding a way to write an amendment that reads 3 parts of the pgn file (Black)(Result)(White) (which it already does read them but just shows the info in the dropdown box) and display them as a header to the board. Everything in this script as far as variables go, are numbers... which makes it difficult at best which makes visual mapping harder. So I thought I would ask a professional what I should be looking for in the script so that I can go ahead and modify it and reuse some functionality to display a game header from javascript. The pgn viewer will read either string format directly input into the setup configuration in the html page, or it will read from a file. It them parses the elements based on the pgn tags. PHP Code: var tag=this.parseTag("FEN",pgn,i); if(tag&&tag!="?"){ this.board.startFen=tag; }else{ tag=this.parseTag("White",pgn,i); if(tag&&tag!="?"){ _68=tag; }else{ tag=this.parseTag("Black",pgn,i); if(tag&&tag!="?"){ _63=tag; }else{ tag=this.parseTag("Result",pgn,i); if(tag&&tag!="?"){ _62=tag; }else{ tag=this.parseTag("Event",pgn,i); if(tag&&tag!="?"){ _64=tag; }else{ tag=this.parseTag("Site",pgn,i); if(tag&&tag!="?"){ _65=tag; }else{ tag=this.parseTag("Date",pgn,i); if(tag&&tag!="?"){ _66=tag; So the variables I want to use are _68, _63, & _62 and display them as a header to the board. Any help is appreciated. Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo I would like to somehow get both of these identical slideshow scripts working at the same time. Any help would be much appreciated! Code: <!-- dress -->
<div class= dress>
<div style="position:absolute; background-color:transparent; border-color: #000000; border:0px solid ; top: 443px; left: 346px; width:397px; height:255px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['dress/1.png', '', '']
variableslide[1]=['dress/2.png', '', '']
variableslide[2]=['dress/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='395px' //set to width of LARGEST image in your slideshow
var slideheight='255px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=200
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end dress -->
<!-- hair -->
<div class="hair">
<div style="position:absolute; background-color:transparent; border: 0px solid; border-color: #000000; left:436px; top:105px; width:227px; height:227px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['hair/1.png', '', '']
variableslide[1]=['hair/2.png', '', '']
variableslide[2]=['hair/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='227px' //set to width of LARGEST image in your slideshow
var slideheight='227px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=100
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end hair -->
|
|||||||