Joomla4 BreezingForms Pro 1.9.1 JQuery not defined - SOLVED

Detail: FRONT END load BreezingForms -> JQuery not defined
Reason: JQuery not jQuery
Solution: define again
File:administrator\components\com_breezingforms\libraries\crosstec\classes\BFQuickMode.php
Line 45 add: var JQuery = jQuery;

Fast check joomla version by manifests

Detail: fast check joomla version no need login administrator
Path file: administrator\manifests\files\joomla.xml
Goto version line

 

Step upgrade joomla 3.x to 5.0

Step 1. Upgrade 3.x to latest version 3.10.12
Step 2. Upgrade 3.10.12 to joomla 4.4.0
Step 3. Upgrade 4.4.0 to joomla 5.0

Detail: Not allow upgrade direct 3.x to 5.0, so need do step by step

Wordpress Contact Form 7 Invisbile capcha always view page load - SOLVED

Detail: Contact Form7>integrate > Recaptcha V3
-> home page load alwasy popup Captcha. Require run reCaptcha when needed
Solution: setup plugins Add New 'Invisible reCAPTCHA' Contact Form;
Setting and check again
Solved

 

Note name when upgrade YearMonthDay-siteVersion-R1...

Example: 20230918-blaosire.com4-R1
R1,R2,R3...: Re- Before Upgrade
T1,T2,T3...: J4 Temp
V1C,V2C,V3C: mean version 1,2,3 Core
V1M,V2M,V3M: version 1,2,3 Media (images,doc, files...)

Jooml4 sigplus error GD library XAMPP config - SOLVED

Detail: XAMPP local, joomla4, install sigplus. Require: GD library
Solution: control panel XAMPP open PHP.ini
Open: extension=gd

 

Joomla4 responsive Gallery use Sigplus - SOLVED

Detail: download plugin sigplus gallery plugin for jooma4, setup
gallery: load images, light box popup
Custom style:
/*_gallery*/
.sigplus-gallery > ul{    
    column-count: 5;
    column-gap: 5px;
    display: inline-block;    
}
.sigplus-gallery > ul > li a{
    padding:5px;
    background:#fff;
    box-shadow: 0 1px 1px #cecece;    
}
.sigplus-gallery > ul > li img{      
  vertical-align: middle;
  width: 219px;
  display:block;
}

 

JooCart 4.x not allow upload error exist extension - SOLVED

Detail: upload extension not compatible JooCart 4.x version,
need upload again new exntension -> error exist file
Error: exist file upload before
Solution: remove by manual
Folder: components\com_opencart\system\storage\marketplace
Remove files, then upload again

 

Joomla4 upgrade com_search error JEventDispatcher - SOLVED

Detail: J3 upgrade to J4 com_search result -> error JEventDispatcher
Reason: /components/com_search/models/search.php JEventDispatcher invalid
Solution: download new package and re-install
https://github.com/joomla-extensions/search/releases/download/4.0.1-dev/pkg_search_4.0.1-dev.zip

 

Joomla4 import Mosets Tree manual - SOLVED

Extension name: Mosets Tree - this require paid component
Joomla 4: install
J3: #_mt_ phpmyadmin export 'data insert only with column name'. This will help warning when db structure different
j4: #_mt_ empty table
Run querylist

 

Joomla4 com_breezingforms JQUERY error - SOLVED

Detail: Joomla4 com_breezingforms JQUERY error
Reason: JQUERY or is library, go to file and replace line

Solution: 'JQuery' replace by 'jQuery'
administrator\components\com_breezingforms\libraries\crosstec\classes\BFQuickMode.php

 

jQuery window load e.indexOf is not a function - SOLVED

Detail:
$(window).load(function() {
alert('Load');
});
Error e.indexOf is not a function
Solution: change code below
$(window).on('load', function () {
    alert('On Load');
});

 

joomla4 .owlCarousel is not function - SOLVED

Detail: Joomla3 owlCarousel function good work, upgrade to joomla4 .owlCarousel is not function
Reason: miss file bootstrap.min.js
Solution: j3 get \media\jui\js\bootstrap.min.js, template j4 load this script

 

Joomla4 error.php check id article redirect

Detail: link url https://domain.php/index.php/1072
Solution: split '/' get last item, is number -> redirect to article

/*CustomRedirect*/
$errUrl= $_SERVER['REQUEST_URI'];    
/*Get Last Number*/
$splitUrls = explode("/", $errUrl);
if(count($splitUrls)>1){
    $lastItem = $splitUrls[count($splitUrls)-1];
    if(is_numeric($lastItem)){
        /*LastIsNumber redirect to article ID*/
        $redirectLink = JUri::base().'?view=article&id='.$lastItem;
        /*echo $redirectLink;*/
        header('Location:'.$redirectLink);
        exit;
    }
}
/*ENDCustom*/

 

Joomla4 happyfox prettyPhoto popup iframe embed not work SOLVED

Detail: Joomla 3, click popup view
Run joomla 4 not view
Reason: joomla4 miss jquery jquery-migrate.min.js
-
Solution: at joomla 3 get media/jui/js/jquery-migrate.min.js
Add to joomla 4

 

Win 10 joomla XAMPP Input variables exceeded Input variables exceeded warning

Warning:  Input variables exceeded 2000. To increase the limit change Input variables exceeded  in php.ini. in 

Solution
Config D:\xampp\apache\conf or C:\xampp\apache\conf (folder did setup xampp)
change or add php_value max_input_vars 10000

 

J4 load template selected params by menu assign

Detail: admin copy template,  template assign by menu item. This copied can change params

Explain: when duplicate template, db will create 1 row template_style new id. And param can change. Template assign by menu item -> #_menu have column 'template_id'

Solution:

template_name/index.php

use Joomla\CMS\Factory;

$app   = Factory::getApplication();
/*getparameName*/
$paramValue = $app->getTemplate(true)->params['param_name'];

Step upgrade j3 to j4

$2y$10$ygBSBRhrai7Efrrkw3cMoehDuElSyzz9NENMj8w6kHJbUZ.q5dunG
-
Upgrade 3.10.12
Upgrade next
mod_unread

SELECT * FROM `jos_extensions` where name='PKG_JOOMLA' or name='atomic' or name='SimplePie' or name='beez5' or name='beez_20' or name='beez5' or name='beez_20' or extension_id='10316' or extension_id='10399'  or extension_id='10400'  or extension_id='10422'  or extension_id='10438';
Upgrade j4
Installs extensions
Import
-
DOCMAN:
    j3 upgrade
    Export
    Import
    Expire
    UPDATE  jos_docman_documents SET publish_on = NULL,unpublish_on = NULL,locked_on = NULL
-
JCALL:
SELECT * FROM `jos_categories` where extension='com_jcalpro'
Categorie rebuild
J3 db export all table 'insert only'
J4 db import
Location : AIzaSyBuKV59lhdpaPMM4AHGSXlyTJrBOCib3K4


ALTER TABLE `jos_jcalpro_events`  DROP `day`,  DROP `month`,  DROP `year`,  DROP `hour`,  DROP `minute`,  DROP `registration_start_day`,  DROP `registration_start_month`,  DROP `registration_start_year`,  DROP `registration_start_hour`,  DROP `registration_start_minute`,  DROP `registration_end_day`,  DROP `registration_end_month`,  DROP `registration_end_year`,  DROP `registration_end_hour`,  DROP `registration_end_minute`,  DROP `end_month`,  DROP `end_year`,  DROP `end_day`,  DROP `end_hour`,  DROP `end_minute`;
-
Visform:
Fields
Form
copy from j3 fix miss icon: media\jui
-
weblinks
Install extension by web
-
Move site
Create j3
Move j3
J4 move to public_html
J3 move to root (empty path)
Config 90, log path, search index, account

PHP version 7.x error CMSplugin::loadLanguage

Detail:PHP verison 7x., joomla error
Relate plugin/system/jsecure

Solution: change or remove plugin

Img zoom magnifier glass

 

 <style>
    * {
        box-sizing: border-box;
    }

    .img-magnifier-container {
        position: relative;
    }

    .img-magnifier-glass {
        position: absolute;
        border: 3px solid #000;
        border-radius: 50%;
        cursor: none;
        /*Set the size of the magnifier glass:*/
        width: 250px;
        height: 250px;
    }
</style>
<script>
    function magnify(imgID, zoom) {
        var img, glass, w, h, bw;
        img = document.getElementById(imgID);
        /*create magnifier glass:*/
        glass = document.createElement("DIV");
        glass.setAttribute("class", "img-magnifier-glass");
        /*insert magnifier glass:*/
        img.parentElement.insertBefore(glass, img);
        /*set background properties for the magnifier glass:*/
        glass.style.backgroundImage = "url('" + img.src + "')";
        glass.style.backgroundRepeat = "no-repeat";
        glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
        bw = 3;
        w = glass.offsetWidth / 2;
        h = glass.offsetHeight / 2;
        /*execute a function when someone moves the magnifier glass over the image:*/
        glass.addEventListener("mousemove", moveMagnifier);
        img.addEventListener("mousemove", moveMagnifier);
        /*and also for touch screens:*/
        glass.addEventListener("touchmove", moveMagnifier);
        img.addEventListener("touchmove", moveMagnifier);

        function moveMagnifier(e) {
            var pos, x, y;
            /*prevent any other actions that may occur when moving over the image*/
            e.preventDefault();
            /*get the cursor's x and y positions:*/
            pos = getCursorPos(e);
            x = pos.x;
            y = pos.y;
            /*prevent the magnifier glass from being positioned outside the image:*/
            if (x > img.width - (w / zoom)) {
                x = img.width - (w / zoom);
            }
            if (x < w / zoom) {
                x = w / zoom;
            }
            if (y > img.height - (h / zoom)) {
                y = img.height - (h / zoom);
            }
            if (y < h / zoom) {
                y = h / zoom;
            }
            /*set the position of the magnifier glass:*/
            glass.style.left = (x - w) + "px";
            glass.style.top = (y - h) + "px";
            /*display what the magnifier glass "sees":*/
            glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
        }

        function getCursorPos(e) {
            var a, x = 0,
                y = 0;
            e = e || window.event;
            /*get the x and y positions of the image:*/
            a = img.getBoundingClientRect();
            /*calculate the cursor's x and y coordinates, relative to the image:*/
            x = e.pageX - a.left;
            y = e.pageY - a.top;
            /*consider any page scrolling:*/
            x = x - window.pageXOffset;
            y = y - window.pageYOffset;
            return {
                x: x,
                y: y
            };
        }
    }
</script>


<div class="img-magnifier-container">
    <img id="mapimage" src="images/Artwork/tour-map.jpg" alt="Map of Lake Havasu" width="1200" height="1000">
</div>


<script>
    /* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
    magnify("mapimage", 3);
</script>

Docman joomla 4 import EXPIRED status- SOLVED

Detail: joomla 3.x DOcman export .zip
Joomla 4.x import .zip
document view Expired status and FRONT END not view

Solution: phpmyadmin run query
UPDATE  jos_docman_documents SET publish_on = NULL,unpublish_on = NULL,locked_on = NULL
 

Explain: This update table record -> publish again

 

 

Upgrade joomla 3 uninstall PKG_JOOMLA protected - SOLVED

PKG_JOOMLA

Detail: Upgrade Joomla3 to Joomla 4, require uninstall PKG_JOOMLA. This is protected not allow

Solution: manual phpmyadmin
SELECT * FROM `jos_extensions` where name='PKG_JOOMLA';
Delete this row

joomla4 Taggable not found - SOLVED

Upgrade joomla 3. to joomla 4. run
"Joomla\Plugin\Behaviour\Taggable\Extension\Taggable" not found 

Solution: remove file administrator/cache/autoload_psr4.php 

Detail: https://github.com/joomla/joomla-cms/issues/38474

Iphone Safari issue toolbar over at bottom

 

Solutions

#1: IOS 16.4 support above 100svh,lvh,dvh (small,large,dynamic view height): old version not supoport
#2: Padding 105px: always have space at bottom
#3: Script view check screen view height: SOLVED this is the best way. This solution reuse idea

https://viblo.asia/p/sua-loi-100vh-tren-thiet-bi-ios-safari-gGJ59GEjZX2

jQuery(document).ready(function(){

const windowHeight = () => {
        var svh = window.innerHeight;
        console.log(svh);
        /*set*/       
        jQuery('#i_display_container_fixed').css('height',svh+'px');
    }
    window.addEventListener('resize', windowHeight);
    windowHeight();

});

HTML to top-bottom-anchor animation

HTML to top, to bottom anchor animation
2 ways:
Jquery is complex
The easiest way add css

/*add to css*/

html {
  scroll-behavior: smooth;
}

Jquery array rename key - CLEAR

Có nhiều cách làm trên internet nhưng bị lỗi, khó hiểu
Cách làm đơn giản nhất là replace string json

myArray = {oldKey1: 'value1', oldKey2: 'value2', another: '1'}
Change oldKey1 = newKey1


/*Object to string*/
var jsonMap = JSON.stringify(myArray);
/*Key replace by newkey*/
var jsonMapReplace = jsonMap.replace(oldKey1,newKey1);
/*string to JSON again*/
myArray = JSON.parse(jsonMapReplace);

Wordpress Twitter feed by Smash Balloon setting

 Detail: plugin Twitter feed by Smash Balloon