I'm trying to define the width of my outer span (.bar-1) element by using the value of my inner span element.
<span class="bar bar-1">
<span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabindex="-1" sectionid="MODE_TOOL">
<span class="Text">66</span>
</span>
I have no possibility of changing the content, I'm just trying to figure out a way how I can make my outer span width = 66%.
I believe you would need Javascript for something like that.
Using jQuery:
var tmp = $(".Text").text();
And than use that value to set a style on .bar1 like:
$(".bar1").width(tmp);
If I understand your question, you can do that in JavaScript. Spans don't have width though, unless you use display: inline-block;.
With basic JavaScript:
<script>
var elem = document.getElementsByClassName('bar-1');
for(i = 0; i <elem.length; i++) {
elem[i].style.width = document.getElementById('PERCENTAGE').innerText + "%";
elem[i].style.display = "inline-block";
}
</script>
Thank you both. Unfortunately the admins didn't allow me of adding JavaScript code.
In the end, I used the following css solution:
span[value="66"] {width:66%};
Obviously, I needed to add this for each number between 0 and 100.
Related
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I have the following code:
<div class="photos-wrapper" id="detailPhoto">
<div class="pseudo">
fixedTEXT
</div>
<div class="image-wrapper">
</div>
<div class="activites">
</div>
<div class="commentaire">
</div>
</div>
I want to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code.
Maybe it will be a bit more clear when I show what I tried:
a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
display: none !important;
}
div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
display: none !important;
}
That's the way I tried to do so but it obviously is not working.
The thing I am probably trying to do here is called a parent selector but I'm not quite sure.
#edit
Let's take a look on this code, it's actually more detailed:
http://jsfiddle.net/60ezqtL7/
The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. PHOTO 1
There's no need to use jQuery in this case (or many other cases).
detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.
$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead
Use Google to host jquery for you.
Demo : I've used the class selector in the demo as id should be unique.
addClass Demo
UPDATE
Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.
/*Loop through each link in div with cass psudo
in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
var $this = $(this);
var href = $this.attr("href");
//if the href has been enountered before, hide the .photos-wrapper ancestor
if(found[href]){
$this.closest(".photos-wrapper").hide();
/*Other options:
Use Css direct
$this.closest(".photos-wrapper").css("display", "none");
Assign a duplicate class, then style that class ass appropriate
$this.closest(".photos-wrapper").addClass("duplicate");
*/
}else{
//otherwise add it to the array of what has been found
found[href] = true;
}
});
Demo
If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();
Update 2
To hide all containers with replicated href use:
//Loop through each a tag
$(".photos-wrapper .pseudo a").each(function () {
var $this = $(this);
//Get the href
var href = $this.attr("href");
//Check if more than one exists
if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
//Hide all .photo-wrapper containers that have the replicated href
$('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
}
});
Another Demo
I still suggest removing duplicates server-side if at all possible.
On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.
At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).
<script>
$(function() {
$('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>
To search parents, you'd use this.
<script>
$(function() {
$('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>
To use this you will also need the JQuery library added to the head of your document.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?
I want to hide a div after a button is clicked which should be a pretty simple thing to do but I'm getting an error. I have the following code:
<div id="clearSale" onclick=playSound("sounds/Register.mp3") class="botonCLS">
<button id="clearSaleBtn" type="button" style="position:relative; z-index:0; width: 90px; height: 32px; left: -6px; top: 0px;">Clear Sales</button>
<div id="check" style="display: none">
<button id="confirm" style="margin-left: 5px">Send confirmation</button>
</div>
So What I want to do is replace the first one with the second one when the button is clicked..So typically enough, I added this line in a function in my JS which is called when I receive a push notification (which works):
document.getElementByID("clearSaleBtn").style.display = "";
But I am getting an error that the object does not support the method getelementbyid. I'm guessing that this might have something to do with the fact that the div is a class? Is there any way around this? Or is there a way to maybe change the text in the clear Sale button to send confirmation or something like that
The Id section of the method name is camel cased.
document.getElementById("clearSaleBtn").style.display = "none";
instead of
document.getElementByID("clearSaleBtn").style.display = "none";
Also set the style to display:none;
the function name should be document.getElementById
First of all, javascript is case sensitive, so the function name is getElementById
document.getElementById("clearSaleBtn").style.display = "none";
Secondly, use "none"as the new value, to hide the div.
document.getElementById("clearSaleBtn").style.display = "";
You use getElementByID instead of getElementById
You can use this to change to button's text:
document.getElementById("clearSaleBtn").value="Send confirmation";
If you use it directly as the onclick action of your first button, you can shorten it to:
this.value="Send confirmation";
Change the function name to document.getElementById
I use Twitter Bootstrap's input-prepend class with <textarea>. When I set <textarea>'s number of rows = 1, all looks fine. But when I set it to any bigger value, element becomes larger than input-prepend span.
This is the demonstration: http://jsfiddle.net/2smRF/
How to set the span's height to <textarea>'s height? Can it be achieved using only CSS or I need to use JavaScript?
I don't think this would be easily achieved only with CSS, so I threw together a script for you. Please note that it will not work if the user resizes the textarea.
var onRes = function(){
$('.input-prepend').each(function(){
var $textarea = $(this).find('textarea');
var $span = $(this).find('span.add-on:eq(0)');
console.log($span);
$span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
});
};
$(window).resize(onRes);
onRes();
JSFIDDLE