I am creating a personal website and I have a progress bar that has been done in css and html.
in order to control the progress bars all I need to do is change a variable(width).
This is the code for one bar:
.bar-inner1 {
width: 559px;
height: 35px;
line-height: 35px;
background: #db3a34;
border-radius: 5px 0 0 5px;
}
This is the corresponding html that is affected by this css:
<div class="container">
<h2 class="my-skills">My Skills</h2>
<div class="bar-1">
<div class="title">HTML5</div>
<div class="bar" data-width="65%">
<div class="bar-inner1">
</div>
<div class="bar-percent">65%</div>
</div>
</div>
How would I use Django to change the variable width?
Are you talking about changing this on the server side when the page is being rendered, or on the client side after the page has been sent?
If you’re looking at doing this dynamically, after the page has been returned to the browser, that would need to be done using JavaScript. Django is no longer involved at that point.
Hi Ken, thanks for your quick response. as long as its done I don’t really mind. There’s no need for any user input I just need to access the variable with some python code. If that is possible.
When I uses things such as {% {python code }%} and place a function in that could that function be used to access and change css code?
I do apologies if am not being clear I am doing what I can with my limited knowledge on the subject lol
It depend upon when you want it done. You need to be more precise as to what you want to have happen.
No, you cannot do what you’re imagining here - you’re looking at this from the wrong perspective relative to what the process is regarding the rendering of templates.
A template is data - it’s not executable code. The template rendering engine on the server uses the template as the source text and the context as references to data being used to modify that data.
Anything you want to modify in the template needs to be passed to the rendering engine through the context - in which case it becomes available for the engine to use to replace the corresponding reference in the template.
Right that makes sence. This is what I am trying to do. In the pic I eventually want to be able to change this code so when someone clicks on the tab that leads them to the page. There will be a small animation of the bars filling up to their percentages .A function that increments the width of each bar.
You’re still answering the “what” and ignoring the “when”.
Are these changes going to occur on a page refresh when the page is being rendered, or are you looking to update the page after it has been rendered and returned to the browser?
So when someone clicks the refresh button I would like it to start the animation again.
What “animation”? Is that what you’re referring to here?
Just the bars going from empty to the percentage that is set. So, the bars that are in the pic that is their end point. When refresh is pressed, they are empty first of all then it will fill up to the end pic.
Could I use Djangos template language with placing a variable in the css like this ;
.bar-inner1 {
width: {{python_varaible}};
height: 35px;
line-height: 35px;
background: #db3a34;
border-radius: 5px 0 0 5px;
}
and then render the variable number in the views :
not sure how to do that yet though.
Yes you can - you can render your css file with variables in the context. But keep in mind that that only happens once when you first render the page.
That’s the point I’m emphasizing here - if you want that to change while the page is being viewed, you need to use JavaScript for that. Django has no involvement with a page after it has been rendered and returned to the requesting browser.
When you say first render the page is that when I first run python manage.py runserver command and then past that point the animation will not happen such as refreshing the page?
Let’s take a step back for a moment.
When you issue a request from your browser to Django, that causes a view to execute.
What is the view that you have that creates this page?
In the pic above that I have shared its the SkillsPageView(Templateview) so a generic template view.
Ok, please do not post images of code. Images can’t be searched or quoted, and are not readable on all devices. In the future, please post the code directly in your post.
(When posting code here, enclose it between lines consisting of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This allows the forum software to keep your code properly formatted, which is very important with Python.)
Anyway, one of the steps of most of the generic CBVs is that it renders a template and returns the rendered text. That is what I mean by rendering a page.
You may want to review the docs at Class-based views | Django documentation | Django to get a better understanding of how those CBVs function. Additionally, I also suggest seeing the Classy Class-Based Views site along with the CBV diagrams page to help get a deeper understanding of how these all work.
Okay I will take note of that. I will look through all that documentation.
Thank you ever so much for helping and pointing me in the right direction.
