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
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
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
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
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
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
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
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
edited Nov 23 '18 at 7:55
Jerome Papalie
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
asked Nov 23 '18 at 6:42
Jerome PapalieJerome Papalie
295
asked Nov 23 '18 at 6:42
Jerome PapalieJerome 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;
}
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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"
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
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;
}
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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;
}
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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;
}
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
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 '18 at 7:15
RahulRahul
3,172159
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
answered Nov 23 '18 at 7:15
RahulRahul
3,172159
3,172159
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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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 '18 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 '18 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 '18 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 '18 at 7:46
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added that image. :)
– Jerome Papalie
Nov 23 '18 at 7:55
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 at 10:27
I've added an answer below that will fix your problem :)
– Amsvartner
Dec 21 '18 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"
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
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"
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
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"
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
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 '18 at 9:47
AmsvartnerAmsvartner
102211
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
answered Dec 10 '18 at 9:47
AmsvartnerAmsvartner
102211
102211
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.
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
