Alright guys, I'm trying to get a handle on Jquery, but now that I"m actually implementing it, I'm finding it hard to get it to return anything. As in, I am not even entirely sure if I'm loading it correctly or if I have some random typo keeping anything from working. I will qualify that I added a simple Javascript code in the bottom with a document.write to ensure the javascript file was indeed linked. It worked fine.
If I click the h1, nothing happens. Regardless of the Jquery command I enter even if it is just inside $(document).ready, it will still do...nothing.
Here is the actual Jquery/Javascript:
$(document).ready(function() {
$("h1").click(function() {
$(this).animate({color:blue}, 'fast');
});
});
Here is where I am calling it in the HTML (below).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
The .js script is indeed called script.js and in the same directory as the HTML. I'm a bit new to both so this could well be a very newbie mistake.
There is an error in your code, you'd be best to use some Developer Tools while testing to catch these.
Uncaught ReferenceError: blue is not defined
the line:
$("h1").animate({color:blue}, 'fast');
expects blue to be a variable, you need to make it a string.
$("h1").animate({color:'blue'}, 'fast');
Also as mentioned by dystroy you need the plugin or the jQuery UI files. Additional notes from the documentation:
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
From the documentation :
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
That's the main problem : if you try your code with a numeric property, it works.
If you really want to animate colors, I'd suggest to use the mentioned plugin.
Related
This little task is causing a bigger headache than it needs. I just wanna get a simple dropdown like:
Pretty easy, right? It even gives me the code? How hard could it be? I first imported the CDN in my page.
<head>
<!-- stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>
and then after all that, I add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
According to their documentation, all I need to do is:
$('.ui.dropdown')
.dropdown()
;
on my ui-dropdown class element, but it just gives me problems.
<Uncaught TypeError: $(...).dropdown is not a function
I looked at the following things to help, but didn't have much luck:
Semantic-UI Dropdown Not Working #229
semantic-ui dropdown menu do not work
but didn't have luck
Moving jQUery so it loads first
Adding the simple class
It just looks like no matter what I do... the script isn't getting initialised.
Can you post your code to somewhere (jsfiddle or codesandbox) so we can detect the problem easier? (Sorry I don't have enough reputation to just comment on your question yet)
=======
My answer:
It seems that your code ran before the jQuery library being fully loaded to your browsers. Can you try wrap your execution codeblock into $( document ).ready(function(){} like this?
$( document ).ready(function() {
$('select').dropdown()
});
This was not related to Semantic UI.
It was due to the way the DOM was being rendered. In my case, I had nested snippets (Rails Partials) and in seems like Semantic does not like when you initialize with .dropdown() in the child view.
Hence, I fixed this by initializing in parent and it works like a charm!
I am building a page using jQuery UI tabs, and I am seeing some effect, but not what is intended. The UL used to store the tab headings is wired up so that the UL and tab contents are part of the same larger DIV. The console contains diagnostic info of some description, but no reported errors in my code, others' code, resource loading, etc. I've checked the links to JavaScript/CSS and they all point to real resources that look like JavaScript/CSS:
<link href='//fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<link href='/jquery-ui-1.12.0.custom/jquery-ui.css' />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/javascripts/bgstretch.js"></script>
The display, in terms of presentation one would expect of CSS, just what one would see without any attempt to apply jQuery UI. The debugger, however, does display added classes that one would expect of jQuery UI turning a UL and some DIVs into a tabbed display, for instance:
Living Room
The original element is unadorned:
Living Room
What can / should I be doing so jQuery tabs are behaving normally?
http://codepen.io/anon/pen/BzxbqY
Did you include the jquery ui css?
I stripped out all your scripts and used
$(document).ready(function(){
$("#tabs").tabs();
});
I included jquery then jquery ui, and
this
jquery ui css file.
A working version is here (based on your code):
https://jsfiddle.net/g3o7chw1/1/
I think the issue may be the ui theme css. When I use the regular theme cdn it seems to work fine:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
I think it is because your scripts CDN src link does not have the http protocol.
Instead of:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
You should have:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
It looks like you have two problems. First, if the code you pasted is accurate, you have a problem in the call to the ready() method:
;(jQuery.ready(function()
{
jQuery('#tabs').tabs();
}()));
which as you say doesn't produce any errors. However, it doesn't do anything either! Cleaning off superfluous parens and semicolons, your code looks like this:
jQuery.ready(function()
{
jQuery('#tabs').tabs();
});
Now, the problem here is that you aren't saying what needs to be ready before you call the tabs() method, because you don't specify a selector that you're applying the ready() method to. This means that your tabs() method never gets called.
With the ready() method, the selector should always be document. So, if you change your code to this:
jQuery(document).ready(function(){
{
jQuery('#tabs').tabs();
});
you'll find that your tabs() function gets called. You'll notice that JD E and John Detlefs substitute $ for jQuery, which is common (nearly ubiquitous, in fact) shorthand, but otherwise this is how they have it as well. This is the conventional way to call ready(). (There are two equivalent syntaxes (yours isn't one of them) which you can read about here.)
Your second problem appears to be a compatibility issue: your directory structure suggests that you are using jquery-ui.js v. 1.11.4 and jquery-ui.css v. 1.12.0. If so, you will definitely have problems, because 1.12.0 implemented a lot of breaking changes. Have a look at this document. In it, in the section under tabs, you'll find this:
The tabs widget now adds the ui-tabs-tab class instead of the inconsistently named ui-tab to each tab element.
If you in fact have the different versions of the .js and .css files suggested by your directory structure, you'll probably have the .js file applying a ui-tab class, and the .css file looking for classes with ui-tabs-tab. So you won't get the styling, unless they put in backward compatibility. Which they haven't in some cases. (Update: looking at the link that JD E provides in his answer, I don't see any evidence of this change. There are several references to ui-tab and none to ui-tabs-tab. Since 1.12.0 was only released three weeks ago, maybe it's a documented change that never actually occurred, and they haven't had time to undocument it yet. But I'd still get my versions consistent if I were you.)
I would suggest that you make sure that your jquery-ui.js and jquery-ui.css files are the same version. If you don't need to support IE, I'd suggest going to 1.12.0. If you do, then you'll need to research which versions of jQuery UI support which versions of IE. (1.12.0 dropped support of IE 10 and older versions.) Also, your version of jquery.js is three years old at this point and you might consider upgrading. The latest version is now 3.1.0 (recently released), 2.2.4 has been around for a while.
After 3 days of working on one 'Dragable Windows Interface' i discovered that the core isn't allowing me to make more than one window on a page.
I decided to switch to Prototype-UI interface but it seems like it interrupts with my current Jquery code, any ideas how to fix this?
This is the error that Web Console shows me when i attach Prototype-UI JS files:
[16:39:42.443] $("BODY") is null # http://XXX.XXX/smart_panel/res/main.js:4
so basically this is the code that makes the problem: (Jquery bg image stretcher).
$(document).ready(function(){
// Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/spb3.jpg'], imageWidth: 1360, imageHeight: 765
});
});
After i've tried to delete this i got another error on the next JQuery plugin ($('#dock2') is null).
And its really frustrating to try over and over again when you are not a JavaScript pro (I think the practice is the best learning process tho).
So after deleting those three lines:
<script type="text/javascript" src="res/prototype.js"></script>
<script type="text/javascript" src="res/effects.js"></script>
<script type="text/javascript" src="res/window.js"></script>
Which is the files of Prototype-UI everything is normal again and i get no errors, so is there any way that this interface was designed to work as a standalone without any other JS/JQ scripts? I don't think so and that's why i need your help.
Here is the link to Prototype-UI: http://docs.prototype-ui.com/trunk
If there is no way to fix it, can someone please suggest a GOOD Dragable windows plugin that will allow me to create multiply resizeable-dragable windows on a page? :\
Best Regards,
Rico S.
If you're trying to use jQuery and Prototype in the same page, you're going to have to deal with the fact that only one of them will win out in the fight for "$". It sounds like you're importing Prototype after jQuery, which means that your code that expects "$" to be the jQuery master function is actually the Prototype "getElementById" shortcut.
I don't remember whether Prototype has a conflict prevention hook, but jQuery definitely does. What you can do is after importing the jQuery library, add a small <script> block like this:
<script> jQuery.noConflict(); </script>
After that point, the libraries can co-exist, but all your code that wants to do jQuery stuff will have to use the function name "jQuery" and not "$".
You may want to look into the jQuery UI widget collection. There's a "dialog" widget in there that is (or can be) draggable and resizeable. Whether multiple such dialogs can be present on the page concurrently, I don't know, mostly because that's a bad user interface pattern (in my opinion) and I'd never do it.
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).
I just moved my javascript over to jQuery for the simple AJAX functions. However I'm trying to use a lightbox plugin with jQuery since I want to keep the same functionality but don't want to include 10 different libraries.
If i remove the jquery include and keep lightbox, it works great
if i put it back it breaks, it just brings up the full size image instead of the box, neither chrome or firefox's console complains about anything, it just goes straight to the image
I tried 5 different lightbox clones/plugins for jQuery but they all gave me the same behavior, which leads me to think there's something i'm missing
right now my headers look like this (double checked, they're all there):
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/thickbox.js'></script>
<link rel='stylesheet' type='text/css' href='css/thickbox.css' />
and my gallery (php):
foreach(...){
echo "<a href=\"$path\" class='thickbox' rel='$folder'><img border=none src=\"$thumb\" /></a> \n" ;
}
for the background, the images in the foreach are loaded from an ajax call, but this was never a problem with lightbox, it shouldn't be because all the html is there anyway
This is usually because other libraries (not jQuery) also try to use the dollar sign variable name.
There's a setting in jQuery to turn on compatibility mode which will force you to use jQuery() instead of $() to make jQuery calls.
You could also use the jQuery Lightbox Plugin
Just a thought... doesn't LightBox attempt to include it's own copy of jQuery or something similar? IIRC, that might be the cause of your issues...
Try looking at Shadowbox. It has the same kind of effect but has not had issues with JQuery for me. They also have a very similar set up and are pretty easy to switch between.
You can find different ways to resolve conflict here: Using_jQuery_with_Other_Libraries