So I've got a simple site with a menu bar and a content area. When I click one of the buttons in the menu bar, it's supposed to do a quick fadeIn transition on a graphical element of the content area, and load external content into a div.
$("#button1").click(function(){
$(".contentdivs").fadeIn(1000);
$(".content").load("external.html");
});
This works exactly as intended in Chrome, Safari and Firefox, but not in Internet Explorer.
In Explorer, clicking #button1 will trigger the .Fadein and the .load (I can see the transition and the external data render very briefly) but then the entire page refreshes, and the external content gets unloaded.
Any ideas why this is happening, and how to fix it?
Is the button an anchor tag? You probably need to prevent the click event's default action and stop the event from bubbling in case there's an anchor parent to the button:
$("#button1").click(function(e){
e.preventDefault();
e.stopPropagation();
$(".contentdivs").fadeIn(1000);
$(".content").load("external.html");
});
Related
I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.
I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.
I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.
I tried using $("#image").css("display", "none");however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?
You could use $("#image").css("opacity", "0");
$(document).ready(function(){
$("#image").hide();
)};
when u return to show
$("#image").show();
or
$("#image").style("opacity", "0");
Open in iOS:
https://jsfiddle.net/rLLvd18q/31/
I have a page hosting an iFrame with an input element. The outer page has a button that removes the iFrame from the DOM. In Safari/Chrome in iOS 9.3.2 (I tested on iPhone 6s) clicking that button while the input is focused, causes the iFrame to be removed, but the cursor stays blinking on screen. Furthermore, the keyboard stays open (clicking keys does nothing). After dismissing the keyboard, clicking anywhere else in the screen causes the keyboard to pop back again.
I have already tried posting a message upon clicking the button from the hosting page to the iFrame upon clicking the button and doing
document.activeElement.blur()
inside the iFrame. Didn't help... I'm running out of ideas...
I've been trying to solve this issue in my project, and I noticed the iframe is NOT the active element. A possible workaround could be focus programmatically the iframe and then blur it.
This works fine for me. I checked the iOS forums and it seems that's an iOS9 webview bug and could be present in iOS10.
I have a webpage that has some text and some anchor tags with external links. The page is long enough that you have to scroll (vertically) to see everything on it.
I have a modal on my page that, when clicked on, adds this the class scroll-override to the body:
.scroll-override {
overflow: hidden;
}
This prevents the page from scrolling when the modal is open. When the modal is dismissed, this class is removed from the body and I can scroll again.
On IE 11/10, when the modal is dismissed, I scroll down the page to the part of the page that was not visible when the modal was open. I click on a link, and nothing happens. No error in the console, no nothing.
This only happens in IE. On the other browsers, I am able to click the links after showing and dismissing the modal, scrolling down, and clicking them.
Any ideas on why this might be?
So I have a 4 window frameset that is setup so that when the main content page loads, it changes the menu options on the left frame menu. Everything works correctly in FF and Chrome, but IE is giving me a problem. I think the problem lies in the javascript.
In IE, the menu items correctly change text, but when clicked on seem to trigger the wrong link. I have an example setup here.
Click on Customer Login on the left, then Sign Up in the main content area. From here, if you click on New Order/Browse, you'll arrive at the Create Order screen when using FF or Chrome. In IE, you'll find yourself back at the login screen.
I need help in getting the menu links on the left working correctly in IE7.
I got an iframe on my page, and a menu that the user can select from to see the gallery he wants inside the iframe.
The gallery in the iframe have the abilty to be controled by the keyboard.
My problem is that I want to change the focus to the iframe so the gallery can be control, immediately afther the user choose the gallery.
I tried a few things and every code worked on Firefox without any problem, but with Chrome, and IE nothing really worked, in IE, and Chrome I have to manually press on the iframe to be able to control it.
(I'm pretty new in JavaScript and I'm using jQuery)
This code I toke from another thread for IE problem and its still didn't work (its only workin in Firefox).
$("#LinkTest li a").focusin(function () {
setTimeout(function () {
$('#iframeBoxID').focus();
}, 100);
});
Any ideas?
I think this might solve your problem, by focusing on the content window instead of the iframe element.
$('#iframeBoxID').get(0).contentWindow.focus();