I want to have a different set of image display when your are on a mobile device. I am using Vegas Jquery Slider http://vegas.jaysalvat.com/
My questions is a bit vague, and I could find what I am needing. Would I just use the window size jquery? or an if.. else... statement?
Here is my code.
<script type="text/javascript">
$.vegas('slideshow', {
backgrounds:[
{ src:'img/familyoutsidehome5-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome3-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome4-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome-dark.jpg', fade:1000 }
]
});
</script>
<script type="text/javascript">
$.vegas.defaults = {
background: {
src: null, // defined by Css
align: 'center',
valign: 'center',
fade: 0,
loading true,
load: function(){},
complete: function(){}
},
slideshow: {
step: 0,
delay: 5000,
backgrounds: [],
preload: false,
walk: function(){}
},
overlay: {
src: null, // defined by Css
opacity: null // defined by Css
}
}
</script>
If I am correct, what you want is the website being responsive based on the screen size. You don't even need to use javascript. css mediacan do it:
#media (max-width: 500px) and (max-height: 500px) {
div.element1 {
background-image: url('background1.png');
}
div.element2 {
background-image: url('background2.png');
}
}
And you can just change the classes in javascript to change background image.
If you want to add transition effects you can also do it in CSS3 by adding a transition:
div.element {
transition: background-image 1s ease-in-out;
}
Related
I have two wheels divs. The wheels should rotate around their centre of origin but instead, they are doing a circular motion as shown below:
This is the CSS code for the wheel:
.wheel1 img{
width: 210px;
position: relative;
top:-320px;
left:42px;
/*animation: wheelRotation linear .99s infinite;*/
}
.wheel2 img{
width: 225px;
position: relative;
top: -540px;
left: 255px;
/*animation: wheelRotation linear .99s infinite;*/
}
I am using jQuery keyframes to enable CSS animation from javascript. For the wheels, I am using wheelRotation keyframe with 360deg rotation angle.
Below is how I add the animation sequence in JS:
$.keyframe.define([{
name: 'carMove',
'100%': {
'transform': 'translateX(-500vw)'
}
}, {
name: 'wheelRotation',
'100%': {
'transform': 'rotate(360deg)'
}
}, {
name: 'shake',
'0%': {
'transform': 'translateY(-5px)'
},
'50%': {
'transform': 'translateY(5px)'
},
'100%': {
'transform': 'translateY(-5px)'
}
}]);
});
and this is how the animation is played:
function play(animation) {
$('.track').resetKeyframe(function() {
switch (animation) {
case 'normal':
$('.wheel1').playKeyframe({
name: 'wheelRotation',
duration: "5000ms",
timingFunction: 'linear',
iterationCount: 'infinite'
});
$('.wheel2').playKeyframe({
name: 'wheelRotation',
duration: "5000ms",
iterationCount: 'infinite',
timingFunction: 'linear'
});
$('.track').playKeyframe({
name: 'carMove',
duration: "13s",
timingFunction: 'linear',
iterationCount: 'infinite',
direction: 'normal',
fillMode: 'forwards'
});
$('.car').playKeyframe({
name: 'shake',
duration: "3s",
timingFunction: 'linear',
iterationCount: 'infinite',
direction: 'normal',
fillMode: 'forwards'
});
break;
}
})
}
the wheel and track animation are fine, but the wheel are not rotating around their centre of origin. Why is this happening? I am not sure where the problem is coming from. Any help would be appreciated.
I solved the problem. Below is the solution:
I had to make sure that the div position is set when the animation starts as shown in the code below and removes the position: relative; from the CSS code. By including $('.wheel1').css({....}) and $('.wheel2').css({....}), I was able to remove all the CSS code for .wheel1 and .wheel2 as they are not necessary anymore.
function play(animation) {
$('.wheel1').css({'width': '210px','top': '-303px','left': '420px','position': 'relative','transform-origin': 'center'});
$('.wheel2').css({'width': '210px','top': '-485px','left': '195px','position': 'relative','transform-origin': 'center'});
}
I have to set the slide width to a specific size if the viewport is between a range.
breakpoints: {
767: {
perView: 1,
peek: 193,
slideWidth: 277
},
1023: {
perView: 1,
peek: 212,
}
}
The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it.
The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.
I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.
Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo
new Glide('#glide1', {
type: 'carousel',
perView: 3,
breakpoints: {
800: {
perView: 1
}
}
}).mount();
I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div
.glide-wrapper {
max-width: 100vw;
overflow: hidden;
}
.glide {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.glide__track {
overflow: visible!important;
}
const glide = new Glide('.glide', {
type: 'carousel',
breakpoints: {
1280: {
gap: 16,
focusAt: "center",
perView: 1,
peek: {
before: 16,
after: 16
},
},
}
}).mount({Swipe, Controls, Breakpoints });
I have a question regarding the browser compatability of Web Animations. I am aware that it is not working on some browsers.
However, is it possible to still use the transformation that is normally applied by the animation. My animation runs (through neon-animation from Polymer), but the result doesn't stay. It reverts back when the animation is finished.
(Small note, the $$("paper-item") is from polymer and is equivalent to querySelector("paper-item"))
I fixed this on Chrome with the following code:
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = "0px auto";
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
As said, this is working on Chrome. Firefox and Safari are having trouble with it though. How can this be fixed?
My complete code is as following:
<!-- Custom element -->
<dom-module id="agenda-item">
<template>
<style>
paper-item {
background-color: #ffffff;
width: 72vw;
margin: 0 auto;
height: 72px;
}
</style>
<paper-item>
- content -
</paper-item>
</template>
<script>
Polymer({
is: 'agenda-item',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
opened: {
type: Boolean,
value: false,
reflectToAttribute: true
},
animationConfig: {
value: function() {
return {
'expand': [{
name: 'expand-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}],
'collapse': [{
name: 'collapse-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}]
};
}
}
},
listeners: {
'tap': 'onClick',
'neon-animation-finish': '_onNeonAnimationFinish'
},
onClick: function(event) {
if (this.opened) {
this.collapse();
} else {
this.expand();
}
},
expand: function() {
this.cancelAnimation();
this.playAnimation('expand');
this.opened = true;
},
collapse: function() {
this.cancelAnimation();
this.opened = false;
this.playAnimation('collapse');
},
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = '0px auto';
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
});
</script>
</dom-module>
<!-- Custom animation -->
<!-- Both custom animations have the same idea and similar code -->
<script>
Polymer({
is: 'expand-list-item-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
this._effect = new KeyframeEffect(node, [{
offset: 0.0,
'margin': '0 auto',
'width': '72vw',
'height': '72px'
}, {
offset: 0.6,
'margin': '16px auto',
'width': '84vw',
'height': '72px'
}, {
offset: 1.0,
'margin': '16px auto',
'width': '84vw',
'height': '144px'
}], this.timingFromConfig(config));
return this._effect;
}
});
</script>
EDIT:
I found the problem, but not how to solve it. It would be great to get some help.
The neon-animation-finish is not called at the moment the animation finishes. It is called just before that (not on chrome btw). Then, when the function is called to adjust the styling, it is overwritten by the animation.
You need to define a listener to the animation-finish and define what you want to see when the animation has finished like this:
listeners: {
// this event is fired when the animation finishes
'neon-animation-finish': '_onNeonAnimationFinish'
},
Have a look at the Polymer documentation at: https://github.com/PolymerElements/neon-animation/blob/master/README.md
I have been trying hard to fix the share/follow banner provided by the addthis.com to the end of the page .
Like by default it just float over your website on the bottom of the phone . I was trying to fix this bellow the footer of my page .
Here is how it looks Please note the Share|Follow button at the bottom
But I want it to push it down to the bottom of the page
Some thing like this
I have tried following code
$(document).on("pagecreate",function () {
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'numPreferredServices': 5
},
'follow': {
'services': [{
'service': 'facebook',
'id': 'vikramabhushan'
}, {
'service': 'google_follow',
'id': 'vikrambanand'
}]
},
'whatsnext': {},
'recommended': {}
});
});
$(document).on('pageshow',function(){
var height = $('#outerPage').height();
console.log('H: '+height);
setTimeout(function () {
//$('#at4m-mobile-container').addClass('bottom');
$('body div.addthis-smartlayers-mobile').css("top",height-($('.foot').height()));
}, 7500);
});
so this script was sending the div addthis-smartlayers-mobile to the bottom of the page but it appears only after 6 seconds .
Can some one help me out to fix this thing.
JSFIDDLE
Thanks in advance
I was able to fix it by just using css here is what i did
CSS
#at4m-dock {
box-shadow: none !important;
margin-bottom: -92% !important;
position: absolute !important;
}
.at4m-dock-toggle {
margin-bottom: -92% !important;
position: absolute !important;
}
#at4m-mobile-container {
position: initial !important;
z-index: 9999999 !important;
}
And I removed the extra script so my script is something like this
$(document).on("pagecreate",function () {
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'numPreferredServices': 5
},
'follow': {
'services': [{
'service': 'facebook',
'id': 'vikramabhushan'
}, {
'service': 'google_follow',
'id': 'vikrambanand'
}]
},
'whatsnext': {},
'recommended': {}
});
});
Here is a snapshot of it
Hope some one will be benefited
Thanks & Regards
I´m using the plugin Jquery Vegas Slideshow in a project and I'm trying to load images directly from my database into the slideshow script.
I have it running with the following code:
<script type="text/javascript">
jQuery.vegas('slideshow', {
backgrounds:[
{ src:'images/slider/slider_01.jpg', fade:2500 },
{ src:'images/slider/slider_01.jpg', fade:2500 },
]
})('overlay', {
src:'images/slider/overlays/06.png'
});
</script>
How can I populate the background parameter using Ajax?
I've read the documentation but there is no information about any server side language.
By checking the source code of vegas plugin on github, there does not seem to be any method to update background images dynamically after plugin is initiated. But as there is one method called destroy I would suggest to try following code which destroys the background and overlay assigned and re-initialize the plugin with new set of images.
// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 },
{ src:'2.jpg', fade:1000 },
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }];
//destroy vegas object background
$.vegas.desroy('background');
//destroy vegas overlay background
$.vegas.desroy('overlay');
// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: bgimages
}) ('overlay');
Try this Code :
$('body').vegas({
overlay: true,
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
color: 'red',
animation: 'random',
animationDuration: 20000,
slides: [
{ src: 'img/2.jpg'},
{ src: 'img/3.jpg' },
{ src: 'img/4.jpg' },
{ src: 'img/5.jpg' }
]
});