I'm using the jPlayer plugin along with jQuery UI's slider widget. Everything seems to be setup but I seem to be experiencing some trouble when it comes to dragging the volume up and down. Dragging either way makes the volume jump too far up/down. The functionality is controlled through the slide property, I'm just not sure how to get it to drag accordingly.
JSFiddle
Problem :
Since you have position: absolute for jp-volume-bar-knob, the ui-slider-horizontal bar lost its width (the horizontal bar over which the slider slides).
Option 1:
Instead of applying slider to jp-volume-bar-knob try applying it to jp-volume-bar it seems to be working fine then.
Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/2/
However, the initial volume level and initial slider value have to be set.
Option 2:
You can set the following css and still apply slider to jp-volume-bar-knob
.ui-slider-horizontal{
height: 0;
border: transparent;
width: 100%;
}
Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/3/
Update
Try something like this
In this the volume bar works fine.
Default value is replicated on the slider.
$(document).ready(function () {
var myPlayer = $("#jquery_jplayer_1"),
options = {
ready: function (event) {
if (event.jPlayer.status.noVolume) {
// if there is no volume add custom styling
}
// Setup the player with media.
$(this).jPlayer("setMedia", {
title: "Bubble",
m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
volumechange: function (event) {
if (event.jPlayer.options.muted) {
myControl.volume.slider("value", 0);
} else {
myControl.volume.slider("value", event.jPlayer.options.volume);
}
},
swfPath: "http://jplayer.org/latest/dist/jplayer",
supplied: "mp3, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
},
myControl = {
volume: $(".jp-volume-bar-knob")
};
// Instance jPlayer
myPlayer.jPlayer(options);
myControl.volume.slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value: $.jPlayer.prototype.options.volume,
slide: function (event, ui) {
myPlayer.jPlayer("option", "muted", false);
myPlayer.jPlayer("option", "volume", ui.value);
}
});
});
I adopted this from jplayer demo and modified a bit based on the question.
Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/6/
update 2
Change the volume bar markup to something like this
<div class="jp-volume-bar"></div>
Instead of changing all the .jp-*'s css, change jquery-ui's css to something like this
.ui-slider-horizontal{
background: #444;
cursor: pointer;
display: inline-block;
position: relative;
height: 4px;
width: 100px;
}
.ui-slider-range{
background: #cc181e;
}
Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/10/
Related
I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).
Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/
I have an object accordionOptions which mediates the behavior of an accordion object
on my page. It looks like:
var accordionOptions = {
icons: {
header: 'ui-icon-circle-arrows-e',
activeHeader: 'ui-icon-notice'
},
animate: {
easing: 'easeOutBounce',
duration: 1000
}
}
I'm using that object to determine the behavior of my accordion like so:
$('#accordion1').accordion({
icons: accordionOptions.icons,
animate: accordionOptions.animate
});
I have an anchor tag on my page that when clicked I intend for it to have the same animation as the accordion when a new panel is clicked:
$('#btnChange').click(function () {
$('#test').animate({
easing: accordionOptions.animate.easing
});
});
You can see in the fiddle here this doesn't work. I've tried several things, all were non-successes. How can I attach my desired behavior to the test div using my accordionOptions argument?
Using easing for .animate is slightly different than for .accordion -- you need to pass the duration and easing separately from what should be animated. You should set a height or whatever property it should animate.
$('#test').animate({ height: 100 }, accordionOptions.animate.duration, accordionOptions.animate.easing);
Or shorter syntax similar to how you were originally doing it:
$('#test').animate({ height: 100 }, accordionOptions.animate);
Updated fiddle: http://jsfiddle.net/C6Eax/1/
I'm looking for some plugin (js/ajax) or tutorial which let me set the time to each content should be shown after the site have already loaded.
For example:
I want my website with a loader and after that display the menu navigation (e.g. slide right to left effect), after the logotype, after the main image of home, etc.).
This website is a good reference for what I want: http://www.smog-bicyclettes.com/
Do you know something like this?
Try using set timeout
setTimeout(function(){
/* Your Function */
},2000);
I'm delegating deciding which animation to run to a single function doAnimation which maintains a counter of the last animation that ran.
We don't need to use setTimeout here because we're relying only on the jQuery animation callbacks to ensure one animation happens when another finishes.
Working example here (updated): http://jsfiddle.net/av8ZA/7/
HTML
<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
<div id="element4"></div>
<div id="element5"></div>
<div id="element6"></div>
CSS
div {
height:100px;
width 200px;
display:none;
}
#element1 {
background: red;
}
#element2 {
background: green;
}
#element3 {
background: blue;
}
#element4 {
background: magenta;
}
#element5 {
background: black;
}
#element6 {
background: yellow;
}
jQuery/Javascript
(function ($) {
var currentCall = 0,
animations = [{
element: "#element1",
type: "slide",
options: {},
time: 1000
}, {
element: "#element2",
type: "blind",
options: {}
}, {
element: "#element3",
}, {
element: "#element4",
type: "size",
time: 300
}, {
element: "#element5",
}, {
element: "#element6",
type: "bounce"
}],
defaults = {
type: "fade",
time: 300,
options: {}
};
function doAnimation() {
if (animations[currentCall] != undefined) {
var anim = animations[currentCall];
$(anim.element).show(
anim.type || defaults.type,
anim.options || defaults.options,
anim.time || defaults.time,
doAnimation);
currentCall++;
}
}
$(document).ready(doAnimation);
})(jQuery);
Of course this is no good if you want concurrent animations, but you didn't state that in the question.
EDIT: I've cleaned up by javascript and defined an array of animations now where you can set options for each animation individually. For all animation types see the jQuery UI documentation for show. I've also defined some default that will be used if you don't specify one of the options for an animation.
I'm wondering how to bring attention to a section that has more information than is showed on the screen. Essentially, the way it currently looks, it might only appear that there is one piece of data in the table, but in reality there is a scroll window. I'd like to bring attention to the fact that there is more data, you just need to scroll. I added the border and that at least started to help.
http://jsfiddle.net/xG3uc/
How would you highlight that there is more data but you just need to scroll to see it?
.but_there_is_more {
max-height: 50px;
overflow-y: auto;
border: 1px dotted #ccc;
}
Maybe if the div expands over the max-height, have some javascript to show a link to "expand" the rest?
Want to try qTip2? Check DEMO http://jsfiddle.net/yeyene/xG3uc/10/
JQUERY
$(document).ready(function(){
$('.a')
.qtip({
content: {
text: 'Scroll for more data!'
},
position: {
my: 'bottom right',
at: 'bottom right'
},
show: {
event: 'mouseover',
ready: true // show the tooltip when ready
},
hide: {
event: 'click unfocus' // click anywhere to hide
},
style: {
classes: 'ui-tooltip-red'
}
});
});
Source and Doc of qTip2 http://craigsworks.com/projects/qtip2/demos/
Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>
I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/
It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.