Works perfectly in jsfiddle, but not in live website. Why? - javascript

Website test page: http://www.lantiis.com/indexold.html
jsFiddle: http://jsfiddle.net/Guhb4/7/
I received help with the jQuery and it works perfect in jsFiddle. (temp sign-in as Lantiis here: Can independently show/hide. How do I hide on show?)
When I transfered the code, everything worked except the images. The background images show up, the link images show up, but not the main images that have the site content which is what I needed the jquery for. I have no idea what I did wrong when I transferred the code over.
I am sure this is just a stupid mistake on my part, but as I am still learning js, I am at a total loss at this point. I thought I had it pretty good until I posted my first question and saw how messy my code was in comparison to the users code who helped me.
Any and all direction and criticism is welcome.

You need to include the jQuery library in your HTML.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
http://docs.jquery.com/Downloading_jQuery
And wrap your jQuery code in the following:
<script type="text/javascript">
$(document).ready(function() {
//Your code here
});
</script>
http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready

In addition to including the jQuery library (as mentioned by Callum) and placing your code within an onload function (as mentioned by CleverQuack), your script also needs to have a type of text/javascript, not just javascript. Something like this should work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mask > div:first-child').show();
$('#top a').click(function() {
var keyterm = $(this).attr('title');
$('#mask > div').hide();
$('div[id=' + keyterm + ']').slideDown('slow');
});
});
</script>

Related

Script works in JSFiddle but not on actual

I've got a script (that also used froogaloop2 https://developer.vimeo.com/player/js-api) that changes the play button on a vimeo vid. It works in JSFiddle but can't get it to work on my actual site. Pressing the play button doesn't do anything, the video doesn't play at all. I've got my scripts organized like so, in the <header> tag. The play/pause script is sitting at the bottom before the <body> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/remodal.min.js"></script>
<script type="text/javascript" src="js/froogaloop2.min.js"></script>
My full code: https://jsbin.com/fawowaleci/edit?html,css,output
Video script: https://jsfiddle.net/uxhxdcwp/5/
Inside modal: https://jsfiddle.net/qhrmtass/14/
Play/Pause script:
$(function () {
var iframe = document.getElementById('video');
var player = $f(iframe);
player.addEvent('ready', function () {
player.addEvent('finish', onFinish);
});
$('.playpause').click(function () {
player.api('paused', function (paused) {
if (!paused) {
player.api('pause');
$(".playpause").removeClass('pause');
} else {
player.api('play');
$(".playpause").addClass('pause');
}
});
});
function onFinish(id) {
$(".playpause").removeClass('pause');
}
});
Update: it as was suggested but no go. I feel its something with the modal code that's messing it up?
There are two big reasons why you see your code working fine on JSBin versus locally:
If you right click the output element and look at how it's structured, you'll see that all your scripts are getting shifted to run within the opening and closing body tag, contrary to how you wrote the code.
I assume you put together your sample based on looking at the documentation on the Vimeo API page. Note the red box at the very top of the page that indicates that you won't be able to run this locally. Host the below code on a web server and you'll be able to see it execute as you're expecting.
Generally, it's a good idea to put all your tags either within the <head></head> tags or the <body></body> tags. See the discussion in the comments at Is it wrong to place the <script> tag after the </body> tag? for a plethora of information and opinion on that front.
I've put together a working sample (that works on my web server and in JSBin) for you at https://jsbin.com/mojopalode/edit?html,css,output.
Edit: To address your attached picture, it looks as though you're still running this from your desktop. Please see point #2 I made above for why this would continue to fail to work on your end. If you drop this on a webserver (as I tested it on), it should work without a problem.
You should put the scripts, after body tag or initialize variables and listeners on $(document).ready({ });
From looking at your code, only problem I can see is you script runs before actual elements are rendered so its not attaching any listeners to the elements.

Don't know which JQuery plug-in to use

I have this piece of JS:
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
But it doesn't seem to work on my website even though it works fine on JSFiddle
I used "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"
But didn't work.
I don't have any other Script on my website as I've just started it.
Is it just a case of using the wrong plug-in?
UPDATE
This is my full code:
http://jsfiddle.net/WeQwc/9/
You need jQuery, not jQueryUI.
http://code.jquery.com/jquery-latest.min.js
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
});
</script>
Just to clarify why this works, surrounding your jQuery code with the $(function(){...}); means that it will only be run once the page has finished loading. So if you are acting on html elements, this is kinda useful. You will notice that your jFiddle JavaScript is run "onLoad", the reason it worked :)
Currently you are using only the jQuery UI js file
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
You need to use the core jQuery min js file first and then the jQuery UI js file.
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

Javascript Lightbox 2 Issue

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

Is there a way to measure loaded content of page and show percentage of it?

I mean page preloaders where you see percentage of loaded page. Is it just fakened or is it truly a size of just loaded page related to whole page size? Is it possible to measure it with javascript? How developers make it? Here's example which seems to be kinda http://www.ultranoir.com/en/#!/home/
Have a look at the jPreLoader jQuery plugin
Using it is very simple :
$(document).ready(function() {
$('body').jpreLoader();
});
Most websites are faking it. I was also searching sometime ago and only found solution like this plugin:
see in action here http://www.inwebson.com/demo/jpreloader/
<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('body').jpreLoader();
});
// ]]></script>
also check out this solution, it's probably the closest to the real thing:
http://www.seabreezecomputers.com/tips/progress.htm

Categories