My DOM currently looks like this:
<body>
<h1> </h1>
<button> </button>
<p> </p>
Upon click of the button, I want to add another p in between button and the initial p. I have tried prepending to the initial p, but it's not looking like what I want it to. I have also tried appending to button, but it's adopting the style of button, which I also don't want.
Ideally, I would like to retain the styling of the initial p, but add another individual block of p right before the initial one. How can I achieve this, preferably with append/prepend?
If you are using JQuery there is a method for that, it´s called before.
http://api.jquery.com/before/, will work fine in combination with the :first-child selector.
var count=0;
$('button').on('click', function () {
count++;
$("#paragraphs p:first-child").before($('<p>New Paragraph #' + count + '</p>'));
});
Working Example
This is a very rough draft of what you may want to try doing. Instead of attacking the issue from the paragraph attack it from the button if the DOM state is going to stay the same.
The code should look something like this
function addParagraph(sender) {
$(sender).after( "<p>Test</p>" );
}
And you can you the onclick event of the button like this (This can be changed to anything else you might want to use)
<button onclick="addPara(this)">Add Paragraph</button>
Now because your structure is always
<h1></h1>
<button></button>
<p></p>
It will always push the new element right after the button and always before the next element in the structure. The alternative is to do what Gus has done and create a DIV container and keep pushing new elements into the first place in the DIV.
Related
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
Please help, this is really making me go crazy.
I am somewhat new to Javascript, and am trying to work with the Dojox.mobile framework...
Basically, what I want to do is have a button, that goes to a <div> which is located before the current one when clicked. This needs to be a normal html <button> or <div>, and can't be a ul, li, heading or similiar, since it is located in the middle of the view, not on the top or any sort of border (the exact location is given in the style tag)..
I tried implementing the dojo.back framework, but I can't seem to get it right with what should load or what should go where.
I tried implementing it with the OnClick property (which is how I implement all other buttons that go forward), but it causes total overlapping between all the divs.
I tried implementing it with the moveTo property, but I think that's only available to ul and li elements, not normal buttons or list elements (and if they are available to normal divs, I have no idea how to implement them).
And I have honestly no idea what else I can do, please help!
For dojox.mobile.View, there's a function called performTransition which can switch from one view to another. Here's a quick example of something you might could use:
HTML:
<div id="first_view" data-dojo-type="dojox.mobile.View">
<p>First view you see</p>
...
</div>
<div id="second_view" data-dojo-type="dojox.mobile.View">
<p>Second view</p>
<button data-dojo-type="dojox.mobile.Button"
data-dojo-props='onClick:function(e){goBackToFirstView();}'>
Back
</button>
</div>
JavaScript:
function goBackToFirstView () {
// load the view that should be visible
var secondView = dijit.registry.byId("second_view");
// transition slides back one
secondView.performTransition("first_view", -1, "slide");
}
Is there any alternative to <div>? My website is losing "accessibility" because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?
This is what my HTML looks like:
<div style="height:70px; overflow:hidden" id="divMsg">
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>
You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.
If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn't look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don't have to do additional keyboard input handing like you do with a DIV.
Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type - eg.
Complete Transaction
Just give it a tabindex attribute.
If you are specifically looking for accessibility, try out the new HTML 5 tags like <article>. So for example a textreader knows what to read, and your page is much better structured.
Check out this site.
To answer your exact question, it depends why you are using the div; I'm guessing for layout. The tab ordering is dependent upon more than tabindex, as defaults and overflow affects positioning and focus.
To be more specific, you won't use a div to latch onto for tabindex. Rely upon JavaScript and a unique ID; <div class="content" id="page1">
This will also provide you an anchor so you could use http://index.html#divMsg to link focus to the exact place in your HTML document. Note you have only one div ID and reuse the same div class twice in your example.
If this is all new to you the article on difference between ID and CLASS may be of interest to you
Links (element a) and form elements (input text and alike, file, radio and checkbox, submit, image and type button, select, textarea, button element, etc) are focusable by default.
Thumb rule: if an element does something, it should be a link or a form element part of a form. (OT: I guess I've a problem with conjugation here but can't find exactly what - english isn't my mothertongue)
Think twice (at least :)) before using the tabindex attribute: it'll work for a while in your project and then you make some modification elsewhere and suddenly all is broken. And it'll break again, again and again.
For testing with Safari, you'll need to modify Preferences: this browser (maybe also Chrome?) only cycle by default through form elements and not links. Users of keyboard cycle through every focusable elements I guess, like in IE and Firefox.
To learn further, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) have Sufficient Techniques (and "Failure(s)" also) about keyboard use.
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).