I am trying to make a block clickable by a class named atnd_modal and opening a modal popup on click
I am doing this-
$('body').on('click','.atnd_modal', function(){
//modal opening code here
});
Its working fine in chrome and other browser but its not working in IE.
I also tried window instead of body but its not working.
and its working when i am trying with IE in useragent.
How can i make this working in IE ?
jquery on requires jquery version 1.7 or later ..try delegate if your version is below
$('body').delegate('.atnd_modal','click', function(){
//modal opening code here
});
And most importantly make sure to check jquery is included
Related
I have a problem with the bootstrap modal function.
I try to open a modal when clicking on a button. In Bootply everything works fine, but in my document it's not working and I can't see why.
I try to use the modal in the portfolio section of this page
Here is my code snippet on bootply which is perfectly working...
Any Ideas???
If you take a look in for example Chrome's DevTools console you'll notice an error message like:
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
this either means that jQuery isn't loaded or that Bootstrap's JavaScript is loaded before jQuery.
If you take a look in your head section you'll see that the latter is the case. Make sure that js/jquery-1.11.1.min.js occurs before js/bootstrap.min.js.
P.S. it might be that the modal still doesn't work after these changes, but you need to fix this first.
I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});
I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.
What I want to do is be able to select from the drop-down menu without the accordion changing. This works in Chrome. However, when I was trying it in Firefox, it no longer worked.
Here is my jsfiddle.
Why does this not work in Firefox?
I believe that it is this code that is causing the problem (dropdowns without the selectOne class work fine):
$(function () {
$('.selectOne').click(function(){
return false;
});
});
Try to upload the linked libraries. Have you linked the plugin. Accordian is a jQuery Plugin, not just jQuery.
The document.ondrop seems to work in chrome, but not in firefox?
Attached is an example:
http://auth.letschat.info/test2.php
If you drop a file on to the page it should pop up an alert box. However it doesn't work in firefox, but does in chrome.
When I use firefox console the document.ondrop handler is correctly set.
Assuming the original javascript looks like this and works in Chrome:
document.ondrop=function(event){
alert("hello");
}
It can be changed to work in both Firefox and Chrome. Firefox requires you to stop the default action from occuring when you drag a file over, which can be solved by using the ondragover event. The following javascript code will also work in Firefox:
document.ondragover = function(event){
event.preventDefault();
}
document.ondrop=function(event){
alert("hello");
}
I found this solution by looking at w3schools and looking for the differences between their simple example and your code.
From html5rocks on slide #18 there is also an html5 example of another way to use drag and drop by adding the listener to the page.
How to set the width and height of a pop up window in html..
I used the following piece of code..
window.open('customerlist.jsp?salespersonid=<%=salespersonid%>&flag=<%=tempite%>','popupwindow','width=50 ,height=50')
It is working fine in IE but other browser displaying popup window in full screen instead of specified dimensions. What are the options for using in other browsers??
IE result:
Chrome result:
I recommend you use jquery for popups. Standard plugins render well in all browsers. You can start right away with jquery simple modal plugin. If you still want to use window.open , this link shall be very useful http://www.gtalbot.org/BugzillaSection/Bug195867GDR_WindowOpen.html .
With simple modal, you will have to include your popup html code in the same page over which you want to display it. Keep it inside a div. and then add this pi9ece of code
$(function(){
$(".your_button").click(){
$(".your_div").modal();
}
});
In chrome, you have to set "status=0" to get it to behave properly.
Maybe it can be the solution. I didnt try it.
w2=window.open("http://www.java2s.com","mywin","width=400,height=300,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes");
Then you can connect to window that you opened.
w2.resizeTo( 400,300 );