I have an Update Panel that contains an image and a button. Image control displays one image at a time when clicked on "Next Image" Button and previous image on clicking "Previous Image" button. Code sample is something like this
protected void btnNext_Click(..)
{
Image1.ImageUrl=getNextImageFromDatabase();
UpdatePanel1.Update();
}
protected void btnPrevious_Click(..)
{
Image1.ImageUrl=getPreviousImageFromDatabase();
UpdatePanel1.Update();
}
Now what I want to know is that is there any way I can slide image or whatever content in update panel to left when clicked on "Next Image" and similarly to right when clicked on "Previous Image"? Is there any way using AjaxToolKit or JQuery?
You can you use the jquery fadeIn fadeOut methods which will look like a slide effect
See example here http://api.jquery.com/promise/#example-1
With Jquery you can simply animate margin-left to negative values, so Image would disapear. I personaly use this solution:
User clicks on next/prev button
Show loading image (a gif)
Create image (var img = new Image()) in javascript
set onload action for that image to move old one to left/right and append new image etc.
get next/prev image url
assign src of the created image, so when it's loaded the onload action is executed.
AjaxToolkit might not be the cleanest solution in this case. You will probably need to make some simple service that returns nex/prev image url, but that's only few lines of code...
Related
[enter image description here][1]Help!
I have two svg image buttons on my page. On the page load I am displaying one of the two buttons based on the value in the DB . and I have jquery to hide that button and show another one on button click from UI. I cannot show another button after hide.
both buttons are in a single span class.
The visibility property can't be block. You should use visible instead.
Have a look at the documentation for more about this property.
EDIT
If that can help... Here is an example showing both hidden and visible for the visibility attribute...
// That is executed on load.
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
// Handler for the toggle button.
$("#toggle").on("click", function(){
$(this).toggleClass("active");
if($(this).hasClass("active")){
$("#btnXX").css("visibility", "hidden");
$("#btnYY").css("visibility", "visible");
}else{
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnXX">XX</button><button id="btnYY">YY</button><br>
<br>
<button id="toggle">Toggle it</button>
I figured it out. My back end code was using property btnXX.Visible = false, Changing it to display:none fixed my issue.
If you don't want to render the control at all in certain situations, set Visible="false". Since it keeps the control's HTML out of the page, slightly but if you want to show the control via Ajax/etc, this won't work and display:none css should be used
there are two images in my page for those am using only one imagebutton and showing as per the startup functionality.
Now i want to have a clickable link one image and for other it should not be clickable.
Example
if(userselection == chocolate)
userselimg.imageurl="~/chocolate.jpg"
if(userselection == coffee)
userselimg.imageurl="~/coffee.jpg"
and i want add a link this is not a link to 2nd option i.e coffee and no link for chocolate.
Here i am one imagebutton for both conditions.
kindly advice me
Click on first image and go to link:
$("#img1").click(function(){
var url = 'https://www.google.co.in/';
$(location).attr('href', url);
});
To unbind the click of second image use unbind
I want to load HTML content in a panel when a button is clicked. The content is generated from the c# code by fetching the database.
Currently I have to load the content on page load in the panel and make panel visible on button click. But that makes the website speed very low. So please tell how can I load html content on demand in panel?
The code to be written in the panel on button click should be this:
<p><%=databaseFuncs.getName() %></p>
So as you can see I want to things to happen on Button Click: First the C# code should be executed than it should be encapsulated in paragraph tag and then written to the panel. One by one for all database rows this should be repeated. Please help.
Also note than I don't want to use custom asp.net controls.
Just make the
databaseFuncs
public and
databaseFuncs.getName()
public and your code should work...
If the code is inside runat="server" then just use '#' instead of '='
My controls are dynamically generated when the dropdownlist is changed by user. They values are loaded from the database. How to display progressbar during the generation of control?
You can add download image on the form. When user will change item in dropdownlist call the event onchange with javascript. There is example for adding handler:
protected void Page_Load(object sender, EventArgs e)
{
dropdownlist1.Attributes.Add("onchange", "document.getElementById(\"loading_image\").style.visibility = \"visible\";");
}
Before that you must add image on the form:
<img style="visibility:hidden;" src="imageurl" runat="server" id="loading_image" />
if(combobox.text=="type selected value")
{
load the progress bar here..
}
After the user makes the selection, insert an <img> tag with an animated .gif progress bar. When the controls are returned to load onto the page, use javascript to delete the <img> tag and insert your controls.
For showing actual progress you need a Context-Sensitive progress bar. Here is the article that is showing how to show actual progress through ajax of server side operations.
I'm using a fileupload control to upload images. The upload is working but I would like to know how to display the uploaded image. For example,
user uploads file, (already done);
the image is displayed in the page.
Add an image control in your aspx page, and in the upload button event , add the URL of the image to the Image Control.
You can set the Image control visibility with false in the beginning and in the PostPack set it back to true to view your image.