I know there exist several topics about this problem but I couldn't find a solution which works for me.
So here is my problem:
My website is responsive and shows an info-box when it's loaded from a mobile device. This info-box shows a link to a tutorial how to save the website as WebApp. When the user loads the website from a WebApp the info-box should be hidden.
Here's the code I'm using (not working):
<script type="text/javascript">
if (window.navigator.standalone == true) {
document.getElementById('alertbox')[0].style.display = 'none !important';
}
</script>
The info-box has the ID "alertbox":
<div id="alertbox" class="alert alert-info visible-phone">
<button type="button" class="close" data-dismiss="alert">×</button>
This website supports iOS-WebApps. Learn more how to save this website as WebApp.
</div>
the "!important" tag is neccessary because I'm using Twitter's BootStrap and they defined a sub-attribute (display) already as !important.
Thanks in advance.
Alright after searching the web and testing various combinations I've found the solution:
<script type="text/javascript">
if (navigator.userAgent.match(/(iPod touch|iPhone|iPad|CriOS)/i)) {
if (window.navigator.standalone == true) {
//iOS WebApp
$(".alert").alert('close');
}
else {
//iOS Safari/Chrome
}
}
else {
//other browser
$(".alert").alert('close');
};
</script>
The script above automatically dismisses the alertbox with this code:
<div id="alertbox" class="alert alert-info visible-phone">
<button type="button" class="close" data-dismiss="alert">×</button>
This website supports iOS-WebApps. Learn more how to save this website as WebApp.
</div>
I hope I could help the people who might have a similar problem.
maybe this is your answer?
Determine if user navigated from mobile Safari
I hope this solves your answer.
Related
I have currently a site in wordpress https://example.com/. Through a "support" page our clients can access a web app at external link www2.example.com/apps/etc.
This process happens with a simple button that opens the app in a new tab.
<div align="center">
<button class="button" type="button"
onclick="alert('The application will open in a new window');openResetEn()">Open App</button>
</div>
<script type="text/javascript">
function openResetEn() {
window.open("http://www2.example.com/",'targetWindow','toolbar=no,scrollbars=no,resizable=yes,width=760,height=520');
}
</script>
The problem is that i want to keep secret the link from the majority of users that access it.
For example I was thinking if I can open it in a new window that does not shows the link, but I discovered that isn't possible (or is it?).
Then I thought that maybe I can the app inside the site.
<button class="button" type="button" onclick="displayIframe();">The app will open</button>
<div id="iframeDisplay"></div>
</div>
<script type="text/javascript">
function displayIframe() {
document.getElementById("iframeDisplay").innerHTML =
\"<iframe sandbox=\"allow-same-origin allow-scripts allow-popups allow-forms\"
src=\"http://www2.example.com/\"
style=\"border:2px solid blue;overflow:hidden;height:520px;width:760px;\"
scrolling=\"no\" ></iframe>";
}
</script>
But I can't get it to work.
And the reason behind that (i think) is that the site is running at php and the app c#. I found out that you can ran the whole site under asp.net (?!) (PeachPie/WP.NET).
How can I run the app inside the site?
I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;
I have a form that has to redirect the user (part of Salesforce's redirect requirement). I would like to keep the user on the page, so the redirect link is the same page with "?submitted=1" added to it. I have tried so many different scripts found online to check for the submitted url, then change the div from none to block. It does not work and I'm not sure why. Here is the latest code I have, but keep in mind, I have been searching and trying all sorts of answers from here and around the web, so I may have already tried something else.
Here is my HTML:
<div id="savingsSuccess">
<div id="alertSuccess" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>Your inputs have been sent to our team, we will send your savings estimate to email</strong>
</div>
</div>
My CSS is here:
#alertSuccess {
display: none;
}
My script is as follows:
<script type="text/javascript">
if (/submitted/.test(window.location.href)) {
document.getElementByID('alertSuccess').style.display = 'block';
}
</script>
What am I doing wrong?
You are misspelling the method getElementById, must be Id instead of ID.
Here are the docs.
I made some changes to your script.
Firstly: Id not ID, and just to make things a bit less hackish, I went ahead and split/substringed the URL
HTML:
<div id="savingsSuccess">
<div id="alertSuccess" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>Your inputs have been sent to our team, we will send your savings estimate to email</strong>
</div>
</div>
CSS is here:
#alertSuccess {
display: none;
}
Script
<script type="text/javascript">
if (window.location.href.substring(window.location.href.lastIndexOf("?"),window.location.href.length-1).split("&").indexOf("submitted=1")==-1) {
document.getElementById('alertSuccess').style.display = 'block';
}
</script>
I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered.
<div id="myModal<%= index + 1 %>" data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content bmd-modalContent" >
<div class="modal-body modal-header">
<div class="close-button">
<button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">×</span></button>
</div>
<div class='embed-responsive embed-responsive-16by9'>
<iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
EDIT:
Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.
$('[id^=myModal]').on('hidden.bs.modal', function(event) {
console.log(player);
event.target.stopVideo();
});
Update the question with more details
Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.
To detect if modal is closed you can use this EVENT
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal
UPDATE:
from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:
function onYouTubeIframeAPIReady(){
var iframe = document.getElementById("my-video");
video = new YT.Player(iframe);
}
you dont have to define attributes of Player that you create, it will take it from the iframe.
fiddle: http://jsfiddle.net/ux86c7t3/2/
Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running.
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
I've written some basic Javascript code to work with the videos on my website. Basically I have embedded video content, placed a transparent and clickable div over the video that when hovered over will play the video behind it, then pause when the mouse is moved away. It works flawlessly on Chrome and Safari (not tested IE, I work on a Mac) but not at all on Firefox, the videos do not play. I've searched here and other places for a reason why, but haven't been able to find anything. I've only started playing with Javascript the last couple of weeks so I wouldn't be surprised if I've missed something obvious!
<div class="sectionWrapper">
<a href="http://weathereddown.co.uk">
<div id="sales-section" class="video-block" onmouseover="playVideo1()" onmouseout="playVideo1()"></div>
</a>
<div class="videoWrapper">
<div id="wistia_92lscndvjx" class="wistia_embed" style="width:900px;height:506px;"> </div>
</div>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("92lscndvjx", {
videoFoam: true
});
</script>
<script type="text/javascript">
var open = false;
function playVideo1() {
open = !open
if (open == true) {
document.getElementById('wistia_8').play();
}
else {
document.getElementById('wistia_8').pause();
}
}
</script>
</div>
The Id references ('wistia_8') are correct, they refer to the code automatically generated on the page by the Wistia embed code.
Try using the same methods as the W3Schools site but instead of hooking up the buttons use your mouseover mouseout events instead!
Here
Hope this helps!