Enhancing Structural Markup With JavaScript
Dec 10, 2003This is a dedicated thread for discussing the SitePoint article 'Enhancing Structural Markup with JavaScript'
View 20 Replies
ADVERTISEMENT
XML Node Containing Markup
Jul 13, 2006I have an XML node called "myNode" and it contains:
"This is some text"
Now I can use the myNode.nodeValue property to get the string of text
above. But say myNode contains:
"This is <em>some text</em>"
The property myNode.nodeValue will now be "This is ". How can I get the
exact string above returned?
Enhancing Input Field - Put The Selected Recipient Into The Encasing And Insert It In The "To" Field Box?
Jan 9, 2009I'm trying to replicate a feature found in hotmail, facebook, etc. When you type or select a recipient from an auto-suggest box for your message/email that recipient's name is put into the "To" field box and is encased (usually a blue rounded corner box) with a X to the far right. If the "X" is clicked the recipient is removed.
How can do you put the selected recipient into the encasing and insert it in the "To" field box? If there are multiple recipients how are they differentiated? For example, if there were a ";" between the recipients the semi-colon would separate the values.
JQuery :: Change The HTML Markup
May 13, 2011how to modify the DOM with jQuery in order to correct an (dynamic) HTML structure. I have a markup like this:
Thinking about a replacewith or append or a combination??
<ul class="MyClass">
Test1 <br />Test2</ul>
But I need to get all texts in the UL be surronded by LIs, and to delete the br.
<ul class="MyClass">
<li>Test1<li>
<li>Test2</li></ul>
In real life this could be a like two text elements like in this example, but it´s dynamic so it could be like 3 or 15 or whatever sometimes.
Parsing Text With Markup Into Nodes
Jul 31, 2004I'm trying to figure out how I can take user input from a textarea and insert it into a table as HTML. An example:
<script type="text/javascript">
<!--
function echo_input() {
var input = document.getElementById("user_input").value;
var cell = document.getElementById("display_area");
cell.childNodes[0].nodeValue = input;
}
//-->
</script>
<form>
<textarea id="user_input" name="user_input" onkeyup="echo_input();"></textarea>
</form>
<table>
<tr>
<td id="display_area">test</td>
</tr>
</table>
The childNodes[0] that the script keeps editing is the text node that starts out as "test". The problem is that I want the text that I put in the table to be parsed if any markup is in it (so that a <br /> will become a break, and not literally printed out as "<br />"), something that the DOM automatically escapes. It seems a very cumbersome means of doing this is to write a javascript parser, which would go through the text and create different types of nodes as it stumbles upon markup.
Replace Markup Pattern Within A String?
Feb 22, 2010Im trying to find if a particular html markup pattern (<ROD> ... </ROD>) within a string and if its found then replace it with another string.eg."This is my string and it might <ROD>PartNumber123</ROD> contain HTML markup"So in this case I want to replace "<ROD>PartNumber123</ROD>" with {0}. If there is no <ROD>...</ROD> then dont do anything.Im sure im doing this the wrong way, maybe a regular expression would be best.Although this works its not very clean and I just cant find the correct solution.
function parseData(data){
var r1 = data.indexOf("<ROD>",0);
var r2 = data.indexOf("</ROD>",0);
[code]....
JQuery :: Only Select Text Node Without DOM Markup?
Jul 30, 2010let's say I have this code markup:
<div id="id1">
This is some text
<div class="class1"><p>lala</p> Some markup</div>
</div>
What I would want is only the text "This is some text" without the child element's .class1 contents.
How would I do that? A normal selector would select "recursively", so how do I limit it to one level?
Unobtrusive - Remove Event Handing From The Markup?
Jul 12, 2009From my understanding the main feature of unobtrusive JavaScript is to remove event handing from the markup.The main reason for doing this is to avoid repetition of code.There are also other reasons but that is the main one. e.g. no having to write <tag onclick="function()" > over and over again. This traditional event handling method makes code less maintainable.However is it worth writing unobtrusive code when we consider the following:
1, Server sider scripting laguages can be used to avoid code repetition. e.g. we can use a loop to add multiple onclick event handlers to all the elements of a navigation list. Thus we would only have to write onclick="function()" once.
2, Unobtrusive coding makes the code harder to follow.It is easier to look at the markup to find out what happens when an event occurs on an element rather than having to look through wades of JS code to find the correct event listener. This is especially true when a team is working on a project. It is easier to find out what another person has done when the traditional model of event handling is used.
3, Unobtrusive coding means longer and more complicated code. Also there there is a need for having to deal with browser differences.I know this can be reduced using libraries such as JQuery. Is it worth using such a library?
JQuery :: Target Other Html Markup Around A Certain 'on Click' Item
Apr 19, 2010I'm just starting out, and having a little difficulty understanding how to target other html markup around a certain 'on click' item.[code]So when the user clicks the anchor the text is inserted into the following textarea. I achieved this by:[code]
View 2 Replies View RelatedJQuery :: Find Text And Wrap With Markup (or Replace)?
Feb 4, 2010I have been trying to figure out how to find all instances of a certain word or phrase within an element and wrap those words in <span> tags or other html. I.e. change all instances of 'the keywords' to <span>the keywords</span>So far I've found a lot of references to :contains() but that will change the element the text is inside of rather than just the text itself
View 2 Replies View RelatedJQuery :: Possible Replace Markup Tags Dependant On Browser?
Feb 10, 2011On my site I use an SVG image. The <embed> tag works fine in Opera and Firefox. And <img> works fine in Chrome and Safari. I would like to know if it is possible to change the tag with an 'if' browser statement, and if it is ho would I write it.
if (jQuery.browser.webkit) {
* // Replace <embed> with <img>
}
JQuery :: Access Elements In Dynamically Loaded Markup?
Aug 23, 2009I have a js application, that loads formular-markup dynamically for a specific entity. Is there a way to access elements within this dynamically loaded markup through jquery?
eg.
in the form load function:
$('#container').empty().append($(entityForm.markup).addClass
("formContainer"));
[Code].....
JQuery :: Rewrite Markup As Nested LI In Order To Use Treeview?
Oct 1, 2010I have an application that produces a dynamic unordered list from DB categories table. The list is representing the hierarchy by adding a “..” (Double dot) in front of the list item name for each hierarchy level like so:
<ul id="categories">
<li>Cat1</li>
<li>..Cat1a</li>
<li>..Cat1b</li>
[Code].....
JQuery :: Plugin: SpinBox / SpinButton Control (with No Extra Markup)
Aug 11, 2006I've been working on a Spin Control that uses only a standard textbox. <input type="text" /> With Javascript enabled the textbox looks and acts like a spin-button control without adding any extra elements. [URL] The up/down arrows are achieved using a background image, the rest is handled by Javascript/JQuery. I hope it is useful for some of you. I'm also working on a drop down date-picker that uses similar principles. (I just don't like solutions that add loads of extra markup!) Feedback/comments are welcomed, though I won't be able to respond to
View 12 Replies View RelatedJQuery :: Make Plug-in Work On Duplicate HTML Markup But Operate Separately?
Jun 22, 2011I inherited Javascript and jQuery for a sliding belt (carousel) module. Basically, left and right navigation arrows would appear to the sides of the belt if there were more slides to show.
The jQuery and Javascript code was originally a singleton, so I decided to convert it into a jQuery plug-in in case the belt HTML markup was instantiated more than once. We have a CMS, so multiple belt modules theoretically could be placed on the same template.
Below is test page with two belts on the same page and the associated Javascript jQuery.
My problem is that when you click on the arrows or the slides, I found that the second belt works fine but not the first one. The first one does not show a left arrow when you page to the right. Likewise, the first belt gets mixed up going to the left. Somehow, only the second belt works as expected.
What I would like to do is when I attach my plug-in to a DIV, I want each belt to operate independently of each other (i.e keep its own local variables, functions, etc.).
I am not sure what I am missing here. what I am doing wrong? (You should be able to copy and paste the code into jsFiddle to see how it currently works.)
I have the page here also: [url]
<html>
Call A Function Either From Within XHTML Markup Code Or From A VB.Net Code-Behind File?
Jun 30, 2010I am VERY NEW to javascript programming as I am to web development. I am pretty decent with VB.Net though. My question is, what are the different ways to call a JavaScript Function either from within XHTML Markup code or from a VB.Net Code-Behind file?
View 3 Replies View RelatedDynamically Writing Html/javascript From A Javascript Function
Jul 23, 2005I'm working on some code and am running into brick walls. I'm trying
to write out Javascript with Javascript and I've read the clj Meta FAQ
and didn't see the answer, read many similar posts (with no luck
though), and searched through the IRT.ORG Faqs
(www.irt.org/script/script.htm).
The Javascript is designed to open an popup window and then inside that
window call another script which will resize that window. There may be
another way around this but the reason I tried this approach initially
was that I wanted to call the onload handler in the popup window to
resize the image only after the image had completely loaded. I've had
some code in the primary Javascript file (showimage.js) before that
works if the image has been cached but on the first load, it doesn't
resize properly which tells me it is probably because it is trying to
resize the window based on the image size but it isn't completely known
at that point. So I removed that code and tried placing the resizing
code in the second Javascript file (resizewindow.js). BTW I've tried
other code to open a popup image and automatically size it ie Q1443 at
irt.org but that doesn't do exactly what we need.
Even if there is another way to do this with one file, I still want to
figure out why this isn't working in case I run into it in the future.
I thought what I would need to do to use document.writeln to write
Javascript would be to escape any special characters and to break
apart the script tag ie
document.writeln('</SCRIPT>');
would become
document.writeln('</SCR' + 'IPT>');
I have a HTML page and 2 Javascript files. All files are in the same
directory and have permissions set correctly.
Here are the 3 files (keep in mind wordwrap has jacked up the
formatting):
index.html
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript1.1"
SRC="showimage.js">
</SCRIPT>
</head>
<body>
Click the house<BR>
<A ONCLICK="newWindow1('house1.jpg','Nice House')"><IMG
SRC="house1thumb.jpg"></A>
</body>
</html>
showimage.js
------------
function newWindow1(pic,sitename)
{
picWindow=window.open('','','width=25,height=25,sc rollbars=1,resizable=1');
picWindow.document.writeln('<html> <head>');
picWindow.document.writeln('<SCR' + 'IPT type="text/javascript"
LANGUAGE="JavaScript1.1" SRC="resizewindow.js"></SCR' + 'IPT>');
picWindow.document.writeln('</head>');
picWindow.document.writeln('<body onload="resizewindow();">');
picWindow.document.writeln('<img src=' + pic + '>');
picWindow.document.writeln('</body> </html>');
picWindow.document.close();
}
resizewindow.js
---------------
function resizewindow()
{
// Do resizing here.
// Right now this isn't being executed
alert("resizing window");
}
Can anyone provide some pointers as to why this javascript is failing?
I'm using IE6 on Win2k and when I click on the image to open the popup
window, it does open the window but it is white with no content and the
system immediately goes from about 4% CPU usage to 100% and
consistently stays there until I kill that window with the task
manager.
DOM Javascript - Imbed Javascript In Dynamically Added Row
Jul 23, 2005Attached is a simple HTML file that adds and delete rows. In the add
row function I set an attribute "onClick" this triggers the
testMessage() function. When I try this in Firefox it works just fine
however on IE it just refuses to work.
What is interseting is the ROW that already exists has a similar
'onClick' event which works when the page is loaded, but subsequent
"row" additions to the table to not work in IE. Code:
Text/javascript, Application/x-javascript, Difference?
Feb 19, 2007two possibilities or the attribute type of script:
text/javascript (the one i usually use) application/x-javascript
what are the differencies between both?
depends on the html content?
for example html 4.0.1 versus xhtml 1.1?
Javascript Function Has No Properties In Javascript Console
May 25, 2005I'm getting errors in Firefox everytime I try to run this frame resize code, but it works fine in IE. I can't seem to figure out what the problem is with it.
The error is: Error: theFrame has no properties
Line: 8
The line that the javascript console is showing an error for is in italics.
code from page:
<html>
<head>
<script type="text/javascript">
var defaultCols="100px,*";
var hiddenCols="0px,*";
function ShowHideMenu(){
theFrame = document.getElementById("framed");
if(theFrame.cols == defaultCols) theFrame.cols=hiddenCols;
else theFrame.cols=defaultCols;
}
</script>
<frameset cols="100px,*" name="framed">
<frame src="lframe.htm" name="frameMenu">
<frame src="mframe.htm" name="content">
</frameset>
</head>
<body>
</body></html>
Come someone let me know what I'm doing wrong here?
'Javascript Anthology' Or 'Professional Javascript For Web Developers'?
Mar 30, 2006I'm already past the basics of Javascript, and i need something that takes me to the other level and teaches me the new technologies and cool stuff (drag&drop, AJAX, OOP in javascript, maybe XUL...etc). So far i found these two books:
1. Sitepoint's "The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks".
2. Worx's "Professional JavaScript for Web Developers (Wrox Professional Guides)"
Both seems to cover very insteresting topics, but i can only buy one of them. So which one do you suggest?
and by the way, i've read the sample chapter 5 of Sitepoint's book, and it seems like the author(s) just put the solutions/codes there and let you figure them out on your own. Is this how the rest of the chapters are?
Nixing Javascript Via Javascript: Pseudoproto?
Jul 23, 2005This is a question about defensive web browsing. Ocassionally I run into a page whose JavaScript does something that I find obnoxious. I would like to turn off JavaScript only for that page (instead of disabling it globally). It would be cool if there were some way to do this through a "bookmarkable" JavaScript snippet using the javascript: pseudoprotocol. Does anyone know any trick to do any of this?
View 2 Replies View RelatedExtract Links From Javascript (not Using Javascript)?
May 26, 2006I am looking for a method to extract the links embedded within the
Javascript in a web page: an ActiveX component, or example code in
C++/Pascal/etc. I am looking for a general solution, not one tailored
to a particular page/script.
Hopefully, the problem can be solved without recreating a complete
Javascript interpreter. Any ideas?
Turn A Javascript Into A Javascript Function?
Oct 21, 2005I have some javascript that I have written into the <body> section and it works great. But I would like to make it into a javascript function and define the function in the <head> section. Then in the <body> section write a small bit of javascript that would call the function() object. Code:
View 2 Replies View RelatedHow To Insert Javascript Code Within Javascript?
Jan 7, 2006I would like to know how to write javascript such that, a part of it isnt considered as script, & rather as HTML. Code:
Ok, the layer div can be written using document.write. But, Google ad itself is a javascript isnt it. How can it be written into this? How does this work?
AJAX, Eval(), And Javascript Within Javascript
Apr 28, 2006Ok so, this is my purpose:
- to be able to load asynchronously (via AJAX) some javascript ads (like google's or adbrite) so as to make them be loaded in the background, then update the page after the ads have loaded via innerHTML
Why?
-Because 90% of the time in my newer sites, javascript ads are the major offender in terms of speed of page rendering
My problem:
Via ajax, I can call a php file that retrieves some javascript and outputs it, XMLhttprequest returns those javascript lines, but they don't render in the page, since they miss the whole page loading, and are apparently not parsed
For example, let's say I call a php file via ajax, and it returns the output into a variable named "text" containing "document.write('hello')"
if I use xxx.innerHTML=text, nothing happens
My 1st solution:
Passing those javascript lines to eval() [like eval(text) ], but this produces a second problem, that I couldn't solve (probably because of my lack of knowledge in javascipt):
if I eval the code, it deletes my current page and renders a new one
for example, if I parse a document.write, my page disappears, and a new one is rendered with the document.write text
What I want is basically to make that "document.write" appear inside a div in my page, adding to the content (and not overwriting the whole page), much like what happens when using innerHTML
Is this even possible? How would you go about it?
I tried xxx.innerHTML=eval(outputfromphpfile) but it overwrites my whole page...