Hide Seconds Counter on Flipclock.js
I'm currently working on a project where the requirement is to use flipclock.js to create an HH:MM counter.
I'm using the HourlyCounter
clock face. Does anyone know how I could hide the seconds part?
Thanks in advance!
UPDATE
After using @Rahul's css, i've gotten the following:
UPDATE2
I've got an image of the inspected element if that helps:
javascript css flipclock
add a comment |
I'm currently working on a project where the requirement is to use flipclock.js to create an HH:MM counter.
I'm using the HourlyCounter
clock face. Does anyone know how I could hide the seconds part?
Thanks in advance!
UPDATE
After using @Rahul's css, i've gotten the following:
UPDATE2
I've got an image of the inspected element if that helps:
javascript css flipclock
add a comment |
I'm currently working on a project where the requirement is to use flipclock.js to create an HH:MM counter.
I'm using the HourlyCounter
clock face. Does anyone know how I could hide the seconds part?
Thanks in advance!
UPDATE
After using @Rahul's css, i've gotten the following:
UPDATE2
I've got an image of the inspected element if that helps:
javascript css flipclock
I'm currently working on a project where the requirement is to use flipclock.js to create an HH:MM counter.
I'm using the HourlyCounter
clock face. Does anyone know how I could hide the seconds part?
Thanks in advance!
UPDATE
After using @Rahul's css, i've gotten the following:
UPDATE2
I've got an image of the inspected element if that helps:
javascript css flipclock
javascript css flipclock
edited Nov 23 at 7:55
asked Nov 23 at 6:42
Jerome Papalie
295
295
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Note: Since you dont provide any code/demo Im taking reference from http://flipclockjs.com/
here you go...
you can use below code, this will hide seconds part
.flip-clock-divider.seconds , .flip-clock-divider.seconds ~ .flip.play {
display: none;
}
then you may need to adjust width accordingly like
.header .clock{
width: 300px;
}
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
add a comment |
You can specify wether or not to show seconds via the options, when you initiate the clock. Like this:
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock',
showSeconds: false
});
});
</script>
If you are unsure how to use it, there's an example file included in the package that you download on their website, "examples/twenty-four-hour-clock-without-seconds.html"
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441767%2fhide-seconds-counter-on-flipclock-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Note: Since you dont provide any code/demo Im taking reference from http://flipclockjs.com/
here you go...
you can use below code, this will hide seconds part
.flip-clock-divider.seconds , .flip-clock-divider.seconds ~ .flip.play {
display: none;
}
then you may need to adjust width accordingly like
.header .clock{
width: 300px;
}
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
add a comment |
Note: Since you dont provide any code/demo Im taking reference from http://flipclockjs.com/
here you go...
you can use below code, this will hide seconds part
.flip-clock-divider.seconds , .flip-clock-divider.seconds ~ .flip.play {
display: none;
}
then you may need to adjust width accordingly like
.header .clock{
width: 300px;
}
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
add a comment |
Note: Since you dont provide any code/demo Im taking reference from http://flipclockjs.com/
here you go...
you can use below code, this will hide seconds part
.flip-clock-divider.seconds , .flip-clock-divider.seconds ~ .flip.play {
display: none;
}
then you may need to adjust width accordingly like
.header .clock{
width: 300px;
}
Note: Since you dont provide any code/demo Im taking reference from http://flipclockjs.com/
here you go...
you can use below code, this will hide seconds part
.flip-clock-divider.seconds , .flip-clock-divider.seconds ~ .flip.play {
display: none;
}
then you may need to adjust width accordingly like
.header .clock{
width: 300px;
}
answered Nov 23 at 7:15
Rahul
2,987159
2,987159
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
add a comment |
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
Hi, thanks a lot! It kinda works. I'll attach an image of what I got. Could you please help me with this? :)
– Jerome Papalie
Nov 23 at 7:30
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
sure, can you show me snapshot of source code of how it looks while you inspect element that last 9 which you want to hide
– Rahul
Nov 23 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added that image. :)
– Jerome Papalie
Nov 23 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 at 10:27
add a comment |
You can specify wether or not to show seconds via the options, when you initiate the clock. Like this:
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock',
showSeconds: false
});
});
</script>
If you are unsure how to use it, there's an example file included in the package that you download on their website, "examples/twenty-four-hour-clock-without-seconds.html"
add a comment |
You can specify wether or not to show seconds via the options, when you initiate the clock. Like this:
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock',
showSeconds: false
});
});
</script>
If you are unsure how to use it, there's an example file included in the package that you download on their website, "examples/twenty-four-hour-clock-without-seconds.html"
add a comment |
You can specify wether or not to show seconds via the options, when you initiate the clock. Like this:
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock',
showSeconds: false
});
});
</script>
If you are unsure how to use it, there's an example file included in the package that you download on their website, "examples/twenty-four-hour-clock-without-seconds.html"
You can specify wether or not to show seconds via the options, when you initiate the clock. Like this:
<script type="text/javascript">
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock',
showSeconds: false
});
});
</script>
If you are unsure how to use it, there's an example file included in the package that you download on their website, "examples/twenty-four-hour-clock-without-seconds.html"
answered Dec 10 at 9:47
Amsvartner
82111
82111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441767%2fhide-seconds-counter-on-flipclock-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown