How to trigger a button automatically that is within an embedded site? - javascript

I have a twitter timeline embedded on my site and I want it to automatically scroll to the bottom of my timeline. Auto scroll is working, but the embedded version of twitter has a "Load More Button" that needs to be activated in order for the timeline to scroll any further down.
Some other things I have tried are getting the class name using the google developer tools, but that doesn't seem to work either. I am not sure if I can actually access those because those classes are not directly stated in my HTML file. Currently I am thinking that I need to first get the class name of the embedded timeline, then from there in the same function access the load more button HTML class.

If the twitter timeline is embedded in an iframe, calling the global document object refers to the main DOM, but the nested iframe has its own. Just use window.frames["nested-frame-name"].document instead.
Using your code example you should correct
var loadMoreButton = document.getElementsByClassName("twitter-timeline");
into
var loadMoreButton = frames["twitter-frame-name"].document.getElementsByClassName("twitter-timeline");

Related

parent location reload at same scroll

I'm not a programmer and I manage for work a web platform based on php+mysql with a prototype engine, where data form are opened/passed to server using the old modalbox script.
Until let's say one year ago or so after editing ora adding data in the modal window and closing it the parent page reloaded to the same scroll point I was.. and this was very useful because the platform generate very long data list.
Actually this don't work anymore and I'can't find the way to make it work.
Here's the code I use on the form closing button:
Continue
I also add two infos:
I've parent page list with anchor generated dinamically by a db query, that could be used in the child modal..
could be great to avoid reload of page and update data dinamically, but may be this is another step beyond
use this JS function to reload or refresh current Url on body scroll
<body onscroll="location.reload();">
After some experiment I've found a custom function in the ajaxtabs.js and used it for applying a simple rewturn false;
so in the end here's the code
MYINSTANCE.onajaxpageload = function(pageurl) {
return false;
};

Share button with different pages

I researche it quite a bit, and thus it seems simple, I couldnt find the answer.
So I have a website that has different articles,each with a custom facebook share button. Every time the user wants to share, I activate javascript sdk and it works. However it shares the opengraph tags that are defined in the header. How would I do that dynamically ? I want to share the specific content of the article ? Is opengraph the right way ?
I assume that your use case is something like the main page in a blog,
where you wish to display several articles in the same page,
and have a like button for each one.
However, the way Facebook crawls your page, it looks at the open graph meta tags for this main page only.
You wish for each of the share buttons to be specific to each post instead.
Have a read of the instructions on this page
In your situation, her is what you will need to do:
Set the data-href attribute of the individual page that the share button is for
For the individual pages, set the open graph meta tags appropriately
This way, when facebook queries your page open graph meta tags, it will not do so on the main page, but instead on the pages you have specified.
Another approach, that will give you more fine grained control, would be to use Facebook's Javascript SDK.
The one that you are looking for, in this case, would be the Share Dialog.
Essentially, here you create your own buttons by hand, and trigger the Facebook Share API using Javascript manually too.

JQUERY UI - tabs - load data into a tab, without using IFRAME - Alternative options

I currently have a JSP page, containing a Jquery UI based accordion (based on left hand side of the page), that in turn when you select an option in this accordion, it launches a new tab (the tabs are based in the centre of the page)
The content that is loaded into my new tab, is from a JSP page that I have within my project. I am doing this with IFRAME, but I wonder if there is a way to load this JSP's data into the tab without it being an IFRAME?
This JSP contains a dynamic data, images and text.
It would be cleaner if it was output displayed within the tab itself and not an IFRAME - the usability for this isn't great.
What alternative options to IFRAME could I have for doing this?
You can use jQuery's load function, it is very simple and easy to use.
A good example of this can be seen here: http://jsfiddle.net/SO_AMK/TR2kn/ (click expand)
A simpler example: http://jsfiddle.net/SO_AMK/TR2kn/1/
But, please be warned that this cannot load data across domains so the data must be on your server (there are some workarounds but they get complicated)!

Place pointer on div or other page element in javascript

I'd like to help the site visitor navigate a page on my site. For this I'd like to have a javascript auto navigation that will place the pointer on different page elements. Is there a way in javascript to place the pointer on the desired page elements: div, button, span...?
Similar question asked here : Move Mouse Cursor Javascript
Basically your options are using the method in the linked post, or using libraries like http://amberjack2.org/ to visually guide your users around the page / site.
you can not move the pointer using javascript. you can only set the focus to an element of your choice.

How to create a local HTML page in phone gap

I am doing the application in phone gap,But I have a problem that for switching the view,I dont know how to create a another view. But when I google it I get some relevant informaion like, I have create a local html file and then using the htmlcode i can switch the view.
If any one is having any relevant information regarding this please give me some idea.
My method for doing this is using ajax to load in my other pages. Essentially I have multiple html files and my main UI. When a button is clicked I fire an ajax request to load that new page and then animate it in using CSS animations ( which get hardware accelerated ).
remember to load the new page's data into a container div, so the rest of your UI can stay put.
You can create a separate HTML file for a separate view and use JQuery for functionality. Suppose that when you click on button, just redirect to another HTML file or whatever your need is.

Categories