im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
Related
I'm a newbie to web dev, so please stick with me. I know this question has come up a lot (or a similar deviation), but after a couple of hours of searching I have not found an answer that works for me.
I've made sure the JQuery file is loaded first, and tried multiple versions to no avail. Whenever I try to load the Magnific Popup script, I get (TypeError: $ is not a function) on line 50. I've had a look and tried to change $ to JQuery to no avail, so it's back to normal now.
Here's the Magnific Popup code block:
var mfp,
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window), <<<<<< ERROR HERE
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
And the relevant html:
<head>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>
looks like its not picking your jquery library from CDN..
make sure that you have the network in your system or have access to jquery CDN url
if all above is fine then you try with http in CDN url like below. this is working for me
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to load your jquery file from your own (local) machine. Hopefully, this will work well.
Also, it would be helpful for me if you please let me know that you are not getting 404 for the JQuery file from the CDN.
I have a website using twitter bootstrap. When developing sometimes the internet is not working so jquery won't be loaded and my site will not work. This is why I have a local copy of jquery in my js folder. I edited bootstrap files so if jquery is not detected the browser will change the location of jquery from cdn to my local file. I tried to do that but it is not working:Here is my code:
if (!window.jQuery) {
document.getElementById('jq').src='../../js/jquery.js';
console.log("You are using a backup file of jquery provided by our website");
}
else{
console.log("jQuery has been succesfully loaded by kounelios13");
}
html:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" id="jq"></script>
<script src="../../js/bootstrap.js" type="text/javascript"></script>
<script src="../../js/prefixfree.js" type="text/javascript"></script>
<script src="../../js/apps/rgba.js" type="text/javascript"></script>
This is placed inside bootstrap's js file.
Any ideas???
Imaging that CDN file is not available. Then browser starts loading next script file (bootstrap.js), parser enters bootstrap.js, where you placed your check for jQuery. Your code detects that jQuery is not loaded and the script then changes src of the jq tag. It works fine and jQuery starts loading, however browser doesn't wait until jQuery is downloaded and carry on to the Bootstrap stuff, which fails immediately, because it requires jQuery. Hence the error.
You can try this version for backup jQuery library instead which should be reliable:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" id="jq"></script>
<script>
if (!window.jQuery) {
document.write("<script src='../../js/jquery.js'>\x3C/script>");
}
</script>
<script src="../../js/bootstrap.js" type="text/javascript"></script>
<script src="../../js/prefixfree.js" type="text/javascript"></script>
<script src="../../js/apps/rgba.js" type="text/javascript"></script>
With jquery I don't thinks bootstrap script work so you need that.
If you have internet problem then you can copy jquery link and make file of that and attached.
ID must unique for the Document, you have another Element that uses the id jq or none.
I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>
so, I have this webpage here [ http://saikonet.org ] and it's not loading the tipsy script. If you go into the source, it's on line 11. Now, the strange part is all the other scripts are loading fine, and if you click on the tipsy script link, it's loads fine in browser, so syntax and filepath are both fine. even stranger is that is was working completely fine last time I checked.. it just stopped working all the sudden. I'm not sure how to proceed..
(and btw, the way I checked whether it's loading or not was via the script tab in chromium's 'inspect element')
It looks like the tipsy script is being loaded before the jquery file where the former is dependent on the latter.
Change:
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
You need to load the jQuery file before you load the tipsy JS file.
In your head section, change this:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
To This:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
On my Chrome it looks like the tipsy script jquery.tipsy.js is being downloaded.
At any rate, I think you may need to put your tipsy script after your jQuery script.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.