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

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.

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

understanding Plugin destroy function

hey guys i am very new to js and jquery in genenral and i was just going throught the plugin code of a gallery plugin , i can across the function called _loadevents , that had the following content , see below :
this.$navPrev.on('click.gallery', function (event) {
});
this.$navNext.on('click.gallery', function (event) {
});
this.$wrapper.on('webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function (event) {
});
now $navPrev , $navNext , and $wrapper are obviously some HTML element , now my question is about another method i came across in the same plugin , look below :
destroy: function () {
// console.log('inside destroy');
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
}
now i see that if this function is called all the event handlers will be taken off. now , can somebody tell me what is the necessacity of such a function , does it improve a plugins efficiency ? how or when does such a function get used and is it a common practice to write e destroy function for events in plugins ?
Thank you.
Alex-z .
Destroy functions in plugins enable a developer to reset or remove a plugin from an element, restoring the element to before the plugin was initialised. This is useful if, for example, you have a gallery plugin that works and looks fantastic on desktop, but you don't want it on mobile. You can listen to resize event on window and if the window size is smaller than e.g. 710px then destroy the plugin. This will remove all the added events, undo any DOM manipulation, and restore the html elements back to how they were before the plugin was first initialised (turn-wise, if the window size is larger than 710px then initialise the plugin).
They are generally considered good practice.

Switch between Superfish and FlexNav depending on window width

I am trying to use 2 jQuery navigation scripts on one page (Superfish for desktops and FlexNav for mobile). I am currently using matchMedia along with the polyfill by Paul Irish to respond to CSS3 media query state changes within JavaScript.
The current code is only accomplishing 50% of the overall goal. If you access the web page initially with a window size equal to or greater than 999px wide then you get Superfish and if you initially access the web page with a window size less than 999px then you get FlexNav. The problem occurs when you resize the window above or below 999px as both scripts become active.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 999px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
$("ul.sf-menu").superfish({
delay: 350,
speed: 400,
});
} else {
$("ul.flexnav").flexNav({
'animationSpeed': '250',
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false
});
}
}
As much as I would like to get this working with matchMedia, I am open to all suggestions.
Update: Thanks to Stephan's suggestion I now have the following code:
jQuery(document).ready(function () {
// add destroy function for FlexNav
flexNavDestroy = function () {
$('.touch-button').off('touchstart click').remove();
$('.item-with-ul *').off('focus');
}
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 999px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
if (typeof (flexNav) != "undefined") {
flexNavDestroy();
}
superfish = $("ul.sf-menu").superfish({
delay: 350,
speed: 400,
});
} else {
if (typeof (superfish) != "undefined") {
superfish.superfish('destroy');
}
flexNav = $("ul.flexnav").flexNav({
'animationSpeed': '250',
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false
});
}
}
});
Remaining Issue:
The destroy function for FlexNav is only partially destroying it.
The best way would probably be to destroy the other plugin when you're activating one.
If I look in the source of Superfish there is a destroy function which does this, but flexNav doesn't have such a function. You can create one though:
flexNavDestroy = function(){
$('.touch-button').off('touchstart click').remove();
$(('.item-with-ul *').off('focus');
}
Then you could do this:
function WidthChange(mq) {
if (mq.matches) {
if(typeof(flexNav) != "undefined") {
flexNavDestroy();
}
superfish = $("ul.sf-menu").superfish({
delay: 350,
speed: 400,
});
} else {
if(typeof(superfish) != "undefined") {
superfish.superfish('destroy');
}
flexNav = $("ul.flexnav").flexNav({
'animationSpeed': '250',
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false
});
}
}
UPDATE
I've looked a little bit more into FlexNav, and there's a few things I missed.
I think the styles are colliding because FlexNav sets a lot of styles by default. We can easily prevent that by using two classes: One for flexnav styling (the default .flexnav) that we can remove to hide all it's styles, and one for binding the javascript function (that will always stay there, or we can't re-attach it).
I generally like to prepend any classes that are meant as JS hooks with js-, so in my example (below) I replaces the .flexnav class on the menu with .js-flexnav. Then to activate flexnav you have to add this line just before you call $('ul.flexnav').flexNav()
$('.js-flexnav').addClass('flexnav');
In the destroy function you will have to remove the class again, which I will show shortly.
In addition, I'm not sure how Superfish does the showing and hiding, but since FlexNav collapses all submenus, it's also safe to say you should re-show them so that Superfish can do it's own thing.
The updated destroy function to reflect this:
function flexNavDestroy(){
$('.touch-button').off('touchstart click').remove();
$('.item-with-ul *').off('focus');
$('.js-flexnav').removeClass('flexnav').find('ul').show(); // removes .flexnav for styling, then shows all children ul's
}
Here's a jsFiddle that shows activating/deactivating flexNav with the new code: http://jsfiddle.net/9HndJ/
Let me know if this does the trick for you!
here is an alternative path :
once page is loaded :
cache the menu in a jquery object, clone it & instantiate both plugin one on each clone
$menucontainer= $("#menu_container");
$memufish = $menucontainer.find(".menu");
$menuflex=$menufish.clone();
$menufish.superfish().detach();
$menuflex.prependTo($menucontainer).flexnav().detach();
(they are loaded anyway so it's no big deal even if most of the time one won't be needed, it will be there & ready just in case - however test if you can instantiate on the clone without appending it to the DOM)
depending on width append / prepend the required one
$menuflex.prependTo($menucontainer);
on change width detach one reattach the other
$menufish.detach();
$menuflex.prependTo($menucontainer);
you could also work your way checking if plugin was instantiated on a width change (in order to not instantiate uselessly onload) but in any way I believe the use of clone() and detach() are very much adapted to solve easily your problem. The destroy way seems to be a hassle, lots of work (for the script as well when some user is raving with window resize) loss of time & a risk of many bugs to me ( expect more and more lag at every destroy re instantiate - with detach() no worries)
cons : will use a bit more memory overhaul
pros :
script will work less & it will be real fast to switch from one to the other
you could make a plugin from this and add other menu plugin to your app very easily without worry about conflict and how to destroy

Responsive Javascript Image Resizing

Apologies for the general question but I have been looking to implement an image showcase similar to the new Flickr layout like in this example
The difficulty I am having is in the responsive design. I have looked at various plugins including: Isotope, Wookmark, Grid-a-licious but all of these solutions either leave uneven margins/gutters when the browser window is resized or don't align at the bottom in the style of pinterest where things are just stacked vertically on rows.
I was wondering if anyone knew of a plugin that would resize images to completely fill the width of rows and align all images correctly at the bottom like on Flickr.
Alternatively it would be great to know where to get started on the javascript for something like this?
I know it's too late but this library does what you need:
http://masonjs.com/
in my travels i have worked on a few responsive sites via css3 media queries. here is a modified solution i found and used in cases where i need to trigger javascript on the event of changes in the media queries:
// define a query here
var theQuery = "(min-width: 960px)";
var mql = window.matchMedia( theQuery );
var TO = setTimeout( function(){}, 100);
var handleMediaChange = function (mediaQueryList) {
if (mediaQueryList.matches) {
// the media query evaluates to true
clearTimeout(TO);
window.state = 0;
TO = setTimeout( function(){
// javascript actions go here
}, 100 );
} else {
// #media query evaluates to false
clearTimeout(TO);
window.state = 0;
TO = setTimeout( function(){
// javascript actions go here
}, 100 );
}
}
mql.addListener(handleMediaChange);
handleMediaChange(mql);
in essence it allows us to define a query and then add a listener to watch the window object for changes that would trigger our query. when it triggers i have defined two sets of javascript one each for media query evaluating to true or false, but you could remove this if condition and just have any change execute some script...
give this a try and hope it helps

JavaScript functionality to browser window resize

I have been writting HTML and CSS for a while but am new to the javascript domain. I am using the below code to control the attributes of a jQuery slider. The code works fine, but what I need to do is change some of the elements within it as the browser screen resizes (or loaded on mobile device) to enable the functionality to work correctly on smaller screens.
$(document).ready(
function() {
$(".container").wtListRotator({
screen_width:534,
screen_height:300,
item_width:210,
item_height:75,
item_display:4,
list_align:"left",
scroll_type:"mouse_move",
auto_start:true,
delay:5000,
transition:"v.slide",
transition_speed:800,
easing:"",
auto_center:true,
display_playbutton:false,
display_number:false,
display_timer: false,
display_arrow:true,
display_thumbs:true,
display_scrollbar:true,
mouseover_select:false,
pause_mouseover: true,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
cpanel_align:"TR",
timer_align:"bottom",
move_one:false,
auto_adjust:true,
shuffle:false,
play_once:false,
mousewheel_scroll:true,
block_size:75,
vert_size:50,
horz_size:50,
block_delay:35,
vstripe_delay:90,
hstripe_delay:180
});
}
);
I have already implemented media queries on the elements in the CSS so they resize and also across the rest of my site, however I am struggling to change the attributes below when the screen size/re-size event occurs and define this in the above javascript.
screen_width:534,
screen_height:300,
item_width:210,
item_height:75,
item_display:4,
Thanks
Rich
two things that might help you:
1) you can always get the current usable width/height of the browser window using window.innerWidth and window.innerHeight.
2) you can "register" a function to be called whenever the size of the window changes. Examples:
window.addEventListener("resize",nameOfFunction);
window.onresize = function() { //do stuff };
I'm happy to help if you have further questions...

Categories

Resources