I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.
Related
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
On website foradacopa.com and most websites I develop, we load partial page content into the current DOM to create a "one page" website experience. When these partial pages have embedded tweet buttons, the first page loaded will display the tweet button properly whereas subsequent pages loaded will not. This is because the Twitter code only does it's magic once, when the code is loaded initially.
To workaround this, you need to manually call a method that will do the magic to turn your static a tag into the iframe embedded button.
twttr.widgets.load()
I found this answer at https://dev.twitter.com/discussions/5642 from #kurrik Arne Roomann-Kurrik.
I have an aspx page in one of my .Net Web application. Inside which I am having iFrame that show a URL content.
My requirement is to restrict user from using right click option. I have already implemented the Javascript code for this, but it is working only outside the iFrame on the page NOT inside the iFrame i.e. when I run the project and right click somewhere outside the frame it shows proper error message but when I right click inside the frame it, allows the user to right click (View source).
Any idea how to achieve the desired result?
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
I have a photo gallery that use modal window to display photos. During modal windows initialisation I'm inserting rest of photo functionality (share button, comment, tags, etc). Everything works well except facebook share button. From documentation you have to include following html code:
<a name="fb_share">share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
It works perfectly for static pages, but not with the pages that created on the fly.
Here is example of my javascript code (using jQuery)
//Insert share button
$.gallery.facebookLike.insertAfter($('#cboxContent #cboxLoadedContent'));
//Insert script element after share button
$('<script />', {
src : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
type: 'text/javascript'
}).insertAfter($.gallery.facebookLike);
As result button inserted but script element is not initialised, after inspection in firebug this script appears in loaded script tab but not present on HTML tab. However if you click on the share link it sends you to facebook page and when you click BACK button in your browser the script gets initialised.
What am I doing wrong and what can be done about it?
I'm just taking a guess here, but I believe the script has a function running on window onload event. Since the window is already loaded, the script isn't running.
Edit: Yes, it seems that the function FB.Share.stopScan is being run on window load. You should try manually calling that function.