bei den "Sidenav Buttons" hat es noch eine kleine Anpassung gegeben.
- Bitte das Widget noch einmal herunter laden und und einfach über das Vorhandene einfügen.
- Anschließend Extras > Entwickler > Änderungen übernehmen
bei den "Sidenav Buttons" hat es noch eine kleine Anpassung gegeben.
Da gibt es mehrere Möglichkeiten.
Für dein Vorhaben würde 3. empfehlen.
Nun wird der Code automatisch auf allen Seiten am ende der Seite eingefügt.
Um sicher zu gehen das alles übernommen wird:
Mal schauen was ich da machen kann. Kann aber eine Weile dauern.
Das geht ganz leicht per Inline-CSS.
Gehe im Widget unten auf das Mischpult > Mehr, kopiere in das Feld Inline-CSS folgendes und passe es an:
background-color: #f3f3f3; padding: 20px 0 0 0; border-radius: 5px;
Falls du noch den Rahmen deines News-Tickers dazu haben möchtest, erweitere den Code um folgendes:
border: 4px double #68A01A;
Update 1.3 ist raus.
Modern und Top-Resp. haben ein eigenes Widget. Beide Widget können parallel installiert werden, sollten aber nicht gleichzeitig in einem Projekt verwendet werden. Macht ja auch keinen Sinn.
Wäre das so akzeptabel?
Das Widget ist jetzt der Version 1.1 verfügbar.
Vor der Installation das Widget in ZP löschen (falls verwendet), anschl. den Widget-Ordner im Verzeichnis "C: \ Users \ Benutzername \ Documents \ Zeta Producer xx" löschen.
Ich habe mir das nochmal genau angeschaut. Das Widget kann ich sicher problemlos anpassen das man auswählen kann was angezeigt werden soll.
Monate geht nicht weil ein Monat keine feste Anzahl von Tagen hat. Ich könnte zwar einen Wert von 30 Tagen annehmen dann würde aber bei einem Timer der noch länger als 30 Monate läuft ein Monat zu wenig angezeigt werden.
Hier ein Auszug aus dem Widget wie das errechnet wird.
Hallo Andreas,
ich habe gerade wenig Zeit das genauer zu testen.
Probiere mal folgendes:
Schließe ZP, öffne den "Widget Ordner" hier öffnest du die standard.html mit dem Windows-Editor (Rechtsklick > Öffnen mit).
Hier entfernst du folgenden Code:
Ich habe den Code mal noch etwas angepasst und verschlankt, da dieser noch Funktionen beinhaltete die du nicht brauchst.
Einstellungen > CSS
<style>
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; color: green; }
.count-text { font-size: 14px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; color: green; }
</style>
Widget > Quelltext
<h2 class="timer count-title count-number" data-to="3200" data-speed="3500"></h2>
<p class="count-text ">Wir haben Bäume gepflanzt</p>
<script>
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
</script>
Alles anzeigen
Dieser könnte in deinem Fall funktionieren.
Mit Trevel-Responsive in V14 getestet.
Einstellungen > CSS
<style>
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */
.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
</style>
Alles anzeigen
Widget > Quelltext
<div class="wrapper">
<div class="counter col_fourth">
<i class="fa fa-code fa-2x"></i>
<h2 class="timer count-title count-number" data-to="3200" data-speed="3500"></h2>
<p class="count-text ">Wir haben Bäume gepflanzt</p>
</div>
</div>
<script>
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
</script>
Alles anzeigen
Um Supportanfragen beantworten zu können sind folgende Hinweise wichtig.
Um Supportanfragen beantworten zu können sind folgende Hinweise wichtig.