Dynamically add Like Buttons to a page - javascript

I'm building a page that is aggregating other pages in a Wordpress site, and displaying snippets of information about them along with a 'Like' button. Right now I'm using the iFrame option.
What happens is when a user clicks on a video, it displays it in a Feature area with the video, some text, and a Like button. This HTML is generated from a template and created after a user clicks on a video to watch it. There isn't a page refresh.
If I use the HTML5 version of the Like button, it never gets rendered, which I'm guessing is because the Like div never exists when the Facebook init is called. I'd like to not use the iFrame version though, because it doesn't seem to let me allow people to comment on their like.
Is there a way to have Facebook re-scan for elements to render? I know that Twitter will allow you to do this by running twttr.widgets.load() at any time to have it rescan for things to render.

Just call this function after loading the dynamic site, i am pretty sure it´s what you need:
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Related

How to make a div to be displayed even after refreshing the web page or reopening the browser

Actually I am making a web page using HTML,CSS and Javascript in which there is only one html page with functions like when a person clicks on a particular button, that the current div will not be displayed but the another div will be displayed. At last there will be a home div which will act like the home page of the website.
I want to make that home page to be displayed once a person fills all the credentials and always only the home page should be displayed even after reloading that web page or reopening the web page.
I have researched everywhere but couldn't find the exact solution of the code.
Thanks
Try with LocalStorege, hold information, and check if the condition is true, if it is just immediately execute the logic.
This should solve the problem for you.
Take a look at https://stackblitz.com/edit/web-platform-uawtkc
Tried to simulate the problem and solve it

Save a page before leaving

I have made a basic HTML file by using HTML, CSS and javascript. Based on the user's input and specific actions, I've run methods to create elements(which alter the page). And when the user wishes to go to another page via the link in the page, I want to save the changes that are made in the page.
Note: I am using Google Chrome on Windows XP
And the method execcommand() does not work on Chrome
Any help is appreciated
Thanks in advance
Then you can do two things,
first:
Detect when the user changes the page, at that time script for coping the page like:
var your_var = $(document).html();
$(document).load("new-page.html");
and then navigate a back button detection, when the user comes back to the first page just place your_var like:
$(document).html(your_var);
This is only applicable when your page navigation is done using only jQuery/ Ajax.
Second:
If you want to save state with server side scripting as well then use
javaScript.history();
this will give you the same page you left before with state.

Opening a webpage and automatically calling an OnClick function

We have a small group of guys who play the game below. We take these games and stream them on Twitch so we can watch them as a group live. We have gotten down the process of automatically opening the URL and streaming the games. However, to get the plays to show there is an OnClick function that we have to manually remote in each time and click. Is there a way we can open this webpage and simulate the click so they are turned on? If you click the link below, you'll see a yellow button called Plays. If you click it you'll see what we want to be able to turn on without manually having to do it.
http://glb2.warriorgeneral.com/game/replay/171542
This depends a lot on how you're automating the page opening.
Normally, you can simply call .click() on an element in JS. But since you want to click something on a page you don't control, it gets complicated.
If you're simply opening a new tab/window via Javascript, you won't be normally able to do this because of cross-domain JS protections. You can disable them which is not recommended--if you go this path, you'll want to load the page in an iframe and execute a callback on it: see this answer. The callback you'll want will look something like:
function(){ window.frames[0].document.getElementById('toggle_plays').click(); }
Knowing how you're doing the automation would help significantly on how to solve the problem within your limits.

is it possible to prevent oracle apex from submitting a page until a user clicks on a refresh button on that page?

I have just started working with Oracle APEX and would like users to be able to download reports from my application.The problem is I have a number of reports which have a large number of rows. Each time a user clicks on a page tab, the page is resubmitted and the query for the reports are executed again. This results in a lot of delay and is becoming frustrating for the users!
Is it possible to stop APEX from resubmitting the page until the user clicks a refresh button or is it possible to stop the query for reports from executing everytime the user clicks on a page tab?
To prevent submitting you can change the page template. Open page properties, in the section Shared Components find Templates. Near the word Page you will see a link to its template. Follow this link, then find a section Standard Tab Attributes. In the field Current Tab you will see something like this:
<li>#TAB_LABEL##TAB_INLINE_EDIT#</li>
Change this value to:
<li><a class="active">#TAB_LABEL#</a>#TAB_INLINE_EDIT#</li>
After that an active item in a menu will be displayed as a static text, not as a link.
All pages with this page template will have this behavior. If you don't need to change behavior of all pages: before changing template make copy of it, change the copy and choose the new template in a page properties.
Have you tried with the conditions?? I pretty new with Apex too, I had a similar problem, what I did was put conditions to the buttoms and regions.
After that I good a nice result. Hope it helps you.
Good luck

Using the BACK button to revert to the previous state of the page

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites

Categories