I am trying to have a flash-based music player on my page which continues playing a song even when you refresh or go to another page within the web site.
I whant do this like facebook footer
i read this topic
How does Facebook keep the header and footer fixed while loading a different page?
but i have loadpage() and location.hash problem
if someone know how its made plz tell me
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++)
{
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}}
CSS:
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
I have done so
this code not worked, i want to do not refresh area for music player like google videos or facebook task bar
I have done so
function links() {
//var header = document.getElementById("header");
var headerLinks = document.getElementsByTagName("a");
for (var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
loadPage(href);
window.location.hash = "#" + href;
this.blur();
return false;
}
}
}
window.onload = function() {
links();
}
i whant to all links to modify but it's not worked
It looks like you are pretty new to javascript. If that is the case then doing a full ajax site is probably not the place to start. I think you should try going old-school and using frames to accomplish this. (This is how Google Video used to function, and Google Images still uses this technique.)
<html>
<frameset rows="200px,*,200px">
<frame src="yourPageHeaderWithFlashPlayer.html" noresize="noresize"/>
<frame src="yourMainContent.html" noresize="noresize"/>
<frame src="yourPageFooter.html" noresize="noresize"/>
</frameset>
</html>
That would work for a 200px header and 200px footer. If you need more info: http://www.w3schools.com/tags/tag_frameset.asp.
Related
I have a simple JS scroll event that when an element gets to within 50px of the top of the window the header animates and changes colour, which is done by using getBoundingClientRect().top < 50 on a trigger element. This functionality is only on the home page of the site.
Is there anyway of having it so when a user visits another URL/page on the site, and then comes back to this page via the browsers back arrow, that the previous animation state is still applied? If the page reloads and starts at the top again it doesn't matter, but if you click back to the page that uses this code, the menu transition happens even if you return to part of the page that was past the trigger point. I don't want to force the page to the top each time because this page is going to have downloadable and searchable info on, so that it would be real pain to be sent back to the top of that page each time.
I've given a working example below and via the CodePen link, the problem is of course on CodePen and StackOverflow when you go to a different URL and then click back to URL in question it actually reloads the page from scratch again, which doesn't happen as standard browser behaviour on day-to-day websites.
Codepen: https://codepen.io/anna_paul/pen/bGvPWRj
In that back end I'm using PHP, and I do have access to this is there needs to be a server side solution.
Any ideas or suggestions appreciated.
Note: On the actual site this scroll event is invoked via a debounce function, but I have removed this for code simplicity.
let triggerElement = document.getElementById('trigger-element'),
header = document.getElementById('h')
let menuChange = function() {
if(triggerElement.getBoundingClientRect().top < 50) {
header.style.background = 'black'
header.style.transition = '1s'
} else {
header.style.background = 'red'
header.style.transition = '.15s'
}
}
window.addEventListener('scroll', menuChange)
body {
margin: 0;
height: 200vh;
}
#h {
display: flex;
justify-content: center;
background: red;
color: #fff;
position: fixed;
top: 0;
width: 100%;
}
#trigger-element {
margin-top: 150px;
padding: 1rem;
background:blue;
color: #fff;
}
<header id="h">
<p>HEADER CONTENT</p>
</header>
<div id="trigger-element">Trigger Element</div>
I recommend using localStorage for this particular use case, because it can easily be implemented alongside your current method:
const triggerElement = document.getElementById('trigger-element');
const header = document.getElementById('h');
const animationTriggered = localStorage.getItem('animationTriggered') === 'true';
let initialLoad = true;
const menuChange = function() {
if (animationTriggered && initialLoad) {
header.style.background = 'black';
} else if (triggerElement.getBoundingClientRect().top < 50) {
header.style.background = 'black';
header.style.transition = '1s';
localStorage.setItem('animationTriggered', 'true');
} else {
header.style.background = 'red';
header.style.transition = '.15s';
localStorage.setItem('animationTriggered', 'false');
}
initialLoad = false;
}
window.addEventListener('scroll', menuChange);
This will remember the previous state and apply the black background color if the animation was previously triggered. This adds a small amount of overhead, but in a real-world scenario it should not have any noticeable impact on the performance of the application.
I am making my own Wordpress plugin for my own website to see what I can do. I used the code here (Making a simple javascript Image gallery) for the basis of it and I want it to cycle through all the set images and then go back to start and loop all the images when the user presses the 'next' button. What would be the most efficient way of achieving this?
I am new to JS so I have no idea what to do. I have searched Google and didn't find how to do it
var myImage= new Array();
myImage[0]="/wp-content/plugins/gallery/imgs/img1.png";
myImage[1]="/wp-content/plugins/gallery/imgs/img2.png";
myImage[2]="/wp-content/plugins/gallery/imgs/img3.png";
var ImageCnt = 0;
function next(){
ImageCnt++;
document.getElementById("whiteBox").src = myImage[ImageCnt];
}
If you need the PHP file for the plugin as well (contains 'next' function) just ask and I will send it
just add
if(ImageCnt >= myImage.length){
ImageCnt = 0;
}
or you can make it better by
ImageCnt %= myImage.length;
This 2 methods will work the same
If you don't understand the second method (%) please read this article https://www.digitalocean.com/community/tutorials/how-to-do-math-in-javascript-with-operators#modulo
var myImage= new Array();
myImage[0]="https://placekitten.com/200/300";
myImage[1]="https://placekitten.com/g/200/300";
var ImageCnt = 0;
function next(){
ImageCnt++;
ImageCnt %= myImage.length
//if(ImageCnt >= myImage.length){
// ImageCnt = 0;
//}
document.getElementById("whiteBox").src = myImage[ImageCnt];
}
#whiteBox{
width:100%;
height:300px;
}
.next{
padding:10px;
border:1px solid #000;
display:inline-block;
cursor:pointer;
}
<img id="whiteBox" src="https://placekitten.com/200/300">
<div class="next" onclick="next()">next</div>
Meta: A similar question about locally stored A/V files can be found here: Clickable "positioning" hyperlinks to A/V (locally stored on your website and “hidden” behind a poster image).
Dear people from the Stackoverflow community,
The application
I am having an iframe <iframe name="video"... which is named video, and which is to be seen as the "main player" of a certain video.
Since I haven't been able to get interactive transcript on this video yet, I call different playing/starting positions in the video using: 1:00, e.g. for second 60.
This is working fine when the <iframe name="video".. is already "active": then the link shifts the video's playing position inside the iframe. This is great!
However it is not working fine, when the <iframe name="video".. isn't "active" yet, which is the case: then the link then opens in a different browser tab, instead of inside the iframe (or where the iframe is supposed to show up).
What I mean by hidden
What I mean with the iframe not being "active" is the following: it is "hidden" behind a "poster image" via the following code:
<div onclick="play();" id="vid" style="...; background: ... url('...poster.image.url...') no-repeat center;-webkit-background-size: cover; ...;overflow:hidden"></div>
<script type="text/javascript">function play(){document.getElementById('vid').innerHTML = '<iframe name="video" ... src="//www.youtube.com/embed/...?&...start=0"></iframe>';}</script>
In other words: i specifically don't want "<a target="_blank""-behaviour. I guess the target="video" is not working properly now, since the iframe is "hidden" behind the poster image.
I know for sure this behavior isn't occuring when the iframe wouldn't be hidden at all. I tested this multiple times. Further more, with the current "hidden" poster feature, this behavior is also not occuring when the poster image is clicked FIRST (before clicking on a <a href="...></a>).
If you would to see this behaviour for yourself, you can see it on my site. The best is to look/CTRL-F for "stef", and open the ▾̲ ̲u̲n̲d̲e̲r̲l̲i̲n̲e̲d̲ ̲t̲o̲g̲g̲l̲e̲, which you will find there.
So how to sucessfully "target" the "hidden" iframe without opening a new browser window/tab?
Any help would be greatly appreciated. Many thanks, Vincent Verheyen.
Well here we are! The fiddle.
HTML
Your html will contain both facades and jumpers to accomplish what you asked.
What's a facade?
facade: "the principal front of a building, that faces on to a street or open space."
This will be the image shown before you play the video or click on any jumpers, it's html will look like this:
<div class="videoFacade" data-name="video1" data-video="ByJFdTFEwF4" data-start="8">
<img src="http://i.imgur.com/xeUiWGn.png" />
</div>
What's a jumper?
A jumper is an anchor that will update the iframe's url to the desired time in the video, it will look like this:
JavaScript
window.addEventListener("load", initVideoFacade);
function initVideoFacade() {
var allFacades = document.querySelectorAll(".videoFacade");
for (var i = 0; i < allFacades.length; i++) {
var facade = allFacades[i];
setUpFacade(facade);
}
var allJumpers = document.querySelectorAll(".videoJumper");
for (var i = 0; i < allJumpers.length; i++) {
var jumper = allJumpers[i];
setUpJumper(jumper);
}
}
function setUpJumper(jumper) {
jumper.addEventListener("click", function (e) {
e.preventDefault();
jumpTo(jumper);
var video = jumper.dataset.video;
var facade = getFacadeByVideo(video);
if (facade) playVideo(facade);
return false;
});
}
function setUpFacade(facade) {
facade.addEventListener("click", function () {
playVideo(facade);
});
}
function getFacadeByVideo(video) {
return document.querySelector(".videoFacade[data-name=" + video + "]");
}
function getIframeByVideo(video) {
return document.querySelector(".videoIframe[data-name=" + video + "]");
}
function updateVideoSource(iframe, start, end) {
var iframeSrc = iframe.src.replace(/start=[0-9]+/i, "start=" + start);
var hasEnd = iframeSrc.indexOf("end") != -1;
if (hasEnd) iframeSrc = iframeSrc.replace(/end=[0-9]+/i, "end=" + end);
else iframeSrc += "&end=" + end;
return iframeSrc;
}
function updateFacadeData(facade, start, end) {
facade.setAttribute("data-start", start);
facade.setAttribute("data-end", end);
}
function jumpTo(jumper) {
var start = jumper.dataset.start;
var end = jumper.dataset.end;
var video = jumper.dataset.video;
var iframe = getIframeByVideo(video);
if (iframe) {
var iframeSrc = updateVideoSource(iframe, start, end);
iframe.src = iframeSrc;
} else {
var facade = getFacadeByVideo(video);
updateFacadeData(facade, start, end);
}
}
function playVideo(facade) {
var start = facade.dataset.start || 0;
var end = facade.dataset.end;
var name = facade.dataset.name;
var video = facade.dataset.video;
var iframe = document.createElement("iframe");
iframe.dataset.name = name;
iframe.className = "videoIframe";
var iframeSrc = "http://www.youtube.com/embed/" + video + "?&cc_load_policy=1&modestbranding=1&autoplay=1&rel=0&showinfo=0&theme=light&start=" + start;
if (end) iframeSrc += "&end=" + end;
iframe.src = iframeSrc;
iframe.frameBorder = 0;
replaceNode(facade, iframe);
}
function replaceNode(node1, node2) {
var parent = node1.parentNode;
var next = node1.nextSibling;
parent.insertBefore(node2, next);
parent.removeChild(node1);
}
Here is a timeline:
We add the initVideoFacade() method to the load event in the page, this will make sure all our facades and jumpers are up and running before doing anything.
The initVideoFacade() method will find all jumpers and facades and set them up using the setUpFacade() and setUpJumper() methods.
The setUpJumper() method will add a click event on the jumper and tell it to jump to a determined time in the video, specified in the jumper. Also, if the video is not yet playing, it will do so now.
The jumpTo() method will update the iframe's src (or the facade initial data if the video is not playing) using a couple of regular expressions to replace the &start= and &end= parts of the iframe src.
The setUpFacade() method will simply play the video, removing the facade and inserting the iframe.
The playVideo() method will create a new iframe from a facade, replacing it and assigning it's source, start and end time to the video.
CSS
This just handles the styling of the facade and iframe :)
.videoFacade, .videoIframe {
position: relative;
width: 360px;
height: 202.5px;
margin:5px;
}
.videoFacade {
cursor: pointer;
border:1px solid black;
}
.videoFacade img {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
Hope it helped!
My webpage has an embedded iFrame which is using a 3rd party tool within my webpage which means the URL from the iFrame is coming from a different location.
I need to detect the presentation of a scroll bar within the iFrame window when resizing the page, then carrying out a task once it has been detected.
I have tried a variety of different solutions all which have not been successful.
Is this possible?
Many Thanks!
This is the first thing that comes to my mind: http://jsfiddle.net/matias/hhcKn/
just sample code!
HTML:
<div id="body"></div>
JS:
var $iframe = $("<iframe></iframe>").appendTo("#body");
var iframe = $iframe[0];
var doc = iframe.document;
//test this
var content = "<h1>Hello world</h1><br><p>more content!</p>";
//and then this
//var content = "<h1>Hello world</h1><br><br><br><br><br><p>more content!</p>";
if(iframe.contentDocument){
doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();
//this is the part that might interest you
var div_height = $("#body").height();
var iframe_height = $("iframe").contents().height();
if(iframe_height > div_height) alert("scrollbars present");
CSS:
body{
border: 1px solid red;
}
iframe{
border: none;
}
<iframe src="111.html" id="iframeid" height="300" width="800"></iframe>
<script type="text/javascript">
function resizeIFrame(){
$("#iframeid").attr("height", $("#iframeid").contents().height());
}
setInterval("resizeIFrame()", 500)
</script>
I am using javascript to periodically replace a .png picture, which ist viewed fullscreen as the only content of a site. No matter how I try, in Firefox, after being loaded (as seen via firebug), the new image is always drawn from top to bottom. This takes some seconds. Is there any way to prevent this and show the picture all at once?
This is my current javascript code:
function preloadScreenshotPeriodically(){
var new_screenshot = new Image();
new_screenshot.src = "screenshot.png?defeat_firefox_caching=" + counter;
new_screenshot.id = "screenshot";
counter = counter + 1;
new_screenshot.onload = function(){
loadScreenshot(new_screenshot);
setTimeout("preloadScreenshotPeriodically();", 5000);
};
}
function loadScreenshot(new_screenshot){
document.getElementById("screenshot").parentNode.replaceChild(new_screenshot, document.screenshot);
}
I also tried to use two images, one of them hidden. Then loading the picture in the hidden one and swapping them. Same results :/
In an other version, I fetched the image with Ajax and after loading is complete, changed the url of the img-tag. My hope was, that the browser would recognize the picture had already been loaded and fetch it from the browsercache rather than loading it. But this didn't happen and I ended up with two requests to the server for one picture and the same slow drawing of it as in my other trys.
edit:
Now I tried it like suggested in answer 1. While it works just fine if I switch the picture when I load the next one (I don't want this), trying to switch it as soon as it is loaded (what I want) results in a blank window (very short) and visible loading of the picture as described above.
this works:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
// swapImage();
}
function loadNextImage() {
swapImage();
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
this doesn't work:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
swapImage();
}
function loadNextImage() {
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
// loadNextImage();
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
The problem can be seen here (in firefox problem like described above, in chrome there are no pauses between pictureloads and there is a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test.html
And here, what Rob suggested in answer 1 without any changes (displays the picture fine in firefox, but not in chrome - there I get a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test0.html
sounds like the image is "progressive" ( interlaced) and the preload needs more time for it to complete download.
You can set a width and height to the image also for a more stable presentation
( poss )
using
?defeat_firefox_caching=" + counter;
means you never cache the image ( which has confused me about your question ) - remove that line( unless you need it for something you haven't mentioned)
update: Can you try ...
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showNewImage() {
screenshotCount = screenshotCount +1;
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
var nextImage = "<img src='screenshot.png?defeat_firefox_caching="+screenshotCoun+"'/>";
document.getElementById('loaderWin').innerHTML = nextImage;
}
var showImages = setInterval("showNewImage()",5000);
</script>