A simple Django app to animate texts.
Project description
========
Textflow
========
Textflow is a simple Django app to animate texts. Texts slide randomly from the right to the left or reverse after the
page is loaded.
1. Open the settings.py file, find the INSTALLED_APPS section and enable the app.
INSTALLED_APPS = (
...
'textflow'
)
2. Now create the database model.
python manage.py migrate
3. Start the development server and visit http://127.0.0.1:8000/admin/
to create a few FlowObjects (you'll need the Admin app enabled).
4. pen your views.py file and import the FlowObject model.
from textflow.models import FlowObject
5. Go to the view and pass the texts to the view by simply call the serialize method.
def your_view(request):
return render(request, 'template.html', {
'texts': FlowObject.serialize(),
})
6. Then open your template.html file and add the the following two lines at the top.
{% load staticfiles %}
{% load textflow %}
7. Add a link to the css file in your <head>:
<link rel="stylesheet" type="text/css" href="{% static 'stylesheets/textflow.min.css' %}"/>
8. Then, before the closing <body> tag add:
<script type="text/javascript" src="{% static 'javascripts/jquery.textflow.min.js' %}"></script>
9. Now call the textflow tag within the <body> tag where you want to show the texts:
{% textflow texts %}
10. In your javascript file then add the initializing code
$(document).ready(function() {
$(element).textFlow();
});
11. Start your server and visit http://127.0.0.1:8000/your_view/ and you should see the texts
12. You can add multilingual texts by installing the django-modeltranslation app.
Please refer to the official Django documentation for more information about translation.
https://docs.djangoproject.com/el/1.10/topics/i18n/translation/
Also refer to the official documentation of django-modeltranslation
http://django-modeltranslation.readthedocs.io/en/latest/installation.html
pip install django-modeltranslation
13. Enable the app in settings.py:
INSTALLED_APPS = (
...
'modeltranslation',
'textflow',
)
14. Update your models:
python manage.py migrate
15. Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
width | string/int: Any valid css unit | 100% | Sets the width in relation of the parent node
height | string/int: Any valid css unit | 200px | Sets the height
top | string/int: Any valid css unit | 0 | Sets the top position within the parent node
left | string/int: Any valid css unit | 0 | Sets the left position within the parent node
maxTexts | int | 15 | Sets the maximum amount of texts that are simultaneously shown
marginTop | int | 25 | The space in pixel between the top border and the text
marginBottom | int | 0 | The space in pixel between the bottom border and the text
texts | array | ['Add', ... 'here'] | The texts that are shown, ignored when using data-texts attribute
color | string: Any valid css unit | #000 | The text color
background | string: Any valid css unit | transparent | The background color of the canvas (This is actually not needed because the background of the textflow div can be set in css. However it might happen that this could be useful for some reason so it is there... :)
font | string | sans-serif | The font family of the texts
16. Methods
Methods are called on textflow instances:
16.1 Get the instance
var textflow = $('.your-element').textFlow({options...});
16.2 Stop textflow
textflow.stopTextFlow();
16.3 Start textflow
textflow.startTextFlow();
Method | Argument | Description
------ | -------- | -----------
startTextFlow | options : None | Start textflow if not active
stopTextFlow | options : None | Stop textflow if active
17. Dependencies
jQuery 1.3
Django 1.8
**For multilingual support (Django only)**
django-modeltranslation
18. License
Copyright (c) 2014 Michael Jünger
Licensed under the MIT license.
Textflow
========
Textflow is a simple Django app to animate texts. Texts slide randomly from the right to the left or reverse after the
page is loaded.
1. Open the settings.py file, find the INSTALLED_APPS section and enable the app.
INSTALLED_APPS = (
...
'textflow'
)
2. Now create the database model.
python manage.py migrate
3. Start the development server and visit http://127.0.0.1:8000/admin/
to create a few FlowObjects (you'll need the Admin app enabled).
4. pen your views.py file and import the FlowObject model.
from textflow.models import FlowObject
5. Go to the view and pass the texts to the view by simply call the serialize method.
def your_view(request):
return render(request, 'template.html', {
'texts': FlowObject.serialize(),
})
6. Then open your template.html file and add the the following two lines at the top.
{% load staticfiles %}
{% load textflow %}
7. Add a link to the css file in your <head>:
<link rel="stylesheet" type="text/css" href="{% static 'stylesheets/textflow.min.css' %}"/>
8. Then, before the closing <body> tag add:
<script type="text/javascript" src="{% static 'javascripts/jquery.textflow.min.js' %}"></script>
9. Now call the textflow tag within the <body> tag where you want to show the texts:
{% textflow texts %}
10. In your javascript file then add the initializing code
$(document).ready(function() {
$(element).textFlow();
});
11. Start your server and visit http://127.0.0.1:8000/your_view/ and you should see the texts
12. You can add multilingual texts by installing the django-modeltranslation app.
Please refer to the official Django documentation for more information about translation.
https://docs.djangoproject.com/el/1.10/topics/i18n/translation/
Also refer to the official documentation of django-modeltranslation
http://django-modeltranslation.readthedocs.io/en/latest/installation.html
pip install django-modeltranslation
13. Enable the app in settings.py:
INSTALLED_APPS = (
...
'modeltranslation',
'textflow',
)
14. Update your models:
python manage.py migrate
15. Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
width | string/int: Any valid css unit | 100% | Sets the width in relation of the parent node
height | string/int: Any valid css unit | 200px | Sets the height
top | string/int: Any valid css unit | 0 | Sets the top position within the parent node
left | string/int: Any valid css unit | 0 | Sets the left position within the parent node
maxTexts | int | 15 | Sets the maximum amount of texts that are simultaneously shown
marginTop | int | 25 | The space in pixel between the top border and the text
marginBottom | int | 0 | The space in pixel between the bottom border and the text
texts | array | ['Add', ... 'here'] | The texts that are shown, ignored when using data-texts attribute
color | string: Any valid css unit | #000 | The text color
background | string: Any valid css unit | transparent | The background color of the canvas (This is actually not needed because the background of the textflow div can be set in css. However it might happen that this could be useful for some reason so it is there... :)
font | string | sans-serif | The font family of the texts
16. Methods
Methods are called on textflow instances:
16.1 Get the instance
var textflow = $('.your-element').textFlow({options...});
16.2 Stop textflow
textflow.stopTextFlow();
16.3 Start textflow
textflow.startTextFlow();
Method | Argument | Description
------ | -------- | -----------
startTextFlow | options : None | Start textflow if not active
stopTextFlow | options : None | Stop textflow if active
17. Dependencies
jQuery 1.3
Django 1.8
**For multilingual support (Django only)**
django-modeltranslation
18. License
Copyright (c) 2014 Michael Jünger
Licensed under the MIT license.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
django-textflow-0.1.3.tar.gz
(9.9 kB
view details)
Built Distributions
File details
Details for the file django-textflow-0.1.3.tar.gz.
File metadata
- Download URL: django-textflow-0.1.3.tar.gz
- Upload date:
- Size: 9.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 644de66dcce648661aa1caeb79310265fee559502accdffba02ee469660dd85b |
|
| MD5 | a0fc11373ae58d4892d6dfdafcab29cf |
|
| BLAKE2b-256 | 76f9869e13dacd9986647356db37978b2bbde84d45cd18a510165b02b03016db |
File details
Details for the file django_textflow-0.1.3-py3-none-any.whl.
File metadata
- Download URL: django_textflow-0.1.3-py3-none-any.whl
- Upload date:
- Size: 11.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 207e05cf4f614cff7ae1fff0f31f7aaef61edfc2dd2ac6c4f28b7ba31e23e916 |
|
| MD5 | 0ea075d46588b3755f5a504d0c54e3cb |
|
| BLAKE2b-256 | 4d0dc9001287384b4852e52ffb7778df680b8b85e457df8bfc4543a20acc64fe |
File details
Details for the file django_textflow-0.1.3-py2-none-any.whl.
File metadata
- Download URL: django_textflow-0.1.3-py2-none-any.whl
- Upload date:
- Size: 11.4 kB
- Tags: Python 2
- Uploaded using Trusted Publishing? No
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 7bf9b488919056fe5822996127295e9f21e6e3849ded396bf08d3bbe46aa92a3 |
|
| MD5 | 3f0ec35c6e2ee94d9bbbc43e163f9bde |
|
| BLAKE2b-256 | cdfa47ecdfbcfa30da02e9d8cfcf868f5e5011e5beaf45335624cfc7c51c1f27 |
