We Keep Coding

Include code from jQuery load() onto page source code [duplicate]

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.

How to load html from clicking a div class button without page refresh

I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.

There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.

You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}

You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/

Popup in page with custom css without overriding page's css

I've a problem that I'm not really sure if can be solved:
I want to have a modal that pops up in sites of my clients. If a user goes to a client page, after some second, my pop up will appear.
I have built my modal pop up using bootstrap, jquery and some other javascript.
The problem is: there is a way to avoid the inclusion of my css in my clients' pages? This is because, maybe, one of them does not use bootstrap and using it will change the presentation of his page.
So, there is a way to include only a javascript that calls my server to get the information it needs (css etc...)?
I thought that I could include my code in an Iframe, but there is a way to have the pop up display in the parent window?
Thank you very much!

I think I might have solved the problem with a workaround. I use a pop up that takes data from an iframe. My clients need only to include the javascript code for the pop up and nothing more; everything else will stay on my server and will be retrived once the pop up "makes" the call.

HTML, CSS and javascript editor with tabs?

Here's what I have for now :
http://jsfiddle.net/W29Wk/
(I'm using Dreamweaver with the Spry Tabbed panels)
I'd like to make something similar to JSFiddle, when you share the script...
What I need is to be able to write my HTML code in the first tab, CSS in the second and Javascript in the third one. Once I'm done, I go in the "RESULT" tab and it renders my code into HTML.
The RESULT tab does not need to be a TextArea, it can be a DIV or a iFrame, as long as it is the same size of the other TextArea.
Thanks a lot!

The result needs to be an iFrame. Jeffrey Way explained it very good in this screencast on nettuts+: How to Inject Custom HTML and CSS into an iframe
You can make the tabs tabs yourself (or just google it).
But why are you making a second tinkerbin?

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

I'm hoping I can get this question answered here...
I have a client who wants to add a PayPal "Add to Cart" button inside a Lightbox window. I was able to achieve this by placing the PayPal code inside the image title tag.
Not sure if this was the best way, but it worked.
However, here is my problem...
Now when you mouse over the image thumbnail the image title tooltip popup displays the PayPal code. Not good...
Is there a way to disable this feature? Can I tell browsers to not display this popup?
Here is the link (I only applied the code to the first two photos):
http://lancemissionart.com/index.php?Page=gallery&title=fof&gallery=msd
Thanks!

I would modify lightbox to use a different attribute instead of title, like paypalForm. Modification on line 398 of lightbox.js.
398: imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('paypalForm')));
The other option would be to only set the title attribute onMouseDown and setting it back to empty string when the lightbox is closed.

You should change from using Lightbox to Thickbox (looks like you might be experimenting with it in your code). Lightbox is for images only (even though you've made it work its pretty ugly putting all that in the title tag and pretty wrong), Thickbox will let you include your form.
http://jquery.com/demo/thickbox/

Thickbox it is not maintained any longer!