Develop Reference

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.

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

appcelerator orientationchange navbar image hide / show

I'm building an app with some tabs for the iPhone.
rephrased the question in the appcelerator website here
When i change from portrait to landscape i want to hide the navbar.
it works fine if i don't switch to another tab.
But when i view 1 tab in portrait,
switch to another tab, change to landscape view,
switch back to the first tab,
and then change to back portrait
the navbar (window.barImage) is all stretched out ( to the size of a landscape navBar )
Also when i remove all my code for hiding the navbar the same problem occurs.
I've tried setting the barImage again on orientationchange but that does not help either.
a site note: I'm using the same image on every tab for the navBar could that be the problem?
I marked in green the navbar image, the blue part is where the image normally should be.
Also note that the image is the right size for a portrait view of the navbar.
code:
var windowWidth = Ti.Platform.displayCaps.platformWidth;
var catWin = Ti.UI.createWindow({
title:'',
barImage: 'images/barImage.png',
url:'vacancies/categories.js',
width: windowWidth
});
catWin.orientationModes = [
Titanium.UI.PORTRAIT,
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
];
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.orientation == Titanium.UI.LANDSCAPE_RIGHT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.LANDSCAPE_LEFT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.PORTRAIT){
catWin.showNavBar();
}
});

You really need to post more code, for example I have no idea if you are using Ti.UI.currentWindow.hideNavBar(); or if you are using just the .hide(); and .show();?
From what I can tell you're problem however possibly lies with the the width. Trying setting it to '100%' instead of using the platformWidth. Once again without all the relevant code such as your orientationchange event this is best advice I can give. Hope it helps.
THIRD COMMENT: possibly
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.source.isLandscape()){
catWin.hideNavBar();
} else {
catWin.barImage = 'images/barImage.png';
catWin.showNavBar();
}
});
Just somewhere in there or the tab events. I would play around with that idea and see if it gets you any further?

While this is not the best solution because it still looks a bit odd ( but way better then before, ) this is the best solution until now.
I have found some kind of solution by using the following code:
I've set the barImage in the createWindow code so at least at the beginning it looks OK:
var jbWin = Ti.UI.createWindow({
title: '',
url:'homePage.js',
barImage: 'images/jobbroker_bar.png'
});
Then on orientationchange I unset the barImage and start using the titleImage:
Titanium.Gesture.addEventListener('orientationchange', function(e){
if(e.source.isLandscape()){
catWin.titleImage = '';
catWin.barImage = '';
catWin.hideNavBar();
else if( e.orientation != Ti.UI.FACE_UP && e.orientation != Ti.UI.FACE_DOWN ) {
catWin.titleImage = 'images/jobbroker_bar.png';
catWin.showNavBar();
}
}

have you tried using the "titleControl" on the Navbar to set the image instead of the barImage control?
also can you post a small apps.js file with the associated image somewhere? it is difficult to full grasp the problem without running the project