I am trying to have a little dynamics work in this website http://peps.sqps.nl
Everything seems to work well untill I test the website in IE, it just doesnt give any content back.
The js I use is as following:
$(document).ready(function(){
$('li.navItem a').click(function(){
var url = $(this).attr('href');
$('article').load(url + ' article', function(){
$('article').fadeTo(1200, 1);
});
return false;
});
});
the html of the dynamic part is as following, where the <article></article> part is supposed to act dynamicly.
<section id="content">
<div id="article">
<article>
content is in here
</article>
</div>
</section>
The solution given here on similar problems didnt fix the bug
Anyone has any ideas?
Thnx!
Your URL looks like it would be badly formed.
url = "http://site.com/path/to/page"
load_url = url + ' article'
alert(load_url); // Displays "http://site.com/path/to/page article"
Is this what you really want?
Probably the IE is making cache of your code.
See this post: jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari
Add .each(function(){...}); after .load , it should works in IE and Chrome.
$('#<%=image1.ClientID %>').load(function () {
//things to do
}).each(function () {
if (this.complete) $(this).load();
});
Related
I tried some old answers from other questions, but none of them resolved my case. The toggle function is not working fro me. Below is the jquery:
jQuery(document).ready(function($) {
$(".team-member").click(
function() {
$(this).children(".description").toggle();
}
);
});
HTML:
<div class="team-member" data-style="meta_below">
<img alt="yes" src="source/to/img.jpg" title="Candice Rauter">
<h4 class="light">Name</h4>
<div class="position">Position Goes Herer</div>
<p class="description">blablabla</p>
</div>
Link for the section of the website(#our-team section).
Any help would be appreciated!
Thanks!
When you inspect your site on mobile, using sdk and Chrome, you get
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
warnings on your page.
Try using .on('click') rather than .click()
$(".team-member").on('click', function(){
$(this).children(".description").toggle();
});
This should work even for dynamically added elements. And I think your page is using ajax to load its content (from what I can see in the inspector).
I have one HTML file as shown below:
<html>
<head><title>jQuery beginner</title></head>
<body>
<div id='my_div'>Some random generated value</div>
<button id="submit_button">submit</button>
</body>
</html>
I want to keep <div id="my_div"> element hidden until <button id="submit_button"> is clicked.
So in my Javascript file I wrote following code:
$(document).ready(function() {
$('#my_div').hide();
});
$('#submit_button').click(function() {
$('#my_div').show();
});
This script and HTML is working fine in Google Chrome and surprisingly it works in Internet Explorer 9 also but doesn't work in Firefox.
I read some other questions on SO and tried alternatives like
$('#my_div').css('display','block'),
$('#my_div').css('display','inline-block'),
$('#my_div').css('display','block-table'),
$('#my_div').attr('style','display:block')
but none of the above solution is working in Firefox.
Is there any solution to this problem?
One more thing I observed is, if I keep the div visible at page load time and later using button click event toggle it's display, it works.
Any clue why this is happening only in Firefox?
But you missed to try this :)
That is, wrapping the event binding code into the doc ready handler.
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Wrap your code inside ready handler:
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
I'm working in a Flex4 application, using javascript, in the "index.template.html" document. I'm having an issue being able to use onbeforeunload with Firefox. The application works perfectly in IE, but the exact same one doesn't sit well with FF. (See below)
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.$(application)||window.$(application);
flex.unloadMethod(); //custom method to log out the user
}
function after(evt)
{
}
</script>
From what I've found, FF doesn't seem to register onbeforeunload events, so I found that the popular thing to use instead is binding with JQuery. So, I deleted the above code and replaced it with the below code, but it doesn't display a pop-up when the user tries leaving the page in both IE and FF. Anyone that seems to be using JQuery for this seems to be doing the exact same thing, so I don't know what's going on.
<script type="text/javascript">
$(window).bind("beforeunload",function(event){
return "This should create a pop-up";
});
</script>
Eventually it would be nice to call the "flex.unloadMethod" like in the first bit of code, but for the time being I'm just trying to get a pop-up to work so I know I'm on the right track. Any insight would be greatly appreciated.
Try:
<script>
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});
</script>
Example: http://jsfiddle.net/AeztA/3/
Would like to add that i figured out that you can't use an empty string in firefox.
It has to be at least 1 blank for example as return.
var text = 'Exit Message';
$(window).on('beforeunload', function(){
return " " + text;
});
I have tested this in Chrome and all good, but Firefox is lazy.
Part of HTML in question:
<div id="print" style="display:none;"></div>
And Javascript follows it like:
$('.print').click(function(){
printF($(this));
return false;
});
function printF(dugme){
$('#print').html("<iframe src='http://example.comli.com/index.php/prijava/pogledaj/"+$(dugme).attr('name') +"' onLoad='this.contentWindow.print();'></iframe>");
};
Thank you
Is the problem that the click event is not getting fired or that your IFRAME is not getting loaded?
Anyway, I think I got this working in Firefox. I had to put your click function into the document#ready event though. Like this:
$(function(){
$('.print').click(function(){
printF($(this));
return false;
});
});
the js code is here
var s = "<a id='clickmodifybasic'>修改</a>"
$("#basicinfoerrordlg").html(s);
$("#clickmodifybasic").click(modifybasicinfo);
$("#basicinfoerrordlg").dialog("open");
return false;
it work well on chrome,but not good in IE8.
I got similar error before.
I get the following code from the develop tool of IE8.
<A id=clickmodifybasic jQuery1289741833331="94">修改</A>
Assuming that you have a modifyBasicinfo() function already defined, try this code.
var s = "<a id='clickmodifybasic'>修改</a>";
$("#basicinfoerrordlg").html(s);
$("#clickmodifybasic").click(function() { modifybasicinfo(); });
$("#basicinfoerrordlg").dialog("open");
return false;
Don't forget your ";" delimiter after you variable declaration, I have added this in for you.
Hope this helps.
#WangXing, I have just tested in IE8 with this exact code:
<script type="text/javascript">
function ModifyBasicInfo()
{
alert("clicked");
}
$(function() {
var s = "<a id='clickmodifybasic'>קישור</a>"
$("#basicinfoerrordlg").html(s);
$("#clickmodifybasic").click(ModifyBasicInfo);
});
</script>
<div id="basicinfoerrordlg"></div>
It worked fine, and alert appeared when clicking the link so the problem must be with the dialog plugin you're using. What plugin is this exactly? Can you post link so we can reproduce this behavior?