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
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 want to create a confirm delete popup with Bootstrap 3. Is there any good comprehensive examples how to build one. I am very new to Meteor.
Use whatever example from Codrops, etc, just remember put the JSCode inside a
Template.nameTemplate.rendered = function() {}
So thats telling meteor to load that jscode, when the template has beed rendered and it can load any modal, etc...
So just follow whatever example you want, and just put whatever jQuery plugin etc, inside Rendered function
Also in some case the rendered its not enough, you need to use too,you can see timer docs here, anyways if you are having bad time, feel free to upload, some meteorPad, free nitrous box o repo on github and i can help you (i have a bad time with those modals on meteor to, they are a little trickys =p)
update answer
try to add meteor add iron:router, and on the client /app.js
Router.route('/', function () {
this.render('leaderboard');
});
And keep the same rendered like this.
Template.deleteBtn.rendered = function(){
$('.open-modal').on('click', function(e){
$('#confirm').modal()
.on('click', '#delete', function (e) {
// Remove selected player
Players.remove(Session.get("selectedPlayer"));
});
});
}
UPDATE
So using the peppelg:bootstrap-3-modalPackage, you can easy do the follow
First Create a template with the modal content
<template name="modal">
<!-- Modal Stuff -->
</template>
and easy call it on a Event handler.
Template.example.events({
'click #exampleButton':function(){
Modal.show('modal')
}
})
Now back to this example check this meteorpad from line 1-23 on app.'s and 41-62 on main.html
I've finished my last project that uses GoogleMaps API v3 sucessfully.
But now, with no reasons the map is not being generated anymore.
The window with all map controls is opened correctly but the map
itself is not. It shown only a gray screen.
There is no errors on the script before calls google.maps function and
there is no errors after it too!
Can anyone try to help me with this issue?
Thx anyway.
I had a similar problem when I used GoogleMaps API in a Jquery UI Dialog, the map div would be gray. I corrected this problem by resizing the map when I opened the Dialog. I am also using the GMAP3 Jquery plugin.
Here is the resizing function:
function resizeMyMap() {
var mymap = $('#map_canvas').gmap3({ action: 'get', name: 'map' });
google.maps.event.trigger(mymap, "resize");
$('.gmap3').gmap3({
action: 'autofit'
});
}
If you do not use the GMAP3 Jquery plugin, you can try this to resize the map:
google.maps.event.trigger(map, 'resize')
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"
I'm using jQuery at WordPress (#the HOME page) and the ready function doesn't work for me. I have a index.php which is including (php) a header, footer and a sidebar. I tested this code:
<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("test text");
});
</script>
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sidebar has been loaded. This means while I'm seeing the index page (sidebar is not loaded yet) I have to wait a few seconds until the sidebar has finished loading, and only then the jQuery code is executed: the alert is popping up. So the ready function just wont work.
Can anybody tell me why and how I can solve this problem? Thanks.
within the WordPress environment, use this:
jQuery(function($){
// now you can use jQuery code here with $ shortcut formatting
// this executes immediately - before the page is finished loading
});
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
});
The alert is popping up after the sidebar is loaded because ready() is supposed to be executed AFTER the whole page is done loading.
The alert (with the text "test text") is just not popping up immediately! It's only popping up after my sitebar has been loaded.
That's exactly the advantage of using ready. When you want it to popup right away, simply do
<script type="text/javascript">
alert ("test text");
</script>