Regarding the browser version, the player height should change
if older then ie9
//height is fixed
else
//height is auto
The above code is working but, it's the worst thing I've seen, because I do repeat myself again and again, when only one line changes on this conditional.
<script type="text/javascript">
$(document).ready(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "400px" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
} else {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "auto" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
}
});
</script>
As noted by the comments, the only change is on ONE single line.
How can I remake this, without stupidly repeating myself ?
height: "auto" //THIS IS THE ONLY DIFFERENCE!
Please advice
That's quite simple with a ternary operator:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0, 1) < 9)
? "400px"
: "auto"
},
backgroundColor: "#fff",
click: function () {
$(this).jPlayer("play");
},
ended: function () {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
If you don't like that (e.g. because of a more complex condition), you still can use a simple variable:
var height = "auto";
if (/* IE too old */)
height = "400px";
$…({
… // huge config object
height: height,
…
});
Why not:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0,1)<9) ? "400px" : "auto"
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
It could be like this:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
height = $.browser.msie && parseInt($.browser.version, 10) < 9 ? '400px' : 'auto';
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: height
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
});
</script>
UPDATE:
I added to code above the Fabriccio Matte suggestion so your code dont fail with IE10
Try:
var playerObj = { ready : function () { /* ... */ }, size : /* AUTO */ };
if (/*stupid IE TEST*/) {
playerObj.size.height = "...";
}
$("#jquery_jplayer_1").jPlayer(playerObj);
Separate your configuration from your processes, and it becomes much less of a hassle.
Also, like #Bergi said, a ternary-operation:
value = (test_with_optional_parentheses) ? passed_value : failed_value;
...or in this case, as an object parameter:
{ value : (test_with_optional_parentheses) ? passed_value : failed_value };
Works perfectly well for changing one thing, inline, in the middle of a configuration object.
Keep my advice in mind for organizing large blocks of code, when you start confusing what you need to do with what you're currently doing.
Keep Bergi's advice in mind for when you need to set one single value (at a time), based on a simple test.
Related
I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
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
So I have got this code
$('.item').click(function () {
if ($(".secondary", this).is(":hidden")) {
$(".primary", this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.
Fiddle: http://jsfiddle.net/zm3zp6ax/
$('.item').click(function () {
var $this = $(this);
if ($(".secondary", this).is(":hidden")) {
$(".primary", $this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', $this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
DEMO
I'm trying to create a vertical menu which includes some animation.
I would like the user to hover over part of the the element which triggers the element to expand in width and show some text.
I have had a go at it for the past couple of days but feel i am now just making things worse!
Any help or advice on this would be much appreciated.
here is my fiddle: http://jsfiddle.net/danieljoseph/NZ2QL/3/
Here is the JQuery:
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#contact-btn").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
I'm an amateur when it comes to JQuery so any tips and explanations would be great if possible.
Thanks.
Demo Fiddle
jQuery Code
$("nav li").hover(function () {
console.log($(this).children().children('.tab'));
$(".tab", this).stop().animate({
width: "190px"
}, 1000);
}, function () {
$(".tab", this).stop().animate({
width: "0"
}, 1000);
});
According to me direct children of <ul> must be only <li> so I even changed there position which was wrong in the fiddle you gave...
NOTE: This task could be done using pure css, which would be much lighter
Update Not part of the question:
The same above feature using plain css
I think that's what you really need:
http://jsfiddle.net/NZ2QL/25/
$(".menuItem").mouseover(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "190px"
}, 1000);
});
$(".menuItem").mouseout(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "0px"
}, 1000);
});
An interesting article that may help:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
Cheers ;)
What i'd recommend is placing the mouseout events on the .tab classes, and you should get what you want. I'll update your fiddle in a second to show you what i mean.
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn .tab").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn .tab").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn .tab").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
$("#contact-btn .tab").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
http://jsfiddle.net/NZ2QL/11/
This is a little closer, but still needs some fixing.
That should be what you need. It could be cleaned up a little more to condense the code, but the functionality is what you want, I'm pretty sure.
http://jsfiddle.net/NZ2QL/76/
MY FINAL EDIT:
$(".menuItem li").hover(
function() {
$(this).stop().animate({"width":"250px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"190px"}, {queue: false, duration:1000})},
function(){
$(this).stop().animate({"width":"60px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"0px"}, {queue: false, duration:1000})}
);
Modified HTML and css are here:
http://jsfiddle.net/NZ2QL/81/
I have a div width id: "cen", and with a height and width of 50px.
$(document).ready(function() {
$("#cen").animate({
height: 500px,
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
But it's not working.
Put quotes around 500px http://jsfiddle.net/myn9d/
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Use this code, it's working:
$(document).ready(function() {
$("#cen").animate({
height: "500px",
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
You have error in your syntax height should be surroung with "500px"
it should be
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Please Checkout this demo Demo
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
});
});