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
Related
I have a script src for a deprecated version of JQuery which I cannot control (controlled externally via a CMS, not cross-domain, just no access to changing it) and I'd like to change the script src to a newer version of Jquery.
Old code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Replace with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Once an external script has loaded, it can't be removed as it's already loaded into memory, so changing the source would just load another version of jQuery without removing the first version, so you'd have two versions of jQuery, creating a conflict, and in many cases nothing will work.
There is a workaround if you absolutely have to:
$(function() {
$j_142 = $.noConflict(true);
$j_142.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
$j_191 = $.noConflict(true);
});
});
FIDDLE
now you have two versions of jQuery mapped, and to use them you'd do:
$j_191('#selector')
of course, this would cause issues with code already written, but you could probably get away with just mapping the second script to a new variable or something ?
EDIT:
You could use a closure to map one of those values back to the dollarsign within the closure:
(function($) { //anonymous self invoking function
// now you could use the dollarsign as normal
$(function() { // document ready function
});
})($j_191);
You can use
var oldJquery = document.querySelectorAll('script[src="js/jquery-1.4.2.min.js"]');
oldJquery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
Once you do this, it will automotically will download coz it is live dom element. All changes should be reflected immediately.
But I would suggest that long term this is not good idea. what if CDN from google is down.
You might be in trouble. Just take precaution while doing this changes.
That easy, this is your code:
$("script[src='js/jquery-1.4.2.min.js']").attr('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js');
This is example http://jsfiddle.net/rebeen/KwLM3/
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
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();
});
});
I am developing a site using Joomla 2.5 and since I'm going to be handing it off to a client who is less than code savvy, I don't want to have to make them try to remember how to add class=hyphenate to every <p> when they add / update content.
I'm trying to use JQuery to do it but it doesn't seem to be working. Here is my code that should add the class:
<script type="text/javascript">
$("p").addClass("hyphenate");
</script>
Any input / help is - as always - appreciated!
Thanks,
Cynthia
If your script tag is placed before the p elements, you need to wait for the document to be ready - like this:
$(document).ready(function(){
$("p").addClass("hyphenate");
});
Shorthand version:
$(function(){
$("p").addClass("hyphenate");
});
Sidenote: when mixing libraries, global variables (like the $) can get out of hand. So make your own scope, ensuring that the $ is jQuery:
(function($){ // $ = jQuery
$(function(){
$("p").addClass("hyphenate");
});
})(jQuery);
Also your Jquery May Conflict with Joomla Mootools, to overcome you can use JQuery noConflict
var JQ=jQuery.noConflict();
JQ(document).ready(function(){
JQ("p").addClass("hyphenate");
});
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>