BBC slider works even if javascript off, how they do that? http://www.bbc.co.uk/ - you will see that it still works if you turn off javascript
Thanks
They're using progressive enhancement. The left and right arrows on the main carousel are normal links with a CSS hover class:
<a id="dz-arrow-previous" href="?dzf=default&focusedpane=center">...</a>
<a id="dz-arrow-next" href="?dzf=default&focusedpane=left">...</a>
If JavaScript isn't enabled, clicking them moves you to the next page by following the link (without a sliding effect, at least on Chrome; CSS transitions could probably be used). If JavaScript is enabled, they hook clicks on the elements and do the nifty carousel thing.
There's nothing clever going on - it just falls back to sending a request to the server if Javascript is unavailable. If you click a link with Javascript unavailable, you're effectively getting a new page from the server - watch the URL change as you do it.
Related
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
everybody who has worked with widows 8 metro panel knows that when clicking on the arrow appeared on the left bottom of the screen, it will navigate to the applications page which is totally different from the first page.
i wanna do that on my webpage. when user clicks a block it pushes him down to the element related to that block.
is there any Jquery or JavaScript code for that? FYI i searched a lot and find nothing!
If JS/CSS is in any way similar to XAML - you'd probably want to run some translation animations on two overlaid views as described here: Activate css animation/translation with javascript
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
Anyone have any experience using the thickbox jquery plugin? I have it setup correctly, but for some reason it doesn't load my pictures. It will even go as far as to fade out and process the loading bar, but the picture itself doesn't load onto the screen. I haven't modified the code and I followed the instructions... not sure what the disconnect is here.
any ideas?
see the example # http://www.dsi-usa.com/test/track.php click on one of the gallery links in the upper left and the loading bar just pops up and chills forever. any help would be appreciated.
There is an error in thickbox.js. If you change #rel to rel on line 79, it works.
But, don't use thickbox. It's own web page has advised against it for over 2 years:
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
colorbox
jQueryUI Dialog
fancybox
DOM window
shadowbox.js
-The Management. 9.30.2009 (and Paul Irish)
If you remove the rel attribute from the anchor (rel="product-gal") it works:
<a class="thickbox" title="DSI's Modular Mac Keyboard" href="imgs/track-gallery/modmac-l.png">
<img src="imgs/track-gallery/modmac-t.png">
</a>
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?