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>
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?
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 RelatedI 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.
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?
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....
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?
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?
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:
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.
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?
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:
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...
I cant really figure this out, the only thing i could see messing it up is the javascript:void(0) inside the anchor link but since there is a double click function and a click, it should only be one click.I put autoOpen which i think is also causing it, but i did that so theuser can open it, close it, and open it again so the delay "double click" is saying for the first time initialize and then the second click is opening?? if so how do i get around this?
HERE IS MY JQUERY
$(document).ready(function(){
$("#pro_edit_profile").hide();[code]....
HERE IS MY HTML FOR THE LINK
<a href="javascript:void(0);" id="pro_edit_pic_link" name="Change
Profile Picture">Change Profile Picture</a>
There is a checkbox on a form page, when you check it, a div will become visible with some extra inputs needed for that situation. To simulate this click on the checkbox external, I use click(). With jquery files 1.4 and lower this works properly and like expected. When using jquery library 1.4.1 or higher, something does not seem to work properly. Sooooo, the code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>-->
<script type="text/javascript">[code]....
Somehow I managed to get this thing 'sort of' working with 1.4.1 or higher. But the code to accomplish this is absurd. See functioncheckTheBox4Plus() on line 8. It works :) but shouldn't.. Or is it the other way around?
What I've doing wrong, on first click it detects that the div is hidden and makes it visible, button on second click it does nothing:
View 1 Replies View RelatedOnce you in, click on the button with the sign 'Click To Start Shopping' The problem is, the Flash doesn't load I bought this flash template and i was supposed to edit the FLA file for the serverpath. I guess i didn't put the server path correctly. Below is the code in the .FLS file
[Code]...
Below is the instruction from the documentation: 3. Once you have everything correctly running on local, then OPEN THE FLA, go to first frame, layer codes, open “action” panel and set there the final pàth on your server where all the files will be located (create a folder especifically for this): [URL]
I have a basic dropdown css menu system. When a menu item is selected (ex: foo.html), the cluetip link opens a 450px wide window as expectedThen,I selectanother menu item (ex: bar.html). But when I return to link foo.html: and click the same clueTip link the clueTip link now opens in it's own window instead of the 450px clueTip window as beore would expect the small clueTip window to open and show the clueTip on each successive click as it does the first time. If I do a browser reload, the first menu selection works as it should, but only on the first click.If the menu is not used, the single file opens the clueTip correctly. Does clueTip get confused in a menu program?
// the cluetip code:
$(document).ready(function() {
$('#clickme').cluetip({
[code]....
I've a function for my search form. Basically when you click on the form box where it says "Enter your search here" this value disapears when you click in the box. When you click out the box it re adds the value. It works if you click return on the keyboard and performs the search no problem. However if you click the search button with the mouse it removes the search term and replaces it back with "Enter your search here". This obviously will not return the search.
Anyone know how I can fix this so this does not happen on the mouse click?
I've used jsfiddle to add the html and javascript but it is not working in there, but works if you add it to dreamweaver and look at it within a browser. [URL]
This is the code:
<script type="text/javascript">
function make_blank()
{
[Code]....
I have this code:
$
(
'#region_dc').
click
[code]....
The click works fine. Check the checkbox, the hidden div displays. But when I uncheck the checkbox, I want it to go away.
Should I disable the right click option or not? I have a gallery site, I don't want people to be able to copy the images with the default right click over an image. From a professional looking site point of view I suppose I would be messing with the functionality a bit too much, OR is it OK in this instance to disable the click. I know how to write the code to disable the click, but what I was thinking was maybe it would be better to leave the right click but change the menu options? I'm not sure how to change the menu options ere is a link to the site. [URL]
View 12 Replies View RelatedI want to call the click event of the link (anchor tag) on the click of the button. I used this code below in the click event of button to call links click event and it works fine in IE.
document.getElementById('linktag').click();
But, this doesn't work in Firefox. I googled a bit and found that in firefox, you have to do something more to achieve this behaviour. So, I ended up doing this on button click to work in firefox:
var link=document.getElementById('linktag');
var e = document.createEvent('MouseEvents');
e.initEvent(
[code]....
The above code does the click on link when I click on the button. But my problem now is that I have defined a link as
<a href="mailto:abc@xyz.com?subject=abc&body=email body">email </a>
and when click is called and mailto links opens my email client, it somehow ignores the subject and body parameters of the link. It works properly when i actually click a link element. but it doesn't work when i simulate the click event by code written above. above dispatching event code somehow ignores the link parameters?
How can I give a click on a link when it is just created and added to DOM?
None of this works:
function openProfilePage(profile){
$('#profile-link').remove();
var link = $('<a/>').attr({'href':'profile.php?user='+profile, 'target':'_blank', 'id':'profile-link'}).css({'top':'-200px','left':'-300px', 'position':'absolute'}).html(profile);
[Code]...
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>emailsig.html</title><meta name="viewport" content="width = 400, minimum-scale = 0.25, maximum-scale = 1.60"><meta name="title" content="html email signature"><style type="text/css"> <!-- body { margin:0px; background-color:#fff; height:100% } html { height:100% } img { margin:0px; border-style:none } button { margin:0px; border-
[Code]...
I've a strange problem [for me]I want to make that:1 - click on the red, it goes up2 - second click on the red, it comes backbut it doesn't work if I used 4 times #red, but If I change it it's perfect.Where I made a mistake?
View 4 Replies View RelatedI'm trying to implement a dynamic menu using CSS/DHTML/JavaScript. The
menu bar is implemented as hyperlinks so I can use the :hover :active
etc. pseudo-styles.
When moving from one item to another on the menu bar I want to
simulate the user clicking on the menu bar item they've just moved
onto, so the adjacent menu drops down automatically.
So I have something like this:
function MenuBarItemMouseover(menuBarItem)
{
menuBarItem.click();
}
to simulate the user clicking on the adjacent menu.
However it seems the previous menu bar item stays in the 'active'
state and the item that has been moved onto remains in the 'hover'
state.
The css styles are defined in the order: link, visited, hover, active,
and in any case, it works fine if you actually do a mouse click on a
different menu bar item. It seems the programmatic click is not the
same.
Is there anyway of forcing the previous link to 'normal' and the new
link to 'active' using JavaScript? Or is there some other way of
simulating a mouse click?