div.accordion-heading div.arrow {
width: 0px;
height: 0px;
border: 10px solid transparent;
}
div.accordion-section.active div.arrow {
border-top: 15px solid #28f;
border-left: 10px solid transparent;
margin-left: 20px;
margin-top: 43px;
}
div.accordion-heading div.arrow {
border-left: 15px solid #28f;
border-top: 10px solid transparent;
margin-left: 24px;
margin-top: 40px;
}
<div class="accordion-heading">
<div class="arrow"></div>
</div>
Qoobic Limited
Friday, 12 September 2014
Radio-buttons cannot be deselected once you've selected one.
A project I worked on recently required that a non-mandatory radio-button be deselectable. In order to implement this behaviour I used check-boxes styled to look like radio-buttons. I then added JavaScript to ensure mutual exclusive selection.
In older browsers the styling degrades (so they look like normal check-boxes) due to the lack of support for CSS pseudo-selectors.
<div class="radioboxes">
<input type="checkbox" id="radiobox1" name="group1" value="AUTHORISE" /><label for="radiobox1">Authorise</label>
<input type="checkbox" id="radiobox2" name="group1" value="DECLINE" /><label for="radiobox2">Decline</label>
<input type="checkbox" id="radiobox3" name="group1" value="OTHER" /><label for="radiobox3">Other</label>
</div>
<style type="text/css">
div.radioboxes input[type="checkbox"]:checked, div.radioboxes input[type="checkbox"]:not(:checked) {
display: none;
}
div.radioboxes input[type="checkbox"]:checked + label, div.radioboxes input[type="checkbox"]:not(:checked) + label {
position: relative;
padding-left: 21px;
}
div.radioboxes input[type="checkbox"]:not(:checked) + label::before, div.radioboxes input[type="checkbox"]:checked + label::before {
position: absolute;
left: 5px;
top: 2px;
content: " ";
display: inline-block;
background: linear-gradient(#eee, #ddd);
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #aaa;
box-shadow: 0px 1px 0px #eee;
}
div.radioboxes input[type="checkbox"]:checked + label::after {
position: absolute;
left: 8px;
top: 5px;
content: " ";
display: inline-block;
background: #666;
width: 6px;
height: 6px;
border-radius: 6px;
border: none;
}
</style>
A project I worked on recently required that a non-mandatory radio-button be deselectable. In order to implement this behaviour I used check-boxes styled to look like radio-buttons. I then added JavaScript to ensure mutual exclusive selection.
In older browsers the styling degrades (so they look like normal check-boxes) due to the lack of support for CSS pseudo-selectors.
<div class="radioboxes">
<input type="checkbox" id="radiobox1" name="group1" value="AUTHORISE" /><label for="radiobox1">Authorise</label>
<input type="checkbox" id="radiobox2" name="group1" value="DECLINE" /><label for="radiobox2">Decline</label>
<input type="checkbox" id="radiobox3" name="group1" value="OTHER" /><label for="radiobox3">Other</label>
</div>
<style type="text/css">
div.radioboxes input[type="checkbox"]:checked, div.radioboxes input[type="checkbox"]:not(:checked) {
display: none;
}
div.radioboxes input[type="checkbox"]:checked + label, div.radioboxes input[type="checkbox"]:not(:checked) + label {
position: relative;
padding-left: 21px;
}
div.radioboxes input[type="checkbox"]:not(:checked) + label::before, div.radioboxes input[type="checkbox"]:checked + label::before {
position: absolute;
left: 5px;
top: 2px;
content: " ";
display: inline-block;
background: linear-gradient(#eee, #ddd);
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid #aaa;
box-shadow: 0px 1px 0px #eee;
}
div.radioboxes input[type="checkbox"]:checked + label::after {
position: absolute;
left: 8px;
top: 5px;
content: " ";
display: inline-block;
background: #666;
width: 6px;
height: 6px;
border-radius: 6px;
border: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var siblings = $('.radioboxes').children('input[type="checkbox"]');
siblings.click(function() {
var e_id = $(this).attr('id');
siblings.each(function() {
if (e_id != $(this).attr('id')) {
$(this).prop('checked', false);
}
});
});
});
</script>
Wednesday, 26 February 2014
Useful HTML Tidy configuration (formats output as XML without any HTML parsing):
doctype: omit indent: auto indent-spaces: 8 wrap: 100 markup: yes output-xml: yes input-xml: yes tidy-mark: noThen add the following to vimrc:
:nnoremap ,, :%!tidy -qi <Enter>Now just press ",," to format the whole file as XML.
Thursday, 8 December 2011
Thursday, 31 March 2011
Extending Django CMS Page Model
A very useful article suggesting a method by which custom properties can be applied to a page:
Extending Django CMS Page Model
It just goes to show how easy it is to extend Django CMS :)
Please note, as advised in the follow-up article, the custom properties are not automatically available in the menu, since menu items are instances of NavigationNode not Page. The follow-up article suggests a solution for this, but there is a proviso - it is quite inefficient from an SQL perspective, although this could be mitigated somewhat through diligent caching.
Extending Django CMS Page Model
It just goes to show how easy it is to extend Django CMS :)
Please note, as advised in the follow-up article, the custom properties are not automatically available in the menu, since menu items are instances of NavigationNode not Page. The follow-up article suggests a solution for this, but there is a proviso - it is quite inefficient from an SQL perspective, although this could be mitigated somewhat through diligent caching.
Sunday, 20 March 2011
Creating a custom 404 page in Django CMS
The default 404 (page not found) response outputs the 404.html file in your application templates directory. But what if you want something a bit more user-friendly? You can override the default 404 handler in urls.py:
Make sure you publish the page, otherwise you will get a server error instead!
I would recommend removing all but the necessary permissions on this CMS page, to stop pesky non-super-users from removing it...
handler404 = 'application.views.handler404'Now simply create a views.py module in your application and define a handler404 method:
from cms.views import details def handler404(request): return details(request, 'page-not-found')Finally, via the Django CMS interface create a page with the slug 'page-not-found'. The contents of this page now be displayed in place of the default. I use this page to display a message and the site map to the user.
Make sure you publish the page, otherwise you will get a server error instead!
I would recommend removing all but the necessary permissions on this CMS page, to stop pesky non-super-users from removing it...
Starting a new DJango CMS application, using South
This is actually very simple. Firstly, make sure that 'south' is listed in your INSTALLED_APPS. Next, simply give the following commands:
python manage.py syncdb --allThis will create all the tables required by the installed applications, as per the old method.
python manage.py migrate --fakeThis will populate the south_migrationhistory table with migration info for all applications where South is setup. Finally, you can confirm the status of your application:
python manage.py syncdb Syncing... No fixtures found. Synced: + django.contrib.admin + django.contrib.contenttypes + django.contrib.sessions + django.contrib.sitemaps + django.contrib.sites + mptt + publisher + sorl.thumbnail + sekizai Not synced (use migrations): - django.contrib.auth - cms - cms.plugins.text - cms.plugins.picture - cms.plugins.link - cms.plugins.file - cms.plugins.snippet - menus - south (use ./manage.py migrate to migrate these)You can also check what South migrations have been installed via the following:
python manage.py migrate --listThanks to Martin for his assistance with this.
Subscribe to:
Posts (Atom)