I've read as many topics as I could, but still I cannot find the resolution...
I've built many websites with jCarousel.js but this one is hitting me back so hard ;<
So, I'm trying to add jCarousel, easy stuff like that:
$(document).ready(function() {
$(".anyClass").jCarouselLite({
auto: 3000,
speed: 1000,
vertical: true,
});
});
Above that I did include
<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jcarousellite_1.0.1.js" type="text/javascript"></script>
So I was happy about using It fine on Chrome, but then I turned on FireFox and the happy stuff disappeared.
FireBug shows, no errors, Chrome as well but the script doesn't work. After refreshing page It starts working. It seems like FireFox is not loading that part of the code, so there are no errors, as well no working script...
What should I do ;> ?
So we've found that the problem is due to a conflict in jQuery. As the site uses wordpress, noConflict is usually enabled by default, but using the $ operator is not permitted.
Instead use the wrapper;
jQuery(function($) {
// code here
});
around your initialisation code.
Hope this works for you!
Related
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;
});
});
Okay guys I have a website that has a lights off for videos source code: http://www.megaptery.com/allofthelights/
An organic tabs for videos using Jquery
and a 2buttons which onclick it changes the CSS of the whole page you know it's kinda like a theme for the page
Here is an example of one of my page:
http://myanimesekai.com/Watch/Noucome-Episode-9
okay all of them works perfectly fine on my laptop all of them IE, Mozilla and the OLD Google Chrome.
But Then I tried it on my Brothers Laptop BUT his Google Chrome is the latest Google Chrome the Google Chrome where the scrollbar changed. The problem is that the Lights off feature is malfunctioning it doesn't turn off the video only. But the Organic Tabs and The 2buttons works perfectly fine. So I tried it on an internet Cafe and this is where I was really frustrated their Google Chrome is also updated and then both 3 of them were malfunctioning then after a while I tried them on Mozilla and all of them worked perfectly fine and so I have an Idea maybe it's becaused it took time for the Jquery and my Javascript to load which is why all 3 of them were malfunctioning.
so my question is is there a way for me to make my page load the jquery and javascript 1st? or am I missing something that the new Google Chrome requires? this is really frustrating me
oh BTW the 2buttons that changes the CSS are the B and M squares Below the facebook page
There are so many errors on this page (http://myanimesekai.com/Watch/Noucome-Episode-9) that any one error can cause the page not to work.
You need to clean up your code quite a bit:
<script src="http://myanimesekai.com/javascript.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
You are calling jQuery in your javascript.js file. The jQuery library has not been declared before your scripts. You need to restructure your code to (you only need one version of jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/javascript.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
This will fix some errors. I suggest that you look at the console for further errors and fix them.
I have an javascript code for the video change in joomla based website but it is not showing in chrome,safari,internet explorer but it is getting displayed in Mozilla Firefox.
Here is a code for the javascript.
<script type="text/ecmascript">
$(document).ready(function() {
$("ul.videolist").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo'});
});
here is the live link : http://great.server279.com/greatofficiants
I think I know what's wrong and I will post my answer but you know what, I think what we should be talking about is how to make you a better debugger. A post like that you wrote doesn't really help us or help you. First of all more important than what your code is, What does your console say?
If you are using Google Chrome press F12 or Ctrl+Shift+J and look at the console panel. Are there any messages you could share with us?
Any way, that's what on my mind
Joomla by default loads MooTools in the header so what I have in mind is that you either didn't load jQuery library or it's loaded and it's conflicting with MooTools.
Try changing your code to:
<script type="text/javascript">
window.addEvent('domready', function() {
jQuery("ul.videolist").ytplaylist({
addThumbs: true,
autoPlay: false,
holderId: 'ytvideo'
});
});
</script>
and make sure that you already called jQuery and your code contains jQuery.noConflict();
When I load jquery using:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
it works on IE9, firefox, chrome, safari but not IE8. I tried the developer/debugger tools but still don't understand why this is an issue.
This is the character code jquery supposedly has error on: 32039.
On that line there is such function:
G=function(a){
var b=F.exec(a);
b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));
return b
}
Anyone came across this issue as well?
The site is http://www.kanersan.com
I am not calling jquery before it is loaded and I'm loading it inside the head tag.
This is a bug in jQuery 1.7.1 when used with SyntaxHighlighter
http://bugs.jquery.com/ticket/10961
So you have to upgrade jQuery to 1.7.2 and everything will be working fine.
try to folow some steps:-
1.jQuery is not being loaded, this is not likely specific to IE8. Check the path on your jQuery include. statement. Or better yet,.. TRy to give direct path.
2.May be because of compatibility issue.. Try to give compatibility solutions..
Things worked in IE6, Firefox, and IE8 running in IE7 compatibility mode; but not in 'normal' IE8. My solution was to put this code in the header
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
As to why jquery isn't working in IE8 I'm unclear.
3.Try to load your jquery on window load.
4.Try to define your jquery file in top..
5.Very important point - try to check your html and jquery code.. IE is very sensetive for code.. so cross check your Html code ,... Is everything is fine..
6.Changing browser sercurity level to allow executing external javascript code.
7.Replicate javascript framwork..
May this will help You !!!!!!!!1
Some things worth trying...
Remove type="text/javascript" like so: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Make sure you reference jquery.min.js before your javascript code that uses jQuery.
Most probably, the above suggestions will not help, but since the problem sounds IE8 specific, I believe it's worth a try doing some trivial things that might solve the problem.
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()