The Scenario
Using jQuery, I have a page that has a popup overlay containing locations marked using Google Maps.
The overlay works using 2 pages setup as follows:
The main page opens an overlay via a text link to a map. The complete map page is then loaded into the overlay.
The map page itself contains Google's API and initialization code to load the correct map.
As they are, the overlay and map work fine providing I load the whole map page.
The Problem
My problem is, I don't want to load the complete page, I want to load just the particular div holding the map.
I'm using jQuerys Ajax "load" function, (as follows) to load the complete map page.
wrap.load(this.attr("href"))
If I try to change this to load a particular DIV (as follows), the pages DIV content is loaded correctly, except the Google API is not loaded, meaning the map does not display.
wrap.load(this.attr("href")+" #map_wrap")
I have tried including Googles API and initialization code on the first main page that opens the overlay, however, this still doesn't work.
I've also tried embedding the code within the loaded DIV, again, no luck.
The Question
Is there a way to load the map pages API script along with the DIV?
After rearranging the page coding, I solved the problem.
I included the Google Maps API code into the main page that opens the overlay, then when the overlay is opened, I needed to call the Google Map initialize() function.
Problem solved.
Just for the sake of completeness (if it's not too clear for others from your answer), is worth mentioning that it wasn't working because by just calling the DIV element, the necessary Javascript statements (which were outside the scope of that element) weren't being started nor called.
To solve it, you could have started them before using your load method or, as you did, as the general invocation of JS files.
Related
Many aspects of my site are dynamic. I am using jquery.
I have a div which once the DOM is ready is populated using load().
Then if a button is clicked, using load() once again, this value is replaced by another value.
This kind of setup is common across my site. My homepage is essentially lots of dynamically loaded, refreshed, and changeable content.
What are the repercussions of this for SEO?
Ive seen sites where each page is loaded using load() and then displayed using the animation functions... It looks awesome !
People have posed this question before, but noone has answered it properly.
So any ideas? JQUERY AND SEO??
Thanks
EDIT
Very interesting points. I dont want to overdo my site with jaascript.. just where neccesary to make it look good - my homepage however is one place of concern.
So when the DOM is readY, it loads content into a div. On clicking a tab, this content is changed. I.E No JS, No content.
The beauty here for me is that, there is no duplicated code. Is the suggestion here that i should simply 'print' some default content, then have the tabs link to pages (with the same content) if JS is disabled. I.E sacrifice a little duplicate code for SEO?
As far as degrading goes, my only other place of concern is tabs on the same page.. I have 3 divs, all containing content. On this page two divs are hidden until a tab is clicked. I used this method first before i started playing with JS. Would it perhaps be best to load() these tabs, then have the tab buttons link to where the content is pulled from?
Thanks
None of the content loaded via JavaScript will be crawled.
The common and correct approach is to use Progressive Enhancement: all links should be normal <a href="..."> to actual pages so that your site "makes sense" to a search spider; and the click() event overrides the normal functionality with load() so normal users with JavaScript enabled will see the "enhanced" version of your site.
If your content is navigable when JavaScript is turned off, you'll be a good ways toward being visible to search engines.
Note that search engine crawlers won't be submitting any forms on your site, so if you have any or elements that are meant to be navigating between your site's content pages, that content is not navigable by search engines.
Here is a guidelines how to make Google to crawl content loaded with ajax: http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I use jquery load() asynchronous page load. It greatly improves user experience, but not seo-friendly. Here's the only solution I have found so far:
On first load I do not use jquery load() and try to write cookie with javascript.document.cookie = 'checkjs=on';
On next page load if php script finds this cookie it means that javascript is enabled and jquery load() can be used. If there's no such cookie then javascript is off (probably spider came), so jquery load() is not used.
if (!$_COOKIE['checkjs'] || $_COOKIE['checkjs']!='on'){echo 'js is off, hello Google!'; } else {echo 'js is on, can use jquery load';}
This way I can be sure that most of users can benefit from asynchronous page blocks load, exept for the very first load. And spiders get all content too.
In your case you could just load the same page with new parameter that makes another tab active. Spider is gonna be happy.
I am using the Google Maps Places API to have the ability to autocomplete searches for places. Currently, I am loading in the Google Maps JavaScript API with the following code:
window.onload = function () {
var autocomplete = new google.maps.places.Autocomplete(input);
The issue with the code above, is that I have to wait for the page to be fully loaded, before the Places API is loaded into the page. This results in a few seconds of me being unable to search even though to me, the user, it seems as if the page is fully loaded.
The reason that it is currently placed within the window.onload is because the JavaScript Places API needs an input field to attach to, which needs to be loaded before I try to access it.
My question is, is there any other way of loading in the Google Maps Places JavaScript API to not have a few seconds of the page seeming like it's loaded? Or, is there anything else I can do to have this issue avoided?
You can remove async and defer from your link to load it synchronously. I am not sure if it is the right thing to do but it will definitely fix your issue.
You could disable your input field, and/or overlay your page with a busy indicator of some sort early on, then only enable the input field and get rid of the busy indicator in your onload function, after you set up autocomplete.
I found that if I place the script after the HTML element is loaded, the browser will still show that the page is being loaded as the Google Maps Places API is loaded in.
In this sharepoint site collection, there is a home(main) page and subpages all of which retain a page layout. I use the standard $(document).ready() function to apply certain styles after the page is loaded. However, static locations for images are not applying correctly to subpages, and using relative locations doesn't work for the main page. How do I apply certain jQuery scripts to just the subpages and not the main page?
An example address would be
//somepage/SitePages/Home.aspx is being modified by using $(document).ready()
and how would I be able to execute a script on a page like
//somepage/subpage/SitePages/Home.aspx
by using(something similar to)
$(document == '../subpages/SitePages/Home.aspx').ready()
I'm ultimately trying to implement a script in jquery that would modify any subsite's homepage without changing the root's homepage.
Issue:
I have a dialog page in a jQuery Mobile document which contains a small Google map to show a location. I want to load the map before loading the dialog page. As in:
$("#dialogPage").bind("pagebeforeshow", function() {
initializeSmallMap();
});
However, Google Maps works incorrectly whenever the div the map is contained in is has a display proprety of none (see Google Maps Display:None Problem). And since this function is executed before the page is actually loaded, the containing div naturally has a display property of none.
Now, obviously, there's a simple solution to this. All I need to do is initialize the map after the page has been shown, which makes the div have a display property of block:
$("#dialogPage").bind("pageshow", function() {
initializeSmallMap();
});
However, since the dialog has already been loaded, there is an annoying, noticeable flicker when the map appears.
Question:
How do I get rid of the described flicker?
Possible Solutions:
Making the div containing the map have a display property of block before the dialog is loaded. If I wasn't using jQuery Mobile, it would be simple and painless to implement this effect while still hiding the map until needed:
position: absolute;
left: -10000px;
display: block;
However, since jQuery Mobile automatically overrides page styles, I don't know how I could get this to work.
Explicitly telling the Google Maps API the size of the div containing the map. I Googled this option and had no luck, but considering my terrible Googling skills, I would not be completely surprised if this was actually possible.
Others - I'm open to any ideas on how to get rid of the flicker effect. The above are just some possible solutions.
$("#dialogPage").promise().done(function() {
//Code to execute when map is loaded.
});
You could try it out. Just hide the element with the attr() and display it with attr() when promise().done is executed :) And you should be in no use of display properties.
Ref - Promise
I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>