- This topic has 14 replies, 2 voices, and was last updated 12 years, 3 months ago by
.
-
Hi,
Here is the tutorial with examples of auto resetting countdowns:
http://www.smartplugins.info/tutorial/smart-timer-and-counter/auto-reseting-countdown-dates/
Regards,
Milan -
Hello
The problem is i only have this code
<script type=”text/javascript”>
jQuery(document).ready(function() {
stacks.one = jQuery(“#stac-example-one”).smartTimerCounter({
skin: “FlatPanels”,
mode: “Counter”,
display: {
ui_days_background: “rgba(255, 0, 0, .8)”,
ui_hours_background: “rgba(210, 210, 0, .8)”,
ui_minutes_background: “rgba(0, 164, 15, .8)”,
ui_seconds_background: “rgba(0, 128, 255, .8)”
},
model: {
layout: “Dhms”,
method: “date”,
value: new Date(2014, 6, 1)
}
});
});
</script>I do not know where to put it in my HTML because i need to call to JS files but i do not know how + i do not know where to put the VAR in HTML.
I your files i cannot find on clean sample of html file so i can change there what i need to use it…
Thanks !!
-
Hello
I want to copy it to button page where coupons are
https://www.mediafire.com/?954z5y7iz8nws55 -
– bottom
-
Ok i found the sample working, thanks for the help !!
-
All examples have HTML and JS to use.
-
Hello
How i can increase the font of words in this script thanks:
<html>
<head><link rel=”stylesheet” type=”text/css” href=”time/source/css/counter.helper.css”>
<link rel=”stylesheet” type=”text/css” href=”time/pack/counter.pack.css”>
</head>
<body><div style=”width:800px; border:0px; background:#0; margin: -20px -20px -20px -20px;”>
<div id=”example-monday”></div><script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”></script>
<script type=”text/javascript” src=”time/pack/counter.pack.js”></script><script type=”text/javascript” src=”time/source/js/counter.helper.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function() {/* This will be used by all 3 following examples */
var now = new Date(),
dayOfWeek = now.getDay();/* Get next Monday */
var diffMonday = dayOfWeek < 1 ? 1 : (dayOfWeek > 1 ? 8 – dayOfWeek : 7),
nextMonday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diffMonday);var exampleMonday = jQuery(“#example-monday”).smartTimerCounter({
skin: “Custom”,
mode: “Counter”,
display: {
labels: “bottom”,
hideDots: true,
space: “2px”,
ui_labelBackground: “#FF0000”,
ui_labelWeight: “bold”,
ui_labelColor: “#FFFFFF”,
ui_labelBoxShadow: “0 0 0px 0 rgba(32, 32, 32, 0.7)”,
ui_labelTextShadow: “2px 1px 1px rgba(16, 16, 16, 0.8)”,
ui_digitOverlay: “chrome-128”,
ui_digitRounded: “5px”,
ui_digitBackground: “#CC0000”,
ui_digitColor: “#FFFFFF”,
ui_digitBoxShadow: “0 0 2px 0 rgba(32, 32, 32, 0.7)”,
ui_digitTextShadow: “2px 1px 1px rgba(16, 16, 16, 0.8)”,
ui_digitBorder: “1px solid #660000”,
ui_digitMargin: “1px”
},
model: {
layout: “Normal”,
method: “date”,
value: nextMonday
}
});});
</script>
</div>
</body>
</html> -
All styling is done through CSS, and you need to either add own styles to increase font size or change default styles.
-
Hello
Can you please tell me how?
-
There was similar question already:
http://forum.smartplugins.info/forums/topic/putting-clock-in-a-smaller-space/#post-1292
CSS is pretty basic for all elements.
Milan
-
Yes but there you do not say where to write, only what to write.
-
Inline CSS styling can be added anywhere in the HTML inside the STYLE tag. Or it can be added to some external CSS file, or in the STYLE in the header. It all depends on your website and how do you prefer to keep your code organized.
Again, all this is pretty basic HTML/CSS, and if you plan to do anything with it, you should learn some basics.
Milan
-
Hello
Ok, i apply this, but here a problem, the “font-size:” changed not only the text but also the clock, i want it to change the text only, or please give me 2 commands one for size of text and one for size of digits in clock.
Thanks !!
-
You need to learn using some sort of browser CSS inspector so you can get which elements to change and apply styles too. Each element in the clock has own CSS class, and you can apply styles to any of theme through CSS styles. Labels and digits have separate classes and main color styles applied to the timer have different relative sizes set, and I can’t give you simply which class to change, you need to get it through browser inspector, since it depends on the timer configuration, skin and style you use.
I can help you problems you might have, and eventual bugs, and I can point you to a direction on how to do different things, but I don’t have time to teach you basics when it comes to styling elements. I am sorry, but any work that needs to be done with JavaScript plugins require some basic knowledge on how to do this basic things. You need to know how to use style inspectors, find element you want to change and what style you want to apply to it.
Regards,
Milan
- The topic ‘Hello’ is closed to new replies.
