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.
Related
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.
I was trying to make an application in SharePoint and wanted to make it so that if you click on a button, it redirects you to a page and when that page loads I wanted it to instantly redirect the user to another page. ( I couldn't get the button to just redirect to the page I wanted on click, so that's why I tried doing it this way. ) I did this using a jQuery / JavaScript script. I'm new to making scripts so I was just testing and I ended up making this script:
<script type="text/javascript">
$(document).ready(function(){
Redirect();
});
function Redirect(){
$(document).load("url");
}
</script>
My problem is now that whenever that page loads, it just loads a blank page. But I can't get to the edit screen because it instantly redirects me to a blank page. I tried turning off JavaScript in Google Chrome but even though I was able to load the page without redirecting, I wasn't able to get to the edit page because it's in a jQuery AJAX drop down menu which obviously also doesn't work if JavaScript is turned off.
I would appreciate any help
EDIT: When I say edit screen I mean the place where I can edit the script. To do that I have to press a button on the page, but I can't do that since the page instantly redirects to a blank page.
Use the webpart maintenance page which allows you to remove and manage web parts without visiting the page, the instructions are as below.
Lets say your page is example.com/sites/default.aspx add the query string ?contents=1 to the page it will take you to the manage web parts page you can remove the script editor web part from there.
The other way is to use SharePoint designer to remove the web part this will also help you achieve the same 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'v paid attention to google's
https://mail.google.com/mail/?shva=1#inbox
Particularly to #inbox
This URL can be bookmarked, how this can be achieved?
Because it is being processed by Javascript via Ajax calls, that take in consideration what is inside the query string.
An example for locating in Javascript all # tags is:
urlquery=location.href.split("#");
So when first loading a page that contains that kind of links, the links on the page are generated containing # anchors that, when clicked, change the location address, but doesn't cause the page to reload, as it is an anchor to the current page. Then javascript hooks to the click event do the real job of loading the real content via Ajax.
But, since the address has changed on the location bar, you can store it on a bookmark. When that bookmark is loaded, it loads a barebone web with javascript to detect again which tags are on the address with #, and then load via Ajax the real content.
That's why, for example, the thumbnail of Twitter page on Google Chrome always shows an interface without messages, because when that thumbnail is generated, the Ajax still has not loaded the content.
I have a website where pages are loaded via AJAX so I reload the Facebook comments box and like button (FB.XFBML.parse()) each time a link is opened. I was wondering if there is a similar way to reload the Google Plus button with JavaScript for a page.
Parsetags should be set to explicit.
See: https://developers.google.com/+/plugins/+1button/
Then you can call gapi.plusone.go(); to have the tags re-parsed.