I'm developing a website where a visistor does not have to use the mouse.
All he has to do is use the Tab-key or key-combinations to jump to specific
hyperlinks (containing accesskeys). Next, he presses the Enter key to follow the hyperlink.
My question is: is it possible to change color of the hyperlink when a
hyperlink get the focus. I do not only want to see the dotted line, I want the hyperlink to lighten up.
I want to have a function on an event
<span id= "nameheader"> </span>
<form method ="post" action="send.php">
<input
id = "nameinput"
class = "input"
value = "name"
onfocus = "focus();"
onblur = "blur();"
/>
That is when you focus on the input box the value ' name' gets put above the box and when you focus on something else it goes back to the box.
this is my function
focus(){
document.getElementById('nameheader').innerHTML = 'name';
document.getElementById('nameinput').value = '';
}
And I would obviously do the opposite for onblur event.
Firefox doesn't support onfocus event on an iframe, is there any workaround to this?
View 1 Replies View RelatedI am successfully using this code to cause an event to fire when the user clicks inside any of the text inputs in my form:
Code:
govindaAddEventHandler(document.getElementById("input_" + arrWhichFieldsFilterable[i]),"click",getMouseCoords); // govindaAddEventHandler(obj, eventName, handler)
...which relies on this:
Code:
function govindaAddEventHandler(obj, eventName, handler) {
if (document.attachEvent) {
obj.attachEvent("on" + eventName, handler);
[code]....
The problem occurs when I change it from an on"click" event to an on"focus" event. In the latter case (onfocus) it does not work on Firefox, but only in IE8. Why is that? How can I add an event handler for onfocus in firefox?
Basically I have a WinXP machine (SP1 with all web updates don't want to
upgrade to SP2 until this issue is resolved) and IE 6 (all web updates).
If I am on a secure (https) site none of the hyperlinks seem to work. As I
mouseover the relevant links are shown in the status bar (ie another page or
site), but when I click on these links nothing happens at all. Its as if
something is blocking the process of firing these links. NOTE: I can click
on form buttons OK and the exact same links work fine on 3 other machines
that I have.
i want to open all links on my website in a div tag like facebook.com or esl.eu. how can i do this ?i want to make a chatbar like facebook or esl.eu and this bar should not reload anytime if i click on an link on my website.
<body>
<div id="chatbar"></div> <--- should not be reloadet
<div id="content"><--- website with all links in it
<a href="link"></a> <--- should open in <div id="content"> without reaload the hole website</div></body>
I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images.
I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work.
This is the slideshow code:
I know that for the most part, this script works. It was only when I tried to add the component that involved adding a hyperlink that it broke. The bit of code in the HTML that it directly affects is <div id="view_portfolio"> Â </div>
Does anyone know why the javascript doesn't work? I have a feeling it's because I haven't applied the id tag in the HTML properly, but I don't know what exactly is wrong about it.
The gallery I have made so far is at [url], except that at the moment, the images don't show. I've attached the javascript & html code.
I would like to create a series of checkboxes that would define a particular entity by it's attributes. For example let's say I have some check boxes that say
age limit 18+ [X]
Hip Hop [ ]
Electronica Dance [X]
Least expensive [ ]
[moderately expensive [ ]
These selections above will activate, deactivate, highlight, or bold selections below
Club one
Club two
Club three
And when unchecked all the links are unfiltered
Etc...
When these check boxes are checked in any combination it would remove the hyperlink or highlight/bold the hyperlink of whatever is filtered Would really like someone to point me in the right direction on how to structure this.
I am looking for a js script that will monitor when a hyperlink is clicked and force that link into a new window or native application.
If the link is to a different web page, the link should open in a new window. If the link is a word document, the document should open in word or the default editor. If the link is within the same page, such as a back to top or bookmark, the link should stay on the page and simply go to the desired location.
I am just starting to use the DOM to do some more advanced
javascripting so please be patient with my question if it is an
ignorant question.
I would like to use the DOM to dynamically create an html table via
javascript. While that table is being dynamically created in a
javascript function I would like to dynamically insert text and a
hyperlink with an image into each cell.
I got pretty far on my own. I was able to dynamically create a table
and insert a string into each cell. However, I was not able to use
the DOM to insert a hyperlink into each cell. I tried adding it as a
new text node and got the text of a link rather then a link. I then
tried adding and setting an anchor element but I got nothing. Code:
I've this CSS to style my links in my menu:
.menu a:link, .menu a:active, .menu a:visited{
color: #ffffff;
text-decoration: none;
}
I would like to find the a-tag (<a>) which is active. I've tried something like: $('.menu a:active'). How can I find that element?
I'm trying to select all hyperlinks in a webpage, and making the text all CAPS as an exercise. However, simply selecting $('a[href]') selects ALL hyperlinks, including hidden ones, pushing the text to the front. My css-fu is not very good, this is what I have so far.
$('a[href]').each(function(index,element){ if (!element.parents().css('display:none'){ element.text(element.text().toUpperCase());
} };
I'm working on a site for a college javascript class, but I want to do a little bit more with my class site. I have a very simple slideshow set up( as a pop-up), but I want the images to be clickable and take the person to a site. Specifically, I have images for books on amazon, and I want the person to be able to click on the images and be taken to the specific page where the book is sold.
I'll post what I have, I was wondering what would be the best way to integrate it into my slideshow.
<body onblur="self.close()">
<div style="text-align: center;">
<p>If you like this site, you will love these<br />
wonderful books. Click <a href="http://www.amazon.com">here</a>
[Code].....
insert hyperlinks into the individual images?
see the code at the following address:
[URL]
I have a collection of hyperlinks in a web page and I need to know how I can do the following:
1) When I click a hyperlink, change the Class of all hyperlinks that have the same link phrase text (or value).I have tried this but it doesn't seem to work (it was a bit of a guess!):
$('a[value="'+mystring+'"]').next().addClass('active');
how I can change the class of all hyperlinks that have the same value as the link being clicked?
I'm wanting to take all links pointing to external urls and insert a title tag with some text that I can then turn into a mouseover tooltip effect.The purpose is simple, we want to inform the visitor that by clicking on the link they would be taken away to another site. The warning message would be in the title tag.
Each external hyperlink already has an rel="external" tag so I can work off of that. This gives me:
$(document).ready(function() {
$('a[rel="external"])
});
As my element identifier. Now, in trying to insert this title tag, i've explored the append and appendTo but those refer to adding items to the end. I need the method that inserts this in between the <a></a> tags as it's own part of the hyperlink code. which method I should use to add something like this:
title="Clicking this link will take you away from this site"
I've even thought of possibly appending it as a hidden <span> item then revealing it on the mouseover.
One bit of additional info, i'm using Wordpress and want this to automatically deploy on all specified elements automatically.
So I have a images stackedverticaly on the left side of the page, one isa hyper link and the rest are just images thattoggle in/out a ul/li list with more hyperlinks. The image for the href has either a blue or purple glow surrounding it, I presume this is CSS relating to visited or not. How do I get rid of that? Also it is slighlty out of line with the other images, but my CSS doesn't seem to have any affect. It is the Submit a Request Button that is in question
[Code]...
I have the following script that allows a user click Next Picture and see another picture and some text associated with it. What I am trying to do is when the user clicks Next Picture, instead of plain text there could be a list of Hyperlinks. This is the code I have been using.
<!--Second copy of the script-->
<script type="text/javascript">
<!--
var img2 = new Array();
var caption2 = new Array();
[Code]...
I'm looking for a method to use several hyperlinks to submit a form and then return the page within the link for example:
The reason for this is so that no matter which link a user navigates to the form will be submitted and no data lost.
However the above code obviously loses the POST info as the form action will be different from the a tag.
Therefore I think maybe a way of creating a variable that changes the form action to match the a link selected (as the form(s) are submitted to the same php page.
I am creating a simple text area editor that will allow the user to create hyperlinks. I have it set so the user can select text in the text area, click on the "Insert Link" button, enter the URL at the prompt box, and then the anchor tags will be inserted around the the selected text. The problem I'm having is that when it replaces the selected text with the code, it replaces ALL the text in the text area (not just the selected text).
Does anyone have any suggestinos on how this could be fixed? Also, am I going about this all wrong or is there a better way to do this? Code:
I am trying to create a sliding menu, everything is working fine other than the hyperlinks are not working, they open if you right click and select open link, but not with a normal click.
[Code]...
I have been using this sideshow example which works great but I want to be able to click on the slideshow picture to take me to another link (hyperlink)
I also wanted to have links next to the slidehsow which would go to a certain picture in the slideshow for example by pressing link "go to picture 3" it would scroll automatically to picture 3 in the slideshow
I have been using examples from: [URL] this but I am willing to change to another version if I can't do that with this slideshow scrit
Here is the layout of my form from left to right, from top to down.
- buttonA, buttonB, buttonC
- textbox, textbox, textbox
- buttonXXX
After the user types in the textboxes and press enter (with the cursor still
in one of the textboxes), buttonXXX should be pressed by default.(the user
is too lazy to take the cursor over to buttonXXX and click).
The problem is the top/left most button (button A) gets pressed which annoys
them to death. So I tried to do this.
In the bottonA's onfocus event handle-
document.forms[0].elements['buttonXXX'].focus() .
Result: ButtonXXX receives focus alright, but the code for buttonA still
executes!
For those who have been using Outlook Express, you must be pretty used to
the fact that whenever you focus on the preview section, the header for the
preview turns from grey to blue, while the text turns from black to white.
Code:
I'm fairly new to this and my code is as follows...
<script language="JavaScript>
var oldValue
function focusElement(theElement) {
oldValue = theElement.value;
return;
}
</script>
Then in the HTML, I have
<select size="1" id="ConfCommentSELECT" name="ConfCommentSELECT"
onfocus="return focusPrecedence(this);">
<option value="0"> - </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
The <select> is with a <form><tr><td>, but I don't see how that would make a
difference. I started using the onchange="return blah-blah-blah(this);" and
that worked so I copied that to the onfocus. What I want to do is to
remember the value of the contents of the <select> before the user changes
it, and compare it to the new value.
This HTML and CSS:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>onfocus tooltips</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
div.tooltip,div.heretooltip {
font:0.7em verdana,helvetica,arial,sans-serif;
border:1px solid #000;
background-color:#ffffe1;
color:#000;
padding:2px 4px 2px 4px;
text-align:left;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=1);
position:absolute;
width:auto;
height:auto;
}
div.heretooltip {
border:1px solid #003;
background-color:#fefefe;
color:#003;
}
-->
</style>
</head>
<body>
<script type="text/javascript" src="tooltips.js"></script>
<p>Use the TAB and Shift-TAB keys to navigate this list.</p>
<ul>
<li><a href="/" title="Home Page" tabindex="10">Home</a>
<ul>
<li><a href="/sitemap.php" title="A guide to the areas of this website" tabindex="20">Sitemap</a></li>
<li><a href="/preferences.php" title="Change the design scheme and functionality" tabindex="30">Preferences</a></li>
<li><a href="/brothercake.php" title="About this site and its webmaster :)" tabindex="40">About brothercake</a></li>
</ul>
</li>
</ul>
</body></html>
And this in tooltips.js
// global vars
var i, pos, obj, tempObj, tempEle, winSize, extent, scrollHeight;
//toolTip object
var toolTip = null;
var toolTipParent = null;
//find object position
function getRealPos(ele,dir)
{
(dir=="x") ? pos = ele.offsetLeft : pos = ele.offsetTop;
tempEle = ele.offsetParent;
while(tempEle != null)
{
pos += (dir=="x") ? tempEle.offsetLeft : tempEle.offsetTop;
tempEle = tempEle.offsetParent;
}
return pos;
}
//delay timer
var goTip = false;
var goTimer = null;
function focusTimer(e)
{
//second loop
if(goTimer != null)
{
//clear timer
clearInterval(goTimer);
goTimer = null;
//pass object to create tooltip
focusTip(e);
}
//first loop
else
{
//get focussed object
(e) ? obj = e.target : obj = event.srcElement;
//pass object back through timer
tempObj = obj;
//set interval
goTimer = setInterval('focusTimer(tempObj)',400);
}
}
//create tooltip
function focusTip(obj)
{
//remove any existing tooltip
blurTip();
//if tooltip is null
if(toolTip == null)
{
//get window dimensions
if(typeof window.innerWidth!="undefined")
{
winSize = {
x : window.innerWidth,
y : window.innerHeight
};
}
else if(typeof document.documentElement.offsetWidth!="undefined")
{
winSize = {
x : document.documentElement.offsetWidth,
y : document.documentElement.offsetHeight
};
}
else
{
winSize = {
x : document.body.offsetWidth,
y : document.body.offsetHeight
};
}
//create toolTip
toolTip = document.createElement('div');
//add classname
toolTip.setAttribute('class','');
toolTip.className = (obj.className == 'youAreHere') ? 'heretooltip' : 'tooltip'
//get focussed object co-ordinates
if(toolTipParent == null)
{
toolTipParent = {
x : getRealPos(obj,'x') - 3,
y : getRealPos(obj,'y') + 2
};
}
// offset tooltip from object
toolTipParent.y += obj.offsetHeight;
//apply tooltip position
toolTip.style.left = toolTipParent.x + 'px'
toolTip.style.top = toolTipParent.y + 'px'
//write in title attribute (with 'you are here' string)
toolTip.innerHTML = (obj.className == 'youAreHere') ? obj.title + ' <b>[You Are Here]</b>' : obj.title;
//add to document
document.body.appendChild(toolTip);
//restrict width
if(toolTip.offsetWidth > 300)
{
toolTip.style.width = âÆpx'
}
//get tooltip extent
extent = {
x : toolTip.offsetWidth,
y : toolTip.offsetHeight
};
//if tooltip exceeds window width
if((toolTipParent.x + extent.x) >= winSize.x)
{
//shift tooltip left
toolTipParent.x -= extent.x;
toolTip.style.left = toolTipParent.x + 'px'
}
//get scroll height
if(typeof window.pageYOffset!="undefined")
{
scrollHeight = window.pageYOffset;
}
else if(typeof document.documentElement.scrollTop!="undefined")
{
scrollHeight = document.documentElement.scrollTop;
}
else
{
scrollHeight = document.body.scrollTop;
}
//if tooltip exceeds window height
if((toolTipParent.y + extent.y) >= (winSize.y + scrollHeight))
{
//shift tooltip up
toolTipParent.y -= (extent.y+obj.offsetHeight+4);
toolTip.style.top = toolTipParent.y + 'px'
}
}
}
function blurTip()
{
//if tooltip exists
if(toolTip != null)
{
//remove and nullify tooltip
document.body.removeChild(toolTip);
toolTip = null;
toolTipParent = null;
}
//cancel timer
clearInterval(goTimer);
goTimer = null;
}
window.onload = function()
{
if(typeof document.getElementsByTagName!="undefined")
{
//get tags collection
var allTags = document.getElementsByTagName('*');
var allTagsLen = allTags.length;
for (var i=0;i<allTagsLen;i++)
{
//if tag has title attribute
if(allTags[i].title)
{
//attach event
allTags[i].onfocus = focusTimer;
allTags[i].onblur = blurTip;
allTags[i].onmouseover = blurTip;
}
}
}
}
