I have 4 elements "Block" "button1" "button2" and "label".
I want the block to have the buttons inside it by CSS. this can be done by HTML like this :
<b class = "block">
<g class="Label"> </g>
<a class="button1"> </a>
<a class="button2"> </a>
</b>
but it'll take so much space if done 50 times in one page.
and I want a way to change button1,2 'href' with as less a possible lines of code.
CSS is meant to modify the appearance of a page, and not to be used for adding content - although pseudo-elements like :before and :after are commonly used for decorative purposes (e.g. adding arrows, or for layout hacks)
Have you considered using a JS-based method? You can loop through all the .block elements and then insert the label and buttons in each of them.
An example of a JS-based method would be: (assuming that you're using jQuery)
$(document).ready(function() {
$(".block").each(function() {
// Create elements to append
var apnd = '<element></element>';
// Append the created elements
$(apnd).appendTo($(this));
});
});
The only way I can think to achieve this would be use a parameterised jQuery function that adds or modifies the "href" value of each button of a given CSS class (with minor variations of the assigned href based on a given parameter - if that suits).
Sorry, to directly address the question, I agree with the other posters in that this can't be achieved using CSS alone.
Related
I'm reading some code and there is a piece of html that reads:
<div id="uniqueId1234" data-target=".uniqueId1234">
...
</div>
and then earlier on in the same html file there is a span element that seems to use this div as a class:
<span class="uniqueId1234">
...
</span>
Can someone explain how this works? I thought that a class was something created in a css file. Sorry if this is a dumb question.
This is likely part of some piece of Javascript code or a library that listens for some type of change or event on your element with the data-target attribute.
When this event is triggered, it can then use the value of that attribute as a selector for performing some other logic as seen in this basic jQuery-based example below:
// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
// Find the appropriate target (i.e. ".uniqueId1234")
var target = $(this).data('target');
// Then use it as a selector for some type of operation
$(target).toggle();
});
Classes are very common within CSS to style multiple elements, but they can also commonly be used as a mechanism in Javascript as well, which is likely the case in your scenario here.
What does it mean to set data-target attribute of a div to the id of that div?
Nothing standard. data-* attributes are designed to hold custom data for custom code (typically client side JS) to process.
I thought that a class was something created in a css file.
Classes are an HTML feature used to put elements into arbitrary groups. They are commonly used when writing CSS, but also client side JS and other code.
Essentially I'm trying to create a mini-clone of JSFiddle.
That is, I want to allow my users to type some HTML and CSS and see the rendered result in another area of the screen. I'm also looking to use AngularJS.
Does anyone have any advice or experience on how to go about this?
I'm not sure how much Javascript you know/want to use, but you could create 3 frames, for the HTML, CSS and output. In the HTML and CSS frames, put an input text area. Then on the "run" button click, change the inner HTML of the output to the content of the html (within HTML tags) and the css (within Style tags).
(I drafted this before you made the Angular edit, but you can use jQuery with Angular.)
You can do this within a single page, if you're somewhat careful:
You can have only one body tag on a page. So any body styles should apply to the container only, not to the document body. The code below handles this by changing a body tag style to a .body class style, which applies to a div within the container with class body.
Any other styles should also apply to the container's children only. The code below handles this by first appending the "style sheet" textarea to the container, then iterating through the style rules and prepending the container's ID to each selector. (The original rules are deleted and the new rules are inserted.)
The code below works in IE9+ and modern browsers. Working Fiddle.
<div>
<textarea placeholder="Enter HTML here"></textarea>
<textarea placeholder="Enter CSS here"> </textarea>
</div>
<div id="Render"></div>
$('div').first()
.keyup(function() {
$('#Render').html(
'<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
'<div class="body">'+$('div:first textarea:first').val()+'</div>'
);
var ss= document.styleSheets[document.styleSheets.length-1],
rules= ss.cssRules;
for(var i = 0 ; i < rules.length ; i++) {
var rule= '#Render '+rules[i].selectorText
.replace('body','.body')
.split(',').join(', #Render')+
'{'+rules[i].cssText.split('{')[1];
ss.deleteRule(i);
ss.insertRule(rule, i);
}
})
.keyup();
You could create a temporary file with the CSS and HTML provided and then use a Frame to view that file in another section of the page
I am looking for a css selector that would select the following element based on supplying the class atrribute and some_text
<a class="some_class">some_text</a>
I've tried a few things, but can't get the elemented selected. Please help.
.some_class{
/* apply your styles here */
}
The above will take care of class attribute.
But, it isn't possible to select elements based on their inner text.
No. As mentioned by the other answers, you can't restrict based on the content of a tag without using Javascript.
You can utilise other attributes though:
<a class="some_class" data-text="some_text">Some content</a>
using
.some_class[data-text=some_text] {}
or
<input class="some_class" type="text" name="myname" />
using
.some_class[name=myname] {}
This required selector is not available in case of CSS. So you need to specify a new class or need to take halp of jQuery or javascript.
Using CSS
a.class-name {
/* Your css */
}
Using jQuery
if(jQuery('a.class-name').text() == 'some_text'){
jQuery('a.class-name').css({
/*Your css*/
});
}
This would be best! Till CSS provides that privilege :)
I have the following HTML:
<ul class='dropSelect'>
<li data-value="one">
<span>Menu1</span>
</li>
<li data-value="two">
<span>Menu2</span>
</li>
<li data-value="three">
<span>Menu3</span>
</li>
</ul>
My question is: is it better practice to place the data-value attribute on the span next to the actual menu item text or is it just as good to place on the parent li element as I have done? This attribute will receive data from a web service and I'm using some js to grab the value of this attribute and placing it inside of another element on the page.
SOF warned me upon posting this question that it might be too subjective ... and it might be ... but my concern is to understand what, if any, impact my placement of this attribute may have on UI engineering, javascript DOM manipulation, accessibility, etc.
Broadly speaking, I suggest storing data on the element that most closely maps to the data's 'parent' or 'owner'. It's all about what conveys the most meaning.
For example, if you are representing a list of 'people' in your html thus
<ul>
<li class="person">Tim Bresnan</li>
<li class="person">Joe Root</li>
</ul>
and you wish to associate a date of birth without displaying it, put it on the li items as they represent the person.
$('.person').data('dob');
If however your html representation of a person is more complex, say
<ul>
<li class="person">
<div class="name">Tim Bresnan</div>
<div class="dob">28th Feb 1985</div>
</li>
<li class="person">
<div class="name">Joe Root</div>
<div class="dob">30th Dec 1990</div>
</li>
</ul>
you might wish to include the ISO8601 datetime representation as data on the dob class elements.
$('.person .dob').data('dob');
Although html5 data attributes are subjective, and can be used anytime/anywhere, I'm assuming you are looking these elements up by them in your situation. In your situation I'd put them in the same place you did for a couple of reasons.
This is the top level (child), so it's very easy to grab them all by the data attribute.
$('li[data-value]')
At some point you might have much more inside each <li>, right now it might only be the <span> but by having the list-item hold the data-value you can easily get other DOM elements inside of it. If you had it inside of the span you'd have to go UP a level to the list-item, then .find() whatever element you want.
If your span held data-value:
$('[data-value="whatever"]').closest('li').find('.someOtherThing');
Instead now you don't have to do that pointless look-up for the parent <li>!
$('[data-value="whatever"]').find('.someOtherThing');
I would say to put the data-values in the span within the listing. I think it's best to put the data-attribute closest to the string it has an effect on, in this case the span.
On another note, this piece of jQuery works fine:
$(document).ready( function() {
$("li").click(function(){
var txt = $(this).text();
$("#mydiv").text(txt);
});
});
With this, I've tested in jsFiddle (http://jsfiddle.net/YqePE/) that clicking on a li, can return it's text value, and so it would also return any data-attribute you have in that li.
BUT, if by some sort of weird CSS makeup, it can be possible this would generate an unwelcome outcome, where as you think you don't click a certain LI, the browser thinks you do. To prevent this, you would want to make the span holding the data-attribute.
From what it seems like you're trying to do. You could use jQuery's .index(). (Yes, I know it wasn't tagged jQuery)
$('ul.dropSelect > li').each(function(){
var i = $(this).index();
});
It is not necessary to use the data attribute for this information.
Try to use pseudo class selectors of CSS or jQuery to bind the specif item:
CSS:
.dropSelect li:nth-child(1) {
// First <li>
}
Or jQuery:
// Second <li>
$('.dropSelect li').eq(1)
DEMO: http://jsfiddle.net/wYpK6/
<span name="tumme"><img ...
is not valid because "name" is not valid in "span".
But I need to use name="tumme" and I need to be able to use text and img inside the tag.
So what tag can I use together with "name" and on the same time follow w3c?
To answer the question directly, as per the spec the name attribute is allowed on the following HTML elements (very few of these will be useful to you):
BUTTON
TEXTAREA
SELECT
FORM
FRAME
IFRAME
IMG
A
INPUT
OBJECT
MAP
PARAM
META
Is there a reason you must use a "name" attribute rather than a class or an id? Since both class and id are valid for span elements, and since span appears to be the most appropriate element to use,I'd set one of those to "tumme" rather than bending another element into shape.
You could use the <a> tag with no href attribute.
As I said in response to your earlier question — use classes.
Basically, the only valid reason that I can think of where you would want to use the name attribute, is to have DOM access via document.getElementsByName()
or to use it as a FORM OUTPUT.
As a result, what you should be doing is using the HTML5 OUTPUT tag
and add the following in your HEAD tag for legacy browsers:
// Create a fake OUTPUT element, so IE can style it.
<script type="text/javascript> document.createElement("output");</script>
// Implement default style, so that it acts like a SPAN in other browsers:
<style type="text/css"> output { display:inline; border:0; outline:0; margin:0;padding:0; } </style>
http://html5doctor.com/the-output-element/
<output name="tumme"><img src="..." /></output>
If it is only for styling purposes or simple DOM query purposes
then you should use this as proposed earlier:
<span class="tumme"><img src="..." /></span>
or
<span id="tumme"><img src="..." /></span>
name is only valid in the <a> tag IIRC (and form elements as was pointed out by David in the comments) but I'm pretty sure that is not what you're after:
<a name="whatever"></a> would create an "anchor" on a page that could be linked to with Link text.
Why do you need to use the name attribute? Why couldn't you simply use id instead?