I need to create a website with an audio player that plays as users traverse through the site. At the same time, the content section needs to fade out and back in while this is still going on. So bring in another piece of HTML without reloading the page. The question I have is, how can i get all those to run correctly, while at the same time, running different Jquery plugins on different pages?
Essentially, I need to website to run like this one but with a continuous audio player in the corner or something.
http://www.chalicerecording.com/
If you notice, the page never reloads and the name of the actual file doesnt display on the browser top. This gives me the idea thats its using PHP for the page.
So with that idea, I ended up finding this.
http://www.youtube.com/watch?v=ytKc0QsVRY4
The problem im having with that is that I cant seem to figure out a way to run individual Jquery plugins on each individual PHP page without reloading the entire page. I hope this is enough info for you guys to work with.
you will need to use ajax calls to do so
jQuery.ajax
jQuery.post
jQuery.get
you also need to use jQuery fadeIn , jQuery fadeOut
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
How do you do dynamic refresh of a single div tab using php/ajax and have the content actually change the local html on the page (so that it is changed when you go to ‘view source’ in a browser) instead of just putting the change in a JavaScript object? I am trying to design a webpage that loads search results without refreshing the entire page. I use a simple hash followed by a GET/query string request to determine what content to load. This gets passed to a JavaScript XMLHttpRequest, then to some php which picks up the GET and passes it to a SOAP service and finally echo’s the SOAP results back to the XMLHttpRequest to get displayed in a document.getElementById div change. This works fine for usual display in conventional browsers. However I am concerned that search bots and screen readers are not going to recognize the majority of the content that shows in browsers because it is all contained within a client side JavaScript object.
So, I guess my first question is: is this a valid concern? If it is, is there a work around?
Thanks!
AJAX content is very hard to get indexed. Google has webmaster guidelines for AJAX. This should get you started in the right direction on getting your content indexed.
I'm inexperienced with search engine behavior but as far as i know the best option is to load the full content of your div on a php page, when the page load you can include that page inside the div, and then start using js/jquery to refresh that every so many seconds.
this way when a search bot gets on the site it will see the current content, and users will see it update.
updating the div box can be done quite easy using ajax function and jquery.
I need it so badly I have been trying it from 3 days but still i cant go for it. The question is how do i refresh an iframe without refreshing entire page for every 2 seconds? I googled so many sites but none helped, All of the codes that I found ,they just flicker the browser window and I dont want it to be happened
some of the sites i googled and more
http://www.codingforums.com/showthread.php?t=168589
http://roshanbh.com.np/2008/09/free-ajax-chat-applications-php.html
but still im unable to get it can anyone kindly explain me with a sample code please?
update
I want an iframe because I want to write users message to an html file using php file concepts and also then display the html file to users by using it as an iframe, for every 2 seconds, So that it looks like chat box.
This was my idea about creating a chat box. I have choose an iframe because i wanted to use smileys in my chat box.Kindly try to help me.Thanks!
Instead of using the iframe as a chat box, you can have the iframe be invisible and have the javascript on the page check the contents of the iframe (hopefully it's the same domain, to make things simple) and update a container on the page itself. Since the page doesn't need to reload, there won't be any flicker.
We have an application writted in PHP. Its main view is for example: /pages/index.
Now when the user clicks on certain links, it pulls in other Views via ajax. ie. a call may look like /pages/publish, so the PHP outputs the relevant html for the publish section back to the index view.
The problem we have is we'd like to be able to give the user the option of refreshing and seeing the same view as before. So, my initial thought is this, when we use .load() in jQuery, to take the URL its going to load and store it somewhere to be read by the PHP if the user refreshes. Is the best way to do or can someone think of a better way to do this whole thing?
Check out jQuery.address which should solve your problems! It allows AJAX loading of new pages, and will update the address bar accordingly. If a user saves this URL and reloads it, the script on the page can then load the correct page.
Alternatively, if you're HTML5-only, then you can try history.pushState() which will modify the URL without using the hash symbol, but support isn't 100% yet. (I don't think... it certainly behaves oddly on iPad from my experience.)
I know this question is asked many times, but I didnt find the solution, because my case is a little bit more specific.
So, I've got a jQuery based site. I need to load the external .php pages (located on my server ofcourse) but not inside a .div or other page element (the most questions here asks just for this). I need to load the whole page including it's own head's and body's and css's and etc., without need to reload the whole page.
This is because I'm using jQuery's "Supersized" plugin, and each page has a different rotating background...
Thank's a lot:) And if it's not possible to do that - I'll go as usual, with normal links:)))