|
JavaScript - Jquery Selector Legal Or Not
I have been using the following html & have tested it cross-browser with no malfunction
Code: <a href="#quicklinks" name="modal">Quick Links</a> <a href="#Login" name="modal">Login</a> js part Code: //select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//using href as id (already defined in CSS)
$(id).fadeIn(2000);
Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him Quote: Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name. Plz guide me Similar TutorialsOverview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt Hi all, I just tried this: (value == true) ? if_true_func() : if_false_func(); The idea being if "value" is true, then the "if_true" function is executed otherwise it execs the "if_false" function. I tried it on a hunch and it worked! But is it legal code or am I fooling myself? Thanks. -- Roger Hi all, I've noticed that setTimeout seems to return a simple integer as it's "id" which can be used to clear the timeout ahead of time. So, in order to have multiple setTimeouts called (which requires the previous one to be cleared before the next one is called), I simply did this: Code: clearTimeout(setTimeout(function() {
/* some code */
}, 1000) -1);
Note the "-1"... each time this code is called, it starts a new setTimeout and clears "instance-1" which is supposed to be the previous instance. The idea is that this block can be called hundreds of times, and when the calling finally stops, the inner code is executed 1 second later. This SEEMS to be working (yes, even in MSIE!). Question is, am I fooling myself? Is this wrong? If so, what's the right way to do it? Thanks... -- Roger (btw, the actual use of this is dynamic resizing of a DIV by dragging the corner with the mouse.... I want the actual PX size to display live while resizing, then after resizing stops, the size display goes away 1 second later... in case you were wondering). Hi all, I wrote a little live clock in JS (using Steve Levithan's "date format" code) that formats the time display according to a format string. I then find all elements by classname and search for a classname of "clock" and write the clock string to the innerHTML of every element I find. But recently I added another "feature". Rather than hard code a format string, I instead pass it in ID. Example: <span class="clock" id="hh:mm:mm tt"></span> ..and the JS: Code: var doClock = function () {
var now = new Date();
var e = getElementsByClassName('clock');
var i = e.length;
while (i--) {
e[i].innerHTML = dateFormat(now, e[i].id, false);
}
}
Note that I am passing the clock FORMAT STRING by using the span's ID. It works great... question is, is it HTML LEGAL to do this? Thanks! -- Roger So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... I have a series of hand-made arrays each of which has many elements, eg Code: var BlobI = new Array("id1","id2","id4",..."id32");
var Blob2 = new Array("id1","id3","id5",.."id31");
and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element: Code: function noBlob (arrayA,visibility,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var blob = document.getElementById(arrayB[current]);
blob.style.visibility = visibility;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}
If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array. What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script. Is this possible? eg, if using YASS (http://yass.webo.in/), something like: Code: var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))
Has any one experience with either engine? Can anyone tell me what I have done wrong here? I have the following html code Code: <div id='group1'>
<tr class='time'>
<td colspan='3' name='1262815200'></td>
</tr>
<tr>
<td class='timeleft group1' name='1262815200' colspan='3'></td>
</tr>
<tr class='game'>
<td><input type='radio' name='G1' value='NYJ'>NYJ</td>
<td><input type='radio' name='G1' value='BUF'>BUF</td>
<td><select name='G1P' class='points' tabindex = '1'></select></td>
</tr>
</div>
and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks. i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8. Code: <link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" /> <link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" /> <link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" /> <link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" /> <link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" /> Code: <script type="text/javascript">
<!--
function changeStylesheet(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it
else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it
}
}
function selectLarge(){
changeStylesheet("large");
}
selectLarge();
// -->
</script>
The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript). For these settings, all browsers display the default (or normal?) stylesheet without the script. When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run. Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!). I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks Long story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example... X = hidden image not scrolled into view O = image in line of sight X - X - X - X - O - O - O - O - X - X - X - X Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance. Hi, the source code on the website below i want to know what do i need to change to get the date to show as dd/mm/yyyy instead of mm/dd/yyyy? http://www.nsftools.com/tips/DatePickerTest.htm thanks for your help Hi again Folks I had another learning bump I'm going to ask Well I can't seem to hide the selector that I'm supposed to hide.. well to see for yourselves here's the link..' http://dev.crownshipping.com.ph/single_update.html I have a list of boats.. and each one of them has details.. Code: <ul>
<li>boat1 details</li>
<li>boat2</li>
<li>boat3</li>
</ul>
initially the boat details are hidden... so when i click the boat a modal window pops up.. and a dialog where you can see the boat details.. during the first try.. everything is okay.. but when i close the modal window.. when i click another boat to view, the previous one that was not supposed to show.. were displayed.... I have tried hiding it.. by doing $('class name').hide();.. also I have tried setting the css again to display:none.. but still a no go.. I'm fairly new to javascript and jquery so please help me.. I have tried all that I have learned.. maybe there's a trick that i still don't know.. here's the js code.. hope someone can help me be easy on me.. i just started 2 days ago.. i'm on day 3 Thanks Code: $(document).ready(function() {
//select all the a tag with name equal to modal
$('a.modal').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag value to match with class name later
var id = $(this).attr('href');
//document.write (id);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//transition effect
$('.window').fadeIn(1000);
if(id=="" || id=="#")
{var check = "";
document.write ('no value!');}
else{
var check = '.' + id;
//document.write (check);
$(check).fadeIn();
}
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').fadeOut(1000);
// $('.window').hide();
});
});
I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery): http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out? Code: <?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Test 4</title>
<script type = "text/javascript">
function preload(){
images = new Array();
images[0] = new Image();
images[0].src = "image1.png";
images[1] = new Image();
images[1].src = "image2.gif";
images[2] = new Image();
images[2].src = "image3.png";
images[3] = new Image();
images[3].src = "image4.jpg";
images[4] = new Image();
images[4].src = "image5.gif";
}
function bloat(){
if(document.getElementById("image1").onMouseOver === true){
document.getElementById("main").src = "image1.png";}
else if(document.getElementById("image2").onMouseOver === true){
document.getElementById("main").src = "image2.gif";}
else if(document.getElementById("image3").onMouseOver === true){
document.getElementById("main").src = "image3.png";}
else if(document.getElementById("image4").onMouseOver === true){
document.getElementById("main").src = "image4.jpg";}
else(document.getElementById("image5").onMouseOver === true){
document.getElementById("main").src = "image5.gif";}
}
</script>
</head>
<body onLoad = "preload();" bgcolor = "orange"><center>
<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
<a href = "http://www.joystiq.com">
<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.engadget.com">
<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.amazon.com">
<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.newegg.com">
<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.smc.edu">
<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
</center></body>
</html>
so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page. i got everything formatted right however i think there is an error with my function. any insight fellas? thanks! Hi I have the code below. I am trying to get the radio button selector to highlight on mouseover and remain highlighted until focus is taken away from the highlighted selector. [CODE] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body > <div onmouseup="setBack(Radio1,1)" style="width:1000px; height:1000px"> <input id="Radio1" type="radio" name="RadioGroup" /><label id="lblRadio1" for="Radio1" title="Radio1" onmouseover="setBack(Radio1, 2)" >Radio1</label> <div onmouseup="setBack(Radio2, 1)" style="width:1000px; height:1000px"> <input id="Radio2" type="radio" name="RadioGroup" /><label id="lblRadio2" for="Radio2" title="Radio2" onmouseover="setBack(Radio2,2)">Radio2</label> </div> </div> <p> </p> <p> </p> <script type="text/javascript"> function setBack(rdo, area) { switch (area) { case 1: rdo.style.background = "White"; break; case 2: rdo.style.background = "Blue"; break; default: rdo.style.background = "White"; break; } } </script> </body> </html> [CODE] is it possible to reposition the ibeam cursor in a textarea. im using a button to insert stuff into a text area and then focus but i would like the selector to appear at a certain point. Thanks, Steve, |
|||||||