I am trying to change the background color of a panel using javascript to emulate "selected" functionality.
So, on click I get hold of the div by ID and change its background color.
It works fine but only momentarily and again resets the background color, and I have no idea why?
DJANGO HTML Template
<div class="panel-group">
{% if articles %}
{% for article in articles %}
<div class="panel panel-success" id="aid_{{ article.articleId }}">
<div class="panel-body">
<b>{{ article.title }}</b><br/>
<span style="color:darkgrey; font-size:.9em; font-family:sans-serif; font-style:italic">{{ article.source }} - {{ article.date }}</span><br/>
{{ article.sentences }}
</div>
</div>
{% endfor %}
{% else %}
NO ARTICLES PRESENT
{% endif %}
</div>
Javascript
function populateArticle(aid) {
document.getElementById('aid_'+aid).style.backgroundColor="#DEF1DE";
}
Also here is a link to a gif I recorded that shows the behavior: http://g.recordit.co/fSoTieo5Qn.gif (copy-paste the link in a new tab in case if it gives error).
Any ideas why this is happening?
You are not preventing default <a> tag behavior, so Your page refreshes.
onclick="populateArticle({{ article.articleId }});return false;"
Should fix it.
No idea why that may be happening, I personally would try this:
<script>
$(document).ready(function () {
$(".panel-body a").on("click", function (e) {
e.preventDefault();
var id = "#aid_" + $(this).attr("data-articleID");
$(id).css("background-color", "#DEF1DE");
});
});
</script>
After your jQuery script and lose the onClick in your HTML (Bad practice) instead pass the id reference by adding a data-articleID attribute. Like this:
<b>article title</b>
If your issue still persists you'd have to check for any other JavaScript changing the background back to original colors.
Related
A common function in infinite list is that, the item will be grayed after when we clicked on him. Can we get this effect with only HTML, CSS, JS, jQuery(on the user's side)?
How it works?
1.) the user clicks on the card element
2.) When pressed, class text-muted is added to the card element, causing it to be grayed out as below
The simplest example of code in bootarap looks like this:
{% for obj in objects %}
<a href="/detail/id/" target="_blank">
<div class="card" id="card{{ obj.id }}">
<!--..content card..-->
</div>
</a>
{% endfor %}
You just can add CSS pseudo-class to visited links a:visited { color: grey; }. Without custom class and javascript logic.
See doc
I need to alter the colour of an HTML element based on the text content of another element. However, the content is being generated with a Python for loop using a Jinja shortcut.
For example:
{% for article in articles %}
<div class="row article">
<div class="col s6">
<strong>{{ article.title }}</strong>
<p>Page count: {{ article.page_count }}</p>
<p>Layout code: <span id="layout">{{ article.layout }}</span></p>
</div>
<div id="show_layout" class="col s1 layout"></div>
</div>
{% endfor %}
I'm trying to use Javascript or jQuery to make the #show_layout element red if a layout code is present (ie. there is some text content in that span). The trouble is that I'm only able to make all or none show up red as the JS function runs once and affects every iteration of the for loop. For example, if 3 article listings are generated by the for loop (pulled from MongoDB) then each of the #show_layout elements turn red, if just one has any layout code content. I've tried experimenting with using the 'this' keyword, but I'm not getting anywhere.
Currently this is the basic function I'm altering, though there have been many different versions! I'm calling this on page load; calling it from the element itself doesn't seem to do anything!
function showLayout() {
let code = document.getElementById("layout").textContent;
let toChange = document.getElementById("show_layout");
if (code !== "") {
toChange.classList.add("layout-red");
console.log(code)
}
else {
console.log("arghghg")
}
}
I'm very new to Python and Jinja, so perhaps my approach is entirely wrong. Can anyone suggest a better way of doing this, or am I missing something obvious?
CBroe pointed me in the right direction here, by suggesting that I do this via Jinja, which had not occurred to me (I'm very, very new to Jinja!).
adding:
{% if article.layout != "" %}
<div id="show_layout" class="col s1 layout-red show_layout"></div>
{% endif %}
did the trick!
Thank you CBroe!
I have a django project which I implemented a jquery function to toggle a link but it is not working. the link does not display the hidden contect i want it to display on toggle. my code is written below.
REP
<div class="comment-reply" style="display: None;">
{% for child_comment in comment.children%}
{{ child_comment.timestamp|timesince }
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".comment-reply-btn").click(function(event){
event.preventDefault();
$(this).parent().next("comment-reply").fadeToggle();
})
})
</script>
You're navigating to the wrong DOM element. next() finds the next matching sibling, but you've put parent() first - so you are looking for the next sibling of that parent. Drop that parent call.
$(this).next("comment-reply").fadeToggle();
I want to pass a caption text for an image from a django template to javascript.
This is the relevant part of the html code:
<ul id="portfolio">
{% for picture in gallery_selected.photo_set.all %}
<li><img src={{ picture.path }} alt={{ picture.caption }}></li>
{% endfor %}
</ul>
Now I want to read the 'alt' tag from the images in javascript in order to create a fancy caption:
$("#portfolio img").click(function() {
var src = $(this).attr("src");
window.alt = $(this).attr("alt");
alert(window.alt);
});
I did not create the caption yet, I just wanted to test if the caption text is passed on (using the alert function).
However the alert only displays the first word of my caption text. As soon as a space occurs in the string, everything else is ignored.
Does anybody know how I can fix this issue?
You just need to wrap it in quotes. You should do that anyway with HTML attributes, for safety.
<img src="{{ picture.path }}" alt="{{ picture.caption }}">
I am trying to hide/show a div that is within a for loop using jquery's toggle. When I click the button to toggle, the div slides out for a quick moment, but then hides again. When this happens, the toggle button almost seems disabled for the next click...then works again with the same problematic div display. I used the {{email.sender}} template value because when I clicked on the toggle button, all the items in the list would be activated instead of just that one. The below code is inserted into a tab with Jquery (this part is working). Thanks for any advice you can give on this-
<div id="email_received_list">
{% for email in email_received_list %}
<p>
<input type="button" id="{{email.sender}}" value="Show Message"> {{email.sender}}: {{ email.subject }}
</p>
<script>
$(document).ready(function(){
$('#{{email.sender}}').click(function() {
$('.{{email.sender}}').slideToggle('fast');
return false;
});
});
</script>
<div class="{{email.sender}}" style="display:none; background-color:#4CF;width:100%;height:100%;"></div>
{% else %}
(You have not received any messages yet.)
{% endfor %}
Ok, I feel stupid on this one - but once I added some actual content to the div (not just trying to color a square) it worked fine. I guess since it was in a loop, it was trying to size the div match the content. When there was no content, the div just hid itself again. If you know something different on this, please let me know -thanks.