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.
Related
I am using bxSlider and it's working great...I'm having a slight issue with some functionality...when I view the slideshow on mobile it shows 1.5...basically one full slide and then part of the next one. In the code, I have minSlides set to 1 and maxSlides set to 3...what I'd like to do is have bxSlider display a particular li only if the entire li will fit on the screen. For example, my div's are 300px wide, in order to show two of them your screen size would have to be at least 600px wide...is that possible?
I created a fiddle: https://jsfiddle.net/785gcrnp/.
The example page is: http://joshrodg.com/hallmark/ - all the way on the bottom in the dark area where it says "Latest Media".
Thanks,
Josh
Nice, looks like you've made some good progress. There is a way you can wrap your current code in a function and call it when the window resizes or orientation changes.
Here's what it would look like wrapped in a function:
function adjustSlider(){
var sw = 200;
var sm = 20;
var ms = Math.floor($('#nocrop').width() / (sw + sm));
$('#nocrop .bxslider').bxSlider({
pager: false,
slideWidth: sw,
slideMargin: sm,
maxSlides: ms > 1 ? ms : 1,
});
}
Then, we need to call this function when the document first loads, otherwise your calculations will only get used when the window resizes:
$(document).ready(function(){
adjustSlider();
});
Then, we add a window resize event. I place the call to the adjustSlider fucntion inside a timer so it helps if the window is resized a bunch within a short amount of time. We can also add the onorientationchange event in here too that makes the same call. Orientation changes have their own delays built in and this event doesn't fire off as frequently as window resize, so I didn't put this in a timer.
$(window).resize(function(){
setTimeout(function(){
adjustSlider();
}, 250);
});
window.onorientationchange = function(event){
adjustSlider();
}
250 ms for the timer might be a little high, feel free to adjust this. It still feels pretty weighty to me when resizing the panes on jsfiddle. This could be due to how the javascript is being run inside jsfiddle, or it could have something to do with the way this slider is handling having it's properties set. It will show best on your actual site, so do some testing there to be sure speed and performance don't become an issue with this. Let me know how it goes!
Also, here is a working jsfiddle for an example of how it all looks when put together: http://jsfiddle.net/sm1215/0517f76w/4/
edit: words, woops also placed the onorientationchange inside the resize event, which wouldn't work. This is fixed and I've updated the fiddle.
A friend of mine helped me get this working!
I have updated the fiddle: https://jsfiddle.net/785gcrnp/1/
var sm = 20;
var podcastSlider;
function podcastSettings() {
var minmax;
var win=$(window).width();
if(win > 960) {
minmax=3;
var sw = 300;
} else if(win > 660) {
minmax=2;
var sw = 300;
} else {
minmax=1;
var sw = 480;
}
var sliderSettings={
adaptiveHeight: true,
infiniteLoop: false,
maxSlides: minmax,
mode: 'horizontal',
nextSelector: '.next',
nextText: 'Next',
pager: false,
prevSelector: '.prev',
prevText: 'Prev',
slideMargin: sm,
slideWidth: sw
};
return sliderSettings;
}
$(window).resize(function() {
podcastSlider.reloadSlider(podcastSettings());
});
$(document).ready(function(){
podcastSlider = $('.podcast').bxSlider(podcastSettings());
});
This will center the slides and only show the amount of slides that will be fully visible without cutting anything off.
This is also responsive, so if I resize the browser everything will update as it should.
In addition, I specified a different width for smaller screens.
I hope this helps someone else!
Thanks,
Josh
I have two carousels set up using cycle2. They are presented side by side with each occupying 50% of the screen width and 100% height. I've included a video below of what it looks like. These are set up as two different cycle2 inits then a delay is set on each of them to give the effect.
$('.vertical-slider-container .vertical-slider').each(function() {
var $this = $(this);
$this.cycle({
fx: 'scrollVert',
slides: '> .each-slide',
sync: true,
timeout: 3000,
speed: 1500,
random: false,
loader: true,
swipe: true
});
});
<div class="vertical-slider left" data-cycle-delay="1000" data-cycle-reverse="true"></div>
<div class="vertical-slider right" data-cycle-delay="1500" data-cycle-reverse="true"></div>
The issue I am having is that eventually they get in sync. Is there any obvious way I can keep these consistent so they always have the delay that remains constant?
http://quick.as/6oq8hqar1
I would try the following:
Remove the auto-initialization of the 2nd carrousel
Programatically add a listener to the 1st carrousel, like so $( '#1st-carousel' ).on( 'cycle-after', function( event, opts ) { ... })
The listener would manually call $('#2nd-carousel').cycle('next'); after a fixed amount of time, using the setTimeout function
Demo: http://jsbin.com/hiduyi/1/edit?html,js
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);});
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();
});
After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?
Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div