I am looking to implement special functionality for my website, where loading a page that has multiple other consecutive pages (such as a search result) pre-loads the next page into the browser, accessible via the "forward" button. This sort of functionality is seen on the MSN News website; see the following screenshot.
I am looking to have this functionality implemented through JavaScript on a static deployment, as in, the server would just send everything client side. Is this at all possible? Where could I look for documentation for such a thing? I have already attempted to search for the answer to this inquiry elsewhere with no avail. Thanks in advance.
I'd avoid looking to use the forward button as its not a primary target but rather preload links on the page like the next button, but rather do it through something called InstaClick. If you're looking to specifically target the forward button itself best place to look is at the History API but thats browser specific. I've attached Mozillas doc on this.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
http://instantclick.io/
https://github.com/dieulot/instantclick
Related
Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.
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.
So, I'm sure this will get down voted and I'll be banned from the site because I'm a total newb that asks elementary questions/wrong questions/vague questions that irritate the community. But...I'm not sure where else to turn, this seems to be one of the best communities.
I use a live chat service. And they have this cut/paste bit of markup that you drop into your page and it'll display a jpeg indicating whether or not the chat service is open.
https://rci.ehosts.net/netagent/client/invites/chatimage.aspx?style=style0&questid=44D115D4-5242-476F-AE56-6AEECE8E9343&portid=28586436-7974-4E4B-BBDE-73E63BC3EAED&imagelanguage=en-us&customopenimage=https%3A//rci.ehosts.net/netagent/custfiles/en_chat_open.gif&customcloseimage=https%3A//rci.ehosts.net/netagent/custfiles/en_chat_closed.gif
If you drop that into a browser, it doesn't seem like anything happens. But if you set that as the src attribute of a image tag in a html page, it displays the appropriate image (chat online/chat unavailable).
My question is...can I determine the outcome of that script without dropping it into the page? Via either javascript or php? What'd like to do is make a script of my own that will determine which image is returned and do things other than just displaying the chat online/chat unavailable images.
Thanks!
EDIT: oh, the above url will redirect to the correct image if you change all the & to just &
I ended up following the redirect to see which image it takes me to. It was the only way I could think of. Ended up basically copying example #2, except that I returned the headers location, from the following link:
php manual
I am wondering if anyone can point me in the direction of learning how to update the page html and url without refreshing the page.
Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing.
Here is an example site using that effect.
http://onedesigncompany.com/
Notice the actual html is update when the section is changed as well as the url while maintaining a smooth transition with no visible page refresh. The site also works properly without javascript.
Also if anyone sees any downside to using this approach I am all ears.
If you need to re-load a portion of a page, without reloading the entire page, I would highly recommend using jQuery.Load():
http://api.jquery.com/load/
With jQuery.load() you can select a div and reload content into it from another webpage. For example:
$(".myDiv").load("/myOtherwebpage.html");
You can also specify content from a particular element on that other page:
$(".myDiv").load("/myOtherwebpage.html .myOtherClass");
However, if you need to reload all the content from another page, and change the URL to a different page, then I would just recommend linking to that page. Theres no performance benefit from doing this through jQuery.
There is, and it's called PushState.
It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. Basicly it alters the adressbar through javascript.
I might seem as nothing but it's really neat! Usually you'd do this through the hash www.example.com#/contact for example.
The latest project that I've used this technology I've used a js plugin called History.js whcih can determine if your browser supports PushState or not.
Depending on this I either bind an event to relevant links which does a pushstate and some ajax instead of loading the new site, or let the <a href=""> act normally.
That makes all browsers rather happy.
Basicly my script creates the same result with refresh as with pushstate and ajax.
EDIT:
Just a side note on that example of yours. It's quite smartly made :)
It loads new pages through ajax and gets it's HTML, but if you browse that page again it redisplay the fetched results so no unneeded ajax calls are being made.
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.