I'm trying to create a layout, with a sticky header bar and a sticky right menu which sits directly below the header bar and to the left of the content area. Below is my attempt - which causes the side accordion menu (placeholder) to appear in the incorrect position.
I have just used the default CSS etc from a fresh install of foundation for sites (6.5.3).
Why is my menu (placeholder) not staying in position when I scroll?
https://codepen.io/anon/pen/xBKaLq
<div data-sticky-container id="header">
<div class="top-bar" data-sticky data-margin-top="0">
<div class="top-bar-left">
<h3>Cool page title</h3>
</div>
<div class="top-bar-right">John Doe Logout</div>
</div>
</div>
<div class="grid-x">
<div class="cell medium-3 show-for-medium" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="header:bottom">
<h3>Menu placeholder</h3>
</div>
</div>
<div class="cell medium-9">
<h1>
Start content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content
</h1>
</div>
</div>
Anchoring two sticky components, one to the other would be a challenge. Instead, you can use the example from the Foundation docs, which is very similar.
https://foundation.zurb.com/sites/docs/
The topnav is regular position fixed and the body is padded down to make space for the nav.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Here is your example that way: https://codepen.io/rafibomb/pen/BbyRav
Related
i would like to achieve something very basic in Django but can't find out what I am doing wrong. On my apps "index.html", I would like to add a button which redirects to another html template ("site.html") with other content. I added the following to "index.html" which is working:
<body>
<h2>foo</h2>
{% block content %}
<button><a href="{% url 'site' %}"/>Click</button>
{% endblock %}
<p>bar</p>
</body>
Clicking on the button gets me to "site.html", however all html items which I add on "index.html", for example the paragraph "bar" would also get rendered as hyperlink.
I tried creating different Django blocks or making different html sections but that doesn't fix it.
Thank you for your help.
You're missing a closing anchor </a> tag after your element.
<body>
<h2>foo</h2>
{% block content %}
<button>Click</button>
{% endblock %}
<p>bar</p>
</body>
I will note that I'm not sure it's "correct" to have an anchor tag within a button. I think you're better off styling your anchor tag to appear as a button.
I am successfully creating a Cloudinary image as follows:
{% cloudinary photo.filename
width='300'
crop='fill'
class='item_photo'
id=photo.filename %}
Which results in html img tag:
<img
class="item_photo"
id="xxxxxx"
width="300"
src="https://res.cloudinary.com/xxx/image/upload/c_fill,w_300/vxxx/xxx.jpg">
However, I want to add an onClick event to the img, but am not able to figure out the correct syntax or perhaps even if it is possible.
I would like html tag to look like:
<img
class="item_photo"
id="xxxxxx"
width="300"
onClick=imageClick('xxxxxx') <=== event variable is same as `id` value
src="https://res.cloudinary.com/xxx/image/upload/c_fill,w_300/vxxx/xxx.jpg">
The id and imageClick variable are themselves populated by Django template tag value photo.filename.
Some things I've tried:
onClick='photoClick(photo.filename)' %}
{% with add:'onClick=photoClick('{{ photo.filename }}|add:') as onclick %}{{ onclick }}{% endwith %}
|add:'onClick=photoClick('{{ photo.filename }}|add:')' %}
How can I construct the onClick=photoClick(xxx) part of this template tag?
You can add the onClick attribute to the img tag as shown below (e.g. photo.filename=sample_image):
{% cloudinary photo.filename width="300" crop="fill" class="item_photo" id=photo.filename onclick="photoClick(this)" %}
Add the script function photoClick(), which can accept the img tag object that can be processed as:
<script type="text/javascript">
function photoClick(img) {
console.log("The src data is: " + img.src);
console.log("The id data is: " + img.id);
var filename = img.src.substring(img.src.lastIndexOf('/')+1);
console.log("The filename is: " + filename);
// Other actions
var src = img.src;
window.open(src);
}
</script>
The resulting HTML tag will be:
<img class="item_photo" id="sample_image" onclick="photoClick(this)" src="https://<your_cloudinary_image_url_path>/sample_image.<ext>" width="300"/>
Hi I have extended Django Admin templates into my app/templates/admin directory..
in that directory I have base.html which contains
<header> header content<header>
<body> body Content </body>
<footer> Footer Content</footer>
so I have created header.html which contains
{% extends "admin/base_site.html" %}
<!-- I also tried to include base.html here-->
{% block header %}
Header Html here...
{% endblock %}
and replaced base.html to below content
{% block header %} {% endblock %}
<body> body content </body>
<footer> Footer Content </footer>
but header content is not getting loaded.. so please suggest.
Use include before using block header from header.html.
And you don't need to create a block to include an HTML file into another.
In your header.html file, just write the code of header files.
Like this :
{% extends "admin/base_site.html" %}
Header Html here...
And, In your base.html try this code :
{% include "templates/header.html" %}
<body> body content </body>
<footer> Footer Content </footer>
Note : Use include "templates/header.html" as per your location of header.html
There is something missing in your approach. Let's see how the admin app loads a template:
The user asks for a page, eg /admin/.
The respective view in the admin app handles the request.
The view renders the index.html template.
This template extends the base.html template.
That's all of it. When you replaced the base.html template and added the new block, django looks for this block definition in the index.html. Your new header file is nowhere to be involved in this process.
No matter what you do with your templates, django will always try to render the corresponding view's template like the index.html (unless of course you change the views themselves). So you have the option to override any template starting from the last down to the first extend.
As Prakhar's answer recommended, in order to make django acknowledge your new header template file, you need to use an include directive.
If this is not working, make sure that you use the correct path to both your base file and to your include file.
Please also take into account that includes are far more expensive performance-wise than extends or simple overrides.
Do I have to paste my ananlytics code into every page of my django app or can I just do it in one spot, the base, similar to disqus?
You can do it in the base page and that will be included in every actually generated page.
You can have, for example, a master_page.html in which you put the main wrapper HTML including your Google Analytics code. The main part of your master page would have:
<html>
<head>
<!-- Google Analytics code -->
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Then your content page will have something like:
{% extends "master_page.html" %}
{% block content %}
Your content for the page.
{% endblock %}
I am using Django template with the built-in extends tag, I didn't put too much code in it, just a nav bar, but I get extra space on top of the browser, and that can not be traced in chrome developer tools. That extra space still exists, even if, I did like this:
# base.html
<!doctype html>
<html>
<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/layout.css" %}" />
</head><body>
<div><p>something here.</p>
</div>
</body>
</html>
and then I extend it with just one line of code:
# home.html
{% extends "base.html" %}
Then rendered file still have this problem. I am using Django3.3 Python 3.3 with Django1.6.
It was really strange.
Finally I find the problem was due to UTF-8 BOM in encoding.
I use Django1.6, Python3.3, on Windows7. My text editor is Notepad++, and I used to save files under UTF-8 encoding. By default, UTF-8 is saved with a byte order mark(BOM). It was this that affects the rendering of templates, at least for the tag of extends and include. Let's say, I put it in an example:
# home.html
{% extends "base.html" %}
{% block content%}
{% include "a.html" %}
{% include "b.html" %}
{% endblock %}
and
# base.html
<!doctype html>
<html>
<head>
<!-- This file saved with encoding UTF-8, which is by default with BOM.-->
</head>
<body>
<div><p>something here, base.</p></div>
{% block content%}{% endblock %}
</body>
</html>
and
# a.html
<p>a.html, saved in utf-8 without BOM. </p>
and
# b.html
<p>b.html, saved in utf-8, which is by default with BOM in Notepad++.</p>
what will be the output? It will look like this
___________ ( top of your browser )
( extra space on top, due to extended file `base.html` is with BOM )
something here, base.
a.html, saved in utf-8 without BOM. (no extra space above the content of a.html)
( extra space on top, due to included file `b.html` is with BOM )
b.html, saved in utf-8, which is by default with BOM in Notepad++.
so, basically, for any file loaded by the template, if it is with BOM, then the rendered html will add extra spaces on top of its section. Therefore, remember to save all the files with UTF-8 without BOM.
Note: I have tried earlier to use {% spaceless %}{% endspaceless %} on my base.html or home.html, but this cannot solve the problem, the extra spaces wasn't due to spaces or \n between html tags.
Django most recent version is 1.7 not 3.3, and your first code comment will be base.html not base.py.
You got this extra space because of you have leave space in your base.html file. remove the top extra space of your base.html file.
First of all, you might have Django 1.7, and Python 3.3 because Django 3.3 doesn't exists (and will maybe exists in a decade only :-) )
Second, extra spaces are present in the HTML rendered because Django keeps everything except tags from the template. So if you have a template like this:
{% load static cache compress %} <!-- <- You have here a \n to create a new line -->
{% block htmlheader %}
<!DOCTYPE html>
<html lang="fr">
<head>
....
the rendered will interpret ths {% load %} tag, remove it (actually not include it) in the rendered HTML page, and continue to parse the content. Same behaviour with the {% block %} tag, which will leave a \n too. The result will be
<!-- A blank line due to the load tag -->
<!-- A second blank line due to the block tag -->
<!DOCTYPE html>
<html lang="fr">
<head>
....