I am following the Tutorials but I am stuck at 4. Event Proxies:
The following doesnt work for me, it just happens nothing:
<button on-click='activate'>Activate!</button>
...
ractive.on( 'activate', function ( event ) {
alert( 'Activating!' );
});
Here is a live example:
http://jsbin.com/kupetofawavu/1/
What am I missing, please?
Put your buttons inside the template and you're good.
Cheers!
Your buttons are outside of the template... move them into the template script tag, and it should work.
The buttons need to be in the template. Change
<script id='template' type='text/ractive'>
<p>Hello, [[name]]!</p>
<p>[[counter]]</p>
<p>[[format(date)]]</p>
</script>
<button id="doit">Count</button>
<button on-click='activate'>Activate!</button>
to
<script id='template' type='text/ractive'>
<p>Hello, [[name]]!</p>
<p>[[counter]]</p>
<p>[[format(date)]]</p>
<button id="doit">Count</button>
<button on-click='activate'>Activate!</button>
</script>
Related
I would like know how i could add a button that inserts things on html or php.
So here an example
Before I click the button
Before
After I click the button
After
How do I do this?
If you have to do exactly like shown in image then try,
$('#btn').on('click', function(){
var text = "> blockquote";
$('#test2').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test2">Hello world</textarea>
<button id="btn">
click me
</button>
I have a bookmarklet I want people to drag to bookmarks bar. The hings is I'd like to prevent the function is fired if accidentally the bookmarklet is clicked in the web page. How can I do so?
Thanks
<div id="bookmarklet">
Bookmarklet
</div>
Use this:
<div id="bookmarklet">
Bookmarklet
</div>
Or this:
<div id="bookmarklet">
Bookmarklet
</div>
I've corrected the HREF script code since the original would declare a function without executing it.
onclick="alert('this is a bookmarklet');return false"
I solved this way:
<script type="text/javascript">
$('#bookmarklet a').mousedown(function() {
$('#bookmarklet a').attr("href", "alert('mimmo')")
});
$('#bookmarklet a').mouseup(function() {
$('#bookmarklet a').attr("href", "#")
});
</script>
I've been looking on the internet for solutions as to why IE7 isn't opening links correctly for example
<button class="class1">Google</button>
Does IE7 not like having ?
I hear I should use jquery for this? But no one linked to any article.
According to the W3C's specifications on anchor (<a>) tags and <button> tags, you should be able to do that fine, but according to a quick Google search, you can't and/or shouldn't do it, and it doesn't work in Internet Explorer.
This article actually recommends adding Javascript, so the link can be opened in IE also:
<button type="button" onclick="window.location('http://www.expertsguide.info/')">Click Me to go to Experts Guide</button>
Although you can, you shouldn't have a button (<button>) inside anchor (<a>).
Add an event handler to the button like this:
<input type="button" value="Google" onClick="javascript:location.href = 'http://google.com';" />
Note: you should considered not doing this, for a variety of reasons. Bottom line you can (and should) style your <a> element to look like a button.
You're better off not using a button inside a hyperlink.
Style the hyperlink to look like a button.
Try these
http://www.webresourcesdepot.com/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need/
Try this:
<script>
$(document).ready(function() {
$('.class1').click(function() {
window.location = $(this).parent().attr('href');
return false;
}
});
</script>
Or simply remove the button tag and use this:
<script>
$(document).ready(function() {
$('a').click(function() {
window.location = $(this).attr('href');
return false;
}
});
</script>
To be JavaScript independent (so that it also works on browsers with JS disabled, in contrary to many other answers here), I'd suggest to just wrap it in a <form> the usual way and make it a <button type="submit"> (or <input type="submit">) instead.
<form action="http://www.google.com">
<button type="submit" class="class1">Google</button>
</form>
or
<form action="http://www.google.com">
<input type="submit" value="Google" class="class1" />
</form>
I have a webform on which i display all the details of a particular record now i want to give my client print functionality so he can print those detail. Can this be done in asp.net and if yes then how?
You can use css to specify stylesheets to use for printing. There's not really anything asp.net specific about it - it's handled by the browser.
http://www.alistapart.com/articles/goingtoprint/
Based on what I understood, you want to print part of the page, right?
One option is to use a pop up a new page with content to be printed passed from the current page and let the user print it from the pop up page.
Please refer the following demo:
Print Demo
<script language="javascript" type="text/javascript">
function doPrint()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="WithoutPrint">
This area will not print!
</div>
<div id="Print">
<!--startprint-->
This area will print!
<!--endprint-->
</div>
<input id="btnPrint" type="button" value="Print" onclick="doPrint()" />
</form>
</body>
</html>
Hope it helps...Thanks.
I have a form where the submit function takes several minutes. I'd like to display an animated gif while the submit is cranking. The code below shows the gif, but it doesn't move. What can I do to get it going?
<script type="text/javascript">
$(function() {
$("#submit").click(function() {
$("#wait").show();
return true;
});
});
</script>
<% Using Html.BeginForm%>
<%-- Various input fields here --%>
<input id="submit" type="submit" value="Submit" />
<img id="wait" src="../../Content/images/ajax-loader.gif" alt="" style="display: none" />
<% End Using%>
This problem is happening only in IE, correct? Rick Strahl discussed this on his blog some time back. Be sure to read the comments.
Animated GIF images in hidden page elements
Followig Josh's link I was able to get it to work using:
setTimeout('document.images["loadimage"].src = "../Images/loading_bar.gif"', 200);
In case anybody is still having this issue in IE (and Edge now), I managed to fix the issue by doing the following
Give the following HTML:
<div id="loader" style="display:none;">
<img src="/loading-spinner.gif" alt="Loading">
</div>
and the following Jquery:
function ShowLoadingScreen {
$("#loading-screen").show();
}
adding in the following line fixes the issue:
$("#loader").html($("#loader").html());
so you're left with
function ShowLoadingScreen {
$("#loader").html($("#loader").html());
$("#loading-screen").show();
}