We Keep Coding

PHP Javascript, Website which loads everything into a div is there a way to make the back button work

I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)

I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.

how to find and mark all links in the web page?

I'm making an application which finds all links and buttons on the web page and
shows marks over the links and buttons (with any browser or custom application window).
Now, I'm trying to implement it with browser helper object(BHO)
and javascript. The BHO injects javascript code in the existing web site and the injected javascript finds the location of links and buttons and marks the links in the web page by analyzing DOM of the page.
However, it has many problems because there are lots of links that are coded by DHTML, javascript, flash and the like. What makes me difficult is that it is not easy to mark these links because it often moves and disappear after the page is completely loaded.
In particular, flash buttons cannot be accessed by HTML DOM, so I'm in trouble with finding such flash buttons with the above method. Therefore, it may be necessary for me to implement this application with different method or framework, but I can't find any other way to do. I think any method to find click-able object on the webpage of screen would be helpful to me. I hope you have some suggestions for me?

To highlight all normal links on a site you can use this jQuery snippet:
$('a').css('color', '#F00');
There is no easy way to highlight flash links or links by window.location in JavaScript.

jquery mobile multiple html files vs multiple page [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
In my phonegap/jquery mobile app, the multi page model is been used.
index.html have all the pages of my app, so far 6 pages .
If this app would grow too much and it turned to be 19 pages in a single html file, would it be bad?
I created other app to test and used one html file to each page. But looks like every time the page is changed, the whole DOM is loaded again, is that right?
Please tell me which structure is better for a big app

When working with jQuery Mobile first thing to think about is what kind of page template should I use. I have already talk a little bit about this topic in one of my previous ARTICLES and now I have a need to clarify this part of a story a little bit more.
To make a story short (I am not going to talk about page architecture, everything you need to know can be found in a previous link). This answer can also be found on THIS location, to be transparent it is my personal blog.
Multi HTML page template:
This is a template where one jQuery Mobile page is placed inside a single HTML page.
Good
Smaller and lighter, each data-role="page" is inside a separate HTML file and page structure is much more modular.
Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn't data-role="pšage" div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
DOM size is relatively small, only first page is permanently loaded into the DOM, any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app mainly because AJAX can be turned off.
...vs the bad
Consumes more bandwidth as each page navigation generates a new request. When moved from every page will be permanently removed from the DOM, unless cashing is turned on.
Navigating back to a previously loaded page will again generate a fresh request.
Initial page load is fast but subsequent page loads are slower then in multipage template. This can cause problems during page transitions, more so on mobile devices. Desktop browsers don't have this problem.
Much more suitable for desktop browsers then mobile browsers. Also suitable for larger applications, again this is problem for mobile devices.
Pageinit event will be triggered each time page is visited (for those who don't know this an event that replaces document ready in jQuery Mobile and thus it should run only once), which consequently causes problems with multiple event binding.
Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page.
Multipage template
This is a template where one or more jQuery Mobile pages are part of a single HTML file.
Good
Since all pages are already loaded, no additional requests are generated for navigating between pages.
First load is slower as the file size is larger, but subsequent page navigation is fast, thus making transitions much more smooth. Almost native like smooth, emphasize on almost.
Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution for a hybrid app. It works much much better as a Phonegap app then multi HTML template.
The "page" data-role element is required.
...vs the bad
Heavier. All the pages are in a single html file. Large applications with many pages will increase the DOM size.
Needs JavaScript support as Ajax Navigation is used.
Multiple page containers are present, and only the first one is shown when page loads.
Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
Heavily styled pages can become sluggish on mobile devices.
In the end, the secret of a good jQuery Mobile page architecture is somewhere in the middle.

Your code will be easier to maintain and update if you break each page into its own html file.
Sometimes you want to animate between every page, or have an input form that has the illusion of being multiple pages but is in fact multiple divs on the same page. In these and many other cases, using one page has distinct advantages. If you have no real need for that kind of functionality, though, break apart your site.

SEO and instant filtering

Hi
my web site provides instant filtering of articles via JavaScript.
Initially, 12 most fresh summaries for articles are displayed.
Summaries of ALL articles are putted into JavaScript cache-object (rendered by server in script tags).
When user click on tags, corresponding summaries for articles will be taken from JS cache-object and inserted into the page as HTML pieces.
Does it have some negative impact on how SEO-friendly my web site is.
The main problem is clear: only 12 "static" URL's are displayed and another will appear programmatically only on user interaction.
How to make the site SEO-friendly, keeping this nice filtering feature ?
When i will add a link "all articles" that will load separate page with all articles, will it solve the SEO problems ?

The way to make this work for Search Engines, user who don't have JavaScript and also in your funky way is to write this feature in stages.
Stage 1: Get a working "Paged" version of this page working, so it shows 12 results and you can click on "next page" and "last page" and maybe even on various page numbers.
Stage 2: Implement the filter using a form-post and have it change the results shown in the page view.
Stage 3: Add JavaScript over the top of the working form and have it display the results the normal post would display. You can also replace the full-page-reload for paging with JavaScript safe in the knowledge that it all works without JavaScript.
Most people use an AJAX request rather than storing an ever-increasing list in a JavaScript array.

Crawlers (or most of them) don't enable javascript while crawling. therefore, all javascript powered content won't be referenced. And your site will be considered smaller as it is by search engines. this will be penalizing for your pages.
Making a "directory" page can be a solution. But if you do so, search engines will send user to these static pages, and not through your javascript viewer homepage.
Anyway, I would not recommend to make a javascript-only viewable content:
First it's not SEO friendly
then it's not javascript-disabled
friendly
imposibillity to use history
functions (back and next)
middle click "open in a new
tab/window" won't be working.
Also you can't bookmark javascript
generated content
so is your nice feature nice enough to lose the points mentionned above?
There are ways to conciliate your feature + all those points but that's far from easy to do.

SEO and dynamic javascript HTML switching

just wondering if anyone knows anything of using javascript to set html to new content instead of linking to new pages, if this is generally a bad idea or if it kind of hurts SEO(which im kind of new to)
Basically the home page displays given content, and the links to like contact pages and stuff, just change the body content to what would normally be a separate html page. my OCD kinda bugs me when pages reload and either flash the background or its offset somehow, so i wanted to know if making sites like this was a bad idea or whatever-
i suppose at the least, i could create duplicates/hidden pages for SEO purposes

As you describe it, it is a bad idea. The right methodology is to use progressive enhancement: you develop for javascript-disabled users (such as searchbots) and then use javascript for ajax loading. So most users will benefit from an improved user experience, without preventing the rest from accessing your data.
In practice it means your regular markup for a page-based navigation menu
(products) and via javascript (such as jquery) you modify the behaviour:
$('#nav a').bind('click',function(){
$('#content').load($(this).attr('href'));
return false;
});

usually for a good SEO, you need to have the maximum pages you can, and then, if you want to use javascript to load, use ajax unobtrusive.

Breaks bookmarking
Breaks the back button
Breaks saving the page
Breaks sending a link to a friend
Breaks search engine indexing
It is possible to mitigate (to some extent) most of these, but only imperfectly and only with quite a lot of work.

In order to allow for some SEO - you can have all the data on the screen as divs. a Home div, Contact Us div etc...
With javascript, you would switch off the divs corresponding to which page you'd like.
If the user has no javascript, they see all the pages at once.
Heres an example of a site that does this with OK SEO - but switch off the javascript it all goes a bit wrong.
http://www.spideronline.co.uk/#our-work