Testing if jquery.dimensions.js is installed properly - javascript

hello can I get some tips on how i can test if I have implemented jquery.dimensions correctly?
http://archive.plugins.jquery.com/project/dimensions
sort of like when u test for jquery,
$(document).ready(function() {
alert('hi');
});
I am trying to implement a floating menu bar on a site. suspect that I have not installed dimensions correctly.

You can test if a plugin is loaded with:
if(jQuery().somePluginName) {
// plugin is loaded
}

Related

If i use jQuery(document).ready(function(){ ... my code}) = undifined function

I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins

Fullscreen functionality on saperate html button for highchart in angular

Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.
Here in javascript you can achieve this by simply handling click event like
document.getElementById('button').addEventListener('click', function () {
chart.fullscreen.toggle();
});
I have tried the same thing for angular highcharts :
ngOnInit(){
this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
/*
Do things here after chart is drawn
*/
})
}
onFullScreenClick(){
this.progressChart.fullscreen.toggle()
}
But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.
Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.
import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);
I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.
Docs:
https://github.com/highcharts/highcharts-angular
Live demo:
(note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

dynamic resizing effect in Metafizzy Packery component

I'm looking to JavaScript Packery component. I want to switch the current implementation from GridStack to Packery. One thing that stops me right now is a lack of dynamic resizing effect of components(panels) in Packery. Right now I'm unable to find this feature in demo or documentation.
Is any way to implement/enable this feature in Packery?
This can certainly be done. Use the "Responsive Layouts" set-up as your model: https://packery.metafizzy.co/layout.html#responsive-layouts
Critically, you should also use Metafizzy's own imagesLoaded js to load the javascript after the images are fully loaded: https://imagesloaded.desandro.com
The full javascript call (packery inside of imagesLoaded) should look like this:
<script type='text/javascript'>
$('.grid').imagesLoaded( function(){
$('.grid').packery({
itemSelector:'.grid-item',
percentPosition:true, // *critical for responsive layout*
// your own further options
});
});
</script>
If you are still having trouble, try reversing the js call so that imagesLoaded is called after every image is loaded, as recommended on the Packery webpage: https://packery.metafizzy.co/layout.html#imagesloaded
Good Luck!

TinyMCE 4 replicate clicking of a toolbar icon

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

How to use Phonegap SoftKeyboard Plugin for Android?

I am developing an Android application using Phonegap. I need to make the softkeyboard appear programatically. I am using the SoftKeyboard plugin which is found here. Can anyone tell me how to properly include this plugin & make it work? I have tried the tutorial found on the Phonegap Wiki, but the plugin is not working.
[Update] I have added the plugin to the path
com/zenexity/SoftKeyBoardPlugin/SoftKeyBoard.java
Updated plugins.xml and included
<plugin name="SoftKeyBoard" value="com.zenexity.SoftKeyBoardPlugin.SoftKeyBoard"/>
Then in the www folder added softkeyboard.js, and the following in index.html
plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
But nothing happens, the keyboard is not displaying..
This is how I got SoftKeyBoard working in my application.
DroidGap Side
create /src/com/phonegap/plugins/SoftKeyboard with provided file SoftKeyBoard.java inside
add to /res/xml/plugins.xml:
< plugin name="SoftKeyBoard" value="com.phonegap.plugins.SoftKeyboard.SoftKeyBoard" />
/assets/www Side
add provided file softkeyboard.js to /assets/www/js
add to index.html in the head where your other javascripts are included after you have included the phonegap javascript:
< script type="text/javascript" charset="utf-8" src="js/softkeyboard.js"></script>
You can then call the following if you are on device or using something like Ripple:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
or something like this if you want to make sure the namespace is available, which will prevent undefined problems:
((((window || {}).plugins || {}).SoftKeyBoard || {}).show || function(){})();
I think maybe where you went wrong was not including the js/softkeyboard.js in your head of index.html.
Hope this helps you
For the latest version of PhoneGap (Apache Cordova 2.1.0) I had to do the following:
Installed these plugin sources which reflected the project name change:
https://github.com/originalgremlin/phonegap-plugins/tree/master/Android/SoftKeyboard
Copy softkeyboard.js to your javascript library directory.
Copy SoftKeyBoard.java to src/org/apache/cordova/plugins/SoftKeyBoard.java
Put this in your HTML file, after including the cordova.js file:
<script src="/path/to/javascripts/softkeyboard.js"></script>
Add this to the bottom of the res/xml/config.xml plugins section:
<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />
Now, assuming this HTML:
<button id="keyboard">Toggle Keyboard</button>
This jQuery should do something useful:
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
$('#keyboard').toggle(softkeyboard.show, softkeyboard.hide);
Try it like this:
SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
The code in the JS file does not put it in the "plugins" namespace.
Orjust use the PhoneGap plugins full namespace:
window.plugins.SoftKeyBoard.show(function () {
// success
},function () {
// fail
});
Cordova 3.0 + JQM 1.3.2: Changing "fullscreen" to "false" in config.xml fixed the "adjustPan" and prevented my inputs from being covered when the keyboard displayed. However, blur() would not close the keyboard and this plugin worked wonderfully.
For the almost latest version of phonegap:
Add SoftKeyBoard.java to your app package in src
Add softkeyboard.js to assets/www
Update config.xml with:
<feature name="SoftKeyBoard"><param name="android-package" value="com.yourAppPackage" /></feature>
Call your plugin: plugins.SoftKeyBoard.hide(function() {//success }, function() {//fail });
go through the link. here is the full project:--
SoftKeyboardPlugin by Simon McDonald

Categories

Resources