I have 2 divs on a page. When user clicks button1 an iframe is loaded into div1 and the same is true for button2 and div2. The iframes are loaded through ajax and get trusted through the $sce.trustAsHtml. the html itself looks like this:
<div ng-bind-html="video.trustediframe"></div>
This will be the result:
<div ng-bind-html="video.trustediframe"><iframe id="iframe1"></iframe></div>
Everything works and I can see the video, but when the user clicks button2 I would like to close the feed to the first video and remove the iframe so I do angular.element('#iframe1').remove(). Now once the user clicks on button1 again the iframe wont get loaded do the DOM again although the div with the ng-bind-html="video.trustediframe" is still in place.
I've tried reassigning the video.trustediframe variable(which is a function as $sce.trustAsHtml returns a function) and then doing $scope.$apply but that didn't help reinserting the iframe. Are there any other approaches can I use to get this behaviour right?
I was able to get the desired behaviour by keeping track of the currently active player.
So with <div ng-if="video.isPlaying" ng-bind-html="video.trustediframe"> </div> I have only one active player per page and whenever the user switches between different tabs the previous player gets removed from dom.
Related
I have an Iframe embedded like this:
<iframe id="foo" src="http://www.something.com" style="width: 90%; height: 300px"></iframe>
Each time the page loads focus gets lost from the top of the page and switches to this Iframe that is in the footer.I was wondering how can i remove the focus from this and make the page load "normally"?
Thanks!
Update: Yes, iframe is being loaded from another source (not the same domain)
if assumed the iframe is not served from the same domain.. you can place any other focusable dom element after the iframe in the footer with autofocus set as true. And if that does not work please try the following in the parent main window:
$(window).on('load', function() {
setTimeout(function(){$("body").focus()}, 100);
};
OR going by vanilla JS
window.onload = function() {
document.getElementById("some-focusable-element-from-parent-window").focus();
};
Well there is too much things we can do, for example on window load we scroll to the top with scrollTop function, ...etc
But with such methods, where we take off the focus and move back to the top when the window is completely loaded, it will come with a glitch and no well effect.
After a while of thinking, and experiences, i come with that:
We remove the iframe with display:none, when the dom is ready. Next when the window is completely loaded, we bring it back. To do that efficienly, we write a style class like that:
.display_none{
display:none;
}
and we will add this class to our iframe, when the document is ready, and remove this class when the window is fully loaded. There is the code :
$(document).ready(function(){
$("#myFrame").addClass("display_none");
$(window).load(function(){
$("#myFrame").removeClass("display_none");
});
});
Now there is a situation where this will not work! if the iframe is created and added with another script, then the dom may be loaded but not the iframe element itself (because the script may not have create it yet)! And that was the case in my case .
SOLUTION:
put the iframe in a container, let say a div container, and apply the method above to this container. All should work nickel! On dom load the div is hidden, next when the window is fully loaded, it restore it back! and you get your iframe, which will be loaded and get displayed. No glitch, and efficient.
We can use sandbox attribute to block automatically triggered features (such as automatically playing a video or automatically focusing a form control).
<iframe src="https://muthukumaran-m.github.io/" sandbox></iframe>
Check this for more info
Assuming you have iframe in a same domain:
You can do this :
$("#foo").on('load', function() {
$("body",parent.document).focus()
};
It is already 2019 and I kept on having the same issue on some of my mobile websites. The focus kept on being stolen by the contact form near the footer.
My rushed method may not be the most elegant way of doing this, but by modifying your iframe form to be hidden on mobile devices, with an expand/collapse button to make it visible on demand, you'll stop this jump from happening.
The simplified code:
<div class="d-block d-sm-none visible-xs"><!-- show only on mobile devices -->
<a class="btn" data-toggle="collapse" href="#blockToControlID" role="button"
aria-expanded="false" aria-controls="blockToControlID">
Expand/Collapse iframe Block
</a>
<div class="collapse" id="blockToControlID">
<div class="card card-body">
<iframe src="path-to-form"></iframe>
</div>
<div>
</div>
<div class="d-none d-sm-block hidden-xs"><!-- hide on mobile devices -->
<iframe src="path-to-form"></iframe>
</div>
For bootstrap 3 you would use visible-xs and hidden-xs to hide or show the snippets of code.
For bootstrap 4 you would use the "d-block d-sm-none" to show the mobile-only code; and "d-none d-sm-block" to hide the mobile-only code.
Scripts needed on footer:
<script src="js/jquery/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
The jQuery version will depend on your bootstrap 3 or 4 setup.
popper.js must be loaded before bootstrap.js, otherwise it'll fail to work.
Prior to reaching this hack, I tried every possible thing. Sadly, none of the JS, jQuery and reCaptcha hacks posted by other members and forums worked. The page load would always default to the form.
While the solution could be nicer with some js/ajax/jquery or even php, this simple code is quick and works fine with bootstrap enabled websites. Modify as needed.
I hope this helps
I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:
.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.
I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}
I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show/hide the iframe
Here is what I tired(jQuery function) but it wont seem to work when I preview in chrome from expression web
jsfiddle.net/darego/Z62P7/2/
All you need to do is to call the function after the document.ready:
$(document).ready(function() {
hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");
});
Just placing it in document ready will not be enough.
You can make your function MUCH easier.
function hideToggle(elem) {
$(elem).toggle();
}
This means: If the element is visible > hide it, if it is hidden > show it.
But for your initializing (hide both divs) i would recommend doing it by css.
iframe {
display:none;
}
Also you need to setup click handlers for the buttons. If you need help on this write me a comment or edit your question please.
In my system I have a main page, that when clicking on any element on that page a new page is opened, in some cases (button click on child page) from the child page will be open a new page, and so on... when I decide to close any child I need to close all levels to the top and refresh the top level page because on the child level I'm doing Database manipulations and I need to see them when I am returning to the main page.
Every thing is working great, the only problem is with the refresh of the first page!
I've tried doing onunload... in the last child...and I've tried JQuery focus for the page itself....
Any one have any idea please?
Some code:
1) this is in the top parent page:
$(document).live(
'focus',
function()
{
window.location.reload(true);
}
);
2) this is in the last child (the one that the top parent page calls):
<body class="RTL" onunload = "opener.close()">
And I've tried many variations of that....
If any one have any idea it will help a lot, because as for now I need to do Setinterval() and refresh the main page all the time and this is really not nice....
Consider using iframes to show the child pages. That way, the child can use window.parent.reload() to reload the page.
If that is not possible: Did you check that opener actually contains the correct window? It might be the second-last child instead.
I have a 2-frame HTML page:
FrameA contains a list of links to various pages, or anchors within pages
FrameB displays the individual pages.
Some of the pages contain slideDown sections, with trigger text - i.e. clicking this text shows/hides the slideDown section below it.
The parent element of the trigger element also contains an anchor, for example:
<li class="expandable">
<p><a name="myanchor3"></a>Trigger text</p>
<div class="slideDownSection">
...
</div>
</li>
I want to detect whenever an anchor is requested in the URL used to load the page into FrameB. If there is an anchor ref, I want to check whether the anchor falls within an "expandable" element and, if it is, I do a slideDown on the element below to display it.
I can do this easily enough by putting some Javascript inside a $(document).ready(function(){ ... }); in the page that gets loaded. This checks the location.hash value and processes it if one's found. However, this only works when the page gets loaded into FrameB.
If a page is already loaded into FrameB and I click a link in FrameA that points to another anchor within the same page, I can't capture that event. The page position changes to display the anchor at, or near, the top of the page - without reloading the page.
My question is:
What event handler can I use in the page displayed in FrameB to detect that an anchor on that page has been requested via a link clicked in FrameA?
Note: The content of FrameA is auto-generated, so I can't use an onClick event for the page in FrameA, I can only work within the pages that get displayed in FrameB.
IE8 supports the hashchange event that you can listen for. For all other browsers, you have to poll the value of location.hash using setInterval():
var lastHash = null;
function checkHash() {
if (window.location.hash != lastHash) {
lastHash = window.location.hash;
// Do your hash stuff
}
}
setInterval(checkHash, 100);
On - window.location.hash - Change? is a very similar question.