I would like to disable lazy image loading, so I want to run the following js code before FrameLoadEnd event is triggered.
$('#images img').each(function() {
$(this).attr("src", $(this).attr("original"));
});
Is it possible?
You can execute JavaScript in FrameLoadStart, the event is fired very early in the page load lifecycle, before the DOM has loaded.
You execute JavaScript in FrameLoadStart to hook the DOMContentLoaded event, in practice this is often very similar in timing to FrameLoadEnd event.
window.addEventListener('DOMContentLoaded', (event) => {
//Do something on DOM load.
});
Related
In JsViews i can bind events in the following way:
<li id="myElement" data-link="{on 'click' eventHandler}">Some Content</li>
This will execute the method "eventHandler" after a click.
But I need an event which will be fired when the template is loaded. I tried "ready" or "show", but nothings works. Is there a event which can handle this?
The {on xxx eventHandler} handles events on HTML elements, such as mouse events, submit, change, blur, etc.
With JsViews, the loading of the template happens directly as a result of your own code calling the link method. So elements in the rendered template will have been rendered during that call, and immediately after you can run whatever code you want to call after rendering and linking, such as using jQuery to find your <li> element, and act on the element
JsViews also provides many life-cycle events on tags, so if you want you can create a custom tag just for handling those events:
For example, try running the following code:
<span id="result"></span>
<script>
var data = {};
$.views.tags("test", {
attr:"none",
render: function(data) {
debugger;
},
onBind: function(tagCtx, linkCtx) {
var elem = this.parentElem;
elem.textContent += " added text";
}
});
var myTmpl = $.templates('<ul><li id="myElement" data-link="{test}">Some Content</li></ul>');
myTmpl.link("#result", data);
$("#myElement").css('color', 'red');
</script>
You could use an onload event:-
https://www.w3schools.com/jsref/event_onload.asp
and attach that to the template itself. If you're limited in your options or need to do it in a specific way, explain the use case and why you want to do it a certain way and we'll try to help.
All the best,
Phil
I just found out that after upgrading to Meteor 0.5.2 (from 0.5) event handling for key events ('keypress', 'keydown', keyup') stopped working for me. Other events like ('click' & 'blur') work just fine.
Even in sample apps the code like this doesn't do anything:
Template.someTemplate.events = {
'keydown' : function(e) {
console.log(e);
}
};
The interesting thing is that this code does work (function fires) for keypresses in I'm typing inside an input type="text" or a textarea.
But elsewhere - nothing happens.
I'm testing on the latest Crome in Ubuntu 12.10.
Has anybody else experienced the issue?
Thanks,
George
The keydown event works for me for html that is editable. Input fields or contenteditable tags fire the keydown event.
But if you're asking how to handle keydown events on the body, this thread might help:
You can take a look at this thread: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/uHy--xIGH8o.
Basically, for now, you can attach an event handler to the body element directly. In the example in the above link, he waits until the template is rendered, and then used jQuery to attach the handler:
Template.myTemplate.rendered = function() {
// Assuming you're using jQuery
$('body').on('keydown',function() {
console.log('key pressed');
});
}
The Meteor team is apparently going to include better support for attaching body level events soon.
You could have simply enclosed
$('body').on('keydown',function() {
console.log('key pressed');
});
in meteor.startup function
I have a website with master page. I want to catch a user trying to close the browser/tab. When I try using onunload in the body tag, it fires not only when I try closing the browser, but also when I navigate to another page.
Any idea how to only catch the event of closing the browser?
You can't distinguish closing the browser from navigating to another page. In both cases the current page is unloaded.
update: maybe you can handle some cases with some jquery, i.e. whenever a link is clicked, set some flag to be able to distinguish it from closing the window or entering a new URL:
<body onunload="checkForClose()">
...
<script>
var _isNavigation = false;
$(document).ready(function () {
// whenever a link is clicked set _isNavigation to true
$('a').click(function () {
_isNavigation = true;
});
});
function checkForClose() {
// show an alert if _isNavigation is not set
if (!_isNavigation) alert("closing the browser (maybe)");
}
</script>
I have an asp.net page with some JQuery tabs. Everything works ok.
I added a dropdownlist in one of the tabs, that causes a postback. After the postback I want the same tab to be selected.
I initialize the tabs as:
<script type="text/javascript">
$(document).ready(function() {
var $myTabs = $(".tabsDiv").tabs();
</script>
Then, on the PageLoad event, I inject a script to select the tab:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", "$myTabs.tabs('select', 1);", true);
For some reason this doesn't work. The script is running but the tabs are not selected.
Is it because the RegisterClientScriptBlock places the script in the bottom of the page and, for some reason, it runs too late?
Any help is appreciated.
Thx in advance
Calling $myTabs.tabs('select', 1); I think results in an error. $myTabs is not a global variable. It's scope is only in $(document).ready(function() { ... });
Can you try with $(".tabsDiv").tabs('select', 1); and see if it works?
Regards...
It might run too early... bottom of the page is good, try this instead:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect",
"$(document).ready(function() { $myTabs.tabs('select', 1); });", true);
Basically, it also runs this code at the ready event.
Is there a way to execute script when an UpdatePanel process is finished.
I have a page that allows "inserting", "copying", and "editing" of a record.
This is all done on an UpdatePanel to prevent a page navigation.
Somewhere else on the page I would like to print a "flash" message - like "You have successfully entered a record." It is not near the UpdatePanel and I'd like to use a jQuery effect on the message so it fades out after 4 seconds. How can I send script back with the UpdatePanel or have it execute after a UpdatePanel refresh? Should I write script to an asp:literal? thoughts?
Yes:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
And then:
function endRequestHandler(sender, args)
{
// Do stuff
}
Documentation here and here. Keep in mind that this will fire for every AJAX request on the page.
This should do the trick:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
//Jquery Call
}
function EndRequestHandler(sender, args)
{
//Jquery Call
}
</script>
Here is an article for how to do it using ScriptManager's static method RegisterClientScriptBlock. Tried it and works like a charm.
http://csharperimage.jeremylikness.com/2009/06/inject-dynamic-javascript-into-aspnet.html
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_beginRequest(function () { alert('here1') });
requestManager.add_endRequest(function () { alert(here2') });
Source: http://www.howtositecore.com/?p=36
The Sys.WebForms.PageRequestManager.getInstance() method works great for me as well.
I work with a lot of pages that contain multiple Updatepanels and I've learned that this will automatically fire even if the Updatepanel you don't want it for refreshes. So inside the function that fires on the event make sure you have something like:
function BeginRequestHandler(sender, args) {
if (args.get_postBackElement().id == "ID of the Updatepanel") {
// do stuff here
Bruno,
First, to answer your direct question. In your callback that is being called by the update panel, you should be able to use a RegisterStartupScript call to invoke a JS method . Then in your JS method, you would show the message and then you can use do a:
setTimeout('$('#myMessage').fadeOut("slow")', 4000);
to have it fade away after 4 seconds.
To go one step further, since you're already implementing JavaScript, I would invite you to check out this article about UpdatePanels. If possible, I would try to send Ajax calls to do your inserting, copying, and editing and this would further simplify your user feedback and would prevent excess info across the wire.