dynamic resizing effect in Metafizzy Packery component - javascript

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!

Related

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

Convert slider/carousel to pager while switching from Desktop to Mobile View

I have created a slider/carousel like the one below on left - Desktop view.
I would like it to be switching to Pager based slider on mobile screens - like the one on the right side.
I have used this script for desktop slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html
Any help will be great, Thanks!
You will have to use 2 plugins for this. As far as I can tell there is no "pager" option for the plugin you are using. And then, using JavaScript you should destroy current plugin and initialize new one. Which could also be a problem since I don't see any sort of destroy method for your plugin. So ok, it would look something like this.
function init3DSlider() {
$('.your-container').carousel({
your: 'options'
})
}
function initPagerSlider() {
$('.your-container').somePagerPlugin({
// ...your options
})
}
// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
if(window.matchMedia('(min-width: 768px)').matches) {
init3DSlider()
// ...somehow destroy pager slider
} else {
initPagerSlider()
// ...somehow destroy 3d slider
}
}
// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)
Since this 3d slider doesn't have destroy method, try using this: http://ub4.underblob.com/remove-jquery-plugin-instance/
Or you can use a more simple solution, and that is to duplicate your slider, initialize both sliders (3D and pager). And then using CSS media queries you would hide one or the other.
Not exactly optimal but it will work.

When Isotop/masonry 1st loaded it get crumpled all together how to fix?

When Isotop/masonry 1st loaded it get crumpled all together how to fix ? but after i refresh it it just got back to normal. Visit this link to check it live.
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Here are the instructions on how to utilize it. Isotope v2 does not include it so you need to download and load it in your page.
If your layout has images, you probably need to use imagesLoaded.
Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.
You can use ImageLoaded by adding some JS:
<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});

AngularJS re-initialise JS after statechange

I have social buttons from http://sharethis.com that I want to put on a profile page on my app. I'm using the ui-router for state management and page transitions, etc.
I've put the code I got from sharethis onto my index.html:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "66053d76-64c6-4378-8971-aac043dbbc5d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
and the markup on my profiles page:
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
What's happening is the social buttons are only loading when you refresh on the profile page (which is expected behaviour I guess). If the app bootstraps from say the homepage and then you transition to the profile page they aren't being loaded.
Are there any tricks that I can use to re-initialise or reload these javascript files?
I've spend some time investigating sharethis source code and found this function which creates buttons, on page controller add this function call and this will add the buttons.
stButtons.makeButtons();
While this might not be the best way according to documentation or best-practices, this was my solution. I had a particular view where I wanted a new set of ShareThis buttons to load. So I created a function which initialized the buttons again.
Here is the function which I placed in my controller:
$scope.loadShareThis = function() {
stButtons.makeButtons();
}
I then inititalize the function using ng-init in my html:
<div ng-init="loadShareThis()">
<share-buttons></sharebuttons>
</div>
This is probably not the answer, because you want to use shareThis, but I decided to use addthis, since I did not found a way to make shareThis work with angular.
Addthis enables asynchronous loading and dynamic rendering.
You can make it work like described here: http://support.addthis.com/customer/portal/articles/1293805-using-addthis-asynchronously.
And then you would probably want to make it into an angular directive, like described here: http://www.laurentiu-ciovica.com/2013/07/angularjs-addthis-directive.html
Answers by AlexG and Jeff Callahan gave me the direction, but it still didn't work for me. I had to wrap
stButtons.makeButtons()
in $timeout and now it works.
In HTML I have (JADE syntax)
my-directive(ng-repeat="review in myReviews" ng-init="loadShareThis()")
and in my controller I have
$scope.loadShareThis = function() {
$timeout(function(){
stButtons.makeButtons();
});
};
Has to do something with Angular digest cycles.

fraction slider not working

I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!

Categories

Resources