Develop Reference

Switch vertical carousel (desktop) to horizontal carousel in mobile

They know a one plugin that let me change/transform a vertical (desktop view) carousel to a horizontal carousel on mobile devices?
Now I'm working with slick plugin but I can't get the result that I need, this is my JS code:
$('.demo-slider).slick({
vertical: true;
});
var windowWidth = $(window).width();
if(windowWidth < 768){
$('.demo-slider').slick('unslick',function(){
$('.demo-slider).slick({
vertical: false;
});
});
}

$('.demo-slider).slick({
vertical: true,
responsive: [
{
breakpoint: 767,
settings: {
vertical: false
}
}]
});
Slick have own responsive breakpoints. This will be work much better

I think where you are going wrong is you're initializing slick() twice (you also forgot closing ' on your jQuery selectors). I would switch the faux media query to be out of slick()'s initialization, like this:
// 1- Get window width
var windowWidth = $(window).width();
// 2- For all devices under or at 768px, use horizontal orientation
if(windowWidth <= 768) {
$('.demo-slider').slick({
vertical: false,
});
}
// 3- For all devices over 768px, use vertical orientation
else {
$('.demo-slider').slick({
vertical: true,
});
}
*note, I've never used slickslider, just looking at your JS.

Fire script once with JQuery window resize and media queries

I'm using Masterslider to power an image carousel.
For desktop, I'd like the script to run layout: 'autofill'. For mobile, I would like the script to run layout: 'boxed'.
To achieve this, I am using window .resize() with Modenizr mq:
( function( $ ) {
$( window ).resize(function() {
if (Modernizr.mq('(max-width: 767px)')) {
var slider = new MasterSlider();
slider.setup('masterslider' , {
width: 1440, // slider standard width
height: 400, // slider standard height
space: 5,
layout: 'boxed',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
} else {
var slider = new MasterSlider();
slider.setup('masterslider' , {
width: 1440, // slider standard width
height: 400, // slider standard height
space: 5,
layout: 'autofill',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
}
}).resize();
} )( jQuery ); // End JQuery
This method seems to fire the script multiple times with the following multiple errors in console:
Uncaught TypeError: Cannot read property 'position' of undefined
How should I run the script only once, calling the layout operator on resize?

Speaking with another developer, we came up with the following solution:
( function( $ ) {
var slider = new MasterSlider();
var changeSetup = function(){
if (Modernizr.mq('(max-width: 767px)')) {
slider.setup('masterslider' , {
width: 1440, // slider standard width
height: 400, // slider standard height
space: 5,
layout: 'boxed',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
}
else {
slider.setup('masterslider' , {
width: 1440, // slider standard width
height: 400, // slider standard height
space: 5,
layout: 'autofill',
});
// adds Arrows navigation control to the slider.
slider.control('arrows');
}
};
changeSetup();
$( window ).resize(function(){
changeSetup();
});
} )( jQuery ); // End JQuery

Content inside fancy box need to be responsive

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/

As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.

every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}

I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest

you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}

jQuery animating issues?

So far, I have a pretty decent code to animate a center box. For some reason, when I preview this on different browsers and computer (Mac and PC) I get different results. One may show a faster animation speed, while the other is perfect. I have also noticed that when the box is being animated from left to right, there is a stutter, and the animation jerks. I can't really explain it more than that. My code is below:
$(document).ready(function(){
isAnimating = false;
$('.wrapper').on('click', '.arrow-left', function() {
if(isAnimating) return;
isAnimating = true;
var $current = $(this).parents('.signupBox');
var $next = $(this).parents('.signupBox').next();
$current.stop(true,true).animate({
left: "200%"
}, 500, 'linear', function() {
$current.css({
left: "-200%"
}).appendTo('.wrapper'); // move to end of stack
$next.css({
left: "-200%"
}).stop(true,true).animate({
left: "0%"
}, 500, 'linear', function() {
isAnimating = false;
});
});
}).on('click', '.arrow-right', function() {
if(isAnimating) return;
isAnimating = true;
var $current = $(this).parents('.signupBox');
var $next = $(this).parents('.signupBox').siblings().last();
$current.stop(true,true).animate({
left: "-200%"
}, 500, 'linear', function() {
$current.css({
left: "200%"
});
$next.prependTo('.wrapper') // move to front of stack
.css({
left: "200%"
}).stop(true,true).animate({
left: "0%"
}, 500, 'linear', function() {
isAnimating = false;
});
});
});
});
Some CSS:
.signupBox:first-child {
display: block;
}
.signupBox {
display: none;
}
.wrapper
{
overflow: hidden;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: absolute;
}
Here's a JSFiddle showing what happens, hopefully you can see what's the issue from there.
Then animation from right to left (click on the < symbol and you will see a slign change in speed.

Different browsers could have different results when using JS and css transitions, it actually depends on your machine speed, browser speed as well. It could depend on how many opened tabs you have in each browser, browsers plugins could freeze animations as well. Other JS events as well.
I have tested your code in Chrome, FF (wasn't able to check it in IE11, it seems there are JS errors on jsfiddler using jQuery). Didn't mentioned something strange.
I could recommend to use Greenshock JS animating library. http://www.greensock.com/get-started-js/
They say it's x20 times faster jQuery animate. But i think actually may be in 2,3 )
That libruary is based on Flash library that was used by Action Script coders to create beauty animations in Flash.

Styling the default scrollbar on the right

Hi I have been trying for the last hour to change the way the default scrollbar looks on browser.I am talking about the main scrollbar on the right not ading a new one and styiling it.I am using the jScrollPane plugin but it does not seem to work or I am not doing something right.Here is my code:
$("window").jScrollPane();
window
{
width: 100%;
overflow: auto;
}
window
{
height: auto;
}

If you go to the website that A.K. has linked, you will see the necessary Jquery and CSS for this to work. I have made them easier to understand for you.
$(function()
{
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container'); //this should be the most parent
// div, right beneath the <body> and covering the entire page. Change the ID HERE.
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane( //this is where outer scroll changes
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});
Now CSS:
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
/*** Optional INNER scrolls.
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
***/
Don't forget to include Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js