I am creating controls in a Web Part's overridden CreateChildControls() method.
My code is this (no pun intended):
this.Controls.Add(new LiteralControl("<h2>Duckbilled Platypus Unlimited</h2>"));
this.Controls.Add(new LiteralControl("<h3>Angle of Repose of Bill: "));
boxRequestDate = new TextBox();
this.Controls.Add(boxRequestDate);
this.Controls.Add(new LiteralControl("</h3>"));
this.Controls.Add(new LiteralControl("<h3>Venomosity/Lethality Quotient of Poison Toe: "));
boxPaymentAmount = new TextBox();
this.Controls.Add(boxPaymentAmount);
this.Controls.Add(new LiteralControl("</h3>"));
...and I see this:
What I want to see is the "Venomosity" LiteralControl and TextBox to the right of / horizontally aligned with the first LiteralControl and TextBox (to the right of them, not below them). How can I achieve this?
try something like this:
this.Controls.Add(new LiteralControl("<h2>Duckibilled Platypus Unlimited</h2>"));
this.Controls.Add(new LiteralControl("<h3 style='display: inline-block; width: 400px;'>Angle of Repose of Bill: </h3>"));
boxRequestDate = new TextBox();
this.Controls.Add(boxRequestDate);
this.Controls.Add(new LiteralControl("<br />"));
this.Controls.Add(new LiteralControl("<h3 style='display: inline-block; width: 400px;'>Venomosity/Lethality Quotient of Poison Toe: </h3>"));
boxPaymentAmount = new TextBox();
this.Controls.Add(boxPaymentAmount);
Please note that you cannot have a textbox inside of an h3 tag (via HTML rules). Also, it would be better to use a class inside of CSS instead of inline styles like this, but this way should work for you. It would also be better to handle the "break" with CSS instead of the "", but for a quick fix this will do it.
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;
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 have some nested tables in a containing "column" table. The bottom table just contains a multi-line text area where the user can post comments. When the user saves the page I want to capture each separate line of comment as an element in an unordered list. Here is the HTML:
<td><strong>Key Messages:</strong><asp:Label runat="server" ID="messagesLabel"></asp:Label>
<div id="messagesDiv" runat="server">
<asp:TextBox runat="server" ID="MessagesTextbox" Width="100%" TextMode="MultiLine" Height="100" Columns="10"></asp:TextBox>
<asp:Button runat="server" ID="clearMessages" Text="Clear Messages" OnClick="ClearMessages_Click" />
</div>
</td>
My problem is that when the unordered list is posted back to the page, very long lines stretch the table beyond the desired width. I would like to have longer comments wrap at some point while still remaining just one element in the list -- ie, one bullet. I have tried setting the MaxLength and Columns properties with no luck.
EDIT:
I tried the first suggestion using:
ul
{
width: 50px;
}
li
{
width: 50px;
}
but it had not effect on the layout. The layout did not change for any value of width.
I tried to use the second solution but I don't have the CSS property "word-wrap" available in my editor. I am programming in Visual Web Developer Express 2010 which supports CSS 2.1 so, as far as I understand, I should be able to set this property but I can't. I tried it anyway and it had no effect on the layout.
EDIT:
Here is how I am creating the list:
XmlDocument xdoc2 = new XmlDocument();
xdoc2.Load(messagesFileLocation);
XmlNodeList messagesList = xdoc2.GetElementsByTagName("message");
if (messagesList.Count > 0)
{
string unorderedList = "<ul>";
for (int i = 0; i < messagesList.Count; i++)
{
XmlNode node = messagesList.Item(i);
string message = node.InnerText.ToString();
unorderedList += "<li>" + message.ToString() + "</li>";
}
unorderedList += "</ul>";
messagesDiv.InnerHtml = unorderedList;
}
The user edits are actually saved to an XML file first and then posted back to the page.
Specify the width of the ul and li elements and your content should wrap. Also set the parent elements to a height:auto; so the height changes as the size of the content increases.
If you post more code, I can give you a better idea.
yes i think its possible check this
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
and this
http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.