In the home page of my website there's a Materialize carousel with 3 slides.
The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template
<!DOCTYPE html>
<html class="home-bkg">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ga4MeasurementId}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '{{ga4MeasurementId}}');
</script>
{% block viewItemListAccessories %}{% endblock %}
{% block viewItemListBags %}{% endblock %}
{% block viewItemAccessory %}{% endblock %}
{% block viewItemBag %}{% endblock %}
<meta charset="utf-8" />
{% block homeTitle %}{% endblock %}
{% block bagsTitle %}{% endblock %}
{% block accessoriesTitle %}{% endblock %}
{% block reimaginedTitle %}{% endblock %}
{% block makingOfTitle %}{% endblock %}
{% block pressTitle %}{% endblock %}
{% block bagTitle %}{% endblock %}
{% block legalTitle %}{% endblock %}
<!--Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import Font awesome icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--Import Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Playfair+Display+Lato&display=swap"
rel="stylesheet">
<!--Import main.css and materialize.css-->
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css')}}"
media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% block homeMeta %}{% endblock %}
{% block accessoriesMeta %}{% endblock %}
{% block reimaginedMeta %}{% endblock %}
{% block bagMeta %}{% endblock %}
{% block bagsMeta %}{% endblock %}
{% block legalMeta %}{% endblock %}
{% block makingOfMeta %}{% endblock %}
{% block pressMeta %}{% endblock %}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div>
<!-- header-menu -->
<div class="row no-margin-bottom">
<div class="header-menu valign-wrapper center-align">
<div class="col l1"></div>
<div class="col s12 m12 l3">
<!--main logo-->
<a href="/">
<img src="{{ url_for('static', filename='images/logo_black.png') }}" id="logo"
class="responsive-img" width="275" /></img>
</a>
</div>
<div class="col s12 m4 l2"><a id="bags" class="top-menu-item" href="/bags">BAGS</a></div>
<div class="col s12 m4 l2"><a id="accessries" class="top-menu-item" href="/accessories">ACCESSORIES</a>
</div>
<div class="col s12 m4 l2"><a id="lostAndFound" class="top-menu-item" href="/reimagined">REIMAGINED</a>
</div>
<div class="col l1"></div>
</div>
</div>
{% block home %}{% endblock %}
{% block bags %}{% endblock %}
{% block accessories %}{% endblock %}
{% block reimagined %}{% endblock %}
{% block makingOf %}{% endblock %}
{% block press %}{% endblock %}
{% block bag %}{% endblock %}
{% block accessory %}{% endblock %}
{% block legal %}{% endblock %}
<!-- footer -->
<div class="row">
<div class="footer valign-wrapper center-align">
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="imemoi" class="footer-item"
href="/imemoi">IMEMOI</a></div>
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="press" class="footer-item" href="/press">PRESS</a>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l4 social-icons fa-lg">
<ul>
<li id="fb-icon"><a href="http://www.facebook.com/pages/imemoi/137151246299509"
target="_blank"><i class="fa fa-facebook footer-item"></i></a></li>
<li id="is-icon"><a href="http://instagram.com/imemoi_paris" target="_blank"><i
class="fa fa-instagram footer-item"></i></a></li>
<li id="pi-icon"><a href="http://pinterest.com/imemoi/" target="_blank"><i
class="fa fa-pinterest footer-item"></i></a></li>
</ul>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l3"><a id="making-of" class="footer-item"
href="/making-of">MAKING OF & ENGAGEMENT</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l1"><a id="legal" class="footer-item"
href="/legal">LEGAL</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l2"><a id="contact-us" class="footer-item"
href="/contactUs">CONTACT US</a></div>
</div>
</div>
<div class="row">
<div class="subscribe valign-wrapper center-align">
<div class="input-field col s8 offset-m4 m4 offset-m4 offset-l4 l4 offset-l4">
<input id="subscriberEmail" type="email" class="validate"></input>
<label for="subscriberEmail">SUBSCRIBE</label>
<span class="promo">YOU'LL GET THE 15% OFF !!!</span>
</div>
<a id="subscriberBtn" class="waves-effect waves-light btn black"><i
class="material-icons right">send</i></a>
</div>
</div>
<div class="footer-copyright">
<div class="imemoi-copyright center-align">
Powered By IMEMOI - © Copyright 2011-2020 - VAT IT02883161206</a>
</div>
</div>
</div>
<!--jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--JavaScript -->
<script type="text/javascript" src="{{url_for('static', filename='js/materialize.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>
</html>
And this is the home.html template containing the carousel and the slides:
{% extends 'base.html' %}
{% block homeTitle %}
<title>imemoi: exclusive luxury bags | home</title>
{% endblock %}
{% block homeMeta %}
<meta name="description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:url" content="https://www.imemoi.com/" />
<meta property="og:image" content="https://www.imemoi.com/static/images/home_slide_3.jpg" />
<meta property="og:description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:type" content="website" />
{% endblock %}
{% block home %}
<div class="row">
<div class="carousel carousel-slider">
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_1.jpg" alt="First slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_2.jpg" alt="Second slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_3.jpg" alt="Third slide"></a>
</div>
</div>
{% endblock %}
This is the Javascript that initialize the carousel:
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});
The problem is this: when I load the page in the browser, the image is cutted and it remains cutted until I resize the screen, after resizing the screen the image dispays correctly:
I tried to solve the issue adding into the .css file this:
.slider{
height: 770.987px;
}
but then I have problems with the mobile visualization: there's empty space below the slide.
Last thig: images are all 3360 x 2240 pixels
I basically need to include the carousel in a way in which it will be visualized properly on laptop and mobile.
Basically the issue consists in the fact that the carousel is initialized before the images ar loaded and so the carousel height is not calculated properly.
Initializing the carousel when all the page is loaded and not only the DOM will solve the issue:
$( window ).on( "load", function() {
$('.carousel.carousel-slider').carousel({ fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});
Related
I have a custom popup that shows upon form submission to let the user know it was successful. Currently it displays when it's supposed to (although I can't get it to display in the middle right on top, but that's a minor issue) like shown below:
But the little X button does not actually close the message. You can click it but it does nothing, and if you reload the page then it's gone until you submit again.
base.html
{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/apps.css" %}" rel="stylesheet">
<script src="{% static "js/plugins/jquery.js" %}"></script>
<script src="{% static "js/plugins/bootstrap.min.js" %}"></script>
<!--[if lt IE 9]>
<script src="{% static 'js/plugins/respond.js' %}"></script>
<![endif]-->
</head>
<body>
<div id="login" class="panel panel-default">
<div class="panel-body">
{% block main %}
{% endblock main %}
</div>
<div class="panel-footer">
{% block panel_footer %}
{% endblock %}
</div>
</div>
{% if messages %}
<script>
{% for message in messages %}
$(document).ready(function () {
$('.toast').toast('show');
});
{% endfor %}
</script>
{% endif %}
</body>
I think the problem could be related to the warning I get that says Unresolved function or method toast() on $('.toast').toast('show'); but I'm not sure how to resolve this issue (I got this from https://www.w3schools.com/bootstrap4/bootstrap_toast.asp but I don't know if I just didn't add something important to make this work)
enter_exit_area.html
{% extends "base.html" %}
{% load core_tags %}
{% block main %}
<form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div>
<label>Station</label>
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter" >Enter Area</button>
</div>
</div>
</form>
{% endblock main %}
message.html
{% for message in messages %}
<div style="position: absolute" class="toast bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div>
<strong class="mr-auto">
{{message.tags|capfirst}}
</strong>
<button type="button" class="ml-2 mb-1 close" aria-label="Close">
<span aria-hidden="true" data-dismiss="toast">×</span>
</button>
</div>
<div>
{{message|safe}}
</div>
</div>
{% endfor %}
views.py
class EnterExitArea(CreateView):
model = EmployeeWorkAreaLog
template_name = "operations/enter_exit_area.html"
form_class = WarehouseForm
def form_valid(self, form):
emp_num = form.cleaned_data['employee_number']
area = form.cleaned_data['work_area']
station = form.cleaned_data['station_number']
if 'enter_area' in self.request.POST:
form.save()
EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True)).update(time_in=datetime.now())
messages.success(self.request, "You have entered")
return HttpResponseRedirect(self.request.path_info)
I have a template which inherits from a base template in javascript.
Here is the base template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}{% endblock %}</title>
{% include 'base/css.html' %}
{% block head %}{% endblock %}
</head>
<body id="page-top">
{% include 'base/navbar.html' %}
{% block content %}{% endblock %}
{% include 'base/js.html' %}
{% block js %}{% endblock %}
</body>
</html>
Here is the template where the javascript doesn't work:
{% extends 'base.html' %}
{% load static %}
{% block head %}
<link href="{% static 'css/card.css' %}" rel="stylesheet"></link>
{% endblock %}
{% block content %}
<div class="card-wrapper">
{% for account in object_list %}
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">{{ account.price }}</span>
<span class="product_name">{{ account.get_arena_readable }}</span>
<p>King level {{ account.king_tower }}</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block js %}
<script src="{% static 'js/card.js' %}"></script>
{% endblock js %}
The css loads fine, however the javascript doesn't. I have put the javascript tag in the correct block so the contents of the file should be loaded when I run the local development server. Why does none of the javascript get included?
It appears to be include since card.js is present.
Also in your base.html you have {% block js %}{% endblock %} but in the second template you have {% block js %}{% endblock js %}.
You are trying to access static files from static directory as described here:
<script src="{% static 'js/card.js' %}"></script>
Whereas in your settings you have named the static directory static_local
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_local'),
]
So based on this image:
The name of your static directory is static.
So in your settings.STATICFILES_DIRS, replace static_local with static like the following:
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
In my django app i have a base.html template as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>{% block title %}{% endblock %}</title>
{# ----------------- STATIC FILES -------------- #}
{% load staticfiles %}
<link rel="icon" type="image/x-icon" href="{% static 'images/tab_logo.ico' %}"/>
{% block site_css %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'core/css/style.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}
{% block extra_css %}{% endblock %}
<meta name="viewport" content="width=device-width">
</head>
<body>
{% block navbar %}
<!-- START NAV -->
<nav role='navigation'>
<a data-page="home" id="home" class="active" href="/">Home</a>
<a data-page="blog" id="blog" href="{% url 'blog' %}">Blog</a>
<a data-page="contact" id="contact" href="{% url 'contact' %}">Contact Us</a>
<a data-page="about" id="about" href="{% url 'about' %}">About</a>
</nav>
<hr>
{% endblock %}
<!--start container-->
<div class="container">
<div class="row">
<div class="span9">
<div id="content">
<br>
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
<!--end container-->
<hr>
{% include 'core/footer.html' %}
{% block javascript %}
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="{% static 'core/js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'core/js/skin.js' %}"></script>
{% endblock %}
{% block add_js %}
{% endblock %}
</body>
</html>
I am trying to make separate template files for blog,about,contact
{% extends 'core/base.html' %}
{% block add_js %}
<script>
$(document).ready(skinchange('blog'));
</script>
{% endblock %}
{% block content %}
<h1 style="text-align: center;font-size: 32px;">BLOG</h1>
{% endblock %}
Now in the index page(nav bar home active), when i click on the blog link (Blog) redirection to localhost:8000/blog/ is done.When this page is loaded i want to change the class of nav a for blog to be active so that the style of the page is changed as per my css.For this i am executing a jquery script -> $(document).ready(skinchange('blog'));
where skinchange is a function in skin.js
'use strict';
function skinchange(page) {
page = typeof page !== 'undefined' ? page : 'home';
var link = $("nav a");
$("body").removeClass().addClass(page);
link.removeClass("active");
var d = document.getElementById(page);
d.className +="active";
}
for some reason on new page loading the class attribute of the nav links remains same as the base.html.The jquery script is not executing.
Can anyone help me what i am doing wrong here.
I have a big problem with including blocks between templates. The code is following:
{# layout.html.twig #} (simplified version)
<html>
<head>
.....
.....
{% block stylesheets%}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
{# index.html.twig #}
{% extends "demoBundle::layout.html.twig" %}
{% block content %}
some content {# <---- this is working #}
{% render(controller('demoBundle:Default:renderIndexContent')) %}
{% endblock %}
{# DefaultController.php #}
...
...
return $this->render('demoBundle:Gallery:slideshow.html.twig');
...
...
{# slideshow.html.twig #}
{% block stylesheet %} {# <---- this is not working #}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
The idea is, index.html.twig extends layout, and rendering another template with name slideshow.html.twig trought controller. But I need include stylesheets inner block in the template slideshow.html.twig to stylesheets block in head position in the main template layout.html.twig, but does not work. When i add tag {{ parent() }} to the block stylesheet in the template slideshow.html.twig, symfony say
Calling "parent" on a template that does not extend nor "use" another template is forbidden in demoBundle:Gallery:slideshow.html.twig at line 3
/EDITED*/
No, it is not resolution for me, because i have some variables returnet from defaultcontroller.php in template index.html.twig.
Ok, the previous code was just a simpliefed example. I enclose a concrete example
index.html.twig
{% extends "cmsBundle::layout.html.twig" %}
{% block rightSideBar %}{% endblock %}
{% block content %}
<div class="top_block">
<div id="module-1" class="no-title">
{% for block in blocksCenter %}
{% if (block.position=="center-top") %}
{% render(controller('cmsBundle:Default:renderIndexBlocks',{'blockname':block.name})) %}
{% endif %}
{% endfor %}
</div>
...
block.name is for example "slideshow". In the DefaultController.php inner method renderIndexBlocksAction is this piece of code:
DefaultController.php
return $this->render(
'cmsBundle:Blocks:'.$blockname.'.html.twig'
,array('items'=>$items)
);
this render template name slideshow.html.twig, there is this piece of code:
slideshow.html.twig
{% block styles %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/cms/css/pictureSlider.css') }}" type="text/css" media="all"/>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/cms/js/jquery-1.11.0.min.js') }}"></script>
{% endblock %}
for completenes, her is the piece of layout.html.twig
layout.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="{{ asset('bundles/cms/images/favicon.ico') }}" type="image/x-icon" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="{{ asset('bundles/cms/css/style.css') }}" type="text/css" media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/cms/css/menu.css') }}" type="text/css" media="all"/>
{% block styles %}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
<div id="bg_image"><img src="{{ asset('bundles/cms/images/AbstractBlue.jpg') }}" alt="" style="width:100%; height:100%;"></div>
<div id="mainContainer">
<div id="header">
<div id="top1">
<div id="logo">
<div id="search">
{% include 'cmsBundle:Default:search.html.twig' %}
</div>
<div class="wrapper" style="width:987px"/>
<div id="menu" class="menu">
{% render(controller('cmsBundle:Default:renderMenu')) %}
</div>
</div>
</div>
</div>
</div>
<div id="blocks" class="blocks">{% block rightSideBar %}{% endblock %}</div>
<!--CONTENT-->
<div id="mainContentm">
{% block content %}{% endblock %}
</div><!-- end #content -->
<!-- #footer -->
<div id="footer">
<div id="footer-left">
</div>
<div id="footer-right">
</div>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
The error itself says calling parent on a template that does not extend nor use means your template slideshow.html.twig is not extending any parent template or layout to follow thus if there is not parent template you cannot call the stylesheets of member that does not exist,for answer to your question in slideshow.html.twig use
{% extends '::index.html.twig' %}
and then define
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
If there are any stylesheets in index.html.twig these will be included in your template,as viewing the index.html.twig code there is empty stylesheets block.If layout.html.twig has also defined a block for stylesheets then you should call {{ parent() }} function in the stylesheets block of index.html.twig so it will include the stylesheets of its parent layout i.e layout.html.twig
When I am extending my base.html.twig my JS are loading twice. Here is my code:
{% block javascripts %}
{% javascripts
'#MyBundle/Resources/public/app/src/lib/jquery.js'
'#MyBundle/Resources/public/app/src/lib/jquery-ui.js'
'#MyBundle/Resources/public/app/src/lib/angular.js'
'#MyBundle/Resources/public/app/src/lib/ui-bootstrap-tpls-0.10.0.js'
'#MyBundle/Resources/public/app/src/lib/fullcalendar.js'
'#MyBundle/Resources/public/app/calendar.js'
'#MyBundle/Resources/public/app/src/lib/angular-route.js'
'#MyBundle/Resources/public/app/schedulePlanner.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
I had a similar issue which turns out was caused by a misplaced {% endblock %} tag.
Here was my base view:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}{% endblock %}</title>
{% block header %}{% endblock %}
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<!--[if lt IE 9]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser.</p>
<![endif]-->
{# debug #}
{% if pre is defined and pre is not empty and app.environment == 'dev' %}
<pre>
{{ pre }}
</pre>
{% endif %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
And here was the bundle template that extended:
{% extends "::base.html.twig" %}
{# title #}
{% block title %}{% endblock %}
{% block header %}
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
{% endblock %}
{# style #}
{% block stylesheets %}
{% endblock %}
{# body #}
{% block body %}
{% block content_header %}
<div class="header"><div class="header-in">
<header>
</header>
</div></div>
<div class="nav"><div class="nav-in">
<nav>
<ul id="menu" class="menu clearfix">
{% block content_header_nav %}
{% endblock %}
</ul>
</nav>
</div></div>
{% endblock %}
<div class="block"><div class="block-in">
<div class="content"><div class="content-in clearfix">
{% set notices = app.session.flashbag.get('notices') %}
{% if notices is not empty %}
<ul class="msg ajax-flash-msg">
{% for notice in notices %}
<li>{{ notice }}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}{% endblock %}
</div></div>
</div></div>
<div class="footer"><div class="footer-in">
<footer>
{% block footer %}{% endblock %}
</footer>
</div></div>
{# javascript #}
{% block javascripts %}
<script src="{{ asset('assets/require.js') }}"></script>
{% endblock %}
{% endblock %}
You'll notice I had my javascript block inside of the body block in the bundle template which caused it to render twice upon html outputing to the browser.
To fix I moved the javascript block outside of the body block.