At the top of my new WordPress Theme for a radio website, I want to have a DIV at the very top of the page which contains a small flash player which will play the radio stream.
I would like this DIV to be static and NOT reload every time the user changes pages. What would be the best way to accomplish this?
Please provide a working demo on jsFiddle or something like that.
I think there are two ways to keep the music going
Either you use frames, so top frame(preferably 0px height) never
change and play the music
or you can build your whole site with ajax you only change what you need to change and don't touck the player.
you can try it with ajax that you just pull the content on page change request via ajax and fill you DOM(except music player part) as per your requirement and then you need not to reload your music player.
Other wise if your music player code is the part of you http request then not one can stop it's re-loading.
Related
My page will have a lot of images, which will take a lot of time to load and will make it very slow, so my question is
how to make the page to download and display only the pictures that are being shown in front of you, exactly the same as performing image search with google, whenever you scroll it will keep downloading and displaying the focused images.
Thanks all.
Image lazy loading
eg Lazy Load Plugin for jQuery (http://www.appelsiini.net/projects/lazyload)
Demo: http://speckyboy.com/demo/lazy/index.html
Use ajax, you can easily detect the view port by javascript and the images dimensions, so when scrolling, all you have is to send request to populate more rows of the view, this could be tables or div.
You can't do something like that in PHP.
It has be done in JQuery.
There is a plugin that does what you need, called Lazy Load.
Take a look on this site: http://www.appelsiini.net/projects/lazyload
I am creating a website where there are many pages to scroll through using next and prev buttons. I started by creating a java slideshow, but then there where many problems creating hashtags and subsequent social like buttons for each image. I ditched that framework because 1) users with JS turned off could not enjoy the images at all and 2) it was a pain in my ass.
What I have now is a collection of many pages with an image on it where each next button has a link to the next page.
What is the best way to make the page transition look like nothing changes except for a preloaded image (header, asides and footer don't 'blink')? Much like funnycatpix.com/_pics/Cat_Lookout.htm
Keep in mind I don't want to use iframes or ajax and I want to keep jquery to a minimum. I have PHP 5 on my server, as well.
Do I cache the images of the next page? Do I cache the entire next page? Do I change the header controls to extended cache lifetime?
Without seeing any code I can't offer a lot of specific help. You can cache an image very easily just by using this:
$("<img>").attr('src', imageSource);
This can be used to preload images, so what you can do is preload the images that will appear on the "next" page when the page loads or each time "next" is clicked.
I am making a website to keep track on my moviecollection. I have a page called "list.php" which lists all my movie titles. Each title is clickable. When you click the movie, an ajax function will retrieve information about the movie from another file called getmovie.php. Then a div expands and the information is being placed inside the expanded div. That was quite easy to make. To make the site more fancy I want to switch the background of list.php to be a poster from the "clicked" movie. The database stores the path to this poster, and getmovie.php will get that. But how can I change the background in list.php to a path being stored in getmovie.php?
Basicly I have a variable containing a path to an image I want to set as background in another file. How am I supposed to code that?
Thank you :)
I think you could use javascript to change document.body.background when you call the ajax function. For example, in the playMovie() function:
document.body.background = "images/movie01.jpg";
Hope it's useful.
As I tested with different methods, It is not possible to set a page's background from another page. However you can set the image from the page itself. You should do 2 ajaxs.. First you should get the text with a simple ajax as you have done that already. and Second get the background. write a php script that gets a movie input and displays ONLY the image url in the browser and then do an ajax and set the background of the new page using the retrieved url.
Ok so i have this page. As you can see on this page I have a header that if you click on the three little dots on the right a new image and movie is displayed. this works great at the moment. The problem is the client now wants the page to rotate and I have tried this in the past but the problem arises when someone clicks on the movie and starts watching it. The page will continue to rotate and there is no way i could find to stop the rotate when the movie is clicked. I tried to wrap the video around a div tag and see if i can catch the click there with javascript but nothing..it still rotated....any ideas
The cheap and dirty solution may be to not embed the Flash player right away, but instead show a preview still of the movie that looks like the player. When it's clicked, you can kill the page rotation, and load the Flash embed code on-the-fly.
If that doesn't float your boat, try reading up on the parts of the ActionScript API that lets Flash call Javascript.
Have a look at the validated answer it sums things up: javascript onclick event over flash object
So I have my own webpage here, which is a sortable thumbnails page. The load() event activates each thumbnail when the first related image is loaded. Since I'm grabbing <img> tags and text content from a hidden div on the page, the thumb activation prevents the user from clicking through to a yet-unloaded image and then waiting while the preload takes place in the background.
The call is pretty simple:
$('#content img:first-child').load(activateThumb).each(function(){
if(this.complete || this.complete === undefined)this.load();});
the .each() catches any cached images and manually triggers the load() event. Worked great and was a fast and lean website. Now, as the site continues to grow, there are over 100 <img> tags in the single HTML file and I'm wondering if there's a conventional limit that I'm approaching. Should I split the page onto 35 different html files? Should I lose the tags and the slick preloading effect in favor of a server-side request for the images on demand?
What's your instinct, as a good programmer?
Well there is no clear limit. You can continue doing the way you have done on your site for as many images as possible.
But it's just that the user might get frustrated while waiting for all the images to get 'activated'.
So in turn what you could do is to have pagination & display say 20 images per page. This way you make the image loading relatively faster.
Also after you load page1, if the user is still in page1 you could start pre-fetching page2. So as the user clicks page2 he sees a very responsive site :)
There is no one rule here. In fact if you see Google Images now a days they do something like what you have done.
You can do it like many Web 2.0 sites do it:
In the beginning, load the images displayed on currently visible part of the page.
Then load other images when user scrolls the page down.