I'm creating a web app which uses facebook comments.
When the comments are loaded I need to re-size my container to fit the new size including the comments.
I'm looking for an event that's fired when comments are loaded but can't see any reference to anything anywhere. Is there an event, if so how can I access it?
Cheers
Tom
Take a look at FB.event.subscribe(). You may want to try subscribing to the xfbml.render event. You may also want to resize your container on the comment.create and comment.remove events as well
Related
I'm creating a portfolio website for a filmmaker.
I would like to know how to go to another page and change the URL when just scroll the window like these websites(http://taotajima.jp/, http://maxxhat.com/). Are these pages in one html document or multiple documents?
I searched and tried to solve it by myself but couldn't find the answer since I'm a junior developer. I would like to know at least what I need to learn to actually do it.
Thank you in advance.
A new feature offers you a way to change the URL displayed in the browser* through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.
You can programmatically invoke the back-function by running:
window.history.back();
If you need to manipulate a state (instead of creating a new one) you can use:
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
Check the example here LINK
Full Example is Found Here
So I have a very specific problem that presented itself recently (right before our planned launch day tomorrow) and I am not completely sure how to solve it. I have built our website of an HTML-template with my modest front-end skills and we are very pleased with it. However, I can't seem to solve this.
The problem:
I have a filter system that allows a user to filter articles that are presented on a page. A user can even fill in this filter on the home page, direct to the page with the articles and have the filter applied. However, if then the filter is broadened (less strict) and new articles present itself, the pictures do not show up. Found out this is the case because the flexslider behind it has to be initialized again which happens on a window load (e.g. when the window is resized). The function that controls the initialization of the flexslider is in an external js file and I am not sure whether I can call on it from my own custom.js file, so I am thinking of just calling a resize/reload window function to active it.
The question:
Can I run a resize window function (or something that activates the flexslider) without hindering user experience (more specifically, without ACTUALLY resizing/reloading the window)? I will run this on a change in the filter.
I know this is a very specific question but hopefully somebody can help me out.
Take care!
p.s. it would be ideal if I could run the actual function that loads the flexslider but this is located in an external js file.
EDIT:
Briefly some additional info. If I go straight to the article page, it has no filter active and thus shows all articles, if I then start flipping through the filter, all is good. It is however only if I arrive from the homepage with a set filter that the problems arise. You then arrive on the article page which shows only the articles that are within the boundaries, and when the filter is taken away it has problems loading the images of the new articles showing up. As if it had not loaded these because they were not open on window load the first time.
You can trigger a resize event by creating a new event and passing it into the dispatchEvent command on window. There's a nice guide here. You'll want the type of event to be resize, since that's what it's listening for.
window.dispatchEvent(new Event('resize'))
This will work for events that were added via jQuery as well as events added via addEventListener.
I managed to solve it after all by delaying the function that drops the filter values into my inputs so it loads in all images initially before applying the filter. It happens at such speed it's hardly noticeable.
Also, I did try to initiate a window resize function, it did work without actually resizing anything, but unfortunately the images did not load in properly (overlap and such).
Anyway, it has been solved. Thanks for all the input!
I'm trying to make a chrome extension that needs the state of the youtube video player, and I'm aware of the existence of the API but my attempts to actually use it have been fruitless. Can someone point me in the right direction?
You'll want to subscribe to the onStateChange event as described here: https://developers.google.com/youtube/js_api_reference?csw=1#SubscribingEvents
The states of the player are described in the documentation for the onStateChange event on the same page.
What I was looking for is that you have to call the API methods on this div and that wasn't made clear in the docs.
document.getElementById('movie_player');
Moreover if anyone else ends up here go ahead an read this:
Insert code into the page context using a content script
I want to find the co-ordinates of an iframe relative to the page in which it resides.
I am trying to call this iframe from some click event inside it.
The page contains multiple iframes.
Any help will be appreciated.
Check out http://api.jquery.com/position/ and http://api.jquery.com/offset/, one of these should get you the coordinates you are looking for. As for the click. The click even should bubble to the iframe element of the dom, so you can listen there. Something like this:
$('#myIframe').on('click',function(){
var coordinates = [$(this).offset().top, $(this).offset().left];
});
I think the lack of knowledge on iframes and how frames communicate caused the problem on my part. Well the only way I was able to solve this was to use window.postmessage to allow cross -origin communication.
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
Appreciate the help.
I want to find out what triggered an event. Namely, the notification bar on this site stackoverflow.com (the bar that tells you when someone has posted an answer to a question you're writing an answer on. It scrolls down slowly from the top and provides a really nice UI for user notifications. I've seen it work on just about ever page.
I imagine it working something (I need to find its name):
special_notification( message );
In the abstract, how do I go about finding out what the call (function name and arguments) looks like that generates that effect when all of the javascript is minified, and I have no idea what include provided it.
Download and install firebug in Firefox.
Go to the URL you're interested in, and open firebug. You might need to reload the page.
Now click on the little arrow icon on the top right hand side of firebug. This will let you highlight any element on the page and provide the corresponding HTML to that element.
Now that you have the id of the element, you should be able to find it in the javascript code. Even if it's minified, the name needs to correspond the DOM name.
To read minified js, you can use a tool like http://jsbeautifier.org.
Regarding your other concern, you want to listen to all the events on a page and know what triggered them and what is the code executed? is that correct?
Update:
There is no way to listen to all the events. If you really need to, you can set up listeners for every event, but you will still miss the custom events, which i guess are what you are after.
I'd suggest you inspect the code using Firebug to learn how the events are used in each case.
You can also listen to all the DOM Events, in jQuery you will do:
$('body').bind('DOMSubtreeModified', function(e){
console.log('DOMSubtreeModified triggered');
console.log(e); //Firebug console.
});
Where e will hold the event information.
Hope that makes sense.