I have a website, where i wanna use some simple animations when the page is loaded. The animation code is not a problem. This animation is some fading in of menu and other elements. I will call this an intro of my page. I want the end-user to see this animation ONLY when he visit a site, and dont see when he clicks some links in menu and travel around my website. I worked it out for now by putting the animation code only on fron page, but for example: what if someone gives a link to mywebsite.com/news to someone. He will go into site and he will not see the animation cause its only on the front page. Any solutions? I think about some session & cookies "if" statements with php maybe, but I'm a begginer and I dont know how to work it out.
Make your home page always the same, and just load the code of the other pages. I mean, you can use frames, or php code with include('file.php'); for example. Then your animation will be always on the same page, or just load a frame in every page of your site, and the anim in that frame.
You are asking your system (as a whole) to remember information between HTTP requests (page fetches). HTTP is by design a stateless system, so you will have to use one of the mechanisms which have been developed for remembering information: cookies or (server-side) sessions. (Actually, sessions are usually implemented using cookies, but you can think of them as separate technologies).
Sessions in PHP are quite easy to use: you'll just fire the animation when you create a new session. But you will have to work out how you are going to decide when a session is continuing, and when it has expired and you need a new one.
To destroy one php session you can do session_destroy();
Related
I'm optimizing my site speed. One of the main issue I'm facing is the homepage.
In the homepage, each article has FB/TW share buttons.
I only inserted the scripts in the footer once but I'm getting bunch of FB/TW share button requests.
Is it normal or there is something I need to do?
For every Like/Share button that you have, your browser needs to make a request to get the content. This is only executed when the browser has received the page from your server, so it does not affect the initial load time.
As CBroe mentions, the button is displayed in an iFrame. These are loaded and depending on your browser settings all at the same time or consecutive. During this time, your browser is not blocked so your used can already interact with the page.
If you want to reduce load, the only option is to remove the buttons. I think you have some index/home page where you load all the articles and for each of those a button? You could consider only showing the buttons on the articles itself, if you are really concerned about this.
But, since this is normal behaviour and your page is not blocked by loading all the iframes, this is not a big issue nor can you optimise it yourself.
I have music application in which I have simple player in footer. User can choose songs from main page list and play it in footer. Now requirement is even if user moves fro home page to other pages(profile, bookmarks) in application the footer player should not get reloaded and should keep playing audio selected on home page initially.
How do I do that? DO I need to load pages through ajax?
Edit:
I forgot to mention that development is 80% completed and footer reloads on every page load. How much of rework is needed if I have to use Ajax now?
Use PJAX. Reload just the parts of the page that you want: https://github.com/rails/pjax_rails
It's already integrated with Rails and everything you put outside of this block will not be reloaded:
<div data-pjax-container>
<!-- PJAX updates will go here -->
</div>
Here's another solution similar to PJAX and Turbolinks
https://github.com/igor-alexandrov/wiselinks
Some very good answers already, but i just wanted to explain your problem better.
HTTP requests is "stateless", which means that each request are fully independent and their is no way you can know anything about how the page was before you requested a new page. This makes it impossible not to reload the footer on each request, using only HTTP.
You can use cookies to keep information between request, so you could start the player where it stopped before the request, but it will still reload (and stop for a short duration).
You can also have the rest of the page in a iframe, and only change the content of the iframe.
However these solutions is not very good for various reasons, so i would strongly recommend the last and best solution: ajax.
The simples solution is properly pjax as #aledalgrande suggested (or wiselink as suggested by #adbeel). This will i practice make your site a "one-site-application" where you use ajax to replace specific parts of the page instead of the whole page. It should however be fairly simple to integrate, even in a existing rails application.
Since you put jQuery as a tag I suggest you either look at http://api.jquery.com/load/.
You can using plain old HTML and making it easier & faster to deploy since the app is almost 'done'. Later you should implement a better (ajax) option.
Simplified: index.html
<iframe id="mainframe" src="other.html"></iframe>
<footer>
Don't reload me pls :D
</footer>
on page navigation (links) you act only on the mainframe, leaving the footer not reloaded.
NOTE: This is ugly and may will give you problems but might serve you to do minimal modification and having your site live asap.
Then rewriting the whole thing to using ajax could be 'some work required' to 'heavy work required' depending on how the app is already implemented. note that will never be 'few or no work required'.
I am developing a web app/message board in AJAX. Ive come to the part where I need to decide how to display threads.
Should I refresh a completely new page for each thread? Or load it via AJAX. Obviously, I want each thread to be crawlable, linkable, and saveable as a favorite in your browser.
Then I saw USAToday's website (www.usatoday.com/news). Its very interesting how they load the page through a popup window, change the URI, and keep the data in the background.
This is exactly what I want, but I don't know what they are doing.
Can anyone else decipher this or lead me down the right path?
My impeccable googling skills has led me to believe that the answer lies in pushState.
http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
Essentially, it appears they are...
using the HREF of the provided link to change the URI via pushState.
using AJAX to load the contents of the page accessed via the link.
on close, they most likely use data from the newly loaded page to figure out what section its was under(sports, entertainment, etc), and reload that page.
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
I was wondering what the best way to keep my background.asp file playing throughout all of my web pages.
My website www.marioplanet.com uses ASP #includes in order to keep certain parts of my website the same. So, if I want to change a link in my header, I just need to update 1 file.
Now, I was wondering how to keep my background.asp file loaded throughout my entire site, which has all of my music functionality, even when changing pages.
Therefore, the music and backgrounds are continuous throughout the entire site.
How can I most easily do this without restructuring my entire site? Or would I have to completely redo my site?
From what I understand, you're looking for a way to keep track of the state of e.g. a music player while your visitor is navigating around on your site.
The following ideas might help:
Make your entire website an AJAX application where state is given through hash identifiers (take a look at Facebook and the jQuery History Forward plugin). With this you could start playing music and the user would navigate around the site without reloading the entire page (hence, without stopping the music).
Set a cookie with the timestamp of when the music player starts (via Javascript). Now, when a page loads, check for the existence of such a cookie and, if returned, calculate the offset between cookie timestamp and current timestamp. Setting the player to that offset will pick up the music approximately where it stopped on the last page.
Control the music in a separate pop-up window. Old fashioned and not really nice in terms of usability.
Control the music in an invisible frame that doesn't reload. Very old fashioned and with major backlashes for the user (there is a reason why traditional frames are out-dated).
Hope this helps. :)
If I understand you correctly, you are essentially wanting to have the background and music (which can be loaded in the background) never reload once the user visits the site. THe best way to do this is to make the site a completely AJAX based application, and use jQuery to load pages into divs when the user is navigating through the site.
Essentially you will want to create an index page which holds your backgound, and also contains a 'content' div. When a user clicks on a navigation button using the jQuery .load() method to load the requested page into the content div.
Another option is to go with jQuery UI, and have an element like their tabs component where you define all of the different pages of the site, and then it takes care of all the heavy lifting for you.
There are a few tutorials around for using jQuery with ASP.Net. I would definately go with it while trying to do something like this.