I'm working on creating a counter on my page, and so far I've got it to work alright... I've used this bit of CSS to hide the seconds portion, however when the page loads, it's shown briefly before it is hidden again.
Does anyone know how I can clear that brief showing part?
I've attached a video for your reference.
Video Link
The CSS snippet is also below, along with the JS part for the flipclock.
CSS
.flip-clock-divider.seconds,
.flip-clock-label,
.flip-clock-divider.seconds ~
.flip.play {
display: none;
}
.header .clock{
width: 100%;
}
JS
clock = $(".clock").FlipClock({
clockFace: "HourlyCounter",
countdown: true,
showSeconds: false,
callbacks: {
stop: function() {
$(".message").html("The clock has stopped!");
}
}
});
clock.setTime(Math.floor(110945));
clock.start();
hey change clockFace and u can remove that css
clockFace: 'DailyCounter',
showSeconds: false
Related
I'm very new to JQuery/Ajax and I haven't done any HTML for a long time, so please do forgive me if this is a dumb question. I've done a fair amount of reading, and I'm at a loss.
In a nutshell, on completion of a FlipClock.js countdown timer, the clock should slide off the page to the right, which works. However, on starting the timer, I'd like the div to slide onto the page from the right, but I cannot get the div to move. Here's my code:
function showTimer() {
$(".clock").show("slide", {direction: "left"}, 2000); //Does nothing, seemingly
timerRunning= true;
var clock = $('.clock').FlipClock(3, {
countdown: true,
clockFace: 'MinuteCounter',
callbacks: {
stop: function() {
timerStopped();
}
}
});
}
function timerStopped() {
console.log("Test function on clock stop!");
$('.clock').hide('slide',{direction:'right'},1000);
}
I've not set up any CSS for the clock div, so I'm not sure if I need to position it off screen to begin with, but hide works, so I'm a little confused.
Any input or advice would be greatly appreciated.
Thanks
After a long time of debugging, I have found a solution. Please try it out in jsfiddle here: https://jsfiddle.net/mLkfyrd8/1/
Things that may have gone wrong:
Forgot to wrap in $(document).ready()
Forgot to include jQuery/jQuery UI library
Forgot to call $(".clock").hide()
UPDATE: There seems to be an issue with the clock moving up/down. See this new fiddle for the fixed version (added padding.)
Demo:
$(document).ready(function() {
$(".container").hide();
function showTimer() {
$('.clock').FlipClock(3, {
countdown: true,
clockFace: 'MinuteCounter',
callbacks: {
stop: function() {
timerStopped();
}
}
});
$(".container").show("slide", {direction: "left"}, 2000);
}
function timerStopped() {
console.log("Test function on clock stop!");
$('.container').hide('slide',{direction:'right'},1000);
}
showTimer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>
<div class="container" style="padding: 20px;"><div class="clock"></div></div>
You should set dimensions and position to your clock div. Look it up with e.g. firebug (hit F12) and search your clock div. There you should see where the div is and it might be outside of your viewport. And do you get the console log output?
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/
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/
I have a initially long loading app, so I tried making a splash screen. It "almost" works perfectly. I'm getting the following error: Uncaught TypeError: Cannot read property 'style' of undefined which points to a specific line in my app.js. However, I just can't see what's wrong with it. The splash screen loads fine and fades out fine (almost). What I notice is that it appears the div I created is still there yet you can't see it but it's still masking the body from input. Here's my app.js:
Ext.Loader.setConfig({
enabled: true
});
var splashscreen;
Ext.onReady(function () {
// Start the mask on the body and get a reference to the mask
splashscreen = Ext.getBody().mask('Dashboard Loading...', 'splashscreen');
// Add a new class to this mask as we want it to look different from the default.
splashscreen.addCls('splashscreen');
// Insert a new div before the loading icon where we can place our logo.
Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {
cls: 'x-splash-icon'
});
});
Ext.create('Ext.app.Application', {
controllers: ['Main'],
stores: ['Saless', 'ProdGrid002s', 'ProdGrid008s', 'ProdGrid009s', 'Unitcosts', 'Prepaids',
'Logintakes', 'WasteTickets', 'InventoryFinisheds', 'InventoryRoughs', 'Shipments'],
name: 'Dash1',
appFolder: '/html/cgi-dev/millapps/dashboards/Dash1/app',
launch: function () {
// Setup a task to fadeOut the splashscreen
var apptask = new Ext.util.DelayedTask(function () {
// Fade out the body mask
splashscreen.fadeOut({
duration: 2000,
remove: true
});
// Fade out the icon and message
splashscreen.next().fadeOut({
duration: 2000,
remove: true,
listeners: {
afteranimate: function () {
// Set the body as unmasked after the animation
Ext.getBody().unmask();
}
}
});
});
// Run the fade after launch.
apptask.delay(1000);
},
autoCreateViewport: true
});
my style sheet:
.x-mask.splashscreen {
background-color: white;
opacity: 1;
}
.x-mask-msg.splashscreen,
.x-mask-msg.splashscreen div {
font-size: 18px;
padding: 110px 110px 50px 110px;
border: none;
background-color: transparent;
background-position: top center;
}
.x-message-box .x-window-body .x-box-inner {
min-height: 200px !important;
}
.x-splash-icon {
/* Important required due to the loading symbols CSS selector */
background-image: url('/resources/images/logo.jpg') !important;
margin-top: -30px;
margin-bottom: 20px;
}
The error points to the line of code Ext.getBody().unmask(); which is in the afteranimate function. I'm stumped.....
Unrelated, but you've got a race condition in that code that made you error hard to reproduce. I've had to delay the Ext.getBody().unmask() call to trigger it.
The problem is that your anims are destroying the DOM elements that the unmask method tries to access, because of the remove: true options. However, since Ext keeps track of the mask internally, you are indeed required to call unmask() to avoid unpredictable behaviors later on.
So the solution is simply to remove the two remove: true lines in your anims config, and unmask will take care of disposing of the DOM elements itself.
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.