I am trying to load the carousel (swiper slider) inside some tabs in Elementor WordPress. The carousel works fine before clicking on tabs, but whenever I click on tabs, the carousel shows but does not "slide".
I have seen few questions regarding this topic and tried their solutions, but no luck.
Right now, I am trying this code in (child-theme/function.php) which is giving me an error:
Error -> "Uncaught TypeError: Cannot read property 'params' of undefined"
add_action('wp_footer', 'swiperCarousel', 9999999999);
function swiperCarousel() {
?>
<script>
var refreshSliders = function(){
jQuery( ".swiper-container" ).each(function( index ) {
swiperInstance = jQuery(this).data('swiper');
swiperInstance.params.observer = true;
swiperInstance.params.observeParents = true;
swiperInstance.update();
});
}
window.onload = function()
{
console.log('Document loaded');
jQuery("#aws-carousel-switcher").on("click", function(){
console.log('Tab has been clicked');
var $this = jQuery(this);
refreshSliders();
jQuery('html,body').animate({
scrollTop: $this.offset().top - 220
}, 500);
});
}
</script>
<?php
}
The error is being generated from this line:
swiperInstance.params.observer = true;
this will work for you.
jQuery(".swiper-container li").click(function(){
setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 1000);
})
select your respective tab selector.
Related
I am looking for function for WooCommerce which change meta title text in non-active tab. Anybody know how can I do it? I find this JS code but it does not work in themes function.php file:
$(function() {
var message = "Don't forget us";
var original;
$(window).focus(function() {
if (original) {
document.title = original;
}
}).blur(function() {
var title = $('title').text();
if (title != message) {
original = title;
}
document.title = message;
});
});
The following goes into functions.php
add_action('wp_head', function () {
?>
<script>
(function () {
var message = "Don't forget us"
var original
jQuery(window).on("focus", function () {
if (original) {
document.title = original
}
}).on("blur", function () {
var title = jQuery("title").text()
if (title != message) {
original = title
}
document.title = message
})
})()
</script>
<?php
});
You can put that script into a tag <script></script> in the footer.php file wich should be located in your theme (don't forget to actually duplicate this file inside your child theme)
EDIT: Also make sur to have JQuery in your frontend
I am trying to use a shortcode for a Masonry Gallery. I want to create 4 tabs. Once you click on tab #2, it should display a div and hide the others (which are already hidden by css). But when I click on tab #2, 3, or 4, the masonry gallery doesn't display until you click on a sort menu associated with the gallery. So Is there a way to add a simple function to this code so that I can load the shortcode upon click?
All I am doing with the tabs in the html is calling the function on click event.
Sample Html: onClick="displayClothing()"
JAVASCRIPT:
function displayClothing() {
document.getElementById("tab-1").style.display = "block";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx1") {
//Load gridfx id #1 shortcode by calling script
}
}
function displayPocket() {
document.getElementById("tab-2").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx2") {
//Load gridfx id #2 shortcode by calling script
}
}
function display287art() {
document.getElementById("tab-3").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx3") {
//Load gridfx id #3 shortcode by calling script
}
}
function display350art() {
document.getElementById("tab-4").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("grid-fx4") {
//Load gridfx id #4 shortcode by calling script
}
}
AND WHAT I WANT TO DO IS LOAD THIS BUT THERE WILL BE 4 DIFFERENT SHORTCODES IN DIFFERENT DIV'S:
[gridfx theme="light" posttypes="product" show_title="1" columns=6 integrate="woocommerce" item_custom_field="woocommerce" single_item_custom_field"=woocommerce" excerpt_over_image="30" sortmenu="1"]
functions.php
function its_my_shortcode(){
echo "HI";
}
add_shortcode('myshortcode', 'its_my_shortcode');
function ajax_r(){
do_shortcode('[myshortcode]');
}
add_action ( 'wp_ajax_myshortcode', 'ajax_r' );
add_action ( 'wp_ajax_nopriv_myshortcode', 'ajax_r' );
function make_on_init(){
echo "<script>var ajaxhandle = '".admin_url('admin-ajax.php')."';</script>";
}
add_action('wp_head', 'make_on_init');
JQuery
jQuery(document).ready(function($){
$("#element").click(function(){
var params = {
type: 'POST',
url: ajaxhandle,
data: {
"action" : 'myshortcode'
},
//dataType: 'json',
timeout: 30000,
beforeSend : function(){
},
success: function( res ) {
$("#tabcontent").html(res);
}
};
$.ajax( params );
});
});
This will show "HI" in the #tabcontent from myshortcode short code.
Please help me on how to get the content of the froala editor. Just to display it on the console would be enough. Here is my code:
Template.myTemplate.events({
'click': function (event) {
var self = this;
return function (e, editor) {
var newHTML = editor.html.get();
console.log(newHTML);
}
}
});
I can not seem to display the content of the editor even in the console when I click the button. Thank you.
If you're not using the older version here is a working code:
Template.myTemplate.events({
'click': function (e) {
var html = $('.selector').editable('getHTML', true, true);
});
});
based on https://www.froala.com/wysiwyg-editor/docs/methods#getHTML
If you're using the v2.0 $('.selector').froalaEditor('html.get', true);
the .selector is where you initialize your froala editor, If you can show how you do that I can adjust it to it.
I am trying to create a extension in Firefox using sdk addon. What i want to do is to call an iframe inside a panel.
I have already created the extension for chrome and now i am trying to do it for firefox.
I have a facebook login in the iframe. Once i click on the sign in button the iframe just goes blank. If I log in before hand then also the extension doesnt work. It is as if it can't access the session.
Here is the code of my main.js file.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var data = require("sdk/self").data;
var {Cc, Ci} = require("chrome");
var tabs = require("sdk/tabs");
var title=tabs.activeTab.title;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./logo1.png",
"32": "./logo1.png",
"64": "./logo1.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width:450,
height:400,
contentURL: data.url("popup.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
here is the code of my main javascript file that calls the iframe
$(document).ready(function() {
document.body.style.display = 'block';
var ur='xyz';
var frame = document.createElement('iframe');
var frame_url = 'https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod';
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
// frame.setAttribute('margin', '-10%');
frame.setAttribute('frameborder', 'none');
frame.setAttribute('id', 'rtmframe');
$('body').height(450).width(400);
frame.setAttribute('src', frame_url);
document.body.appendChild(frame);
$('iframe#rtmframe').load(function() {
$('#loadImg').hide();
});
});
This is not the actual link i am trying to open. Can anyone suggest what i can do differently. or point me to github code that might be doing the same thing.
I've been having issues trying to get Isotope to render properly.
I've tried a few different ways to get it to work, including using the imagesLoad function, to no avail.
You can view the page here: http://wpsanjose.com/#latest-posts
If you select "ALL", you'll see the proper margins appear which is what I'm after when it first pops up.
This is the code I'm using:
(function($) {
$(window).load(function() {
//Set the isotope area
var $container = $('#isotope-wrap');
//Set our items to be filtered and how to display
$container.isotope({
itemSelector: 'article',
masonry: {
columnWidth: 1
}
});
var $filterSets = $('.options'),
$filterLinks = $filterSets.find( 'a' );
$filterLinks.click(function() {
var $this = $(this);
// don't do anything if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $filterSet = $this.parents('.options');
$filterSet.find('.selected' ).removeClass('selected');
$this.toggleClass('selected');
})
// filter items when filter link is clicked
jQuery('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
})
});
$(".entry").hover(
function() {
$(".article-outer", this).stop().animate({top: '-1000px'},{queue: false, duration: 700});
},
function() {
$(".article-outer", this).stop().animate({top: '0px'},{queue: false, duration: 700});
});
})(jQuery);
any help would be greatly appreciated!