weasyprint is not rendering bootstrap4 css correctly - css

I'm trying to generate an invoice by first designing it as HTML and then feeding that to weasyprint to generate the pdf. I'm using Django 2.2.5 version with bootstrap 4.3.1 and weasyprint 50.
The invoice_generator(request) function calls the generate_invoice function with the request, username and template_name.
views.py:
from invoice_generator import generate_invoice
def invoice_generator(request, username):
ret_val = generate_invoice(request, username, template_name="ui/invoice.html")
return ret_val
invoice_generator.py:
from django.shortcuts import render
from commons.models import SMSUser, SMSMessages, Invoice
from commons.serializers import InvoiceSerialzer
from django.template.loader import get_template
from django.conf import settings
from django.http import HttpResponse
from weasyprint import HTML, CSS
import tempfile
from datetime import datetime, date
def generate_invoice(request, username, template_name):
user_to_invoice = SMSUser.objects.get(username=username)
user_invoice = Invoice(invoice_to=user_to_invoice)
company_to_invoice = user_to_invoice.company_name
company_tin = user_to_invoice.company_tin
account = user_to_invoice.pk
user_email = user_to_invoice.email
all_users_in_company = SMSUser.objects.filter(company_name=company_to_invoice)
user_invoice.save()
invoice_number = user_invoice.pk
paid_status = user_invoice.payment_status
all_sms_sent_by_users = {}
for user in all_users_in_company:
# TODO you can run the code at the begining of each month by doing:
# TODO x = date.today() then x = x.replace(day=1)
total_sent_by_single_user = SMSMessages.objects.filter(
sending_user=user,
delivery_status="True",
sent_date__year=datetime.now().year,
sent_date__month = 10
# sent_date__month = datetime.now().month - 2
)
all_sms_sent_by_users = {
"all_sms_sent": [
{
"user": user,
"total_sent_single_user": total_sent_by_single_user.count()
}
]
}
total_amount_sent = SMSMessages.objects.filter(
sent_date__year = datetime.now().year,
sent_date__month = 10,
# sent_date__month = datetime.now().month - 1,
sending_user__company_name=company_to_invoice
)
# TODO feed the below object to a pdf renderer and return that pdf rendered object
context_object = {
"username": user_to_invoice,
"company_name": company_to_invoice,
"account": account,
"invoice_number": invoice_number,
"tin": company_tin,
"email": user_email,
"bill_month": datetime.now().month - 1,
"all_sms_sent": all_sms_sent_by_users,
"total_amount_sent": total_amount_sent.count(),
"vat": total_amount_sent.count() * 0.70 * 0.15,
"total_price": total_amount_sent.count() * 0.70 * 1.15,
"payment_status": paid_status
}
rendered_html = get_template(template_name).render(
context_object,
request
).encode(encoding='UTF-8')
pdf_file = HTML(string=rendered_html, base_url=request.build_absolute_uri())
pdf_file.render()
pdf_container = pdf_file.write_pdf(
stylesheets=[
CSS(
'ui' + settings.STATIC_URL + 'ui/css/bootstrap.min.css'
)
]
)
response = HttpResponse(content_type='application/pdf;')
response['Content-Disposition'] = 'filename=Invoice ' + company_to_invoice + str(datetime.now().month) + '.pdf'
response['Content-Transfer-Encoding'] = 'UTF-8'
with tempfile.NamedTemporaryFile(delete=True) as pdf_writer:
pdf_writer.write(pdf_container)
pdf_writer.flush()
pdf_writer = open(pdf_writer.name, 'rb')
response.write(pdf_writer.read())
return response
and this is the ui/invoice.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="{% static 'ui/images/favicon.ico' %}">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap4 css -->
<link href="{% static 'ui/css/bootstrap.min.css' %}" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>sms.et | Invoice</title>
</head>
<body class="text-center d-print-block" style="background-color: #f5f5f5;">
<div class="container-fluid align-items-center align-middle">
<header>
<div class="row">
<div class="col-md-12 bg-primary">
<h1 class="font-weight-bold self-center h1 text-white">Service Invoice</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-light self-center h4"><p>Customer Name: <span class="font-weight-lighter"> {{ username.company_name }}</span></p></h4>
<h4 class="font-weight-light self-center h4"><p>Account: <span class="font-weight-lighter"> {{ account }}</span></p></h4>
<h4 class="font-weight-light self-center h4"><p>T.I.N: <span class="font-weight-lighter"> {{ tin }}</span></p></h4>
</div>
<div class="col-md-6">
<h4 class="font-weight-light self-center h4"><p>Invoice number: <span class="font-weight-lighter"> {{ invoice_number }}</span></p></h4>
<h4 class="font-weight-light self-center h4"><p>Email: <span class="font-weight-lighter"> {{ email }}</span></p></h4>
<h4 class="font-weight-light self-center h4"><p>Bill Month: <span class="font-weight-lighter"> {{ bill_month }}</span></p></h4>
<h4 class="font-weight-light self-center h4"><p>Due date: <span class="font-weight-lighter"> 5 days from this invoice</span></p></h4>
</div>
</div>
</header>
</div>
<hr class="bg-primary">
<h6 class="font-weight-lighter self-center h6"><p>Paid status: {{payment_status}}</p></h6>
<hr class="bg-primary">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label class="font-weight-light self-center h2">All users that sent sms:</label>
<div class="row">
<div class="col-md-4">
<!-- dict object all _sms_sent is garnered from the views and parsed accordingly as key & value of all_sms_sent.items -->
{% for key, value in all_sms_sent.items %}
<h4 class="font-weight-lighter h4">username</h4>
{% for val in value %}
<p>{{ val.user }}</p>
</div>
<div class="col-md-4">
<h4 class="font-weight-lighter h4">Company</h4>
<p>{{ val.user.company_name }}</p>
</div>
<div class="col-md-4">
<h4 class="font-weight-lighter h4">Total sent</h4>
<p>{{ val.total_sent_single_user }}</p>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-light self-center h4">Total sms sent in the month:</h4>
</div>
<div class="col-md-6">
<p>{{ total_amount_sent }}</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-light self-center h4">Price per text:</h4>
</div>
<div class="col-md-6">
<p>0.70 Birr</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-light self-center h4">V.A.T:</h4>
</div>
<div class="col-md-6">
<p>{{ vat }} Birr</p>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-light self-center h4">Total:</h4>
</div>
<div class="col-md-6">
<p>{{ total_price }} Birr</p>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="container-fluid align-items-center align-middle bg-primary">
<footer>
<div class="row text-white">
<div class="col-md-4">
<h4 class="font-weight-light self-center h4"><p>Address</p></h4>
<p class="quote font-weight-light center">Ethiopia, Addis Ababa, Kirkos sub-city, woreda 02, House No. 700.</p>
</div>
<div class="col-md-4">
<img src="{% static 'ui/images/logo.jpg' %}" width="50" height="40" class="d-inline-block align-top navbar-brand" alt="">
<br>
www.sms.et
</div>
<div class="col-md-4">
<p class="quote font-weight-light center">Outstanding bill must be settled 5 days after issuance of this service invoice.</p>
<p class="quote font-weight-light center">Any questions can be forwared to us via our phone number: +251977207777</p>
</div>
</div>
</footer>
</div>
</body>
</html>
The problem is that weasyprint is not rendering the bootstrap 4 css as expected, i.e. as written above.
This is a question Bootstrap CSS is not applied in weasyprint
that comes close to my problem but the solutions described made no difference.
Just to clarify, this is how it was supposed to look like (the html version):
.
But it ended up looking like this:
and this:
Can anybody please help?
Edited to include urls.py of project and app
this is the urls.py from the project:
urlpatterns = [
# for the ui app
path('ui/', include('ui.urls')),
]
and this is the urls.py for the ui app:
from django.urls import path
from . import views
app_name = "ui"
urlpatterns = [
path('homepage/', views.homepage, name="homepage"),
path('login/', views.login_request, name="login"),
path('dashboard/<username>/', views.dashboard, name="dashboard"),
path('logout/', views.logout_request, name="logout"),
path('register/', views.register_request, name="register"),
path('ajax/dashboard_update/', views.ajax_dashboard_update, name="ajax_dashboard_update"),
path('<username>/invoice/', views.invoice_generator, name="invoice_generator"),
]

Related

VueJS3 : radio v-model doesn't update when switch changed

I want my input radio that is default checked to update the value in the v-model. But when I switch plan the v-model doesn't update dynamically. I'm stuck. Maybe I have to take a look at "watch" or "ref".
My formValues is reactive and returns the good answer in the v-model. But when I switch plan... doesn't update the check output.
<template>
<!-- Second step -->
<section id="second-step">
<div class="row mt-4 px-2">
<div class="col-12">
<h1 class="h2 fw-bold">Select your plan</h1>
<p class="pt-1">
You have the option of monthly or yearly billing.
</p>
</div>
</div>
<!-- Form 2 -->
<form class="row justify-content-xl-between px-3 pe-xl-0" id="form-plan">
<!-- Plan 1 -->
<div class="col-12 col-xl plan mt-3 p-0">
<label for="arcade-plan" class="plan-label"></label>
<input v-model="check" type="radio" v-if="formValues.billing.monthly" :value="formValues.plan[0].name" name="plan" id="arcade-plan" checked>
<input v-model="check" type="radio" v-else="formValues.billing.yearly" :value="formValues.plan[1].name" name="plan" id="arcade-plan" checked>
<div class="plan-content card ps-2">
<div class="plan-icon mt-1">
<img src="assets/images/icon-arcade.svg" alt="">
</div>
<div class="plan-description">
<span class="plan-title mb-0">Arcade</span>
<div class="price monthly">
<div class="amount mb-0 fs-6 fw-medium text-cool-gray">$9/mo</div>
</div>
<div class="price yearly d-none">
<div class="amount fs-6 fw-medium text-cool-gray">$90/yr</div>
<div class="billing-msg text-primary">2 months free</div>
</div>
</div>
</div>
</div>
<!-- Plan 2 -->
<div class="col-12 col-xl plan mt-3 p-0">
<label for="advanced-plan" class="plan-label"></label>
<input v-model="check" type="radio" v-if="formValues.billing.monthly" :value="formValues.plan[2].name" name="plan" id="advanced-plan">
<input v-model="check" type="radio" v-else="formValues.billing.yearly" :value="formValues.plan[3].name" name="plan" id="advanced-plan">
<div class="plan-content card ps-2">
<div class="plan-icon mt-1">
<img src="assets/images/icon-advanced.svg" alt="">
</div>
<div class="plan-description">
<span class="plan-title mb-0">Advanced</span>
<div class="price monthly">
<div class="amount mb-0 fs-6 fw-medium text-cool-gray">$12/mo</div>
</div>
<div class="price yearly d-none">
<div class="amount fs-6 fw-medium text-cool-gray">$120/yr</div>
<div class="billing-msg text-primary">2 months free</div>
</div>
</div>
</div>
</div>
<!-- Plan 3 -->
<div class="col-12 col-xl plan mt-3 p-0">
<label for="pro-plan" class="plan-label"></label>
<input v-model="check" type="radio" v-if="formValues.billing.monthly" :value="formValues.plan[4].name" name="plan" id="pro-plan">
<input v-model="check" type="radio" v-else="formValues.billing.yearly" :value="formValues.plan[5].name" name="plan" id="pro-plan">
<div class="plan-content card ps-2">
<div class="plan-icon mt-1">
<img src="assets/images/icon-pro.svg" alt="">
</div>
<div class="plan-description">
<span class="plan-title mb-0">Pro</span>
<div class="price monthly">
<div class="amount mb-0 fs-6 fw-medium text-cool-gray">$15/mo</div>
</div>
<div class="price yearly d-none">
<div class="amount fs-6 fw-medium text-cool-gray">$150/yr</div>
<div class="billing-msg text-primary">2 months free</div>
</div>
</div>
</div>
</div>
<!-- Switch billing -->
<div class="col-12 py-3 rounded">
<div class="row bg-alabaster justify-content-center px-2">
<div class="col-10 col-sm-8 col-md-6">
<div class="switch-wrapper py-2 mb-0">
<input id="monthly" type="radio" name="switch" checked>
<input id="yearly" type="radio" name="switch">
<label id="billing-monthly" for="monthly" class="mx-sm-5">Monthly</label>
<label id="billing-yearly" for="yearly" class="mx-sm-5">Yearly</label>
<span class="toggler"></span>
</div>
</div>
</div>
</div>
</form>
</section>
<div class="container">
Selected :
{{ check }}
</div>
</template>
<script>
import { onMounted } from 'vue';
export default {
data() {
return {
check: 'Arcade (Monthly)'
}
},
props: {
step: Number,
formValues: Object
},
setup(props) {
onMounted(() => {
const switchInputs = document.querySelectorAll(".switch-wrapper input");
const prices = document.querySelectorAll(".price");
const toggleClass = "d-none";
/* Switch */
for (const switchInput of switchInputs) {
switchInput.addEventListener("input", function () {
for (const price of prices) {
price.classList.add(toggleClass);
}
const activePrices = document.querySelectorAll(
`.price.${switchInput.id}`
);
for (const activePrice of activePrices) {
activePrice.classList.remove(toggleClass);
}
/* Change billing type */
props.formValues.updateBilling()
console.log(props.formValues.billing.yearly)
})
}
})
}
}
</script>
I didn't find any sources about this problem yet. I think I can do something with a watch or ref.

I think that you're overcomplicating things.
Computed properties are used when you need to combine multiple reactive properties. In this case it would be the message output on selected plan + period.
Here is a working example in CodeSandbox.
Also, you are not using conditional rendering properly, which may be why your data isn't updating correctly.
v-if="logical expression"
v-else-if="logical expression"
v-else
References:
Computed properties
Conditional rendering

Here is a very basic sample of Radio input binding with Vue:
const { createApp } = Vue;
const App = {
data() {
return {
check: 'Arcade (Monthly)',
items: ['Arcade (Monthly)', 'Advanced (Monthly)']
}
}
}
const app = createApp(App)
app.mount('#app')
<div id="app">
<div>Picked: {{ check }}</div><br />
<div v-for="(item, index) in items">
<input type="radio" :id="`item_${index}`" :value="item" v-model="check" />
<label :for="`item_${index}`">{{item}}</label>
</div>
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>

Position buttons on bottom of card group in Bootstrap4

I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?

Try min-height for .card-text
.card-text{
min-height:250px;
}

It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.

how to use FOSCommentBundle

Im new to symfony3 and I need a bit of help,I have a timeline page that contains posts and every post has a comment field so in order to do that I've installed the FOSCommentBundle following all the steps in this documentation https://github.com/FriendsOfSymfony/FOSCommentBundle/blob/master/Resources/doc/index.md and then I integrated it with the FOSUserBundle, and I did the following changes in the async.html.twig file :
<div id="fos_comment_thread">#comments</div>
<script type="text/javascript">
// thread id
var fos_comment_thread_id = 'pub';
// api base url to use for initial requests
var fos_comment_thread_api_base_url = 'localhost/Outdoors5/web/app_dev.php/threads';
// Snippet for asynchronously loading the comments
(function() {
var fos_comment_script = document.createElement('script');
fos_comment_script.async = true;
fos_comment_script.src = '{{ asset('bundles/foscomment/js/comments.js') }}';
fos_comment_script.type = 'text/javascript';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fos_comment_script);
})();
</script>
but in the end I got very confused on how I use this ,I passed hours trying to understand and searching for tuto, but no luck.
this is my view
<section id="timeline">
{% for publication in publications %}
<div id="result"></div>
<div class="page-content page-app page-profil " >
<div class="profil-content">
<div class="row">
<div class="row">
<div class="item item-comment">
<div class="user">
<h5 class="name">{{ publication.idProfil.nom }}</h5>
<div class="clearfix">
<p class="time">{% if publication.dateCreation %}{{ publication.dateCreation|date('Y-m-d') }}{% endif %}</p>
</div>
<div class="comment">
<p class="c-primary m-b-0"><strong>{{ publication.texte }}</strong></p>
</div>
</div>
<div class="more">
<div class="row">
<div class="col-sm-4 like">
<i class="fa fa-heart"></i> Like
</div>
<div class="col-sm-4 more-comments">
<div class="comment-number">
<i class="icon-bubble"></i> Comments<span class="pull-right badge badge-dark">3</span>
</div>
</div>
<div class="col-sm-4 more-share">
<i class="icon-share"></i> Share
</div>
</div>
<div class="row comments">
<div class="col-sm-12">
<ul>
<li class="clearfix">
<div class="clearfix">
<div class="info">
<div class="name"><strong class="primary-font"></strong></div>
<div class="date"></div>
</div>
<p>
comment 1
</p>
</div>
</li>
<li></li>
</ul>
</div>
</div>
<div class="row share">
<div class="share-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="share-twitter">
<i class="fa fa-twitter"></i>
</div>
<div class="share-google">
<i class="fa fa-google-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</section>
Could you point me to the right direction?
thank you

There is no need to modify async.html.twig. You just need to add the following code in your twig view:
{% include 'FOSCommentBundle:Thread:async.html.twig' with {'id': 'foo'} %}
To sum up, after doing the following steps:
Step 1: Setting up the bundle
Step 2: Create your Comment and Thread classes
Step 3: Import FOSCommentBundle routing
Step 4: Enable comments on a page
For the FOSUserBundle integration you just have to extend the Comment class as explained in Step 6: Integration with FOSUserBundle

Twig `Variable does not exist` error despite it not being printed

I'm trying to handle non existing variables in my controller which if the database is empty will return a view without any variables:
if(!$votes->findOneById(1) || !$images->findOneById(1)){
return $this->render('admin/stats_and_images.html.twig');
}
return $this->render('admin/stats_and_images.html.twig', [
'images' => $images->countVotesForAllImages(),
'image_podium' => $images->getTopNImages(3),
'form' => $form->createView(),
'votesToday' => $votes->votesToday(),
'votesMonth' => $votes->votesMonth(),
'votesTotal' => $votes->votesTotal()
]);
And in my view I'm trying to handle the lack of variables like so:
{% if (votesTotal[0][1] is defined) and (votesToday[0][1] is defined) and (votesMonth[0][1] is defined) %}
<div class="col-md-6">
<h4 class="sub-section--header">Liczba Oddanych Głosów:</h4>
<hr>
<p>
<div class="col-sm-6">
Dzisiaj:
<span class="text-info large-num">{{ votesToday[0][1] }}</span>
</div>
<div class="col-sm-6">
Ten miesiąc:
<span class="text-info large-num">{{ votesMonth[0][1] }}</span>
</div>
</p>
<p>
<strong>Głosów ogółem: </strong><span class="text-info large-num">{{ votesTotal[0][1] }}</span>
</p>
</div>
<div class="col-md-6">
<h4 class="sub-section--header">Wygrywające zdjęcia:</h4>
<p class="text-muted">Ten miesiąc</p>
<hr>
<div class="row text-center">
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[0][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[0][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[0][0].title}}"
class="site-thumbnail"
title="{{image_podium[0][0].title}} - {{image_podium[0][0].author}}">
</a>
<p><strong>Głosów: {{image_podium[0]['votes']}}</strong></p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[1][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[1][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[1][0].title}}"
class="site-thumbnail"
title="{{image_podium[1][0].title}} - {{image_podium[1][0].author}}">
</a>
<p>Głosów: {{image_podium[1]['votes']}}</p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[2][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[2][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[2][0].title}}"
class="site-thumbnail"
title="{{image_podium[2][0].title}} - {{image_podium[2][0].author}}">
</a>
<p>Głosów: {{image_podium[2]['votes']}}</p>
</div>
</div>
</div>
{% else %}
<h2 class="text-danger text-center">
No votes at the moment :)
</h2>
{% endif %}
But still despite the strict requirement of all three fields to be defined I'm getting this:
Variable "votesToday" does not exist.
And pointing to the <span class="text-info large-num">{{ votesToday[0][1] }}</span> portion of the view.
Why would this be happening? How can it be avoided?

send $votes to twig and check it with {{ dump(votes) }}
If it is a doctrine entity, check your getter. Perhaps is $votes->getVotesToday()

fullpage.js seems to loaded twice my page

i'm using symfony 2.3 with bootstrap and FullPage.js .
When i load my page, it seems to be loaded twice...
So my width slides in my section is wrong, and the code created is wrong too.
<div class="section active" id="section_admin" data-anchor="admin"">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slide active" data-anchor="slide1" style="width:
With the call plugin, my console log return two 'toto', if i remove the plugin my console log return one 'toto'.
Where I am wrong ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/bundles/fosjsrouting/js/router.js"></script>
<script type="text/javascript" src="/app_dev.php/js/routing?callback=fos.Router.setData"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/js/tcs.js"></script>
<script type="text/javascript" src="/bundles/ivoryckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload-ui.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker.js"></script>
<script type="text/javascript" src="/js/dataDays.js"></script>
<script type="text/javascript" src="/js/dataDaysEnh.js"></script>
<script type="text/javascript" src="/js/dataHours.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.fn.gantt.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
<script type="text/javascript" src="/js/jquery.myAlert.js"></script>
<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<!-- wysihtml5 parser rules -->
<script type="text/javascript"src="/js/wysihtml5/parser_rules/advanced.js"></script>
<!-- Library -->
<script type="text/javascript"src="/js/wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/font-awesome-ie7.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="/css/jquery.ibutton.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui-1.8.20.custom.css" type="text/css" />
<link rel="stylesheet" href="/css/select2.css" type="text/css" />
<link rel="stylesheet" href="/css/wysihtml5.css" type="text/css" />
<link rel="stylesheet" href="/css/gantt.css" type="text/css" />
<link rel="stylesheet" href="/css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="/css/bootstrap-colorpicker.css" type="text/css" />
<link rel="stylesheet" href="/css/daterangepicker-bs3.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.fullPage.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.dataTables.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge.css" type="text/css" />
<link rel="stylesheet" href="/css/surcharge-dataTable.css" type="text/css" />
</head>
<body>
<div class="section" id="section_projet">
<div id="myProject" class="col-lg-12">
<div class="row">
<div id="js-sidebar-projet" class="wrap col-sm-2 col-md-3 col-lg-2" >
<a href="/app_dev.php/todo/projet/add" class="visible-xs col-xs-12 btn btn-primary" style="margin-bottom: 20px;">
<i class="icon-cogs"></i>
<span>Nouveau projet</span>
</a>
<div class="sidebar bg-lighter">
<div class="sub-sidebar" style=" border-bottom: 1px solid #FFF">
<a href="/app_dev.php/todo/projet/" >
<div class="col-xs-10 col-sm-9 col-md-8 col-lg-9"><span>Mes Projets</span></div>
<div class="col-xs-2 col-sm-3 col-md-4 col-lg-3"><i class="icon-cogs"></i></div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,8,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Dev</span>
<span class="visible-sm visible-lg">Dev</span>
<span class="visible-md">Dev</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #5cb85c;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/8"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadOneProjet(1,5,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Projet 2</span>
<span class="visible-sm visible-lg">Projet 2</span>
<span class="visible-md">Projet 2</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #b85ca9;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" href="/app_dev.php/todo/delete/projet/5"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
</div> </div>
<div id="js-load-projet" class="wrap col-sm-10 col-md-9 col-lg-10">
<div id='calendar'class="bg-lighter" style="padding: 10px;"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section_tache">
<div id="wrap" class=" col-lg-12" style="padding-top: 20px;">
<div class="row" style="">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
<div class="sidebar bg-lighter" >
<div class="sub-sidebar active">
<a href="#" onclick="loadAjaxTaches('getActiveTaches',1,2,event)" title="Mes taches">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-inbox" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9">
<span>Mes taches</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getTodayTaches',1,2,event)" title="Aujourd'hui">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-calendar" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Aujourd'hui</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getRecentTaches',1,2,event)" title="Updated">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-refresh" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-10 col-lg-9 ">
<span>Updated</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getMyAssignedTaches',1,2,event)" title="Assignée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-hand-right" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Assignée</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a href="#" onclick="loadAjaxTaches('getSQLSharedTaches',1,2,event)" title="Partagée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-share" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Partagée</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getUserlessTaches',1,2,event)" title="Orpheline">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-frown" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Orpheline</span>
</div>
</a>
</div>
</div>
</div>
<div id="contenu" class="wrap col-xs-12 col-sm-8 col-md-7 col-lg-8">
<table id="dataTable" class="table table-tache" >
</table>
<div class="modal fade" id="ModalImportance" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Priorité</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<a class=" js-modal-choice icon-3x color-primary" data-dismiss="modal" data-value="1" data-color="color-primary">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class="js-modal-choice icon-3x color-warning" data-dismiss="modal" data-value="2" data-color="color-warning">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class=" js-modal-choice icon-3x color-danger" data-dismiss="modal" data-value="3" data-color="color-danger">
<i class="icon-warning-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<h4 class="modal-title">Choisissez ...</h4>
</div>
</div>
</div>
</div>
<script>
jQuery('.js-modal-choice').on('click',function(e){
e.preventDefault();
rate_id = jQuery(e.currentTarget).attr('data-value');
tache_id = myGlobalVar.attr('data-tache');
color = jQuery(e.currentTarget).attr('data-color');
console.log(rate_id);
path = Routing.generate('tcs_todo_ajax_edit_importance');
jQuery.ajax({
type: "POST",
url: path,
data: "tache_id="+tache_id+"&importance_id="+rate_id,
cache: false,
success: function(msg) {
myGlobalVar.attr('class','js-modal '+color);
},
error: function(msg) {
console.log( 'r&té');
}
});
});
</script><script>
jQuery(document).ready(function() {
$('#dataTable').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"oLanguage": { "sSearch": "" ,
"oPaginate": {
"sFirst": "<i class='icon-fast-backward visible-xs' title='Début'></i><div class='hidden-xs'> Début</div>",
"sLast": "<i class='icon-fast-forward visible-xs' title='Fin'></i><div class='hidden-xs'> Fin</div>",
"sNext": "<i class='icon-forward visible-xs' title='Suivant'></i><div class='hidden-xs'> Suiv.</div>",
"sPrevious": "<i class='icon-backward visible-xs' title='Précedent'></i><div class='hidden-xs'> Préc.</div>",
}
},
"sPaginationType": "full_numbers",
"fnDrawCallback": function( oSettings ) {
//jQuery('tr').removeClass('odd');
//jQuery('tr').removeClass('even');
jQuery('#dataTable_filter').find('input').addClass('form-control input-sm');
jQuery('#dataTable_filter').find('input').attr('placeholder','Recherche');
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//dont apply odd even class, when warning class is present
if (jQuery(nRow).hasClass('alert-warning')){
jQuery(nRow).removeClass('odd');
jQuery(nRow).removeClass('even');
}
}
});
});
/********************************
* FONCTION DE RATING
*******************************/
jQuery('a.js-modal').on('click',function(e){
e.preventDefault();
myGlobalVar = jQuery(e.currentTarget);
//console.log(jQuery(e.currentTarget));
});
/********************************
* PROGRESSION
*******************************/
$(".dial").knob({
'height':48,
'width': 48,
'inline':false,
'inputColor' :'#5cb85c',
'fgColor':'#5cb85c',
'bgColor':'#dff0d8',
'thickness': '.1',
'draw': function(){
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
$(this.i).val(this.cv + '%');
if(this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
},
'change' : function (v) {
/****************************************************************
* ICI J UTILISE UN TIMEOUT POUR DECLENCHER LA MAJ
* LORSQU ON CHANGE LE NIVEAU AVEC LA SOURIS ON A PAS ENVIE
* D AVOIR 5 APPELS AJAX POUR PASSER DE 30 A 35%
* J ATTEND DONC QUE RIEN NE SE PASSE PENDANT 0.3 SEC
****************************************************************/
if(typeof myTimeout != "undefined"){
clearTimeout(myTimeout);
}
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
tache_id = this.$.attr('data-id');
myTimeout= setTimeout(function() {
path = Routing.generate('tcs_todo_add_ajax_progression_tache');
jQuery.ajax({
type: "POST",
url: path,
data: "value="+v+"&tache_id="+tache_id,
cache: false,
success: function(msg) {
},
error: function(msg) {
console.log( 'r&té');
}
});
}, 400 );
},
});
</script> </div>
<div class="wrap col-sm-2 col-md-2 col-lg-2">
<div class="sidebar bg-lighter">
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',16,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/agra" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">agra</span>
<span class="visible-lg">agra</span>
<span class="visible-md">agra</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',1,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/blebris" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">blebris</span>
<span class="visible-lg">blebris</span>
<span class="visible-md">blebris</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',44,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/chapou" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">chapou</span>
<span class="visible-lg">chapou</span>
<span class="visible-md">chapou</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',15,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/clement" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">clement</span>
<span class="visible-lg">clement</span>
<span class="visible-md">clement</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',46,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/userless.jpg" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">le_nom_le_plus_long_du_monde_...</span>
<span class="visible-lg">le_nom_le_plus...</span>
<span class="visible-md">le_nom_le_...</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a href="#" onclick="loadAjaxTaches('getPublicActiveTaches',17,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/redero" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">redero</span>
<span class="visible-lg">redero</span>
<span class="visible-md">redero</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section_admin">
<div class="slide active" data-anchor="slide1">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les groupes</li>
<li></i> Ajouter un groupe</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Voir les utilisateurs</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li></i> Donner des droits</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
console.log('toto');
$.fn.fullpage({
verticalCentered: false,
resize : true,
slidesColor : ['transparent', 'transparent','transparent'],
anchors:['projet','tache','admin'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: false,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
</script>
<div id="sfwdt4d109a" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/ Sfjs = (function() { "use strict"; var noop = function() {}, profilerStorageKey = 'sf2/profiler/', request = function(url, onSuccess, onError, payload, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); options = options || {}; xhr.open(options.method || 'GET', url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.onreadystatechange = function(state) { if (4 === xhr.readyState && 200 === xhr.status) { (onSuccess || noop)(xhr); } else if (4 === xhr.readyState && xhr.status != 200) { (onError || noop)(xhr); } }; xhr.send(payload || ''); }, hasClass = function(el, klass) { return el.className.match(new RegExp('\\b' + klass + '\\b')); }, removeClass = function(el, klass) { el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' '); }, addClass = function(el, klass) { if (!hasClass(el, klass)) { el.className += " " + klass; } }, getPreference = function(name) { if (!window.localStorage) { return null; } return localStorage.getItem(profilerStorageKey + name); }, setPreference = function(name, value) { if (!window.localStorage) { return null; } localStorage.setItem(profilerStorageKey + name, value); }; return { hasClass: hasClass, removeClass: removeClass, addClass: addClass, getPreference: getPreference, setPreference: setPreference, request: request, load: function(selector, url, onSuccess, onError, options) { var el = document.getElementById(selector); if (el && el.getAttribute('data-sfurl') !== url) { request( url, function(xhr) { el.innerHTML = xhr.responseText; el.setAttribute('data-sfurl', url); removeClass(el, 'loading'); (onSuccess || noop)(xhr, el); }, function(xhr) { (onError || noop)(xhr, el); }, options ); } return this; }, toggle: function(selector, elOn, elOff) { var i, style, tmp = elOn.style.display, el = document.getElementById(selector); elOn.style.display = elOff.style.display; elOff.style.display = tmp; if (el) { el.style.display = 'none' === tmp ? 'none' : 'block'; } return this; } } })();/*]]>*/</script><script>/*<![CDATA[*/ (function () { Sfjs.load( 'sfwdt4d109a', '/app_dev.php/_wdt/4d109a', function(xhr, el) { el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none'; if (el.style.display == 'none') { return; } if (Sfjs.getPreference('toolbar/displayState') == 'none') { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'none'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'none'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'block'; } else { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'block'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'block'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'none'; } }, function(xhr) { if (xhr.status !== 0) { confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/app_dev.php/_profiler/4d109a'); } } ); })();/*]]>*/</script>
</body>

I would try it by adding the scrips as well as the scrips initializations at the header, where it is suppose to be. Right now fullpage initialization is at the bottom.
That would be the proper semantic way to do it, but nowadays the recommendation is to do it like you were doing it,at the bottom of the site, just before </body>. The problem is that right now the plugin operates over the body of the site instead over a wrapper and that's the why. I will try to fix it in future versions

Resources