In my page I have a large image and set of small unit images. the large image will be loaded on page load. but when i click on small images it will get enlarge and get displayed in place of large image. the small images are displaying on page . but it has no effect on clicking them
here is my code
<div class="invDetailImage">
<img id="imgenlarge" src="" runat="server" alt="" align="middle" style="max-height:380px; max-width:579px; vertical-align:middle;"/>
<asp:Label runat="server" ID="lblerr" Visible="false" style="max-height:380px; max-width:579px; vertical-align:middle;font-size:large;"></asp:Label>
</div>
<!-- SMALL IMAGES -->
<div class="invDetailPhotoBox" runat="server" id="photobox">
<asp:Label runat="server" ID="lblphotos" Text="Select a photo below to view in the window above:"></asp:Label><br />
<asp:Repeater runat="server" ID="rptrinventoryphotos" onitemdatabound="rptrinventoryphotos_ItemDataBound">
<ItemTemplate>
<img id="imgInventory" src="" runat="server" alt='<%#Eval("ImagePath")%>' style="display:none;" />
<div onclick="large('<%#Eval("ImagePath")%>')" style="float:left;clear:none; margin-left:-12px;">
<asp:Image ID="Image1" Visible="true" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript"> function large(src) {
var str=src; document.getElementById("ctl00_ContentPlaceHolder1_imgenlarge").src = (str);
}
function loading(img) { img.src = "images/loading.gif"; }
</script>
protected void rptrinventoryphotos_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
HtmlImage img1 =(HtmlImage) e.Item.FindControl("imgInventory");
Image img = (Image)e.Item.FindControl("Image1");
img.ImageUrl = "http://localhost:22525/DWLive/ImageResizeHandler.ashx?imgPath=" + img1.Alt + "&width=75&height=56";
img.Style.Add("margin-left", "-12px");
img.Style.Add("background-image", "url('images/loading9.gif')");
img.Style.Add("background-repeat", "no-repeat");
img.Style.Add("background-position", "center left");
//img.Attributes.Add("onclick", "large('" + img1.Alt + "')");
string[] a = img1.Alt.Split((#"/").ToCharArray());
}
can anyone help please? thanks.
The problem was in JavaScript. I changed it to:
<script type="text/javascript">
function large(link) {
var str = link;
}
document.getElementById("ctl00_ContentPlaceHolder1_imgenlarge").src = (str);
Related
i have a code ,where i want to change the lable text and visible mode in code behind file.my page is .ascx page
<asp:UpdatePanel ID="upnlTrvLogin" runat="server">
<ContentTemplate>
<div id="divErrMsg" runat="server" style="padding-left: 11px;">
<asp:Label ID="lblErrMsg" runat="server" ForeColor="Red" Visible="False"
CssClass="errorIcon" meta:resourcekey="lblErrMsgResource2"></asp:Label>
<br />
</div>
<div style="display: inline; float: right; text-align: right; margin-top: 10px; margin-right: 13px;">
<asp:Button ID="lnkSubmit" runat="server" CausesValidation="False"
CssClass="font1_2em bolder inButton showHand" OnClick="lnkSubmit_Click"
Text="Sign In" UseSubmitBehavior="False" meta:resourceKey="lnkSubmitResource2" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
code behind file
protected void lnkSubmit_Click(object sender, EventArgs e)
{
string User = GetUserDetail(txtUsername.Text.Trim(), txtPass.Text.Trim(),out personGuid, false);
if (string.IsNullOrEmptyUser (User )
{
lblErrMsg.Text = "Invalid email / password";
lblErrMsg.Visible = true;
return;
}
}
but in the button click event when i an try to change the Label text but is not changing . please tell why text of label is not changing.
Looking at you code, seems it is incorrect.
string.IsNullOrEmpty(User) was the correct statement, but you are using string.IsNullOrEmptyUser (User ).
Another tip, don't use variables with first letter on upper case, let it only for class.
I have saved images uploaded by user in one of my folders.In the sql server DB I just save the file-name of the image. For one item I have nearly 5-6 images. So I have an itemID as one of the column and imagename as one column and i have 1 2 3 4 5 in the table.
I need to display all these images in thumbnail format on a page. Like on craigslist. How do i proceed?
You can use javascript/jQuery image box to display a large image with small thumbnails.
Here are the two I know -
FancyBox (I'm currently using)
LightBox
Or You can use the following code -
Demo at jsfiddle
<style type="text/css">
.container img {
width: 100px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$(".container img").mouseover(function () {
$("#<%= LargeImage.ClientID %>").attr("src", $(this).prop('src'));
}).mouseout(function () {
$("#<%= LargeImage.ClientID %>").attr("src",
"http://placehold.it/400x400&text=Image1");
});
});
</script>
<asp:Image ID="LargeImage" ImageUrl="http://placehold.it/400x400&text=Image1"
runat="server" />
<div class="container">
<asp:Image ID="Image1" ImageUrl="http://placehold.it/400x400&text=Image2"
runat="server" />
<asp:Image ID="Image2" ImageUrl="http://placehold.it/400x400&text=Image3"
runat="server" />
<asp:Image ID="Image3" ImageUrl="http://placehold.it/400x400&text=Image4"
runat="server" />
<asp:Image ID="Image4" ImageUrl="http://placehold.it/400x400&text=Image5"
runat="server" />
</div>
So I'm trying to understand how this should be properly setup. I have a Updateprogress that shows a progress bar when a button is clicked. The button is wrapped in an UpdatePanel. But if there're any error, I want to stop the processing and then pop up a modal window (I used Modalpopupextender) to show the errors. My issue is, it just shows the box (or object) but without the texts that came from the Exception. Here's my code:
<asp:UpdatePanel ID="UpdatePanel_ActionButtons" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" OnClick="Proccess_Click1" OnClientClick="this.disabled = true; this.value = 'Processing';" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
The Progress Bar:
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_ActionButtons">
<ProgressTemplate>
<div style="background-color:Gray; filter:alpha(opacity=80); opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;"></div>
<div style=" filter:alpha(opacity=100); position: fixed;
z-index: 100001;
left: 720px;
top: 105px;">
<div style="width:50px; height:50px; padding:50px; background-color:white; border:solid 1px black;">
<img alt="progress" src="../images/ajax-waiting.gif"/>
Processing...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The error box:
<asp:LinkButton ID="btnNotInUse" runat="server" />
<ajaxtoolkit:ModalPopupExtender ID="qaError" runat="server"
TargetControlID="btnNotInUse"
PopupControlID="pnlQAError"
BackgroundCssClass="modalPopupExtender" />
<asp:Panel ID="pnlQAError" runat="server" Style="display: none" CssClass="modalPopup">
<br />
<asp:Button ID="OkBtn" runat="server" Text="Ok" OnClick="OkBtn_Click" />
</asp:Panel>
Button Click Method:
protected void Proccess_Click1(object sender, EventArgs e)
{
List<string> validationErrors;
string returnurl;
Processrecord(out validationErrors);
if (validationErrors.Count() > 0)
{
foreach (var error in validationErrors)
{
qaFeedback.InnerHtml += error;
}
qaError.Show();
return;
}
else
{
returnurl = "toanotherpage.aspx";
}
}
So if you look as to how I add the errors, it's adding it to the "qafeedback" div. And then I would force it to show up and then return. What's happening is it would pop out the button box, with the button, but it doesn't show the texts I added. It would be helpful to know as well that when I remove the progress bar or animation, the whole thing works or shows the error messages.
Thoughts?
I wish to group some data by month (stored in an SQL Database), with collapsible DIVs, no doubt with jQuery. I don't particularly want to use to GridView, as I'd like to stay away from tables for simplicity when writing the jQuery.
What is the best method to do this in ASP.NET, which control would I use?
Please see the following example, for an idea of what I am trying to describe:
I've created a project which displays data by month using nested repeaters, it's uploaded on Google Docs (just click File->Save to download the .zip).
Here's a brief overview of how it works:
Assuming you have a simple Orders table in the db with the following columns
OrderId
Product
Quantity
DateOfSale
Process
Execute a stored procedure to get the months for a given year (I used EntityFramework functions, you could change this to ADO.NET,LINQ etc)
Bind the returned months to a label in the master repeater(These will be your headings)
Handle the OnItemDataBound event of the master repeater, this event runs every time an item is bound to the repeater.
Inside OnItemDataBound execute a stored procedure to get all the records for the specific month and year and simply bind the returned data to the child repeater
Add little jQuery to show and hide divs and you're set.
Code
Stored procedures:
CREATE PROCEDURE dbo.GetMonthsByYear
#Year INT
AS
BEGIN
SELECT DISTINCT DATENAME(Month,DateOfSale) AS [Month] FROM Orders
WHERE Year(DateOfSale) = #Year
END
CREATE PROCEDURE dbo.GetOrdersByMonth
#Month NVARCHAR(15),
#Year INT
AS
BEGIN
SELECT * FROM Orders
WHERE (Year(DateOfSale) = #Year) AND DATENAME(MONTH,DateOfSale) = #Month
END
ASPX:
<head runat="server">
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var showHide;
$(document).ready(function () {
showHide = function (control) {
var parent = $(control).next();
var display = parent.css('display');
if (display == "none") { parent.fadeIn('slow'); }
else { parent.fadeOut('slow'); }
};
});
</script>
<style type="text/css">
.detail
{
height:300px;
display:none;
width: 100%;
border: 1px solid black;
}
.header
{
vertical-align: top;
padding: 3px;
height: 30px;
background: black;
color: White;
font-weight: bold;
}
</style>
<title>Nested Repeater</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select year: <asp:TextBox ID="txtYear" runat="server" /><br />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" /><br />
<asp:Repeater ID="masterRepeater" runat="server" OnItemDataBound="ItemDataBound">
<ItemTemplate>
<div id='<%# Container.DataItem %>' class="header" onclick="showHide(this);">
<asp:Label ID="lblMonth" runat="server" Text='<%# Container.DataItem %>' />
</div>
<div class="detail">
<asp:Repeater ID="detailRepeater" runat="server">
<HeaderTemplate>
<span style="text-decoration: underline">Product</span><br />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Product") %>' />
<asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Quantity") %>' />
<asp:Label ID="lblDateOfSale" runat="server" Text='<%# Bind("DateOfSale") %>' /><br />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
Code behind:
protected void Search(object sender, EventArgs e)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
orderEntities orders = new orderEntities();
List<string> months = orders.GetMonthByYear(year).ToList();
masterRepeater.DataSource = months;
masterRepeater.DataBind();
}
}
protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
Label lblMonth = e.Item.FindControl("lblMonth") as Label;
if (lblMonth != null)
{
string month = lblMonth.Text;
Repeater detailRepeater = e.Item.FindControl("detailRepeater") as Repeater;
if (detailRepeater != null)
{
orderEntities orders = new orderEntities();
var ordersByMonth = orders.GetOrdersByMonth(month, year).ToList();
detailRepeater.DataSource = ordersByMonth;
detailRepeater.DataBind();
}
}
}
}
}
Result:
As it says in the title, I'm doing custom validation with FCK (because the RequiredFieldValidator doesn't work with FCKEditor). When validation fails, the callout appears, but it does not show up in the correctposition.
Generated style tag: visibility: visible; position: absolute; left: 0px; top: 646px; z-index: 1000;
Not that left is coming as 0px. (The top isn't quite right either, but it's close enough for now)
Here's my markup:
<FCKeditorV2:FCKeditor ID="FCKeditorBody" runat="server" Width="600" Height="150" ToolbarSet="Basic"></FCKeditorV2:FCKeditor>
<asp:CustomValidator runat="server" ID="cvBody" ControlToValidate="FCKeditorBody" SetFocusOnError="true"
ErrorMessage="Please enter a body." ClientValidationFunction="ValidateBody" ValidateEmptyText="true"
ValidationGroup="ValgrpPost" Display="None" />
<asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7" BehaviorID="vceBID" TargetControlID="cvBody"
HighlightCssClass="ValidatorCalloutHighlightCSS" CssClass="RecipeCalloutCSS" PopupPosition="TopLeft" />
<script type="Text/javascript">
function ValidateBody(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
</script>
Make sure you put an element with position:relative around the FCKeditor and the validator, then it will show at the top left of the FCKeditor.
<div style="position:relative">
<FCKeditorV2:FCKeditor ... />
<asp:CustomValidator ... />
<asp:ValidatorCalloutExtender ... />
<script type="text/javascript">
function ValidateBody(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
</script>
</div>
The message will now cover the toolbar and block the buttons untill you press the "x". A backgroundcolor should be added to the message to make it better visible.
If you wanted to show it inside the textarea of the editor, maybe PopupPosition="BottomRight" is better for that. Or you could overrule the generated css with an !important rule.
.RecipeCalloutCSS{ left:0!important; top:65px!important; }