See also document-write to a specific place after page load, which is an elaboration of my post.
I used the code that gives the iframes the correct height in another script that creates iframes on the fly, see this.
I added a SPA-demo where all the 'pages' are retrieved from external files. Insertion is done with the help of a hidden iframe. This is perhaps more elegant than the original demo.
4 June 2016 I modified the lines for highlighting selected tabs, as a result of which there's no need anymore for putting IDs on the tab-links. Putting content into a panel is now dead simple: Code: <a class="display_panel" href="#some_panel" >Some tab</a> <div style="position: absolute; display: none; "> <div id="some_panel"> Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur br>bla bla. </div> </div>
<a class="display_panel" href="#some_panel" >Some tab</a> <div style="position: absolute; display: none; "> <div id="some_panel"> Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur br>bla bla. </div> </div>
2 June 2016. I added info about embedding javascript-based seamless iframes in the panels and added a panel displaying the complete source code for a basic URL-driven tabbing system.
Ddadmin, thanks for the comment. Much appreciated. My 'icons' are in fact HTML-entities. There's an overlay, but I made it invisible. Maybe I should use 'real icons' and a visible overlay. I'll give it a thought.
Nice! The interface probably could be refined- the icons, maybe add an overlay to the page that dismisses the player when clicked on etc- but overall it looks like a solid script!
I rewrote the whole thing because the converter was a little bit too simple and not user-friendly. Also, the instructions were not elaborate enough and the examples too few in number and diversity. I hope it will better serve its purpose now.
Yes. Centering is all fine now in the 4 popular iOS browsers mentioned earlier
Splendid! That caused the problem in Safari (and maybe on iOS, I can't check that). Thanks. I've corrected the error. You may have to refresh the page to see the change. In the meantime, I'm working on a way to do it without the translate method, just to be sure.
Apparently, the translate() method is not supported (yet) on iOS. Hmmm, translate in CSS transforms works fine in iOS - I think it's down to an error in your syntax (a missing % at the end of the WebKit vendor prefix lines) Code: -webkit-transform: translate(-50%, -50);
-webkit-transform: translate(-50%, -50);
Thanks for the feedback, Beverleyh! At a desktop and with my ASUS-tablet, it works on all modern browsers/WIN, Chrome/WIN included. Only one tap needed. Apparently, the translate() method is not supported (yet) on iOS. I knew about your popup image viewer, but I wanted non-modal images with a close button at the top/right Thanks again, Arie. === EDIT: even at a desktop, it does not work with Safari/WIN. I'll see what can be done about it.
Hi Arie, Just some feedback from Safari, Chrome, Dolphin and Mercury browsers on iOS (iPhone 5S and iPad) - in Mercury, the new tab/window popup does not open at all. - in all browsers, 2 taps are required to activate the in-page image (not a biggie - I think folks would just assume that they missed it the first time). - in all browsers, the image (new tab and in-page) is unfortunately not centered (the top corner is at 50%, 50%), and the [X] on the top right corner of the image is unreachable off the edge of the screen, meaning that it can't be closed. I'm not at a desk today so I'm unable to test further, but maybe you can take something from the centering CSS I used for my popup image viewer here http://fofwebdesign.co.uk/template/_...odal-popup.htm
I found a way to not only apply javascript to the videos loaded in an existing (HTML) iframe, but also to their different states. If we want to run code depending on the player's state, we must do Code: onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})" See this for all the details.
onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
Here are two examples: Code: <head> <script src="http://www.youtube.com/player_api"></script> </head> <body> <div style="position: relative; width: 319px"> <div style="position: relative; text-align: center"> <button style="cursor: pointer" onclick="player1.loadVideoById('bKZbvluHcNo')">(re)start</button> <button style="cursor: pointer" onclick="player1.playVideo()">play</button> <button style="cursor: pointer" onclick="player1.pauseVideo()">pause</button><br> <button style="cursor: pointer" onclick="player1.seekTo(player1.getDuration())">stop</button> <button style="cursor: pointer" onclick="player1.unMute()">sound on</button> <button style="cursor: pointer" onclick="player1.mute()">sound off</button> </div> <iframe style="position: relative; width: 319px; height: 280px; border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="player1=new YT.Player(this)"></iframe> </div> <div style="position: relative; width: 319px"> <div style="position: relative; text-align: center"> <button style="cursor: pointer" onclick="player2.loadVideoById('OsLap6ZNNQo')">(re)start</button> <button style="cursor: pointer" onclick="player2.playVideo()">play</button> <button style="cursor: pointer" onclick="player2.pauseVideo()">pause</button><br> <button style="cursor: pointer" onclick="player2.seekTo(player2.getDuration())">stop</button> <button style="cursor: pointer" onclick="player2.unMute()">sound on</button> <button style="cursor: pointer" onclick="player2.mute()">sound off</button> </div> <iframe style="position: relative; width: 319px; height: 280px; border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="player2=new YT.Player(this)"></iframe> </div> </body>
<head> <script src="http://www.youtube.com/player_api"></script> </head> <body> <div style="position: relative; width: 319px"> <div style="position: relative; text-align: center"> <button style="cursor: pointer" onclick="player1.loadVideoById('bKZbvluHcNo')">(re)start</button> <button style="cursor: pointer" onclick="player1.playVideo()">play</button> <button style="cursor: pointer" onclick="player1.pauseVideo()">pause</button><br> <button style="cursor: pointer" onclick="player1.seekTo(player1.getDuration())">stop</button> <button style="cursor: pointer" onclick="player1.unMute()">sound on</button> <button style="cursor: pointer" onclick="player1.mute()">sound off</button> </div> <iframe style="position: relative; width: 319px; height: 280px; border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="player1=new YT.Player(this)"></iframe> </div> <div style="position: relative; width: 319px"> <div style="position: relative; text-align: center"> <button style="cursor: pointer" onclick="player2.loadVideoById('OsLap6ZNNQo')">(re)start</button> <button style="cursor: pointer" onclick="player2.playVideo()">play</button> <button style="cursor: pointer" onclick="player2.pauseVideo()">pause</button><br> <button style="cursor: pointer" onclick="player2.seekTo(player2.getDuration())">stop</button> <button style="cursor: pointer" onclick="player2.unMute()">sound on</button> <button style="cursor: pointer" onclick="player2.mute()">sound off</button> </div> <iframe style="position: relative; width: 319px; height: 280px; border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&enablejsapi=1&autoplay=0&rel=0&showinfo=0&modestbranding=1&controls=1&autohide=0&vq=large" frameborder="0" allowfullscreen onload="player2=new YT.Player(this)"></iframe> </div> </body>
Also try http://fiddle.tinymce.com to customize the editor's toolbar. It works very well. Here's an example.
I revised the script so as to make it possible to not only load files into divs on page load but also on click, using one and the same script.
I was not happy with the fact that the old script didn't allow us to write html (into the alerts) in the normal way. So I revised it. I also added the possibility to dynamically size the window. You can find the new script plus demos and explanations here.
I've once more revised the script. (Hope this is the last revision). The cleantube URLS/links are shorter now, and they contain an optional parameter for info on each cleantube video. We can now do things like: http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A?start=20&info=Very good Chopin playing http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A?start=20&end=50&playlist=4pyqLbi2wLU,mUVCGsWhwHU&info=This is a nice playlist etc. Click on http://mesdomaines.nu/cleantube/cleantube_expl.html for more info.
I made the whole thing a bit more elegant. You can now use URLs / strings like http://www.mesdomaines.nu/cleantube?...ide=0&vq=large to show YouTube without the distractions. For the details, go to http://www.mesdomaines.nu/cleantube and click on 'about this page'. EDIT: THIS IS NOW DEPRECATED. SEE COMMENT BELOW.
Recent Visitors
Go to Profile
Mark as Read