Im using the jQuery noConflict method here:
http://drupal.org/node/1058168
Now, both of the following work:
$jq("document").ready(function(){
alert('alert');
});
$("document").ready(function(){
alert('alert');
});
However this does work:
$("document").ready(function(){
$(".view-product-slideshow .pager-num-1 img").css("display","none");
});
But this does not:
$jq("document").ready(function(){
$jq(".view-product-slideshow .pager-num-1 img").css("display","none");
});
Ive used the noConflict method once before and it worked fine. Ive no idea why it would work for the alert but not the CSS change.
My site is here:
http://smartpeopletalkfast.co.uk/pp4/shop/baby-essentials/sleepsuit-plush
Thanks
UPDATE - Ive now removed the extra code from script.js so all thats there is:
//Hide thumnail on product page thats being used as main image
$jq("document").ready(function(){
$jq(".view-product-slideshow .pager-num-1 img").css("display","none");
});
your error is on line 61 of ur script.js:
Uncaught TypeError: Object #
has no method 'smoothDivScroll'
also in that file u should have everything wrapped in the .ready() not every individual thing
Turns out the element I was trying to target with jQuery was itself generated by javascript. Changing my document.ready to window.load fixed this.
When using the noconflict mode of jQuery, you should use this:
jQuery(document).ready(function($){
$(".view-product-slideshow .pager-num-1 img").css("display","none");
});
jQuery is the new $ and you can pass jQuery as $ to your function().
Also, it's document and not "document"
Related
I am getting this error when trying to open Elementor with my custom theme meaning that Elementor page builder won't open. Has anyone come across this before?
Uncaught TypeError: e.dispatchEvent is not a function
at Function.dispatch (frontend.min.js?ver=3.6.5:2:34013)
at Frontend.init (frontend.min.js?ver=3.6.5:2:8627)
at Editor.initFrontend (editor.min.js?ver=3.6.5:2:322468)
at Editor.onPreviewLoaded (editor.min.js?ver=3.6.5:2:335102)
at Editor.onPreviewLoaded (editor.min.js?ver=3.6.5:2:344642)
at HTMLIFrameElement.dispatch (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.9.3:2:43064)
at HTMLIFrameElement.v.handle (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.9.3:2:41048)
This is a jquery issue. I had the same error, it was because jquery was loaded twice, two versions. The one that was puzzling me was getting loaded by GTM, so I couldn't find it in the code.
Michael is right I had the same issue. But the jQuery was hidden in a .js file within the theme.
So just double check jQuery isn't being loaded twice within your themes .js files.
When I found the second copy and removed it, I was receiving an error regarding the "$ is not a function".
jQuery(function($) {
/* Rest of code in file goes here
});
If you are getting the element from a jquery function, you need to extract the raw DOM element first
var e = $("#item1");
var d = e[0];
d.dispatchEvent(new Event('change',{ 'bubbles': true }));
I am using Smart slider 3 for carousel video slider. Its working fine by default.
I want to by default load 2nd slide of my slider.I am using below link in reference.
https://smartslider3.helpscoutdocs.com/article/312-move-slides-with-javascript
jQuery( document ).ready(function() {
n2ss.ready(8, function(slider){
jQuery('.switch').click(function(){
slider.slide(1);
});
});
});
I am putting my code in custom.js of my theme.
Am i putting code at right place?
I am getting error > Uncaught ReferenceError: n2ss is not defined
I tried to solve it with below referance link but still not able to solve it.
https://smartslider3.helpscoutdocs.com/article/485-n2-is-not-defined
Nexted Setting:
Smart Slider 3.3 introduced a new JavaScript API. You should be able to switch to that slide with the following code:
N2R('#n2-ss-70', function($, slider){
$('.switch').click(function(){
slider.slide(1);
});
});
Where 70 is the slider ID
I recently started playing around with the infinite scroll feature of the wordpress jetpack plugin. It seems to work ok, but I'm trying to integrate with Masonry, so I need to use the post-load event that's supposed to fire when Jetpack loads more posts.
But I can't seem to catch that event.
I have a very minimal set up (with a supported, default theme - twentyfourteen) and I added this small script to footer.php to try and catch the event:
<script type='text/javascript'>
document.body.addEventListener("post-load", function() {
alert('posts loaded');
});
</script>
But I never get my alert even though the new posts are loaded.
Any ideas?
Thanks in advance.
This is an old question and I was looking for an answer too. The reason it doesn't work is because the infinity.js script used by Jetpack fires the 'post-load' event using the jQuery .trigger().
.trigger() is not a native event so it doesn't get picked up using addEventListener.
Use:
jQuery(document.body).on("post-load", function(e) {
// your code
})
Doesn't Drupal 7 block javascript code in body field of the node? I use filter "Full HTML" and still it doesn't work. Maybe I don't load it right, here it is:
$(document).ready(function(){
$('.text-block:gt(0)').hide();
setInterval(function(){
$('#text-blocks > :first-child').fadeOut(0)
.next().fadeIn(0)
.end()
.appendTo('#text-blocks');
},
3000);
I know that when putting jQuery into drupal fields, you have to wrap them in script and jquery tags.
<script>
(function ($) {
// Original JavaScript code.
})(jQuery);
</script>
It would probably be best to enable the PHP filter if you can. Enable that in the modules section and use it for that specific block.
If you are using a WYSIWYG, you would have to switch it to plain text for the javascript to work.
I don't know mechanisms of displaying nodes in drupal but when i removed $(document).ready(function(){ from my script, it started to work fine.
Please refer to this page for reference: http://loadedgranola.valitics.com/_product_83484/blackberry_lime
I have a jQuery script that runs to replace the h1 tags with a background image. It works great when the document loads but when I click "add to cart", after the javascript alert the jQuery styling breaks. Due to CMS restrictions I have no direct access to their javascript or any of the ASP files but I assume there has to be an easy fix to this.
The code I'm using:
jQuery(document).ready(function(){
var textReplacer = document.title.replace(/ /g,'');
jQuery("h1").addClass('replaced').css("background","url(../images/h1/" + textReplacer + ".png) no-repeat 0 0");
});
I have also tried using the function pageLoad(sender, args) { magic but no luck.
Here you go ..
jQuery(document).ready( function() {
jQuery('<style type="text/css" media="screen">h1{text-indent:-9999px!important;background:url(../images/h1/'+document.title.replace(/ /g,'') +'.png) no-repeat 0 0!important;}</style>').appendTo('head');
});
what it does is add a new css rule that pushes the text way out of the box and adds the background image
Here is what is happening:
When you submit the shopping cart it's doing an AJAX call. The result of that call replaces most of the HTML on the page. Any changes you made before that get replaced.
Possible Solution
You would have to run that replace script again after the AJAX call is complete.
Questions
Why are you replacing the H1 tags on load? What problem are you trying to solve? You might be able to find a better CSS solution.