I am using a javascript to zoom an image on my asp.net web page. I want to put 2 buttons on it like "Zoom" "Cancel Zoom" and accordingly activate/deactivate the javascript functionality. Right now I have a css class on which the javascript operated to produces the zoom effect. The image is like:
<a id="big" href="source of image" class"classforzoom">
<img id="small" src="some small image on page" />
</a>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some code here
};
$(".jqzoom").jqzoom(options);
});
</script>
How do I programmatically do this on the onClick events on the 2 buttons?
This is what I am using in the head tag of my page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Related toggleclass() method:
toggleClass: function(F,E) {
if(typeof E!=="boolean") {
E = !o.className.has(this,F)
}
o.className[E?"add":"remove"](this,F)
}
Deactivate
$("a#cancelzoom").click(function(event)
{
$('.classforzoom').unbind();
event.preventDefault();
});
Activate
$("a#zoom").click(function(event)
{
$('.classforzoom').jqzoom(options);
$('.classforzoom').bind();
event.preventDefault();
});
Did you check out the jQuery click method and then use the unbind method to remove an event from an object?
Also since you say you are using a css class for the zoom effect check out the toggleClass() method.
Related
I have a label whose id is lblppb and have assigned an IMG tag as a string as below:
lblppb.Text = "<a href='//media.mercola.com/themes/mercola/images/view-all-health-topics.jpg' target='_blank' id='BannerLink1'><img alt='Banner' src='../Desert.jpg' height='250' width='300'onclick='alert('Hello..!!')'></a>";
This label is in div and it is showing the specified image from src, but when i click on that image i want to generate an alert...
HELP..!
THanks in advance..
They seems to be no space between the image width and the onlick event call
width='300'onclick='alert('Hello..!!')'. You have to space them as per below and then try it again.
width='300' onclick='alert('Hello..!!')'
Alternatively, since your are curious in displaying pop alert message. the the code below should get you going
<html><head>
<script type="text/javascript">
<!--
function validate()
{
alert( "Please provide your Profile Picture!" );
return( true );
}
</script>
</head><body>
lblppb.Text = "<a href='//media.mercola.com/themes/mercola/images/view-all-health-topics.jpg' target='_blank' id='BannerLink1'>
<img alt='Banner' src='../Desert.jpg' height='250' width='300' onclick="return(validate());"></a>";
</body></html>
Give me a shout if you still need further help. Sectona...
First of all I always prefer to use external script rather using static inline scripts. Inline scripts are less maintainable and in case of testing it becomes worst. But when you switch to external script it gives you the reliability to have your code in a separate module that is much more testable.
If you have option to modify your img tag I would surely tell you to do as follows :
Add id attribute in your img and keep everything same. I have named it(id) bannerImg
lblppb.Text = "<a href='http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg' target='_blank' id='BannerLink1'><img alt='Banner' id='bannerImg' src='https://lh5.googleusercontent.com/-WsZ4Q7Y156A/AAAAAAAAAAI/AAAAAAAAABM/vN1-gy0xZQU/photo.jpg' height='250' width='300'></a>";
Now add the following script in your page's head section or any external .js file,
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#bannerImg").click(function () {
alert("Hello..!!");
});
});
</script>
Note : Remember you must include jQuery before using the script.
Or,
when onclick event is fired, call a function and get your stuff done.
<script type="text/javascript">
function alertMe() {
alert("Hello....!!!!");
}
</script>
lblppb.Text = "<a href='http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg' target='_blank' id='BannerLink1'><img alt='Banner' id='bannerImg' src='https://lh5.googleusercontent.com/-WsZ4Q7Y156A/AAAAAAAAAAI/AAAAAAAAABM/vN1-gy0xZQU/photo.jpg' height='250' width='800' onclick='alertMe();'></a>";
I have the following textbox
<asp:TextBox ID="typeSearch" runat="server"/>
Also, I have the following javascript code within my head
<script type="text/javascript">
$(document).ready(function () {
$("#<%=typeSearch.ClientID%>").autocomplete('Handler1.ashx');
});
</script>
In Handler1.ashx, I have the code to retrieve from a database all the related values depending on what the user writes within the TextBox "typeSearch".
What I want to achieve is when the user clicks within the textbox to view all the values. How can I achieve that combined with my handler ?
Hope this code help you!
$("#<%=typeSearch.ClientID%>").keyup(function() {
var textValue = $(this).val();
Search(textValue);
});
function Search(keyword){
//call ajax for result search here
.....
}
I have a FB login button and want to bind it to a function but I can't seem to get it work:
<div class="fb-login-button" id="auth-loginlink"></div>
This is the line that I am trying to bind it to my fb-login-button
$("#auth-loginlink").click(function () { grantPermission(); });
<script type="text/javascript">
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
It will work if I use a normal hyper link like:
Login
Please kindly advice what am I doing wrong. Thanks.
If it's really a button might as well use the button tag:
<button class="fb-login-button" id="auth-loginlink">Login</button>
Put your javascript inside the script tag, and return false in the handler:
<script type="text/javascript">
$("#auth-loginlink").click(function () { grantPermission(); return false; });
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
... also might be a good idea to do $("#auth-loginlink").button() but not totally necessary.
Note: If your html is actually below your javascript code the above will not always work.
Am having several boxes(more than 100) that will create dynamically with
<div id="window5"></div>
<div id="window18"></div>
<div id="window190"></div>
Now If i click on one box the colour should be red,then if i click on the other box the colour should be changed to red(the first box colour should come to normal).I used some code like this,but it is not taking the css class.
How can i get the dynmic id of this case.
css file:
.selected{
color: red;
}
used javasscript code as;
<script type="text/javascript">
$(document).ready(function () {
$("div[id *= 'window']").click(function (e) {
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();
});
$(document).click(function () {
$(".selected").removeClass("selected");
});
});
</script>
That's because they are generated.
You have to use the .on statement.
$("div[id *= 'window']").on('click', function (e) {
If you're using a version of jQuery older than 1.7 please use .live() instead:
$("div[id *= 'window']").live('click', function (e) {
You will have to use jquery's .live or .on because you generate divs dynamically.
To change background color of the divs, you'll have to use 'background-color' in css instead of 'color'.
http://jsfiddle.net/fFcua/
I created ASP.NET user control with javascript function :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" Inherits="BingTranslator.Web.WebUserControl1" %>
<script type="text/javascript">
function example() {
alert('<%=ExampleButton.ClientID%>');
return false;
}
</script>
<asp:Button ID="ExampleButton" runat="server" Text="Example"/>
I want to call "example" function when user move mouse to button, so I added attribute for button:
ExampleButton.Attributes.Add("onmouseover", "example()");
It works well, but when I need two controls on same page I got a problems. ASP.NET generates code with two functions with same name, what is wrong:
<script type="text/javascript">
function example() {
alert('TestControl1_ExampleButton');
return false;
}
</script>
<input type="submit" name="TestControl1$ExampleButton" value="Example" id="TestControl1_ExampleButton" onmouseover="example()" />
<script type="text/javascript">
function example() {
alert('TestControl2_ExampleButton');
return false;
}
</script>
<input type="submit" name="TestControl2$ExampleButton" value="Example" id="TestControl2_ExampleButton" onmouseover="example()" />
And always onmouseover event on any button will call second function. I am able resolve this issue by adding java script code with client Id directly to attriburte onmouseover.
ExampleButton.Attributes.Add("onmouseover", "[Here will be javascript code]");
But it is not very harmonious solution as for me. Please advise, how I can better resolve such issue.
P.S. There will be much more Javascript code, I added two string upper just for example.
I found a solution in another site which allows you to use external file
if (!Page.ClientScript.IsClientScriptIncludeRegistered("key"))
{
string url = ResolveClientUrl("~/Scripts/file.js");
Page.ClientScript.RegisterClientScriptInclude("key", url);
}
You need to register your scripts with ClientScriptManager - this way they can be registered once, regardless of how often the control has been added to the page:
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
String cstext1 = "alert('Hello World');";
cs.RegisterStartupScript(cstype, csname1, cstext1, true);
}
You need to use this.id
$(document).ready(function () {
load_v<%= this.ID %>
});
function load_v<%= this.ID %>(fromclick) {
alert('anything');
}
So that even if you need two or more same controls in the same page they will have different ids.
Hope this Helps! cheers :)