I have a JS FlexSlider module in my joomla page.
It works fine on all positions but not at the Position I want it to be.
And the position works fine with all other modules.
Here is the page: http://www.ehemalige-hoelderlingym.de
If you check your browser console, you will see a JS error. You also have 2 jQuery libraries being imported which simply means that the developer of FlexSlider has not stuck to Joomla coding standards.
In the Module Parameters, you will see the option Enable jQuery 1.8.2? which you need to set to No.
This will prevent duplicate jQuery libraries being imported and thus most likely fix the console error.
They should really remove this option for the Joomla 3.x version of JS FlexSlider as it is simply not required.
Update:
I've checked Firebug and you're now getting an error because the module is importing the script before jQuery.
You have 3 options:
Option 1: Download and install the jQuery Easy plugin. This will ensure jQuery is loaded only once and before any other script on your site.
Option 2: Create a Template Override for the module and once done, in the default.php change this:
<script src="modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js" type="text/javascript"></script>
to this:
<?php JHtml::_('script', JUri::root() . 'modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js'); ?>
Option 3: Use a different slider extension
Personally I would go with option 3 as you shouldn't have to rely on a 3rd party plugin to get a slider working, and option 2 is something the developer should do.
Related
I want to edit some images which can only be done in WPBakery Page Builder. So, when I try to edit the page with it, the frontend editor (page builder) doesn't loads. Console shows the following error:
Although, the library script tag is added before the tag which is using this library:
I don't know if any of this makes sense, but, yeah, I have tried these solutions because they were mentioned on different forums:
Adding charset="utf-8" to external script tag.
Moving the script tag inside Raw HTML element.
Using $(document).ready(function(){}) to enclose the whole of second
script. So, that it loads after everything is loaded.
Unfortunately, none of these worked for me.
The page builder works fine on pages where I don't use the d3.js library. And, the visualization works fine WHEN NOT IN PAGE BUILDER - the library loads up and the visualization is displayed. You can check it out here:
https://conductscience.com/age-when-charles-darwin/
Also, please note that I don't have access to any of the theme files. So, I can't make any changes to functions.php or any other file.
Your question is related to the WPBakery, not Visual Composer plugin. You need to have the latest version 5.7 in order to fix this issue. More information, contact support.wpbakery.com if you have a valid license.
I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.
I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.
My script imports are like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
However, when I try
$('[data-toggle="popover"]').popover();
I get the following message in the Chrome console:
Uncaught TypeError: $(...).popover is not a function
At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:
http://getbootstrap.com/customize/
and got the same error message (re-pointed the script tags towards the local js file).
Doing a search for "popover" the bootstrap.min.js file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
Shows that popover is included in the file.
Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js
For Bootstrap 5 onwards this is how you add popovers
Code for Button:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)
</button>
Script:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
Had the same problem and checked jquery version. Moving to v1.12 helped me
What worked for me, was making a call to $.noConflict() which returned control of $.
That was because some other JavaScript libraries use $ as a function or variable name, just like jQuery does. During jQuery initialization, there are some old references of $ saved. noConflict() restores them.
$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});
Assuming you are correctly added popover script in the your site.
To fixed the "$(...).popover is not a function" bug. Sometime just add a timer delay can be fix it.
$('[data-toggle="popover"]').popover();
Modify to
setTimeout((function() {
$('[data-toggle="popover"]').popover();
}),500);
Sometimes (always) the web page doesn't fully render the content and the POPOVER will gives this error. So, We need 500ms delay starting the popover script. Sometimes 500ms is not enough to wait for rendering, so more delays can be modified as needed.
Even in bootstrap 5 has this issue too
Conclusion
POPOVER script starting need waiting whole page completely render.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
This is Happen due to Differ version of bootstrap
In This case use script of same version as your bootstrap
In other case jquery is not recommended. insted use Advance Css Js
This is also happen cause latest bootstrap doesn'
After hours, I found out that I forgot to attach bootstrap.js file to my page ;)
I can't get Zurb Foundation to work correctly in Padrino. The stylesheets are compiled and loaded, but the Foundation modules don't work.
http://intense-falls-2845.herokuapp.com/
is a haml version of
http://foundation.zurb.com/templates/marketing.html
, but neither the dropdown menu nor the orbit slider are working. the project was generated using:
$ padrino g project PadrinoFoundation -e haml -c compass -s jquery -b
$ padrino g plugin camorra
$ bundle install
with some editing to app/app.rb (create a route), app/stylesheets/application.scss (remove compass references to blueprint) and app/views/application.haml (layout, read below).
these can be viewed below:
(route) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/app.rb
(stylesheet) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/stylesheets/application.scss
(layout) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml
(whole repository) https://github.com/bcsantos/PadrinoZurbFoundation
concerning the layout, i used https://github.com/CIRCUITLLC/foundation_templates_haml/blob/master/haml/marketing.html.haml but being new to haml i may have made mistakes. hopefully if someone points me in the right direction i can figure things out.
any ideas about what's wrong?
thanks for reading.
Several things I noticed while inspecting your page:
A 404 error when loading Modernizr: Your page is trying to load Modernizr from /javascripts/modernizr.js but the file is actually in /javascripts/vendor/modernizr.js (in the vendor folder).
Missing Foundation JavaScript plugins: Your page is loading /javascripts/foundation/foundation.js but it only contains the Foundation core and none of the plugins (the top bar dropdown menus and Orbit slider are implemented as plugins). The file you want to load appears to be /javascripts/foundation.js (one level up).
Missing data- attributes to trigger plugins: The top bar and Orbit slider plugins are activated by data- attributes in the HTML (you can find these attributes in the source for http://foundation.zurb.com/templates/marketing.html). You'll need to add these attributes to your view.
I'm not sure if these changes are sufficient to get your page working, but they appear to be necessary for any further debugging.
Update: Now there is a ReferenceError: jQuery is not defined JavaScript error, triggered from the Foundation library. According to Foundation's JavaScript setup instructions, jQuery and FastClick need to be loaded before the Foundation script(s). (I'd also follow that documentation and load jQuery first, followed by FastClick, then Foundation.)
As an aside, all the major browsers now have developer tools built-in. I suggest exploring the developer tools for your browser of choice; they will save you a lot of time and effort :-)
I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.
I have a Joomla K2 site, and when user clicks on the image in K2 it should be opened in a popup with k2. But now that doesn't work anymore and the problem is in the Zoomy script. Here is an item from my site can any body help me fix this problem?
Well I think the problem is that you have 5 versions of jQuery running lol. If you open the source using Firebug or Chrome's extension, you will be able to see. If the extensions you have have a jQuery parameter, turn 4 of them off, else use the following code to ensure that it's only embedded once:
<?php
// load jQuery, if not loaded before
if(!JFactory::getApplication()->get('jquery')){
JFactory::getApplication()->set('jquery',true);
$document =& JFactory::getDocument();
$document->addScript(JURI::root() . "path_to_file/jquery-1.8.2.js");
}
?>
Update:
Here are the jQuery files being embedded:
ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
/plugins/content/plg_zoomin/plg_zoomin/jquery-1.5.min.js
/modules/mod_sj_k2_accordion/assets/js/jquery-1.5.min.js
/plugins/system/onexitpopup/js/jquery.1.7.1.js
Im not sure where the 2 googleapis ones are coming from, but 1 is coming from a module called mod_sj_k2_accordion and the others are coming from 2 plugins. So find the plugins and either remove the jQuery reference or add the code I posted above instead. If you do use the code I posted above, please make sure you change the path your path.