Ok, so the problem is that JS code that I am using will not work in mobile Safari straight away. Everything works fine in desktop safari, chrome, etc.
In mobile safari (iphone 4 and ipod touch 2nd gen tested) the page is completely blank. BUT if you navigate to another page and then click back, it loads fine!
Could someone tell me what on earth is happening here?
Thanks :)
Here is a link to the site
http://osmithcouk.ipage.com/exposed/index.php
and here is JS code
NOTE I HAVE EDITED THE CODE SINCE RYUUTATSUO RECOMMENDED THAT I DO SO but still not working :(
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
And here is the HTML that goes alongside that.
<b><?php include 'headline1.txt'; ?></b>
<div class="slidingDiv">
<?php include 'story1.txt'; ?> Hide story...</div>
And the CSS for slidingDiv and show_hide.
.slidingDiv {
background-color: #FFFFFF;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
}
Thank you very much for all your help :)
Actually, the problem is that you have to add query string parameters in order to get it rendered on mobile. For example
script src="js/Common.js" type="text/javascript"
Should be replaced by
script src="js/Common.js?v=1.1" type="text/javascript"
and you can also supply version in comments of your js file so that client can come to know that he has latest version of JS files.
I don't really know if this is the proper protocol but I have fixed it myself so thought I would post my answer!
It really is simple, I just moved the JS to below the .CSS. Apparently Safari has a problem rendering jQuery before CSS :s
use
jQuery(window).load()
instead of
jQuery(document).ready()
Related
I installed fakeLoader (jquery preloader) but I have trouble making it show before the page loads.
In mozilla it works almost fine (strangely...), but in Chrome and Opera, the page loads first and then the preloader animation takes place.
You could check my full source code here: http://morph.ellevenacoustica.com/
As the instructions in fakeloader website say, I load jquery 1.11.1 and fakeloader.js and .css in head.
Then I place a <div id="fakeloader"></div> on top of body and then I load this script
<script language="javascript" type="text/javascript">$(document).ready(function(){$("#fakeloader").fakeLoader({ timeToHide:1200, zIndex:9999, spinner:"spinner1", bgColor:"#a01414" });});</script>
The full javascript of fakeloader.js can also be found at the link that I provided above.
I contacted the creator of the script at github but unfortunately I got no answer, so I rely on you to give me a helping hand!
I fixed it! I am proud of myself! :P
The correct code to be placed at the bottom is:
<script language="javascript" type="text/javascript">
(function ($) {
$("#fakeloader").fakeLoader({
timeToHide:1200,
zIndex:9999,
spinner:"spinner1",
bgColor:"#a01414"
});
}(jQuery));
</script>
I'm trying to port an existing mobile web app to Phonegap, but I had difficulty handling a click event with jQuery (it worked in my browser, but not in the emulator). I've tried everything, but here is the general gist of what I'm trying to do.
HTML:
...
<span id="footerclick">Test</span>
...
<script type='text/javascript' src='alert.js'></script>
<script type='text/javascript' src='phonegap.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<script type='text/javascript'>
app.initialize();
</script>
alert.js:
$("#footerclick").click(function(){
alert("I can't get this to show up");
});
That's pretty much it and I cannot get the alert to show up, I've tried wrapping it in $(document).ready(){} and a device listener. If I put something like onclick="alert('Hello')" as an attribute of #footerclick, that works also.
I think I just don't understand how Phonegap works with Javascript, but I've read the documentation several times and I don't get it. Please help, thank you.
I've found the source of the problem thanks to #tomysshadow. It turns out that the emulator was blocking the loading of scripts from external domains (in particular, jQuery) and so the .click listener obviously didn't work. My temporary fix is to download and use a local version of jQuery, but I may update this answer when I figure out how to change the config file to allow these inclusions.
I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.
This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1
I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});
I have a simple bit of jQuery code:
<script type="text/javascript">
$(document).ready(function() {
// fade in content.
$('.coming_soon').fadeIn(5000);
});
</script>
Website: Classic Car Gallery Test
It works quite nicely in Chrome with the "coming soon" image fading in nicely. Unfortunately this does not work in Firefox, Safari, and IE. What have I done wrong? Any input, advice or code snippets would be much appreciated.
I think your image is shown before you call fadeIn.
putting some css to hide your image (display:none on .coming_soon) should do the trick
$('.coming_soon').hide().fadeIn(5000);
You have to hide it first :)
display:none would be better solution than .hide() as it happens before JS is loaded
http://jsfiddle.net/Jacek_FH/z3tpS/1/
Jquery is a crossbrowser framework, so should work fine. Make sure your .coming_soon tag is set to display:none; in your css.
e.g.
.coming_soon {display:none;}
I have a very basic script that sets up datepicker on three of my inputs, this script works perfect in all browsers apart from Internet Explorer, I just wondered if anyone knew why. This is all of my JavaScript for that page:
<script type='text/javascript'>
$(function() {
CKEDITOR.replace('content');
$('input.datepicker').datepicker();
$('input[name="media"]').click(function() {
$('fieldset.media').toggle('slow');
});
$('input[name="digital"]').click(function() {
$('fieldset.digital').toggle('slow');
});
});
</script>
The element exists because it works in all other browsers. Firebug (Firefox addon) does not show any errors.
Thanks for any help you can give.
EDIT
This is what my script tag for including jQuery looks like.
<script src='/assets/javascript/jquery.js' type='text/javascript'></script>
EDIT 2
It is working completely (including opacity) in IE6 and IE7, IE8 is not working.
I have fixed it by using individual ID's for each of the elements and changing the conditional comment for Blueprint CSS from this
<!--[if IE]>
To this
<!--[if lt IE 8]>
Hope this helps some people.
I'm just throwing out a guess here, but have you tried putting your code into the .ready() handler? I'm thinking that maybe the reason why your code isn't working is that the document is not fully loaded when the code executes. So, just for kicks, try this:
$(document).ready(function(){ /*your code here*/ });
I am able to use the datepicker control with no problems in IE7 and IE8, but my code is in the .ready handler.
I cannot attest to the functionality in lower versions of IE, but I'd suspect that IE6 would have some issues.