.append() not working while dynamically binding images for image slider - c#

I'm trying to make a dynamic image slider using asp.net C# and jquery. I have stored image paths in database and have fetched those image paths to bind on page load where these images paths are supposed to work showing the respective images on my web page. I have used Really Simple Slider plugin that I found on internet and I am binding images using json response as below:
'output' is my json response which holds a string array that contains the image names that I'm using to complete an image path.
$("#slider1").append('<div class="main"><div class="rss-container"><div id="slideshow" class="rs-slideshow"><div class="slide-container">');
$("#slider1").append('<img src="beeSlider/images/'+output.d[0]+ '" alt=""/></div><ol class="slides">');
$.each(output.d, function (key, value) {
$("#slider1").append('<li></li>');
});
$("#slider1").append('</ol></div></div></div>');
The binding with output.d[0] has worked. But the code within $.each aint working at all. That just shows bullets. This should be retrieving images rather than just those bullets.
Can anybody help me to solve this one. Thanks in Advance.

You werent putting them in image tags...
$("#slider1").append('<div class="main"><div class="rss-container"><div id="slideshow" class="rs-slideshow"><div class="slide-container">');
$("#slider1").append('<img src="beeSlider/images/'+output.d[0]+ '" alt=""/></div><ol class="slides">');
output.d.forEach(function (value) {
$("#slider1").append('<img src="beeSlider/images/'+value+'" />');
});
$("#slider1").append('</ol></div></div></div>');

Related

set leaflet zoom region from C# codebehind

I have an ASP.NET page using a leaflet map. I have a filter being applied to some map icons.
When I apply the filter, which is an ASPX control. when the result of the filter comes back, since ASP resends the entire page back to the client, i loose the current zoomed in region I was looking at.
I have saved off the values of the last bound coordinates the user was looking at but exclude the possibility of the most zoomed out case since that's what i'm trying to avoid. I'm trying something like
string temp = "<script language=\"Javascript\">
myMAP.fitBounds([[RA[0],RA[1}][RA[2],RA[3]]);
</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "resetZoom", temp);
but I'm still seeing the map get reset like when the page gets sent back. am I calling the wrong leaflet method or is there a better way to implement what I'm trying to do? Please advise...
.fitBounds() method is having a coma between points, so I will be something like this:
.fitBounds([
[RA[0], RA[1]],
[RA[2], RA[3]]
]);
(source)
Is it fixing your problem?

Converting HTML Table into Image File

Is there any way to Convert HTML table to Image file? I have one HTML table which contains controls like Labels, GridView, and CheckBoxes. How can we convert this table into Image file for creating a PDF file?
This is not a trivial task. Ultimately, you need an HTML renderer to convert the HTML to pixels.
Fortunately, you don't need to write your own. You can use the WebBrowser control.
You can see some code I wrote to extract a thumbnail image from a given URL in the article Creating Website Thumbnails in ASP.NET.
If this is a one-off, load it up in your browser and take a screenshot (Alt-PrtScr on windows for just the current application)
If you need to do this repeatedly/in an automated way, you can either automate a browser control or you can use a headless browser
You should also look into WebKit2Png which will render the page in the same manner as Chrome/other webkit browsers and then save that as a png. It can optionally simulate javascript/etc too
Similarly, there's a wkhtmltopdf which works on all platforms
Converting HTML Table into Image File
$("#selfAssessmentPowerPointDownload").on('mouseover', function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#selfAssessmentPowerPointDownload").attr("download", "gridData.png").attr("href", newData);
}
});
});
<button id="selfAssessmentPowerPointDownload">Download</button>
<table id="html-content-holder"></table>
Datatables is a powerful jquery plugin for working with tables. One of the option that datatables offered is make a pdf or excel from your table. You can see find many examples in it's website.

How can i change image path on click for asp.net dynamic content

I am using jquery for changing image path but its not working for asp.net dynamic content
The jquery function is
$('img.selection').click(function () {
this.src = 'images/selected_img.png';
});
This function is not post backing in to the C#, so am not getting changed image values.
Please help me...
try this :
$(this).attr("src", 'images/selected_img.png');
The problem might lie in that asp controls id's are changed when sent to the client.
If this is the case you can fix this in to ways
Set the controlidmode to static on your control in asp.
get the id of the control with jQuery with selectors: $('[id$=theidnameofthecontrol]').click(function () ....
Also you do not need postback. If you provide the new url with jQuery, it should load this without having to postback.

taking a screenshot of some element in the html

So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.

show progress image while loading asp.net page

I have an asp.net page, with couple of Divs, some of these div's get the image path from database and show the image in a smaller version (thumbnail). and as soon as user click on thumbnail, I use ajax Modal popup to show the full size image, what I need to have is to have a progree image(gif), on every thumbnail image while loading the asp.net page for the first time, I konw that it is possible to use UpadePanel, but I need the actual working code,or any other way to achieve this,
Thanks in advance
Well, if you are posting back, udpate panel can work; but you can programmably in JS do this yourself, or also consider using a JS plugin like lightbox: http://www.huddletogether.com/projects/lightbox2/
Which has that feature and looks very cool.

Categories