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!
Related
I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv
There are 2 pages that I made to show the problem:
1) http://4-soft.isebox.net/smcx-trouble/with-video-player
2) http://4-soft.isebox.net/smcx-trouble/no-video-player
Page 1 has a video player that uses vidly (http://vid.ly) widget to play video. I believe that this causes the survey to jump to the bottom of the page
Page 2 has no issues and the survey is shown at the right spot
I don't think it's vidly's script, other scripts that use the same technique that we use break SM widget in the same way (audio player, document previewer)...
Does anyone have an idea what's going on?
SurveyMonkeys' official answer is:
An option here would be to embed your survey using a method such as an HTML iframe instead of Javascript.
So that solves the issue, but does not answer why it jumps out.
I am trying to create a webpage with a video, and when the video is clicked on (not just the controls) I can run some JavaScript function. What I would like to be able to do is display subtitles within the video, and when one of the words is clicked, I can display some information below the video depending on the word they clicked on.
I couldn't find anything on the internet that seemed to concern anything similar to this, so thanks in advance if anyone can help.
EDIT: I am now able to get the location of the click (http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/), but I need to know how to find the location of the subtitles.
I have a popup layer on my website that show the latest news on it. Now I want to embed a YouTube video on it, that plays once the user open the website. And I would like it to stop playing after the user close the popup page. I have tried SoundCloud player and it stops when I close it.
Here is the live link.
You can also download the file source file on here (.zip):
Source Files
So I want to make the video stops playing when the user closes the popup page.
Any idea?
Thanks in advance.
Friend's
Don't try to close the facebox/fancybox pop up window. Try to create a container that holds the video file/embed code. After clicking on Close link, just remove the HTML of that embed/video file container.
Ex. <div id="myVideoFilePlay">Video File/Embed Data</div>
Script File:
document.getElementById('remodeVideoPlayer').innerHTML ="";
After that close the fancy box
Here is some information about the auto-play feature for embedding in YouTube.
http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821
"To make it autoplay, just put &autoplay=1 after the video ID so it looks like this:"
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube.com/v/XXXXXXX&autoplay=1" type="application/x-shockwave-flash" width="425" height="350">
</embed></object>
As for stopping the video, I advise you have a look here and set up some simple functions to do the pausing upon clicking "X". See: How to pause a YouTube player when hiding the iframe?
EDIT: Added more info..
I can see you set your jQuery to #dialogjj upon the site loading, and then the HTML is inside of the div so setting it to display:none; it wont stop it playing. I have an idea to make it work - there may be a better one out there with nicer jQuery but this works fine. I feel that no one is going to reply further due to the way the question was asked/not very easy to look into unfortunately. That is perhaps why you got a downvote on this question, have a look how other people ask questions here for future guide, its generally not just giving links to your website expecting people to look, instead try to pin point your problem adn what you have tried so other people can have a clue about it, but we all start somewhere so dont worry :).
My idea is that you actually set the contents FOR #dialogjj with jQuery (so the embed code is put in via the JS file and not the HTML page) and in that same way you can actually append it to get rid of that embed code. I have set up a simple JSfiddle that does this in the same fashion as you want. Its up to you to merge it into your code though :)
JS FIddle link http://jsfiddle.net/ivandude/vLrvA/2/
If you like the solution please click tick as the answer :D my first one maybe.. haha
The answer was really easy. When I used the old object embed code, it just worked. Thanks for the suggested solution but it works for iframe. But does not need any additional code.
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/