I use this parallax, but can't disable it on mobile?
I found some methods like this:
scene = $('#scene').parallax();
scene.parallax('disable');
But it didn't work. Can anybody help?
I would rather go in different direction. Instead of making something disable on small screens make it working only on larger devices:
if ($(window).width() > 640) { //set up breaking point
$('#scene').parallax(); // this or any other code you need
}
If you want to disable parallax straight after it's been initialized you should wrap your scene.parallax('disable'); in a setTimeout function. If you look at the source code of Parallax.js you will see that there's supportDelay: 500 value which is used as an argument in enable function. According to that your code for disabling would look like this:
var scene = $('#scene').parallax();
setTimeout(function () {
scene.parallax('disable');
}, 500);
Update:
Just found an article that explains different perspective on disabling parallax.js on small devices.
Related
I'm attempting to use the following design on a responsive website. I'm curious if there's a way to set up some sort of inverse resizing method through jQuery / Javascript because as the viewport gets smaller, the copy will respond and get larger.
I've tried using jQuery to modify the image size, but I only know enough to manually resize it at different breakpoints
Here's my attempt at a solution:
var viewportWidth = $(window).width();
if (viewportWidth <= 768) {
$("#curlybrace").css("width", "80px");
}
Is there a way to set up a dynamic scaling image?
Try looking into CSS and media queries, seems like it would be a neater solution than trying to do this with JS.
You would use something like this:
function resizeFn() {
var width = window.width();
// ...
}
$(function() {
$(window).resize(resizeFn).trigger('resize');
});
Not possible to do an inverse with CSS, I don't think (I thought maybe through calc(), but I don't think it lets you do unit manipulations like that).
Fair warning, this doesn't sound like a good design unless you're trying to make it look nuts.
This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)
Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
I'm working on a highly responsive website at the moment and I hit 2 areas where certain blocks of content need to move to others areas of the site. It would not be possible to do so purely with CSS. I suppose I could relatively reposition the blocks but as the dimensions change this isn;t really possible.
The option I am thinking of is, when a media query gets triggered, to then pull a block out of the page and append it in elsewhere where I need it.
I realise this is not ideal bit what I am wanting to ask is if this is a reasonable thing to so.
I know some of you may say reorder some of the markup but that is not possible. As stated above, I know falling back to javascript is not ideal but it would suit this and I don't particularly wish to duplicate content just so I can avoid the use of javascript.
Flexbox would be perfect but support is not where I want it to be currently for me to use that.
What do people here think? Any other solutions?
The right way is to listen to media queries using MediaQueryList:
var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
if(event.matches) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
The events will trigger when the query is either met or 'unmet'.
Alternatively, you can listen to a resize event, but note your function will get triggered for every new dimension. (Assuming jQuery in the code below.)
$(window).resize(function() {
if($(window).width() <= 320) {
// Window width is less than or equal to 320, do something cool.
} else {
// Window width is more than 320, do something else.
}
});
Like you said yourself though, using JS to make your layout responsive is generally NOT advisable. You can never assume all your users have JS enabled and all goes well.
I would rather see you solve this by restructuring your HTML and CSS. If the content layout has to change a lot, try outputting a block of content in two different places in your HTML and toggling visibility with CSS media queries (setting one to display:none; and the other to display:block;). You should be able to solve most responsive layout issues by rethinking your website structure.
Others looking for a solution may be interested in the Bootstrap Toolkit JS library available here: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
Responsive Bootstrap Toolkit provides an easy way of breakpoint
detection in JavaScript, detecting changes in currently active
breakpoint, as well as executing any breakpoint-specific JavaScript
code.
The SASS module enables quick and simple styling for elements needing
different property values for each screen resolution.
Then you can do things like:
(function($, document, window, viewport){
// Listen to resize event
$(window).bind('resize', function() {
// Default 300ms poll delay
viewport.changed(function() {
// Debug
console.log( 'Current breakpoint: '+ viewport.current() );
// Trigger custom event
$('body').trigger('viewportChanged', [viewport.current()]);
}, 300)
});
// Register event listener
$(document).on('viewportChanged', 'body', function(event, current) {
console.log('Current breakpoint: '+ current);
}
})(jQuery, document, window, ResponsiveBootstrapToolkit);
You could check out some of the already available responsive design HTML boilerplates like Twitter Bootstrap or Zurb Foundation. Maybe their existing configurations satisfy your need.
I have a similar problem on two websites and i do:
JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.
On my other website i use Twitter Bootstrap which is very responsive and looks nice.
I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.
$(window).resize(function() {
//Use $(window).width() and maybe some ifs/a switch to handle break points
if($(window).width()<700){
//Move it here
}
});
With CSS and JS it can be done :) You can clone the content to another section with jquery (append), then using media queries you can control what shows.
Here is what I do:
I do the appendTo:
$( $('.goto').html() ).appendTo('.mobile')
Here's an example I did:
http://jsfiddle.net/Riskbreaker/vkfWd/
This might not be what you are looking for (since its really not moving it but cloning the content )but this is the way I do it.
I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot:
here is the link : http://www.soleilnoir.net/believein/
Any ideas how to achieve the similar effect?
Thanks
This effect is called parallax.
Here are some links related to this effect:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
You could achieve that through a combination of watching the scroll offset position and then animating different elements based on that scroll position. You would set an event listener and at certain positions fire functions to animate an element onto the page.
If using jQuery, something like this:
$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() {
var scrollPos = $(window).scrollTop();
switch (scrollPos) {
case (500):
doSomething();
break;
case (1000):
doSomethingElse();
break;
}
}
function() doSomething {
// use animate to animate element(s) at 500
}
function() doSomethingElse {
// use animate to animate element(s) at 1000
}
I'm sure that could be optimized better than that, but that should be enough to get started.
First of all, I am not an advanced JQuery developer, however, I have been creating what I call Strips Menu with JQuery, you can see it here by clicking the Preview link on top:
http://jsbin.com/uwopu3/edit
When I click on a strip, it promptly shows the contents relevant to hovered strip but I need sliding effect something that has been done on this site:
http://jeemsolutions.com/
I tried giving the animate function a time of 1500, but still no sliding effect.
How do I give it sliding effect like that of jeemsolutions for which the link is provided above.
Thank You
You are using the animate function wrong. It takes the CSS properties you want to animate to as arguments, so try something like:
var w = $('#slide').width() - $('.bar').size() * $('.bar').width() + 10;
$(this).css('text-indent', '0px');
$(this).animate( {width: w}, 500);
I know this might sound wrong, but why don't you simply use jQuery Accordions? It does what you need, and is supported against different browsers and all that.
Cheers