javascript not working in chrome,safari,ie etc - javascript

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();

Related

Strange bug with function in jquery

I'm trying to use a script on my website who pop a navbar. There is a declaration on this script :
(function($){
$.cookieBar = function(options,val){
....
};
some other stuff here
})(jQuery);
We can see this script here it's working without any problem on all of my website called with :
$(document).ready(function(){
$.cookieBar();
});
In just one webpage there is a bug (css and js are include) :
TypeError: $.cookieBar is not a function
$.cookieBar();
I don't understand why. If anyone have any idea. On this webpage there is one major script who is working normaly without this cookie-nav-script but because of this bug nothing work at all.
I don't use any experimental stuff from this script and I attached this cookies-bar at the body.

Jquery and firefox not loading

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!

Can anyone detect why my jQuery is firing on my homepage, but isn't firing on a different page within the same domain?

I have been having some issues getting jQuery to work on some parts of my website. To test if the jQuery would fire I prepared a bit of jQuery that launches everytime my header file is included.
When I am at the home page the jQuery fires properly and the pop-up comes up. As soon as I move to a different section of the site. The same jQuery code included in the header isn't firing. I have checked the console for errors or faults and couldn't find anything.
A test location of the website would be at this location
That is the homepage of the site, if you visit it a pop-up will appear. If you browse to this link the jQuery doesn't fire even though it's still there in the code.
The jQuery code I'm trying to launch is as follows
<script type="text/javascript">
$(function(){
$('#overlay').fadeIn(200,function(){
$('#box2').fadeIn(400)
});
return false;
});
</script>
I'm not very experienced in debugging jQuery and have tried consulting some other questions and forums thought these solutions or attempts didn't seem to work for me. I was hoping I could get a hint in the right direction here.
Your code
$(document).ready(function() {
$('#slider2').s3Slider({
timeOut: 4000
});
});
appears to be raising an error which causes the javascript processing to stop. The element '#slider2' element does not exist on this page. Either remove this code or add a guard condition such as,
$(document).ready(function() {
if ($('#slider2').length) {
$('#slider2').s3Slider({
timeOut: 4000
});
}
});

Running jquery gallery makes links unclickable

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;
});
});

Using Google Chrome to debug and edit javascript embedded in HTML page

Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?
Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.
I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...
None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.
Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.
Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source

Categories

Resources