This question already has an answer here:
jPlayer - Save user settings through page redirect's
(1 answer)
Closed 6 years ago.
First of all I should say that I am not very experienced with JavaScript and I would like some help on passing a sessionStorage value to a setting.
$(document).ready(function(){
window.userSettings = null;
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "TestRadio",
mp3: "http:/streamlink"
});
},
swfPath: "jplayer/dist/jplayer",
supplied: "mp3",
wmode: "window",
volume: "75",
useStateClassSkin: true,
loop: true,
autoBlur: true,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: false,
toggleDuration: false
});
});
function storeUserjPlayerSettings(){
var settings = new Object();
settings.volume = $("#jquery_jplayer_1").data().jPlayer.status.volume;
settings.paused = $("#jquery_jplayer_1").data().jPlayer.status.paused;
settings.src = $("#jquery_jplayer_1").data().jPlayer.status.src;
sessionStorage.setItem('userjPlayerSettings', JSON.stringify(settings));
window.userSettings = JSON.parse(sessionStorage.getItem('settings'));
}
What I would like to do is to pass the settings.volume web stored value to the volume parameter
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "TestRadio",
mp3: "http:/streamlink"
});
},
swfPath: "jplayer/dist/jplayer",
supplied: "mp3",
wmode: "window",
**volume**: "75",
useStateClassSkin: true,
loop: true,
autoBlur: true,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: false,
toggleDuration: false
});
});
You are saving the volume earlier, so you just access it in the reverse process when you need it.
For example, change the volume: 75 initialization to a call to a function that get the volume from your saved settings: volume: volumeSetting().
Here's an example of how you might write that function itself:
function volumeSetting() {
var settings = sessionStorage.getItem("userjPlayerSettings");
if (settings != null) {
settings = JSON.parse(settings);
if (typeof settings.volume == 'number')
return settings.volume;
}
return 75;
}
Related
Is it possible to disable all cropper functionality and only enable cropper.zoom() for example?
If I disable cropper with cropper.disable() it disables everything.
From the source code it’s seems that this option isn’t supported:
// Disable (freeze) the cropper
disable() {
if (this.ready && !this.disabled) {
this.disabled = true;
addClass(this.cropper, CLASS_DISABLED);
}
return this;
},
Source:
https://github.com/fengyuanchen/cropperjs/blob/89f0b50c7f580135582a087cbf2417126b67d5fd/src/js/methods.js#L137
You can open an issue or do it yourself...
One possible way to do it is by setting these options like this:
autoCrop: false,
dragMode: 'move
This configuration might help:
config: any = {
dragMode: 'none',
highlight: false,
modal: false,
responsive: true,
scalable: true,
autoCrop: false,
center: false,
background: false,
zoomable: true,
zoomOnWheel: true,
};
I am using three bxSlider based slider. I want to move each slider from opposite side. I have tried and done it for first two round but in the end of second round slide starting to move from same direction of previous slide.
Here is all script which I have tried so far.
I am sorry if the question is not clear, kindly check the fiddle so that you will understand about my issue and thank you in advance for that.
Below is the main script, which is I am trying
jQuery(document).ready( function($) {
let slideOneFirstInterval = true;
let slideTwoFirstInterval = true;
let slideThreeFirstInterval = true;
let slideOne = $('#owlSlide1');
slideOne.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : false,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideThreeFirstInterval) {
setTimeout(function() {
//slideTwo.goToNextSlide();
slideThree.goToNextSlide();
console.log('True Statement.. 1');
}, 2000);
slideThreeFirstInterval = false
} else {
setTimeout(function() {
slideThree.goToPrevSlide();
console.log('False Statement.. 1');
}, 2000);
}
},
autoDelay : 0,
});
let slideTwo = $('#owlSlide2');
slideTwo.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideTwoFirstInterval) {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('True Statement.. 2');
}, 2000);
slideTwoFirstInterval = false
} else {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('false Statement.. 2');
}, 2000);
}
},
});
let slideThree = $('#owlSlide3')
slideThree.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
autoDelay : 0,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToPrevSlide();
console.log('True Statement.. 3');
}, 2000);
},
});
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToNextSlide();
console.log('false Statement.. 3');
}, 3000);
});
Assuming you want everything to slide from left to right as opposed to right to left, just replace all occurrences of goToNextSlide() with goToPrevSlide(). You may need to re-order your images in your HTML but it's easier to do that than tangle with a library.
I use this library and I have some JS code for initialization:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker3').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker4').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
$('#datetimepicker5').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
I don't like it because if I have 10 more elements I will have 50 more strings of repeated code, so the thing I wanna do is this:
var DateTimePicker = {
constructor: function(id, language, maskInput,pickTime,pickSeconds,pick12HourFormat){
this.language = language;
this.maskInput = maskInput;
this.pickTime = pickTime;
this.pickSeconds = pickSeconds;
this.pick12HourFormat = pick12HourFormat;
this.id = id;
return this;
},
initialization: function() {
document.getElementById(this.id).datetimepicker({
language: this.language,
maskInput: this.maskInput,
pickTime: this.pickTime,
pickSeconds: this.pickSeconds,
pick12HourFormat: this.pick12HourFormat
});
}
};
var firstDatepicker, secondDatepicker, firstTimepicker, secondTimepicker;
firstDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker2','en', true, false, false, false);
secondDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker3','en', true, false, false, false);
firstTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker4','en', true, true, false, true);
secondTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker5','en', true, true, false, true);
firstDatepicker.initialization();
secondDatepicker.initialization();
firstTimepicker.initialization();
secondTimepicker.initialization();
This gives me an error:
Uncaught TypeError: Cannot read property 'datetimepicker' of null
So I think I am trying to do something really weird. I suspect that datetimepicker is an object which I am trying to manipulate incorrectly. Could you please help me with this, I am just learning JS.
The error you get is because you're calling datetimepicker() on a DOMElement. Use $(this.id).datetimepicker() instead.
That being said, I would argue that your 'simplified' version is actually more complex and difficult to maintain.
If you look at the settings you're using you only really have two different settings; those with pickSeconds and pick12HourFormat and those without. As such you could just use two classes by placing the relevant one on the required datepicker. Try this:
$(function() {
$('.simple-datepicker').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('.adv-datepicker').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
Obviously the class names can be adjusted as you require, but you can now use the above code for an infinite number of datepickers in your page, so long as they have the right class added to them.
i don't understand what's happening to my project. I can run it easily on Chrome, Firefox, IE & Opera but it's not running on Safari.
It’s only working on first load on a new tab. And will not work when you reload.
Controller.js
controller: function($scope, $state, $auth, Info){
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 700,
pagination: true,
updateURL: false,
beforeMove: function(index) {},
afterMove: function(index) {},
loop: false,
keyboard: true,
responsiveFallback: false,
direction: "vertical",
navigation: true,
navigationPosition: 'right'
});
$scope.down = function () {
$(".main").moveDown();
}
$scope.up = function () {
$(".main").moveUp();
}
$scope.getNews = function () {
$scope.infos = Info.$search();
}
$state.go($auth.isAuthenticated() ? 'root.dashboard' : 'root.landing.home');
},
resolve: {
lang: ['$translatePartialLoader', function($translatePartialLoader){
$translatePartialLoader.addPart('root/landing');
}],
}
thanks for help
When I click on first time that song is not playing.on second click that song is playing. here is my code..
$(".jp-stop").trigger('click');
var some_data = ([ ]);
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_2",
cssSelectorAncestor: "#jp_container_2"
},some_data, {
swfPath: "<?php echo webroot_url();?>dist/jplayer",
supplied: "oga, mp3 wmv",
solution:"flash,html",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
myPlaylist.setPlaylist([ ]);
myPlaylist.add({
title:sname,
mp3:sname,
oga:sname
});
$(".jp-play").trigger('click');