WooCommerce - Change page title when tab is not active - wordpress

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

Related

Swiper Slider is not working in tabs wordpress elementor

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.

How to set background-image to BlogEngine.NET post header

Is there any solution how to set the background-image to BlogEngine.NET post header. I'm trying to modify custom them PostView.ascx to get first image from post body and set it as background-image to post header, but there is only and i don't know how to get image url from it.
My workaround is that user must added in post editor class "imgheader" to picture which he wants to set as background to post header. Then add
.imgheader {display: none;} to styles.css
Then add script to theme site.master
<script type="text/javascript">
var updateImageHeaders = function() {
var postArticles = document.evaluate("//article[contains(#class,'post-home')]", document, null, null, null);
var article = postArticles.iterateNext();
while (article != null) {
var imgheader = article.getElementsByClassName("imgheader");
if (imgheader.length > 0) {
var postHeader = article.getElementsByClassName("post-header");
if (postHeader.length > 0) {
var imgSrc = imgheader[0].getAttribute("src");
postHeader[0].style.backgroundImage = 'url(' + imgSrc + ')';
}
}
article = postArticles.iterateNext();
}
};
document.addEventListener('DOMContentLoaded', function () {
updateImageHeaders();
});
</script>

gravity form preview of image upload

I have made a contact form using "Gravity Form", in which I used image uploader. Now I want to display preview of image to user which is uploading. Is there anyway to achieve this?
Sorry, Late Answer
<script>
jQuery('#imgview').hide();
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
jQuery('#imgview').show();
reader.onload = function (e) {
jQuery('#imgview>img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
// your File input id "#input_1_2"
jQuery(document).on("change","#input_1_2", function(){
readURL(this);
});
</script>
html block
<div id="imgview"><img src=""></div>

Is there a way to load a shortcode onclick event in javascript?

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.

Froala Editor on MeteorJS get editor content

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.

Resources