Any idea how an iframe (or alternate solution) can be used to display a single div of a public website? We would like to display the GDAX trading charts on a monitor in the office. Looking at the public facing gdax exchange, the contains all the charts, orderbook, history, etc., but excludes the left login bar and the top white bar.View Exchange We want to cut out the unnecessary stuff and full screen the browser. Thanks!
I'd suggest user scripts Userscripts (Wikipedia)
Another option would be use a "translation" proxy: basically a proxy that parses the response and forwards a modified response to the user.
Related
I am wondering how to make sure that I only ever show/render the content (send the code to the client) if the content is loaded in an iframe in a real browser, similar to the way Facebook checks when to display their like buttons and other social utilities.
There, when trying to simply load the content using curl, even when sending cookies, session details and user agent details, it still returns nothing. When trying to load the content outside an iframe, one receives nothing. How can that be achieved? I guess it is all but a simple process that involves multiple steps. I am especially interested in the first one, namely how to detect that it is really sent from a browser and not simply curled.
Thanks.
There is no way for your server to detect if it was sent using browser or curl, as the headers are easily forged.
We're building a site for an academic institution. This institution offers many subjects, and we don't want to show all of them at once on the homepage. So we designed a homepage that shows the 2 main categories of studies, and clicking on a category will show a div with the list of subjects in that category.
Our client is worried SEO-wise about those div's being hidden on page-load. Is he correct in his concern?
It depends on how you hide them if you use a z-order or a far left off screen position they will still be read by the Google bot. if you use display none or hidden then it may have an effect on your SEO.
You're right to have concern. Google will count some of or significantly reduce content that isn't displayed on page load. I would recommend letting the text display at load, then setting it to display none via JavaScript. This way the search engine picks it up.
You can do so with a simple jQuery hide snippet like this:
<p class="remove">Text displayed on load.</p>
$j(document).ready(function(){
$('.remove').hide();
});
I read an article by Roger Johansson on this subject, and it seems that the conclusion is that as long as the intent isn't to show that content only to search engines, hiding is fine. I don't see any mention of preferring one method of hiding over the other.
In addition, in that post's comments there was a link to an answer by a Google worker that said:
Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible
In my case of course there will be such a mechanism, because we want our users to see that content, just not at page-load...
Not sure if this is a really obvious question or not, but I need to have an embedded music player continue playing while the user views the rest of the website (clicking links to view different pages, etc.). So basically splitting the page into different segments, that load seperately. Years ago I would have done this with the HTML frames but that's obviously not such a hot idea anymore.
Hopefully this makes sense, and thanks in advances for all responses.
Let's resolve the ambiguity in our use of the word 'frame'. While it is true that the <frame> tag will be discontinued in future versions of HTML, the <iframe> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:
The music player, and
A nice big <iframe> to hold the navigable portion of your website.
This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player 'static', and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new seamless attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:
<iframe src="navigable_page.html"
frameborder="0"
scrolling="no"
marginwidth="0"
marginheight="0"
vspace="0"
hspace="0">
</iframe>
Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don't have to redesign anything if you don't want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in iframes, and you won't be disappointed.
You'll have to use javascript to load each section upon user request if you don't want to use a frame. Use something like the jQuery library to make it easy on yourself, you can set it up so that all requests update certain containing DIVs based upon what was clicked.
The "hot" idea of today is to make everything become AJAX. All the navigation and stuff. It's technically thought of a bad thing but is used for the usage you describe in some big sites, namely Facebook (for chat, very similar to your case) and Twitter (for header and updates).
You'd give each page a URL like mysite.com/#some-folder/some-page/someQueryKey/someValue
Note that it is "#/" because all the pages will be only ajax calls in the same page.
Since it is the same page, you can leave the part you want unchanged when doing your AJAX transfers
For technical details on how to implement this, search for stuff about implementing hash bang AJAX (that's what it's called as the official format Google can index is called so, and the URLs usually an exclamation mark after hash sign "#!/".
It's not the easiest to implement though, and means re-design of the whole site, so, you may want to consider other options:
Pop-ups: They are not 100% dead yet, and "may" be suitable for your situation.
Reloading: Maybe just store in some cookie every short time (using JS) the data you want and check for it on page load to resume from where you ended, the user will get slight stop in between though. hence, It may not be for music player.
For the UI of the widget itself, if you need it to be in a certain place in the page regardless of the scroll or whatever (always visible) you can use CSS positioning:
.music-player
{
position:fixed;
bottom:5px;
right:5px;
}
Is not it possible to add a flex url to bookmarks. If not,Please let me know if any alternatives are there. Thank you.
There is a concept in Flex called deep linking.
You can read all about it in the docs.
You basically just need one class: the BrowserManager.
This class allows you to:
control the navigation history of your browser
set window titles for different states of your application
set specific URL's in your browser's URL bar for different states of your application
listen for changes in the browser's URL bar, so the state of the application can be changed accordingly
So you can have URL's like
http://www.myflexapp.com/#dashboard
http://www.myflexapp.com/#product/123
which can tell your application to display the right information.
Why is there a pound sign in the URL?
That's because we don't want to reload the entire application when the user changes the URL. So we stay on one page with the same app loaded; the part behind the pound signs is information that is being sent to the Flex app, which can change it's state according to this information.
You could look at: http://code.google.com/p/bookmarks-framework/
I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.