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;
}
}
}
I'm trying to achieve the following image,
Then whenever the player moves (he moves by click) I want the visible area to move with him. the visible area should be displayed over the whole screen.
I've currently got the following code but I have no idea how to make it so just the visible area is visible;
Code
<body>
<div class="map">
<div class="screen">
<div class="player">
<img class="ship" src="https://vignette.wikia.nocookie.net/darkorbit/images/a/a9/Neuergoli.jpg/revision/latest?cb=20120819231510">
</div>
</div>
</div>
</body>
$(function(){
$('.map .screen').on('click', function(event){
var clickedPosX = event.pageX,
clickedPosY = event.pageY;
var $player = $('.screen');
$player.animate({left:clickedPosX, top:clickedPosY}, 1000);
});
});
JSFiddle
try this one
$(function(){
var $map = $(".map");
var $player = $('.player');
var centerPlayerX = $player.offset().left + $player.width() / 2;
var centerPlayerY = $player.offset().top + $player.height() / 2;
$('.map').on('click', function(event){
var clickedPosX = event.pageX,
clickedPosY = event.pageY;
var currentMapPositionX = parseFloat($map.css("background-position-x"));
var currentMapPositionY = parseFloat($map.css("background-position-y"));
var moveMapX = currentMapPositionX - clickedPosX + centerPlayerX;
var moveMapY = currentMapPositionY - clickedPosY + centerPlayerY;
$map.animate({ "background-position-x": `${moveMapX}px`, "background-position-y": `${moveMapY}px` }, 1000);
});
});
and add background-repeat: repeat; to .map css
I'm having some div boxes where there is an image inside. What I want it to do, is to add a class to the image if the image height is smaller than the div box its inside.
But I have set the image to be a 100% width of the div box, so when I use jquery's .Height() on the image, it gives me the original size. Any suggestions?
<div class="boxe">
<asp:Literal ID="imgProjekt1" runat="server" />
<asp:Literal ID="litProjekt1" runat="server"/>
</div>
<div class="boxe forsideboxMiddle">
<asp:Literal ID="imgProjekt2" runat="server" />
<asp:Literal ID="litProjekt2" runat="server"/>
</div>
The literal with the ID imgProjekt1 and ImgProjekt2 makes a normal img tag from codebehind.
$(function() {
var myImage = $('img'),
originalHeight = myImage.height();
getImgSize(myImage, originalHeight, myImage[0].src);
});
/* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
function getImgSize(myImage, currentHeight, imgSrc) {
var newImg = new Image();
newImg.onload = function() {
if(newImg.height > currentHeight) {
myImage.addClass('smaller');
alert(newImg.height + ' > ' + currentHeight);
}
}
newImg.src = imgSrc;
}
DEMO
EDIT:
The class should only be added to the image when it's smaller than it's parent div in height. Bigger images shouldn't get the class, even if they are smaller than the source image.
Time for the code:
$(function() {
var myImage = $('img');
getImgSize(myImage);
});
/* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
function getImgSize(myImage) {
myImage.each(function() {
var that = $(this),
parent = that.parent(),
originalHeight = that.height(),
parentHeight = parent.height(),
newImg = new Image();
newImg.onload = function() {
if(
newImg.height > originalHeight &&
parentHeight > originalHeight
) {
that.addClass('smaller');
}
}
newImg.src = that[0].src;
});
}
DEMO2
Recently I run into a scenario, which i trying to understand. I whave already got workaround and my job is done but i am still not able to understand why the scenarion actually occured. Problem is strictly programming based so i hope it is allowed on stackoverflow.
I had a Div on a page:
<DIV id="tos3" >
<FONT size=2 face=Arial color=#009a00><B>How to request Business Applications Software </B></FONT>
<BR/><BR/>
<FONT size=2 face=Arial color=#000000>
<select id="segment" onchange="getSecondDropdown(this);"><option value="Segment">Select Segment</option>
<option value="E&P">E&P</option>
<option value="R&M">R&M</option>
<option value="IST">IST</option>
<option value="Functions">Functions</option>
<option value="Other">Other</option>
</select>
<select id="DivisionDP" disabled="disabled" onchange="getDetails();"><option value="Division">Select Division/SPU/Region</option>
</select>
<DIV id="infoDetails"></DIV>
</FONT>
</DIV>
Related Javascript:
function getSecondDropdown(e)
{
// get the values in seconnd drop down
}
function getDetails()
{
// display details based on selection
}
It was working fine on the page.
Than came a request to display this div on Popup.
We have a popup code in our master page, which is being used through our site to display data:
<div id="testDiv" style="border-left:2px solid #99cc00;border-right:2px solid #99cc00;border-top:2px solid #4c4c4c;border-bottom:2px solid #4c4c4c;width:500px;display:none;background-color: #eeeeee;z-index:1000;padding:10px 10px 10px 10px">
<div align="right" style="height:25 px;">
<a style="cursor:pointer" onClick="closePouUp()">close</a>
</div>
<div id="contentDiv" style="overflow:auto;"> testDiv content</div>
</div>
<div id="greyout" style="background-color: black; display:none;z-index:400;filter: alpha(opacity=70);opacity: 0.7;width:100%; height:100%;">
</div>
function ShowHideProduct(sValue,flag)
{
var customCopyrightContainer;
customCopyrightContainer = document.getElementById(sValue);
divRef = document.getElementById('testDiv');
innerDiv=document.getElementById('contentDiv');
if(flag==1)
{
innerDiv.style.height = "300px";
}
innerDiv.innerHTML= customCopyrightContainer.innerHTML;
// Get the screen dimensions...
var screenSize = getViewportSize();
var screenWidth = screenSize.width;
var screenHeight = screenSize.height;
// Get the element dimensions...
var elementSize = getElementSize(divRef);
var elementWidth = elementSize.width;
var elementHeight = elementSize.height;
// Calculate the centering positions...
var xPos = (screenWidth - elementWidth) / 2;
var yPos = (screenHeight - elementHeight) / 2;
yPos=document.body.scrollTop/2+yPos;
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
//make page greyout
greyOutDiv=document.getElementById('greyout');
greyOutDiv.style.position = 'absolute';
greyOutDiv.style.left = '0px';
greyOutDiv.style.top = '0px';
greyOutDiv.style.width = '1500px';
greyOutDiv.style.height = height + 'px';
greyOutDiv.style.display = 'block';
// Position the element...
divRef.style.position = 'absolute';
divRef.style.left = xPos + 'px';
divRef.style.top = yPos + 'px';
divRef.style.display = 'block';
if(flag==1)
{
divRef.style.height = "300px";
}
return;
}
function closePouUp()
{
divRef = document.getElementById('testDiv');
greyOutDiv=document.getElementById('greyout');
divRef.style.display = 'none';
greyOutDiv.style.display = 'none';
}
I used the same code and functionality was not working.
From the output i felt like that the javasript innerHTML thing is creating a temporary objects. I felt this because the first dropdown was not working with getElementByID method but when i passed its refrence in the method it worked.
I did not get any proper explation of this.
I have fixed my problem by showing the original div as popup. So now i am just trying to understand what exactly happend.
I've got a little problem here. I've been trying to do an image gallery with JavaScript but there's something that I got a problem with. I can get the image to resize when the first image load, but as soon as I load another image, it won't resize anymore! Since the user will be able to upload a lot of different size pictures, I really need to make it work.
I've checked for ready-to-use image gallery and such and nothing was doing what I need to do.
Here's my javascript:
function changeCurrentImage(conteneur)
{
var img = conteneur.getElementsByTagName("img");
var imgUrl = img[0].src;
var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
var currentImg = document.getElementById('currentImage');
currentImg.src = imgFirstPart + "borne" + imgLastPart;
resize(document.getElementById('currentImage'), 375, 655);
}
function resize(img, maxh, maxw) {
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxw){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};
Here's the HTML (using ASP.Net Repeater):
<asp:Repeater ID="rptImages" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<a href="#">
<div id="thumbnailImageContainer1" onclick="changeCurrentImage(this)">
<div id="thumbnailImageContainer2">
<img id="thumbnailImage" src="<%# SiteUrl + Eval("ImageThumbnailPath")%>?rn=<%=Random()%>" alt="Photo" onload="resize(this, 60, 105)" />
</div>
</div>
</a>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
Most likely the image is not yet downloaded so img.height and img.width are not yet there. Technically you don't need to wait till the whole image is downloaded, you can poll the image in a timer until width and height are non-zero. This sounds messy but can be done nicely if you take the time to do it right. (I have an ImageLoader utility I made for this purpose....has only one timer even if it is handling multiple images at once, and calls a callback function when it has the sizes) I have to disagree with Marcel....client side works great for this sort of thing, and can work even if the images are from a source other than your server.
Edit: add ImageLoader utility:
var ImageLoader = {
maxChecks: 1000,
list: [],
intervalHandle : null,
loadImage : function (callback, url, userdata) {
var img = new Image ();
img.src = url;
if (img.width && img.height) {
callback (img.width, img.height, url, 0, userdata);
}
else {
var obj = {image: img, url: url, callback: callback,
checks: 1, userdata: userdata};
var i;
for (i=0; i < this.list.length; i++) {
if (this.list[i] == null)
break;
}
this.list[i] = obj;
if (!this.intervalHandle)
this.intervalHandle = setInterval(this.interval, 30);
}
},
// called by setInterval
interval : function () {
var count = 0;
var list = ImageLoader.list, item;
for (var i=0; i<list.length; i++) {
item = list[i];
if (item != null) {
if (item.image.width && item.image.height) {
item.callback (item.image.width, item.image.height,
item.url, item.checks, item.userdata);
ImageLoader.list[i] = null;
}
else if (item.checks > ImageLoader.maxChecks) {
item.callback (0, 0, item.url, item.checks, item.userdata);
ImageLoader.list[i] = null;
}
else {
count++;
item.checks++;
}
}
}
if (count == 0) {
ImageLoader.list = [];
clearInterval (ImageLoader.intervalHandle);
delete ImageLoader.intervalHandle;
}
}
};
Example usage:
var callback = function (width, height, url, checks, userdata) {
// show stuff in the title
document.title = "w: " + width + ", h:" + height +
", url:" + url + ", checks:" + checks + ", userdata: " + userdata;
var img = document.createElement("IMG");
img.src = url;
// size it to be 100 px wide, and the correct
// height for its aspect ratio
img.style.width = "100px";
img.style.height = ((height/width)*100) + "px";
document.body.appendChild (img);
};
ImageLoader.loadImage (callback,
"http://upload.wikimedia.org/wikipedia/commons/thumb/" +
"1/19/Caerulea3_crop.jpg/800px-Caerulea3_crop.jpg", 1);
ImageLoader.loadImage (callback,
"http://upload.wikimedia.org/wikipedia/commons/thumb/" +
"8/85/Calliphora_sp_Portrait.jpg/402px-Calliphora_sp_Portrait.jpg", 2);
With the way you have your code setup, I would try and call your resize function from an onload event.
function resize() {
var img = document.getElementById('currentImage');
var maxh = 375;
var maxw = 655;
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxw){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};
function changeCurrentImage(conteneur)
{
var img = conteneur.getElementsByTagName("img");
img.onload = resize;
var imgUrl = img[0].src;
var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
var currentImg = document.getElementById('currentImage');
currentImg.src = imgFirstPart + "borne" + imgLastPart;
}
I would play around with that. Maybe use global variables for your maxH/W and image ID(s);
#Comments: No, I can't do that server side since it would refresh the page everytime someone click on a new image. That would be way too bothersome and annoying for the users.
As for the thumbnails, those image are already saved in the appropriate size. Only the big image that shows is about 33% of its size. Since we already have 3 images PER uploaded images, I didn't want to upload a 4th one for each upload, that would take too much server space!
As for the "currentImage", I forgot to add it, so that might be helful lol:
<div id="currentImageContainer">
<div id="currentImageContainer1">
<div id="currentImageContainer2">
<img id="currentImage" src="#" alt="" onload="resize(this, 375, 655)" />
</div>
</div>
</div>
#rob: I'll try the ImageLoader class, that might do the trick.
I found an alternative that is working really well. Instead of changing that IMG width and height, I delete it and create a new one:
function changeCurrentImage(conteneur)
{
var thumbnailImg = conteneur.getElementsByTagName("img");
var thumbnailImgUrl = thumbnailImg[0].src;
var newImgUrl = thumbnailImgUrl.replace("thumbnail", "borne");
var currentImgDiv = document.getElementById('currentImageContainer2');
var currentImg = currentImgDiv.getElementById("currentImage");
if (currentImg != null)
{
currentImgDiv.removeChild(currentImg);
}
var newImg = document.createElement("img");
newImageDiv = document.getElementById('currentImageContainer2');
newImg.id = "currentImage";
newImg.onload = function() {
Resize(newImg, 375, 655);
newImageDiv.appendChild(newImg);
}
newImg.src = newImgUrl;
}
Also, in case people wonder, you MUST put the .onload before the .src when assigning an a new source for an image!