I have included the jquery ui in my page and try to appliy resizable to img but it is not working.
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
$('.jqte_editor').on('mouseup', 'img', function() {
$('.jqte_editor img').draggable().resizable();
});
but it says resizable is not recognized.
Edit
actually in this case it says Draggable is not recognized whatever is coming from jqueryui
That means either jquery-ui-1.10.3.custom.js path is not correct or required modules draggable, resizable are not included
Add this and try
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
If doesn't work then you may have included other JS library with jQuery like Prototype or Mootools
Demo Link
Hope you added the jQuery lib too, because it not showing any error about .on()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
Also instead of mouseup you can directly have
$(document).ready(function () {
$('.jqte_editor img').draggable().resizable();
});
Check the working sample fiddle here.
Related
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
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.
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();
});
});
jQuery(document).ready(function() {
jQuery("#bfCaptchaEntry").on("click", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF");
});
jQuery("#bfCaptchaEntry").on("blur", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#CC0000");
});
});
This is the code, it's supposed to add the onclick and onblur functions to change the background colors of my input field but it doesn't work.
jQuery code is being loaded before this script and this script is being loaded in a separate file inside the html after it.
What did I do wrong? Any help is appreciated.
EDIT: After trying everything in the answers, I tried Chase's suggestion in the comments.
it worked like a charm! So the final code is now an inline script after the jQuery is loaded and it's like this:
jQuery(document).ready(function() {
jQuery("#bfCaptchaEntry").bind("click", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); });
jQuery("#bfCaptchaEntry").bind("blur", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#CC0000"); });
});
You're loading your jQuery-reliant scripts before jQuery has loaded.
<script src="/templates/e-pasaporthome/javascript/styleForms.js" type="text/javascript"></script>
<script src="/media/mod_vt_nivo_slider/js/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/media/mod_vt_nivo_slider/js/jquery.nivo.slider.min.js" type="text/javascript"></script>
Instead, put jQuery first;
<script src="/media/mod_vt_nivo_slider/js/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/templates/e-pasaporthome/javascript/styleForms.js" type="text/javascript"></script>
<script src="/media/mod_vt_nivo_slider/js/jquery.nivo.slider.min.js" type="text/javascript"></script>
I would suggest using .bind() instead of .on() for versions prior to 1.7.
"As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers."
api.jquery.com/on/
Have you included the jQuery file in the first place.. If you have done so then Hit the F12 in your browser and check to see if you see any errors in the console section of the browser..
Also are you using another javascript libraries..?
After trying everything in the answers, I tried Chase's suggestion in the comments. it worked like a charm! So the final code is now an inline script after the jQuery is loaded and it's like this:
jQuery(document).ready(function() {
jQuery("#bfCaptchaEntry").bind("click", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#FFFFFF"); });
jQuery("#bfCaptchaEntry").bind("blur", function(){
jQuery("#bfCaptchaEntry").css("background-color", "#CC0000"); });
});
Why do I get this error from my overlay jquery code?
This is the code:
jQuery(document).ready(function($) {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
This code is the overlay like this: http://flowplayer.org/tools/demos/overlay/external.html
Halp?
ps. Sorry for my bad english.
"Could not find Overlay: nofollow" is caused by using a non-specific css selector to find the links you want to attach your overlay to.
Including the javascript properly was the correct answer to the initial question... I came to this page based on the Overlay: nofollow issue in a comment.... since this is the first thing I found and didn't find an answer I wanted to comment here since I found it is caused by the css selector finding other uses of .. and there isn't a nofollow overlay...
assuming 'overlay' is the id of your div as in the following:
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
< !-- the external content is loaded inside this tag -- >
<div class="contentWrap"></div>
</div>
you should be doing something like:
$("a[rel=#overlay]").overlay(
instead of:
$("a[rel]").overlay(
You need to load the overlay plugin before jQuery will see it as part of the object; see below.
Note: the plugin must come after the jQuery script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
Got the same problem and found a really strange solution.
I just included jquery.tools before jquery.ui in this way:
<script src='js/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='js/jquery.tools.min.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'></script>
That's all. No idea why it works now but it does the job.
Did you include the overlay script src in your page?