Mixing
Interacting with text in Django for loop
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am working on a Django project where I want to output a text file and apply certain operations like highlighting to the text. My idea was to implement it in such a way that each word can be clicked, for a popup window (or tooltip window) to appear, displaying all the options.
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I tried using the tippjs tooltip library (https://atomiks.github.io/tippyjs/), but clicking the highlight button doesn't do anything. If i don't put the javascript part in the loop, nothing happens at all. The code with the javascript part not in the loop would look something like this:
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I am new to django and even newer to javascript, so I'm not sure if this is even the right way to go about this.
Can somebody point me in the right direction here?
javascript django tippyjs
asked Jan 3 at 7:28
imcimc
1911214
add a comment |
I am working on a Django project where I want to output a text file and apply certain operations like highlighting to the text. My idea was to implement it in such a way that each word can be clicked, for a popup window (or tooltip window) to appear, displaying all the options.
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I tried using the tippjs tooltip library (https://atomiks.github.io/tippyjs/), but clicking the highlight button doesn't do anything. If i don't put the javascript part in the loop, nothing happens at all. The code with the javascript part not in the loop would look something like this:
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I am new to django and even newer to javascript, so I'm not sure if this is even the right way to go about this.
Can somebody point me in the right direction here?
javascript django tippyjs
asked Jan 3 at 7:28
imcimc
1911214
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00
add a comment |
I am working on a Django project where I want to output a text file and apply certain operations like highlighting to the text. My idea was to implement it in such a way that each word can be clicked, for a popup window (or tooltip window) to appear, displaying all the options.
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I tried using the tippjs tooltip library (https://atomiks.github.io/tippyjs/), but clicking the highlight button doesn't do anything. If i don't put the javascript part in the loop, nothing happens at all. The code with the javascript part not in the loop would look something like this:
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I am new to django and even newer to javascript, so I'm not sure if this is even the right way to go about this.
Can somebody point me in the right direction here?
javascript django tippyjs
asked Jan 3 at 7:28
imcimc
1911214
I am working on a Django project where I want to output a text file and apply certain operations like highlighting to the text. My idea was to implement it in such a way that each word can be clicked, for a popup window (or tooltip window) to appear, displaying all the options.
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I tried using the tippjs tooltip library (https://atomiks.github.io/tippyjs/), but clicking the highlight button doesn't do anything. If i don't put the javascript part in the loop, nothing happens at all. The code with the javascript part not in the loop would look something like this:
<script>
tippy('.token', {
content: document.getElementById("{{ Token.unique_id }}"),
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
allowHTML: true,
hideOnClick: true,
trigger: "click"
})
function changeColor() {
var token = document.getElementById("token");
token.style.color="blue;";
}
</script>
{% for Line in File.body %}
<div>
{% for Token in Line %}
{% if not Token.content == None %}
<span class="inline token" id="token">
<strong style="color: {{ Token.highlight }};">
{{ Token.content }}
</strong>
</span>
<div id="{{ Token.unique_id }}">
POPUP </br>
<button onclick="changeColor()">Highlight</button>
</div>
{% endif %}
{% if Token.endline %}
</br>
{% endif %}
{% endfor %}
</div>
{% endfor %}
I am new to django and even newer to javascript, so I'm not sure if this is even the right way to go about this.
Can somebody point me in the right direction here?
javascript django tippyjs
javascript django tippyjs
asked Jan 3 at 7:28
imcimc
1911214
asked Jan 3 at 7:28
imcimc
1911214
edited Jan 3 at 9:23
imc
asked Jan 3 at 7:28
imcimc
1911214
asked Jan 3 at 7:28
imcimc
1911214
asked Jan 3 at 7:28
imcimc
1911214
1911214
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00
add a comment |
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018045%2finteracting-with-text-in-django-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018045%2finteracting-with-text-in-django-for-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you show code, when you try without put js in part in the loop?
– Vladimir Goncharuk
Jan 3 at 9:00