i'd like to set and retrieve 2 values for a div and span
1. text (displayed on screen)
2. value (for backend purposes)
what's the correct way to do this?
there's innerhtml, value, val(), text, html....i'm confused
do these serve different purposes? they seem interchangeable
One correct way to accomplish this is to set a "data attribute" of the div to the internal or server value, with the user-visible value being inside the div:
<div data-info="internal">visible</div>
This shows it done statically. You can also create and set the attributes of a DIV DOM node in JavaScript. Ask me if you want an example.
Sorry for the 8-year delay in answering.
See:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
Related
I have the following div in UIWebView:
<div contenteditable="true"></div>
If the user inserts new line (using the return key in the visual keyboard), and when he is done he clicks on done in the previous/next/done grey visual keyboard, it combines the lines to one line.
How can I avoid it?
Perhaps this JSFiddle can shed some light onto what's happening within your application. If you type some lines in the top DIV (gray background color), the HTML code that you get as the return value of its innerHTML property will first display in a textarea field below it (including HTML tags formatting). As you will soon see it's not merely what you'd expect to handle in your application ('line one' + CRLF + 'line two'...), but it also contains HTML elements separating lines one from another. That's how browsers are able to display contenteditable DIVs as if they're 'memo' type controls - by parsing their HTML (that's what browsers do). This HTML formatted text is also how your application receives user submitted text, and there you have to decide what to do with this formatting. You can either strip them away (which is, I suspect, how you set that object's property and it deals with that for you) replacing HTML elements like <DIV></DIV> and so on with a space character, or choose (with your control's property, or in code) to handle this formatting whichever way you'd like them to be handled. I'm not familiar with UIWebView though, and you'll have to find on your own how to retrieve complete HTML formatted values that you want to apply to the next DIV element that you're displaying (or same one that you're assigning new values to).
UPDATE: After searching the web for UIWebView reference, I've actually stumbled across one related thread on SO that shows how to retrieve innerHTML value of an element in your underlying HTML document:
//where 'wView' is your UIWebView
NSString *webText = [wView stringByEvaluatingJavaScriptFromString:#"document.getElementById('inputDIV').innerHTML"];
This way you'd be able to retrieve the whole innerHTML string contained within the contenteditable DIV that you use in a webText string variable and parse its HTML formatted text to whatever suits your needs better. Note though, that different browsers format contenteditable DIVs differently when Enter Key is pressed and some will return the next line enclosed in a new DIV, while others might enclose it in paragraph P and/or end the line with a break <BR> or <BR />, when shift+enter were used together to move to the next line. You will have to account for all these possibilities when processing your input string. Refer to the JSFiddle script I wrote using your UIWebView component to check what formatting applies.
Of course, in your case, it might be simpler to replace your contenteditable DIV with a textarea that will return more commonly formatted \n end-of-line (CR+LF). DIVs however are easier to design, so choose whichever suits your needs better.
Cheers!
I don't believe there's a solution to this from the objective-c side of the stack. The standard HTML- element only delivers a single string. It might be possible to achieve through some javascript magic or similar on the web-end of things.
My HTML-skills are not up to scratch but if you also control that end perhaps changing the to a textArea might help?
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
I'm trying to produce a pay check. I will allow the user to setup the position of the items according to their check style.
From my research, it seems that the position of text boxes in SSRS is static and not dynamic. There is no "expression" option for Top/Left. I thought a way to get around this might be to make the text boxes large and overlapping and then set the padding top/left based on expressions to the positions that user has selected. However, it seems that similar to HTML, the text boxes either float around the higher level text boxes or simply drop out of view.
This would be simple if there were a way to tell SSRS not to be concerned with the order of the text boxes and simply display them overlapping, however I don't feel that there is.
Given that, what other options to I have for dynamically positioning text boxes in an SSRS 2008 report? I'm moving right along with this project but I've hit this stumbling block.
SSRS gives you a lot of options for dynamic formatting but Size and Location are fixed. You cannot change this. Overlapping of textboxes does not work in the soft-break renderers like HTML and Excel but does work in hard-break renderers like PDF or TIFF. Have you tried your padding technique and output the report as PDF?
I'm not sure what are going to do in your report, But in similar cases I usually use Space character to position a text. For instance,
IIf(Len(Fields(YourColumn.valu)) > 10, Fields(YourColumn.valu), " ")
Note that you have to ensure it can implemented in your case or not. I'm not sure that it is helpful but as long as the location and width properties are fix this is the only option
Note 2 : I'm using Unbreakable Space character instead of simple Space so that SSRS render it without any problem
So I'm wondering if there is a way to convert a string with a given font face to a set of coordinates and have these coordinates accessible to align other elements to - specifically images, though any DOM element ideally.
Basically I want to be able to animate a set of elements and have them form the given string, but its the first step I need to get through at this point.
Thanks in advance!
I you display the string on the page in a given element, e.g., in a span or div, then you can get the coordinates of the upper, left corner of that element and you can get the width and height of that element. Assuming you have set your CSS attributes appropriately, this will give you something very close to the coordinates of the text, perhaps event exact.
If you don't want to display the string, you could set its opacity to 0.01.
I have a bunch of elements (divs) and they represent items. I can delete them by clicking a link and its done through ajax. I had the divs store the value in id however it appears that even though it does work the standard says id names must start with a letter. So i could start it with a letter and remove it when i use ajax or i can store the value another way.
What are ways i can store values in html? I don't think inputs are legal outside of forms but i am rethinking what are good ways to store values.
Best way is to use the new HTML 5 spec to store data in the data-[name] in the div elements
ie
<div data-yourfield="value">
Text
</div>
Then using jQuery find the divs with the selector (reference http://api.jquery.com/category/selectors/)
div[data-yourField=""]
You can store it as text inside the div if you like. You also can use inputs, just add the form tag around everything. Just because it's a form doesn't mean it has to "submit". Inputs or textboxes would probably be the best way to store them actually.