Unobtrusive - Remove Event Handing From The Markup?

Jul 12, 2009

From 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?

View 2 Replies


ADVERTISEMENT

Unobtrusive Script Event Keeps Executing On Page Load / Fix It?

Oct 10, 2011

I have a simple button in my HTML. I also have a function in my external JavaScript file. This function calls an alert box with some text. Now, I also have a global variable in my JavaScript that gets the button by id, then assigns the onclick event handler to it which in turn is assigned the call to my alert box function. Simple right?

Problem: The alert box shows up when the page loads as well as when the button is clicked. This is not desirable. code...

View 14 Replies View Related

Remove Mouseover Event From All Link On Click Event

Jun 9, 2009

This is just a page swapping images on the mouseover event, but i want to remove the mouseover events from all links when the the on click function is triggered, this is the html code,

View 3 Replies View Related

How To Remove 'onclick' Event In FireFox ?

Jun 18, 2007

Code like :
-------------------------------
<img src="xxx.gif" id="top_menu_4" onclick="main_menu_select(this)">


I want to remove the onclick event:
-------------------------------
window.$ = function(name)
{
return document.getElementById(name);
};
$("top_menu_4").removeEventListener("onclick", main_menu_select,
false)

But it can't work in Firefox

View 6 Replies View Related

Unable To Remove Event Listeners / Enable This?

Sep 28, 2009

I'm having problems removing the event listeners, they dont seem to be removed

(I am currently only checking for non-ie browsers) code...

View 2 Replies View Related

Remove Mouseover From All Link On Click Event

Jun 8, 2009

This is just a page swapping images on the mouseover event, but i want to remove the mouseover events from all links when the the on click function is triggered,

This is the html code:

Code:

This the javescript code, the swapping image is working fine, but not the removeMouseover function,

Code:

View 2 Replies View Related

Jquery :: Remove Hover Event After The Click?

Jul 16, 2009

How can I remove the hover event in jquery after the click event is triggered...?

jquery:
Code:
$('li').hover(function(e){
},function(){
});

[Code]...

View 3 Replies View Related

Remove Onclick Event From Checkbox Nested Within H2?

Jul 10, 2010

I have the following javascript for an 'accordian' style html widget.

Code:
var accordionItems = new Array();
function init(id) {
// Grab the accordion items from the page

[Code].....

I have nested checkboxes within each <h2> but I need them to behave independently of the onclick event that is set to the <h2> in the javascript.

In other words, when I select a checkbox, I don't want the onlick event to trigger.

View 1 Replies View Related

Unobtrusive Over / Down / Click

Jan 24, 2007

Is it possible to write this as and unobtrusive script in the head of a document?
This is a really long piece of code for being in the html!

<a href="whatever" onmouseover="document.images['s3a'].src='hover.gif'" onmouseout="document.images['s3a'].src='root.gif'" onmousedown="document.images['s3a'].src='active.gif'" onmouseup="document.images['s3a'].src='hover.gif'"><img src="root.gif" name="s3a" height="50" width="50" alt="" border="0"></a>

View 2 Replies View Related

Unobtrusive Script With Parameters?

Nov 12, 2009

I have a PHP page that dynamically generates table rows with input fields. A sample row looks like:

Code:
<tr id="row1">
<td><input type="button" name="remove_row1" id="remove_row1" value="X" /></td>
</tr>

I have a JavaScript function that I am attempting to attach to each of the input buttons:

Code:
// get all the input elements
var inputs = document.getElementsByTagName('input');
var delete_regex = new RegExp('remove_row');[code]...

But I would like to give it a parameter

Code: inputs[i].onclick = delete_row('row' + inputs[i].id.replace('remove_row', ''));

But doing the above just executes the function. What is the best way to do this?

View 2 Replies View Related

Unobtrusive Fixed DIV For All Browsers

Mar 3, 2010

First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem.The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. I do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site [URL].

View 2 Replies View Related

Best Practice For Unobtrusive Javascript

Oct 16, 2007

I have been going back and getting rid of so many of my onclick's and such, trying to switch to a more unobtrusive method of adding events to anchors.

I've run into one snag that's kind of dissonant for me, and wondered if anyone had any advice.

By adding an event, you can turn:

<a href="#" onclick="something(); return false;>Click me</a>

Into:

<a href="new.html" class="something">Click Me</a>

But what goes in href if you don't have anything to actually link to? One example is a page I've written that is entirely self-contained, and all href's that drive the interface end up pointing to #. Is this acceptible in edge cases like these with the unobtrusive approach?

If someone has JS turned off the markup is essentially meaningless, so I was wondering how people deal with this lapse in the separation between behavior and structure.

View 2 Replies View Related

XML Node Containing Markup

Jul 13, 2006

I 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?

View 8 Replies View Related

Make Unobtrusive Work All The Time?

Jul 11, 2009

I'm working on implementing an unobtrusive javascript where I use code instead of an HTML hook to call a function.

Old way: <input type="text" name="username" onBlur="javascript:function();" />

Now I have changed it to:

window.onload = function()
{
if(document.getElementById("username"))
{
var usernameInput = document.getElementById("username");
usernameInput.onblur = checkUsername('username','ajaxResponse');
}
}

which is placed in the body section of the page. Anyhow, my problem is that it works fine, but only once, right as the page loads. I have tried removing window.onload, but then it doesn't work at all. How can I get this to work every time I blur from the text field?

View 1 Replies View Related

Unobtrusive Way To Show/hide Divs

Jan 10, 2007

I've got the following code in a website of mine:

Code:

<a href="section1.htm">Section 1</a>
<a href="section2.htm">Section 2</a>
<a href="section3.htm">Section 3</a>
<a href="section4.htm">Section 4</a>

<div id="general">General overview</div>

<div id="section1">Section 1 overview</div>
<div id="section2">Section 2 overview</div>
<div id="section3">Section 3 overview</div>
<div id="section4">Section 4 overview</div>

I want to display the div marked 'General overview' by default, and to hide all of the other divs (section1, section2, section3 and section4) but would like to swap out the 'general' div with the other divs as the corresponding links are moused over.

e.g. mousing over the Section 2 link will replace the 'general' div with the 'section2' div. On mousing out, it will revert back to the 'general' div. Mousing over the Section 4 link will replace the 'general' div with the 'section4' div. On mousing out, it will revert back to the 'general' div. Etc etc....

View 11 Replies View Related

Passing Parameters To An Unobtrusive Function?

Jul 10, 2007

I was reading through a book that talked about unobtrusive javascript, and it gave this example of how to trigger a function instead of using an inline onmouseover event handler.

document.getElementById("RandomElementId").onmouseover=RandomFunction;
I thought this would be cool, but I can't seem to find a way to pass parameters to the function this way. I assumed you just use RandomFunction(parameter1,parameter2); but no go.

Is there a different syntax for this, or does this technique forbid using parameters?

View 3 Replies View Related

Jquery :: Make The Cycle Function In Unobtrusive?

Nov 16, 2009

Does anyone know how to make the cycle function in jquery unobtrusive?

I've got the following code and when I disable javascript, I get a nasty long list of images :(

Jquery code:

Html code:

View 1 Replies View Related

Using Firebog To Track Unobtrusive Script Events?

Mar 19, 2011

without outside extensions (http://remi.org/2009/01/06/using-firebug-to-debug-unobtrusive-javascript), how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

View 4 Replies View Related

JQuery :: Change The HTML Markup

May 13, 2011

how 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.

View 2 Replies View Related

Parsing Text With Markup Into Nodes

Jul 31, 2004

I'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.

View 3 Replies View Related

Replace Markup Pattern Within A String?

Feb 22, 2010

Im 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]....

View 2 Replies View Related

Enhancing Structural Markup With JavaScript

Dec 10, 2003

This is a dedicated thread for discussing the SitePoint article 'Enhancing Structural Markup with JavaScript'

View 20 Replies View Related

Unobtrusive Javascript To Handle Drop Down/fold Out Menu

Aug 9, 2005

I have an old web application I did where browsers with dynamic
capabilities received a drop down menu on the top of the page and a
fold out on the left hand side of the page and non-dynamic browsers
received two static menus. This was done via server side detection of
browser capabilities and branching the application. Over time needless
to say the capabilities between the dynamic and static sides got
seriously out of whack.

Now the drop-down menu was not done unobtrusively, it was done via
mouseovers and the like.

Obviously it makes sense to change the menus to be done by catching
events. But I would also like to redo the dynamic and static branching.


The way I figured would be as follows:

The static menus are placed inside of noscript elements.
The dynamic menus are loaded with display set to none. Script writes in
a new css changing dynamic menu display to block.

As I understand noscript is considered bad via unobtrusive javascript
theory, however I have a hard time seeing how one could make a menu
that would display properly as a static menu yet also function as a
drop down or fold out (especially fold out), collapsible expandable
menus are easy since they basically have the menu order placed in the
structure needed.

So I'm wondering if anyone has reasonable suggestions on how to
succeed.

On another subject, anyone know what the effect of a bunch of links
inside a noscript element that mirror a bunch of links in the normal
page will do to Google's algorithms?

View 2 Replies View Related

Create A Basic Unobtrusive Form Validation Function ?

Nov 3, 2010

I am trying to create a basic unobtrusive form validation function but I am having some issues/questions. Basically I am checking if any of the form fields have <= 3 characters, and if they do so, then I make those fields' backgrounds and borders red. Also in the empty <span> tags I insert an error message. My issues/questions are:

#1: So when I say if (fieldVals<=3) this means that the errors should appear if the values are 1,2 or 3 characters long, right? It does not do that though, when I insert one character in any of the form fields the errors go away, but they should not, right?

#2: How do I cancel the form from submitting if errors are visible and vice versa? When I use the return false when errors are visible, the code does not even run. What is going on? return true does the same.

#3: When I use a submit button(type="submit") instead of just a button(type="button"), the code does not run? What am I doing wrong?

I am not trying to use this on a website, I am just trying to learn how to use unobtrusive javascript. That's why I am only checking for empty fields. If I learn how to do this first, later I will try to add email check, date check etc.

THE CODE:

View 12 Replies View Related

JQuery :: Only Select Text Node Without DOM Markup?

Jul 30, 2010

let'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?

View 4 Replies View Related

JQuery :: Target Other Html Markup Around A Certain 'on Click' Item

Apr 19, 2010

I'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 Related







Copyrights 2005-15 www.BigResource.com, All rights reserved