CwFeedback – Demo
Posted 3 years ago, updated 3 years ago
About / Feedback • Demo • Help / Download
Examples for CwFeedback
There was a bug in the stars rating-example – fixed now..
One notice: These examples are not optimized for IE (they look ugly, IE is unable to display useful UTF-8 characters, so you see no stars), but the CwFeedback-plugin itself works with IE 6+ of course.
Comments, Feedback, Questions? Comment here »
Vote up
Vote down
BlockHTML Code:
<div id="myrating">
<a id="myrating_1" onclick="rating.doVote(1, 'uid=xy&entry=abc')">Vote up</a>
<a id="myrating_2" onclick="rating.doVote(2, 'uid=xy&entry=abc')">Vote down</a>
<a id="myrating_3" onclick="rating.doVote(3, 'uid=xy&entry=abc')">Block</a>
</div>
<p id="myresponse"><label>Vote for something or block it.</label></p>
<a id="myrating_1" onclick="rating.doVote(1, 'uid=xy&entry=abc')">Vote up</a>
<a id="myrating_2" onclick="rating.doVote(2, 'uid=xy&entry=abc')">Vote down</a>
<a id="myrating_3" onclick="rating.doVote(3, 'uid=xy&entry=abc')">Block</a>
</div>
<p id="myresponse"><label>Vote for something or block it.</label></p>
Javascript Code:
rating = new CwFeedback('myrating', {
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
multipleVotes: false,
onSelect: function(el, value, response) {
$('myresponse').set('html', response[1]);
(function() { $('myresponse').fade('out'); }).delay(2500);
},
onFeedbackDone: function(el, value, others) {
others.fade('out');
el.morph('.off');
(function() { others.dispose(); }).delay(1000);
}
});
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
multipleVotes: false,
onSelect: function(el, value, response) {
$('myresponse').set('html', response[1]);
(function() { $('myresponse').fade('out'); }).delay(2500);
},
onFeedbackDone: function(el, value, others) {
others.fade('out');
el.morph('.off');
(function() { others.dispose(); }).delay(1000);
}
});
HTML Code:
<div id="starrating">
<a id="starrating_1" onclick="starrating.doVote(1)">★</a>
<a id="starrating_2" onclick="starrating.doVote(2)">★</a>
<a id="starrating_3" onclick="starrating.doVote(3)">★</a>
<a id="starrating_4" onclick="starrating.doVote(4)">★</a>
<a id="starrating_5" onclick="starrating.doVote(5)">★</a>
</div>
<a id="starrating_1" onclick="starrating.doVote(1)">★</a>
<a id="starrating_2" onclick="starrating.doVote(2)">★</a>
<a id="starrating_3" onclick="starrating.doVote(3)">★</a>
<a id="starrating_4" onclick="starrating.doVote(4)">★</a>
<a id="starrating_5" onclick="starrating.doVote(5)">★</a>
</div>
Javascript Code:
starrating = new CwFeedback('starrating', {
possibleValues: [1,2,3,4,5],
initialValue: 2,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onSelectInitially: function(el, value) {
for (var i = 1; i <= value; i++) {
$('starrating_'+i).set('class', 'on');
};
},
onSelect: function(el, value, response) {
$('starrating').highlight('#ddd');
},
});
// stars hover
$$('#starrating a').addEvents({
'mouseenter': function(el) {
curr = this.get('id').substr(this.get('id').lastIndexOf('_') + 1);
for (i = 1; i <= 5; i++) {
$('starrating_'+i).set('class', (i <= curr) ? 'onhover' : 'off');
}
},
'mouseleave': function(el){
for (i = 1; i <= 5; i++) {
$('starrating_'+i).set('class', (i <= starrating.getValue()) ? 'on' : 'off');
}
}
});
possibleValues: [1,2,3,4,5],
initialValue: 2,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onSelectInitially: function(el, value) {
for (var i = 1; i <= value; i++) {
$('starrating_'+i).set('class', 'on');
};
},
onSelect: function(el, value, response) {
$('starrating').highlight('#ddd');
},
});
// stars hover
$$('#starrating a').addEvents({
'mouseenter': function(el) {
curr = this.get('id').substr(this.get('id').lastIndexOf('_') + 1);
for (i = 1; i <= 5; i++) {
$('starrating_'+i).set('class', (i <= curr) ? 'onhover' : 'off');
}
},
'mouseleave': function(el){
for (i = 1; i <= 5; i++) {
$('starrating_'+i).set('class', (i <= starrating.getValue()) ? 'on' : 'off');
}
}
});
Like this
- toggle two elements, initial value set:
12 others like this. Like it You and 12 others like this. Unlike
HTML Code:
<p id="mylikeit" class="anaction">
<span id="mylikeit_1">12 others like this. <a onclick="likeit.doVote(1)">Like it</a></span>
<span id="mylikeit_2">You and 12 others like this. <a onclick="likeit.doVote(2)">Unlike</a></span>
</p>
<span id="mylikeit_1">12 others like this. <a onclick="likeit.doVote(1)">Like it</a></span>
<span id="mylikeit_2">You and 12 others like this. <a onclick="likeit.doVote(2)">Unlike</a></span>
</p>
Javascript Code:
likeit = new CwFeedback('mylikeit', {
initialValue: 1,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onSelectInitially: function(el, value) {
el.hide();
},
onSelect: function(el, value, response) {
el.dissolve();
},
onUnselect: function(el, value) {
el.reveal();
}
});
initialValue: 1,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onSelectInitially: function(el, value) {
el.hide();
},
onSelect: function(el, value, response) {
el.dissolve();
},
onUnselect: function(el, value) {
el.reveal();
}
});
Event invitation - change text before and after request:
Next tuesday? —
12 people attending.
HTML Code:
<p id="myevent" class="anaction">Next tuesday
<input type="radio" name="myevent[]" id="myevent_1" onclick="discoevent.doVote(1)" /><label for="myevent_1">Yes, sure!</label>
<input type="radio" name="myevent[]" id="myevent_2" onclick="discoevent.doVote(2)" /><label for="myevent_2">Maybe</label>
<input type="radio" name="myevent[]" id="myevent_3" onclick="discoevent.doVote(3)" /><label for="myevent_3">No way</label>
<br />
<strong id="myeventparticipants">12</strong> people attending.
</p>
<input type="radio" name="myevent[]" id="myevent_1" onclick="discoevent.doVote(1)" /><label for="myevent_1">Yes, sure!</label>
<input type="radio" name="myevent[]" id="myevent_2" onclick="discoevent.doVote(2)" /><label for="myevent_2">Maybe</label>
<input type="radio" name="myevent[]" id="myevent_3" onclick="discoevent.doVote(3)" /><label for="myevent_3">No way</label>
<br />
<strong id="myeventparticipants">12</strong> people attending.
</p>
Javascript Code:
discoevent = new CwFeedback('myevent', {
initialValue: 2,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onRequestStarted: function() {
$('myeventparticipants').set('html', ' ...');
},
onSelect: function(el, value, response) {
el.set('checked', 'checked');
if (response) $('myeventparticipants').set('html', response[0]);
},
onUnselect: function(el, value) {
el.erase('checked');
}
});
initialValue: 2,
url: '/_mootools/cwfeedback/cwfeedback-ajax.php',
onRequestStarted: function() {
$('myeventparticipants').set('html', ' ...');
},
onSelect: function(el, value, response) {
el.set('checked', 'checked');
if (response) $('myeventparticipants').set('html', response[0]);
},
onUnselect: function(el, value) {
el.erase('checked');
}
});
Share & bookmark this
Follow here for updates