JavaScript - Can't Hide A Selector/ Appends On Reload?

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?

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

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

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

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>
&nbsp;</p>
<p>
&nbsp;</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]

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

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,

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!

Overview
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

This is my dilemma and I am not sure if I am handling the right way, so please suggest a new way or provide a valid answer so that I may achieve my goal. Thanks in advance for your help in solving this matter.

In short I have a single "A.html" page that uses AJAX to reload in "B.php" into a <DIV id='bDiv'> every second and "C.php" into another <DIV id='cDiv'> with no reloading.

The code in B.php generates a random number between 1 and 100.
If the number generated is less than 10, I want <DIV id='cDiv'> to refresh its content.

I have tried a number of tricks, I could not find anything in jQuery so if there is please point me to the correct function calls.

This is pretty much my first really useful script that I wrote myself. I am trying to load a different index.html page for each different screen size that the browser has. So the page looks best at different resolutions. I am not really able to test it since I haven't finished building all the different resolution index pages yet. I am just wondering if anyone sees any glaring errors in my coding.

This is my script:
Code:

    <script src="javascript/stndlibrary.js">
	var screendim=getWindowSize();
	var screenwidth=screendim[0];
	var screenlength=screendim[1];
	var screenw=new array(640,800,1024,1280,1400,1600,2048); //Array for standard screen widths 
	var screenh=new array(480,600,768,1024,1050,1200,1536);  //Array for standard screen heights
	var indexfilename=new array('vga','svga','xga','sxga','sxgap','uxga','qxga'); //Array for filenames for different pages for each screen size
	for (i=0;i<=6;i++);
	}
	if (screenwidth <= screenw[i]) && (screenlength <= screenh[i]);
	  {
	    window.location.replace('http:\\perezcomputer.com\'+indexfilename[i] + 'index.html');
	    break;
	  }
	}
	</script>

The stndlibrary.js file contains the function I wrote to fetch the screen width and height that will be passed back to the script. that function is he
Code:

function getWindowSize() {
if (window.innerWidth)
 	theWidth=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
	 theWidth=document.documentElement.clientWidth;
else if (document.body)
 	theWidth=document.body.clientWidth;

if (window.innerHeight)
 	theHeight=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
	 theHeight=document.documentElement.clientHeight;
else if (document.body)
	 theHeight=document.body.clientHeight;
return [theWidth, theHeight]
     }

Please be gentle I am a nOObi...

Hi guys

I kinda needed help on jQuery/ javascript..

Here's the test page..

http://development.andrewfopalan.com/devpage/test.html#

what I'm trying to do is like this..

http://trailers.apple.com/trailers/s...bandofmisfits/

the movie box...

so far, I have made the cosmetics.. but the thing I was going to ask was..

when you click on the down arrow.. a popup dropdown list is going to show.. the problem is I am copying the same effect as the one with apple..

when you click outside of the popup dropdown list, the dropdown list should be fading out... but it wouldnt...

I tried using doing.. it like this

Code:

$("#wrap" ).click(function () {
	$(".dropdown").fadeOut();
	
	});

but the problem is.. whenever I click the down arrow button.. it continues to fadeout.. as soon as it fadesin...

how should I do this? please guide me..

everything works just fine.. just this one.. I am really lost.. i

the whole jquery code is in the page sirs... please help me

pretty new to javascript/jquery..