Style a Div that uses forloop.counter - javascript

I have a contenteditable div fora text area, and I want to style it
<div id="reply_body{{forloop.counter}}" name="reply_body" contenteditable="true">Begin typing </div>
However, I am using {{forloop.counter}} because I am passing the information in the div to a javascript function. I.e.,
<script type="text/javascript">
function copycontent(x)
{
document.getElementById('replies'+x).value=
document.getElementById('reply_body'+x).innerHTML;
};
</script>
So, my question is, how can I style this contenteditable div if part of the id is {{forloop.counter}}?

Use a class to style it:
<div id="..." class="reply">
CSS:
.reply {
/* Your styles here */
}
ID's (denoted by # in CSS) have to be unique to an element, classes (denoted by . in CSS) can be used with multiple elements.

Related

css selector select only the first child text and not the div

I want to use css selector to select only the text (which is in my example "1.42") from this div<div class="one"> for scraping purpose:
<div class="one">
1.42
<div class="nested">..</div>
</div>
I tried this but return the whole <div class="one"> (and I want only the text):
div.one:first-child
and this also:
div.one:first-child:not(.nested)
They all return the text plus the content inside div.nested
EDIT:
I want to use the selector to scrape the specific text using Beautifulsoup
soup.select_one('div.one:first-child:not(.nested)')
You cannot css-select something that isn't inside of a html tag with or without a css class. In your case you should wrap your 1.42 text in a html tag, like a <p>.
That is also best practice, never to print text directly within a div, without a semantic text tag like a p.
Once you have your <p class="...">Text here</p> you can select div:first-child or simply select the p or p.theclassname. Another method is div:nth-child(1).

get a href attribute and set this attribute to other div

I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.
You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});
(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ
First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.

Update an HTML tag innerHTML without line break

I want to add a variable from javascript to HTML page. After the script is executed, it adds a new line (before the second sentence). What I want to do is to update the HTML inside the <div> tag only and continue the line without any break.
<html>
<body>
<p> Some text here <div id="my-id">my text</div>. Other text here.</p>
<script>
document.getElementById("my-id").innerHTML = "Add my text here";
</script>
</body>
</html>
A <div> is a block-level element by default.
You can override this with CSS, but you're better off using a <span> instead, which is not a block-level element by default.
<span id='my-id'></span>
If you absolutely must use a div, you can use inline style:
<div style='display:inline' id='my-id'></div>
Or you can define it in a stylesheet:
div#my-id { display:inline; }

Add class to element when textarea focused

I'm trying to add a class to my p element when the textarea is active
This is what I've got so far with no luck.
<textarea class="text"></textarea>
<p class="someClass">
<span class="span">
TEXT
</span>
</p>
jQuery
$('textarea').focus(
$(".someClass").addClass("focused");
});
The final result I'm trying to accomplish is when the textarea is focused
<textarea class="text"></textarea>
<p class="someClass focused">
<span class="span">
TEXT
</span>
</p>
Can this be done by grabbing the set class "someClass"?
You are actually doing it wrong. You should do this way by sending an anonymous function:
$('textarea').focus(function () {
$(".someClass").addClass("focused");
});
You have missed that. I would say a better way, if the .someClass is next to the element in question, you can use CSS's sibling selector +, without using JavaScript:
textarea:focus + p {
background: #99f;
}
<textarea></textarea>
<p>Click on TextArea</p>
You should to supply an anonymous function to the focus event handler. Try this:
$('textarea').focus(function() {
$(".someClass").addClass("focused");
});
Also note that you can do this in CSS alone without the need for any JS code. Using the CSS method has the added benefit of the styles being automatically removed when the textarea loses focus.
textarea:focus + p {
/* styles in here which matched the .focused class */
}
Working example

how to do css changes only to links that are in side specific div without defining classes to a elements

i want to add some css changes only to the a(link) elements, that are placed inside divs whose class names are defined as "x". (not to all links in the page)
is there any proper way to do that other than defining classes to each and every "a" elements.
<body>
<div class="x"> <a>Home</a></div> <!--to these-->
<div class="x"> <a>contact</a></div><!--to these-->
<div class="x"> <a>about</a></div><!--to these-->
<a>hello</a><!--but not this-->
</body>
if what i'm asking is not clear
consider: i want to change the decoration of a that is placed in side a div,and i can do it like this
.x.m{text-decoration:none;}
<div class="x"><a class="m"></a></div>
but i want to know if there are any other methods to do the same without defining a class to element "a".
you can do this like
.x a {text-decoration:none;}
here is the example js fiddle

Categories