I need to make a HyperLink blink (customer requirement unfortunately) so I've decided to use this.
Could someone point me in the right direction on how to invoke this from the code behind (C#)?
So far I've tried:
private string script1 = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"javascripts/jquery.blink.min.js\"></script>";
private string script2 = "$(\".selector\").blink();";
ScriptManager.RegisterClientScriptBlock(e.Item.FindControl("hlink"), e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script1, false);
ScriptManager.RegisterStartupScript(e.Item.FindControl("hlink"),
e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script2, false);
..to no avail
Trying to mess around with RegisterClientScriptBlock and RegisterStartupScript is painful, and is completely unnecessary except in some extremely off-radar edge cases. Not only is it extremely difficult to maintain, it's also difficult to understand. And in this case the simple, direct approach will work much better for you.
In the <head> block of your page, add the following:
<!-- Assuming that you've already got jQuery registered... -->
<script language="javascript" type="text/javascript" src="Scripts/jquery.blink.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Couple of notes here:
// ".blinky" means that it will match anything with a CSS class of "blinky". This can be anything, not just hyperlinks.
// Also, I'm adding an optional object parameter to the blink() method that allows me to specify parameters that alter its behavior.
// In this case, if I just called blink() it would only blink 3 times, but I'm overriding that to blink 5 times.
$(".blinky").blink({blinks: 5});
});
</script>
Then, in the body of your page, add the CssClass="blinky" on the hyperlinks that you want to blink.
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
You can also use an asp:Repeater, code-behind, etc. to construct your Hyperlink items, just as long as you set the CssClass on the ones you want to blink.
Related
Below is my label code under a repeater with image:
<asp:Repeater ID="innerRep" runat="server">
<ItemTemplate>
<li>
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this)" style="cursor:pointer;" />
<br /> <asp:Label ID="Label1" runat="server" Text='<%#Bind("VideoName") %>' ></asp:Label>
</li>
</ItemTemplate>
</asp:Repeater>
When I click the particular image using image onclick, then the video will start playing in I frame, as well as I need video name should come below I frame in a label.
For that I used one label2 for displaying the video name below the video player.
Alter the img tag within repeater to:
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this,'<%#Eval("VideoName")' )" style="cursor:pointer;" />
I assume that you keep a html span(id=spnPlayingVideoName) for brevity, below the iframe
then within javascript you can do something like:
<script language="javascript">
function ChangeImage(getID, playingVideoName)
{
//Set label value in JavaScript
//document.getElementById("spnPlayingVideoName").value=playingVideoName;
//Set label value in jQuery
$("#spnPlayingVideoName").text(playingVideoName);
var targetID = document.getElementById("centralImage");
targetID.src=getID.alt;
}
</script>
This code is not tested thoroughly, but provided for a quick idea.
Note: Make sure that adding extra parameter to "ChangeImage(...)" function does not break other code.
If it break some other code, you may write a separate function(Eg: UpdateVideoLabel(...)) and call that as well from "onclick" event of img tag.
$(function(){
$('img').click(function(){
//make a variable with the value of a label1 based on the selected img - in your given code you can achieve this by the example bellow or using $(this).next().next().text() - > <br /> is element as well.
var videoname = $(this).parent().find("label1").text();
$('label2').text(videoname);
});
});
net , c#. I am calling a javascript by using following code . `
<script type="text/javascript">
$(function () {
$("[src='/pinterest/portals/0/Images/about-person3.jpg']").pinit();
$("[src='/pinterest/portals/0/Images/about-us-group.jpg']").pinit();
});
</script>
My c# code is
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<br />
<img ID="ImageZoom" runat="server" src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> ' style="display: inline; height:auto; left: 0pt; top: 0pt; width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ImageId") %> ' />
</ItemTemplate>
</asp:Repeater>`
if i add more images i should call javascript for all images .
You're question is vague at best, but I think this is what you're looking for:
Assign a class to the images that you want to call pinit() on.
Use jQuery's class selector to retrieve the appropriate objects.
<img ID="ImageZoom" class='pinitPlease' runat="server" ... />
$(function () {
$(".pinitPlease").pinit();
});
assuming you want to zoom images that are located in /pinterest/portals/0/Images/
you can adapt your jquery selector to select those imgages that start with that path
$("[src^='/pinterest/portals/0/Images/']").pinit();
All your images will have the word "ImageZoom" in their ID, so you can make a selector by that and find all images together.
$("[id*='ImageZoom']").pinit();
<div>
<asp:Label ID="lblClientId" runat="server" CssClass="label" meta:resourcekey="lblClientIdResource" />
<asp:TextBox ID="tbClientId" runat="server" style="width:150px; "/>
<asp:Button ID="btnClientId" runat="server" style="width:50px;" meta:resourcekey="btnClientIdResource" />
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:CustomValidator>
</div>
<script type="text/javascript">
function BtnClickClientId(session, args) {
ButtonClick(session, args, "<%= tbClientId.ClientID %>", "<%= lblClientId.ClientID %>");
}
window.onload = function () {
document.getElementById('<%= tbClientId.ClientID%>').focus();
};
</script>
<asp:ValidationSummary ID="ClientIdValidationSummary" runat="server" BackColor="LightGray" DisplayMode="BulletList" CssClass="validationSummary" EnableClientScript="true" HeaderText='<%$ Resources:GlobalResource, ValidationSummaryResource %>'/>
So this ButtonClick() method is working and has been tested independently. The problem is that when i enter nothing into the text box and click the button, the validator works as expected and appears on the screen. Then it disappears. It is also never shown in the page validation summary. How do I get this to work?
I have tried to also set a required field validator on this text box and it seems to work with that but I do not want to use two validators.
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbClientId" ErrorMessage="RequiredFieldValidator" style="position:absolute;"><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:RequiredFieldValidator>
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ></asp:CustomValidator>
This code works but I should not have to use 2 validators.
You need to set the "arg.IsValid" to "true" or "false" in the javascript function based on your requirement (i.e. to "true" when you think the validation is successful and false otherwise). Also, in the code behind file, it is always advisable to check for "Page.IsValid" property inside the click event handler of the button. So, in the javascript add this.
arg.IsValid = false;
and in code behind
protected void button_click(..)
{
if (Page.IsValid)
{
// Your code, if any exists
}
}
Hope this helps!!
I have an image that is a hyperlink. How do I access my "searchRedirect" function for a redirect from the server side after the image is clicked?
<input id="textSearch" runat="server" name="textSearch" type="text" />
<asp:HyperLink id="searchButton" runat="server">
<img alt="" src="images/SearchButton.png"/>
</asp:HyperLink>
protected void searchRedirect()
{
Response.Redirect("/NewProject/Home/?searchString=" + textSearch.Value;
}
Rather than a HyperLink, you'll want to use a LinkButton and listen for its Click event
<input id="textSearch" runat="server" name="textSearch" type="text" />
<asp:LinkButton id="searchButton" runat="server" OnClick="searchRedirect">
<img alt="" src="images/SearchButton.png"/>
</asp:LinkButton>
protected void searchRedirect(sender As Object, e As EventArgs)
{
Response.Redirect("/NewProject/Home/?searchString=" + textSearch.Value);
}
Al Kepp is suggesting that doing it this way causes the page to post back only to realize the redirect, leading to an unnecessary page load. A javascript version such as the one below would avoid the first post back:
<input id="textSearch" runat="server" name="textSearch" type="text" />
<a href="#" onclick="window.location='/NewProject/Home/?searchString=' + getElementById('textSearch').value; return false;">
<img alt="" src="images/SearchButton.png"/>
</a>
I didn't actually test that code, but I don't think I have any typos.
Either write it in JavaScript, because it is the only way how to perform that code on client side. That is necessary to make it work exactly as you wish.
Or use LinkButton as Nick Spiers said. In that case you won't see testSearch.Value in url address. (That is often good, but if you want to see it there, the best you can do is to write it in JavaScript.) But unlike Nick Spier's code, I would omit redirect command there and perform the required search action immediately. (Because redirect will cause sending two pages to client, which is not what user usually expects when he/she presses the search button.)
Or you could use javascript and get rid of an extra roundtrip to the server. Here's an example using jQuery
<input id="textSearch" class="textSeachClass" runat="server" name="textSearch" type="text" />
<asp:HyperLink id="searchButton" CssClass="searchButtonClass" runat="server">
<img alt="" src="images/SearchButton.png"/>
</asp:HyperLink>
<script type="text/javascript">
// This code should be put in a separate .js-file so it can
// be cached and the aspx page will be more SEO-friendly
$("a.searchButtonClass").click(function (e) {
e.preventDefault();
window.location = "/NewProject/Home/?searchString=" + $("input.textSeachClass").val();
});
</script>
I use css classes as selectors since ASP.Net Webforms will change the client id of the controls when they get rendered, unless you use .Net Framework 4.
I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.
so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.
greatly appreciate your time and effort.
head section
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('Panel1text').hide();
});
$("#<%=HyperLink1.ClientID%>").click(function() {
$("<%=Panel1text.ClientID%>").show();
});
</script>
body section
<asp:DataList ID="DataList1" runat="server" DataKeyField="cid"
DataSourceID="SqlDataSource1" Width="645px">
<ItemTemplate>
cid:
<asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
<br />
cuser:
<asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
<br />
blogid:
<asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
<br />
<asp:Panel ID="Panel1text" runat="server">
<asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
</asp:Panel>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>
It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:
.panel { display: none; }
Then use the following jQuery to show the element:
$(document).ready(function(){
$(".link").click(function(evt){
evt.preventDefault(); // prevents the click from leaving the page
$(this).next().show(); // show the panel
});
});
You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.
Bob