Develop Reference

How do I freeze a column and header row at the same time with scrollbar on side of GridView in .net?

I have a GridView. It has many columns and thousands of rows, so I need it to be horizontally scrollable as well as vertically scrollable. I need to freeze a header with scrollable and first two columns with horizontally scrollable, so how to do that?
I searched a lot on the Internet and I did not find anything related to what I want. I used some of the tutorials about freezing the header and freezing columns individually, but couldn't find anything which allows both to work together. Please help me.

Datatables Fixed Columns
$('#yourTableId').DataTable( {
fixedColumns: true
} );
Datatables Fixed Header
$('#yourTableId').DataTable( {
fixedHeader: true
} );

<div id="HeaderDiv" runat="server">
</div>
<%--Wrapper Div which will scroll the GridView--%>
<div id="DataDiv" runat="server" style="overflow: auto; border: 1px solid black; width: 900px; height: 400px;"
onscroll="Onscrollfnction();">
<asp:GridView ID="gvemp" runat="server" AutoGenerateColumns="False" EmptyDataText="No Record Found"
OnRowDataBound="gvemp_RowDataBound">
<Columns>
</Columns>
</asp:GridView>
</div>
function CreateGridHeader() {
var DataDivObj = "";
var DataGridObj = "";
var HeaderDivObj = "";
DataDivObj = document.getElementById('<%=DataDiv.ClientID %>');
DataGridObj = document.getElementById('<%=gvemp.ClientID %>');
HeaderDivObj = document.getElementById('<%=HeaderDiv.ClientID %>');
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '2000px';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
//*** this is because we have to scroll the Div along with the DataDiv.
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'bold';
//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length - 4; iCntr++) {
if (iCntr != 1) {
var align = "left";
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
width = spanTag.clientWidth;
align = DataGridObj.rows[1].cells[iCntr].align;
}
else {
width = DataGridObj.rows[1].cells[iCntr].clientWidth;
align = DataGridObj.rows[1].cells[iCntr].align;
}
if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
spanTag.style.width = width + 'px';
}
else {
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
//Assigning Alignment
spanTag.align = align;
}
}
}

Resizing elements dynamically using javascript and the element.style attributes

I have tried searching for this but can't find any answers.
Details: I am trying to build a javascript carousel without using any libraries. My implementation is probably not the best. What I have decided to do is have a long div.carousel-track that contains many .carousel-items (these items are created from an object in javascript). The .carousel-track is wider than the page and has overflow: hidden on, so I can choose to have one item on the page at a time.
Because I am using bootstrap for the project in which it sits, I need it to align with bootstraps containers and columns. I do this by:
Getting the windows inner width, dividing by 12 and storing it.
When creating the .carousel-items I use this number to set the width and margins.
The probelm: This works initally, but when I try to resize the page and have the items resize too it will not, and instead stays with the old value. The variable that sets the width changes on resize, so why are the elements not when I re render them?
// Set global variables for the window.
var w = document.defaultView,
d = document,
e = document.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
// Set the initial size of the bootstrap grid column for dynamic elements.
var colOne = x / 12;
window.addEventListener("optimizedResize", function () {
console.log('optimizedResize firing');
w = document.defaultView,
d = document,
e = document.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
// Reset the size of bootsrap columns depending on the screen.
colOne = x / 12;
console.log(`x: ${x}, col-one: ${colOne}`);
view.infinite.resize();
});
var view = {
infinite: {
init: function () {
console.log(controller.getCurrentItem());
this.rightItem = controller.getRightItem();
this.centerItem = controller.getCurrentItem();
this.leftItem = controller.getLeftItem();
this.HTMLparentElement = document.createElement('div');
this.HTMLcarouselTrackElement = document.getElementById('carousel-track');
// Offset the carousel by 12 bootstrap columns (aka a whole page).
this.HTMLcarouselTrackElement.style.transform = "translateX(-" + colOne * 12 + "px)";
view.infinite.render();
},
render: function () {
console.log('rendering');
var carouselItems = [this.leftItem, this.centerItem, this.rightItem];
// Appends all the items in the carousel list in a row.
for (var i = 0; i < carouselItems.length; i++) {
this.HTMLcarouselItemContainer = document.createElement('div');
// Add classes for styling the carousel container.
this.HTMLcarouselItemContainer.classList.add('inner-carousel', 'carousel-item');
view.infinite.resize();
this.HTMLcarouselItemContainer.appendChild(HTMLprojectGradientOverlay);
// Append the whole carousel item to the carousel track.
this.HTMLparentElement.appendChild(this.HTMLcarouselItemContainer);
}
this.HTMLcarouselTrackElement.innerHTML = this.HTMLparentElement.innerHTML;
},
resize: function () {
// Dynamically set the width + margins to match the bootstrap width.
console.log(colOne);
this.HTMLcarouselItemContainer.style.width = (colOne * 10) + "px";
this.HTMLcarouselItemContainer.style.marginLeft = (colOne) + "px";
this.HTMLcarouselItemContainer.style.marginRight = (colOne) + "px";
console.log(this.HTMLcarouselItemContainer);
}
},
move: {
init: function () {
console.log('init move');
this.rbtn = d.createElement('button');
this.lbtn = d.createElement('button');
this.HTMLlistCellRight = document.createElement('li');
this.HTMLlistCellLeft = document.createElement('li');
this.HTMLspanIndicatorElemRight = document.createElement('span');
this.HTMLspanIndicatorElemLeft = document.createElement('span');
this.rbtn.innerText = "right";
this.lbtn.innerText = "left";
var HTMLindicatorListElem = document.getElementById('indicator-list');
this.HTMLspanIndicatorElemLeft.appendChild(this.lbtn);
this.HTMLlistCellLeft.appendChild(this.HTMLspanIndicatorElemLeft);
this.HTMLspanIndicatorElemRight.appendChild(this.rbtn);
this.HTMLlistCellRight.appendChild(this.HTMLspanIndicatorElemRight);
HTMLindicatorListElem.appendChild(this.HTMLlistCellLeft);
HTMLindicatorListElem.appendChild(this.HTMLlistCellRight);
this.rbtn.addEventListener('click', function () {
return function () {
controller.rightRotation();
view.infinite.init();
};
}());
this.lbtn.addEventListener('click', function () {
return function () {
controller.leftRotation();
view.infinite.init();
};
}());
view.move.render();
},
render: function () {
}
},
};

drag panel by dragging textarea firefox sdk

So I have created a panel with javascript for a firefox extension as described below:
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
noautohide: true,
noautofocus: false,
backdrag: true,
level: 'top',
style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(0,0,0,0.3); border:none;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
var textarea = win.document.createElement('textarea')
textarea.disabled = true;
textarea.readonly = true;
textarea.overflow = 'hidden';
textarea.width = '525px';
textarea.height = '85px';
textarea.style.textAlign = 'center';
textarea.style.fontFamily = '"New Century Schoolbook"';
textarea.style.color = 'white';
textarea.style.fontSize = '21px';
textarea.style.fontWeight = 'bold';
textarea.style.fontStretch = 'semi-condensed';
textarea.style.backgroundColor = 'rgba(0,0,0,0)';
panel.appendChild(textarea);
textarea.innerHTML = 'text';
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('dblclick', function () {
panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2, screen.availTop/2);
So it is just a panel with a textarea inside. My problem is the following : I can drag the panel by selecting the border and moving it around but because of the textarea I cannot drag the panel by dragging the textarea.
What I would like is the textarea to dismiss the drag event and pass it to the panel. How would I make the user drag the panel instead of the textarea?

I found the answer in pointer-events css property:
textarea.style.pointerEvents = 'none';
For further info: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

How to drag an image to move it smoothly on screen, using jquery in ie8

I am working on a project where we can move an image like in google map,, it works perfectly in crome,ff and above ie9, but when i checked in ie8 the image is not moving smoothly,it takes a 2 to 3 sec of time to move.
/* Map dragging */
var previousX;
var previousY;
var previousLeft;
var previousTop;
var cids = self.data.cuLocation;
var lumids = self.data.lumLocation;
$('#MapView img').css( 'cursor', 'pointer' );
$("#MapView img").mousedown(function(e) {
//console.log("mousedown");
e.preventDefault();
drag.state = true;
previousX = e.originalEvent.clientX;
previousY = e.originalEvent.clientY;
previousLeft = $("#MapView img").position().left;
previousTop = $("#MapView img").position().top;
});
$("#MapView img").mousemove(function(e) {
var old_pos = self.getPosition();
if (drag.state) {
e.preventDefault();
drag.x = e.originalEvent.clientX - previousX;
drag.y = e.originalEvent.clientY - previousY;
var cur_position = $("#MapView img").position();
var new_left = cur_position.left + drag.x;
var new_top = cur_position.top + drag.y;
previousX = e.originalEvent.clientX;
previousY = e.originalEvent.clientY;
}
});
$("#MapView img").mouseleave(function(e) {
//console.log("mouseleave");
drag.state = false;
});
$(document).mouseup(function(e) {
// alert("mouseup");
drag.state = false;
});

Use the following Link for your better understanding in Draggable event so than you can use it to Drag your Image wherever you want.
http://jqueryui.com/draggable/
and for Drap & Drop of one element onto other element ::
http://jqueryui.com/draggable/#snap-to

FCKEditor, adding width and height to img elements

I'm trying to add width and height to images that I have in old WYSIWYG FCKEditor.
The problem is, when I'm trying to get naturalWidth/Height that way I got 0 values.
What am I doing wrong?
here is the code:
var zaj = FCKeditorAPI.GetInstance('hometext');
pz = zaj.GetXHTML();
dom_zaj = document.createElement('div');
dom_zaj.innerHTML = pz;
$(dom_zaj).find('img').each(function(i, element) {
//var w_set = $(element).attr('width');
//var h_set = $(element).attr('height');
var w_native = element.naturalWidth;
var h_native = element.naturalHeight;
$(element).attr('width', w_native);
$(element).attr('height', h_native);
});

I manage to fix the problem on my own. Since the pic's where in editor, I had to load them manualy by myself using jquery.onload(); (and changed from width/height to css styles)
var $images = $(dom_zaj).find('img');
var imagesLength = $images.length;
$images.load(function(){
var w_native = this.naturalWidth;
$(this).css('width', w_native+'px');
imagesLength = imagesLength-1;
if(imagesLength === 0){
pz = dom_zaj.innerHTML;
zaj.SetHTML(pz);
}
}).error(function(){
imagesLength = imagesLength-1;
});