first post here; apologies for any information that is missed. I'm a complete novice at Javascript so apologies in advanced also.
I am currently creating a responsive website with a slider.
The slider takes up the entire background of the site on larger devices, but when the window is less than 480px I would like the slider to scale down to a smaller area. I have this working correctly, in terms of when the device first loads up the page. The correct slider settings are being used.
But what I would like is: if the user scales the website below 480px then the javascript will change at that point (like CSS media queries) to use the new slider settings. At the moment, if you scale below or above the threshold, you have to refresh the page to get the new slider settings.
This is some code I managed to find from other questions asked on the site, but it does not allow the change to happen when the window is resized, only on a refresh:
<script>
$(document).ready(function(){
if($(window).width()>480){
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: true,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: false,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
return;
} else {
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: false,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: true,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
}
});
</script>
I am completely new to Javascript, so this may be a simple problem; but it's beyond me all the same.
You can wrap your code inside a function like this:
function slider() {
// your code here
}
which is then called on page load:
$(function(){
slider();
});
and also on window resize:
$(window).on('resize', function() {
slider();
});
Related
I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)
I'm working on an horizontal scrolling website.
On it, I'm using mousewheel.js plugin (to allow horizontal scroll with mouse wheel) and the magnific-popup plugin.
When someone activates the magnific-popup plugin by clicking on a photo, it opens the photo, as it should be, and background scrollbars are disabled.
But, as I'm using mousewheel.js, the background is still scrollable with mouse wheel.
How would it be possible to disable background scrolling only when magnific-popup is showing a photo ?
I have a similar problem. This decision helped me in part.
$('#open_button').magnificPopup({
type: 'inline', // Custom settings, never mind
closeBtnInside: false, // Custom settings, never mind
fixedContentPos: false, // Custom settings, never mind
fixedBgPos: true, // Custom settings, never mind
callbacks: {
open: function() { // When you open the
$('body').css('overflow', 'hidden'); // window, the element
}, // "body" is used "overflow: hidden".
close: function() { // When the window
$('body').css('overflow', ''); // is closed, the
}, // "overflow" gets the initial value.
}
});
fixedContentPos: true,
overflowY: 'hidden',
This should work!
recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!
Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});
I am using fullpage.js (https://github.com/alvarotrigo/fullPage.js) which is a full page slider.
I am not experienced in development but what i'm trying to achieve is that if the browser size is say for example at 640px the fullpage.js function switches the control inside the function from;
autoScrolling: true, to autoScrolling: false,
This is what the function looks like;
$(document).ready(function(){
$.fn.fullpage({
anchors: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact'],
navigation: true,
navigationPosition: 'right',
scrollingSpeed: 400,
autoScrolling: true,
navigationTooltips: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact']
});
});
Reason is that because of the nature of this plugin after the screen is reduced in size my divs and content gets lost because its cuts off so by actioning a different control i can make the smaller devices run natural scrolling of the page without limiting the size in height.
So is there a way or a script that can identify the screen being reduced like a css media query so it would action the javascript if its of a certain breakpoint and then use a different one at a different breakpoint?
I apologize in advance if this is something silly or really obvious to ask this is not my area of expertise (using/writing/reading javascript), but can this be done? Is the logic i'm thinking to achieve such a solution the right way to do it, or is there a much easier way?
Thanks
Something like that? (Not tested)
$( window ).resize(function() {
var windowWidth = $( window ).width();
if (windowWidth < 640) {
$.fn.fullpage.setAutoScrolling(false);
}
else {
$.fn.fullpage.setAutoScrolling(true);
}
});
I am trying to reduce the cube size for small screens using media queries.
I gave media queries in js since my cube-size is set in js,
but my cube size is not reducing when I decrease the browser window.
Can you tell me why its not working?
http://jsfiddle.net/rajkumart08/8YK2n/embedded/result/
$(window).bind('resize', function() { location.reload();
Gallery.setOptions({
size: 78,
lightbox: false,
//animation: 'drop'
//speed: 500,
//closeOnEsc: true,
//slideshow: false,
//slideshow_speed: 3000,
//cube_speed: 1000
});
});
if (screen.width < 600) {
$(window).bind('resize', function() { location.reload();
Gallery.setOptions({
size: 25,
lightbox: false,
//animation: 'drop'
//speed: 500,
//closeOnEsc: true,
//slideshow: false,
//slideshow_speed: 3000,
//cube_speed: 1000
});
});
Probably because you're using location.reload(), which will refresh the page and not run any of the subsequent code?
You're also doing the check outside of the resize handler, so you only bind the appropriate handler based on the window's original size. (Actually, if the window is smaller than 600, you'll bind both handlers and they'll both run!) You probably want that if inside your handler.
FYI, this isn't a "media query"; those are a specific new feature with a particular syntax ported from CSS. screen is an ancient DOM0 thing.
Also I've gotta say the endlessly rotating cube is pretty annoying.