First let me explain the problem:
On certain pages throughout the website im building, users can click a thumbnail of a video, and a modal (bootstrap) is displayed with that video inside, which is an embed link from various sites where the videos are hosted. The problem however, is that if the user clicks anywhere except Play/Pause, or inside the video, they are taken to the embeded videos website.
Is there anyway i can block this?
My goal is to have the user watch the embedded video on my site and not have them leave just for clicking the video player.
Im looking for a way (possibly with jQuery), to disable any, all links while the modal is shown. Or if there is another simpler way, id love to know. Thanks!
Since you haven't shared a snippet of your code or structure, we can only give limited suggestions. Try something like this (assuming your bootstrap modal is wrapped in a container with the id #myModal):
$('#myModal a').on('click', function(e) {
e.preventDefault();
/* your own logic to handle the click if you want */
return false;
});
This would prevent the default action on all anchor tags (navigation in this case) and you can add your own custom handler if you want to alert the user that they are about to navigate away from the website (don't return false in that case).
Update: Since it is possible for the embedded players in your scenario to have navigation links of their own, the above snippet will not work. The best you can do is that you detect the navigation and prompt the user confirming if they really want to navigate away from your site.
First set the following event handler to detect whenever the user clicks a link in the video and is about to be navigated away from the page:
window.onbeforeunload = function() {
if (window.isPlayingVideo) {
return "Are you sure you want to stop playing the video and leave the website?";
}
}
Then, whenever the user clicks the video thumbnail to open the modal player and start playing the video, set the following flag:
window.isPlayingVideo = true;
This will prompt the user confirming if they want to leave the page (the exact UI depends on the browser). Note that you still can't disable the navigation from your code. All you can do is to give the user a choice.
Related
i'm new to web and facing issue while hiding a UI element in a webpage from another webpage.
Scenario:
I've a WordPress site (Theme-TwentySeventeen).
I've added a Logout button programmatically on page as shown in image.
I've multiple posts,
and every post has a button (play video).
When user taps on Play Video button, an iframe appears (fancybox). It has another button "Login".
I want to show/hide Logout button on main page based on the click on "Login" button in iFrame.
I tried to access Logout button using it's ID from iFrame. But it's not part of iFrame source code. and i was not able to access it.
P.S. I can show/hide logout button from the main page using JQuery.
Query:
Is there any way in web to pass notification from one page to other pages? Please guide
i fixed this issue by accessing element from parent window. My code is as:
function showLogoutButton(){
var logoutButton = window.parent.document.getElementById('logout');
if (logoutButton) {
logoutButton.style.display = 'block'
}
}
I'm not sure if it's a good practice. Please suggest if you've any other approach.
I have a pretty big Intranet site at work, there are detailed work descriptions. There are links in the procedure that bring up pics, and I'm using Highslide. The default behavior is to bring the gallery up and dim the background. When you click outside the gallery it closes. Some of my users would like to keep a gallery up, on top so they can follow the procedure. As of now they keep having to bring the gallery up. I also have a pop up on a section of another page that pops up a modal with html in it(I have calculators popping up). The behaviors of these is they stay on top of the page until you close them. I'd like the same behavior for my gallery, is it possible?
A Highslide gallery/image can stay open exactly like an Highslide HTML popup. All you need to do, is removing the hs.dimmingOpacity setting for your gallery. Since I haven't seen your page, I can't tell where to find this setting in your gallery setup.
Highslide lets you define a function to run before closing. If this function returns true, it will close, if false, it will stay open. Without seeing your code this is the best response I can offer.
<script type="text/javascript">
var allowClose=false;
hs.Expander.prototype.onBeforeClose = function (sender) {
return allowClose;
}
</script>
The somewhere else you can add a button to switch allowClose to true, which will restore the basic closing functionality. There is also a close() function in highslide, so you could have a large button somewhere to call close().
The full set of properties, functions, and events is here-> http://highslide.com/ref/
I am trying to do something like this:
A user share the url to my page which has a small javascript based lets-say-a-game.
The shared content will display a static image and a play button inside the widget/thumbnail.
When the user clicks on the play button, I want to load the page within the shared widget inside an iframe
For example: When a souncloud page is shared, it shows the music thumbnail and a play button. When I click on the play button it displays a javascript based music player inside the share widget loaded inside an iframe. To my understanding, the trick is to use a video content as a wrapper of some sort i.e swf but couldnt figure it out exactly how to do it.
Any help towards the right direction is appreciated.
Thanks in advance!
I think Facebook will not allow you to post any script. Rather you can post links and if the user clicks on that link they will be redirected and there you can implement your code..
I have one video library website, on which I have to add one popup page which contain video list, now on that list if user click on any video, that video data should pass to parent video and play it, but Main requirement is parent page should not refresh.
I need something like,
(for example) on popup page user click on some button, let say Video001
and on parent page it shows : "You clicked Video001 from popup!!"
The browsers localstore is what you are looking for, a library like this one can help you to keep the data and on the main window you have a loop (setTimeout is your friend) that looks for new commands. All really simple to implement.
I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites