JavaScript - Trying To Add Vertical Scrolling Functionality To Jquery Scrollable Tools

Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript.

Thank you;
Ice

Looking for this.
In PS you press CTRL+T on new layer. 9 handles appears an then you can stretch/rotate/move that layer. Looking just for that stretch & rotate functionality with dotted/dashed retangle outline.
That is, there should be 8 handles on rectangle boundarys and then rectangle should be rotated & stretched via those points.
& moved via nineth center point.

Any that kind of js outthere ?

Hi all,

I need something analogous to Java's HashMap (or any kind of map, actually).

I have read in other forums that an Object() can be used as a map like this:

var object = new Object()
object.var1 = "blah";
object.var2 = anotherObject;

alert("This is how I can get the value: " + object.var1);

However, the way I see it this only works for static key-names. What if I need to have many dynamically-generated entries in the object? For example:

// this does not work the way I want it to
var key = "aaaaa";
object.key = anObject;

key = "bbbbb";
object.key = anotherObject;

when running this, instead of having something like:
object.aaaaa --> anObject
object.bbbbb --> anotherObject

I have:
object.key --> anotherObject

If you get the picture, how can I have a dynamically-generated hashmap-like entity with entries that are generated dynamically through a for-lopp for example?

Thanks!

I am trying to code a piece of JavaScript that queries the Internic for whois information (using either a domain or an IP address) and puts the results into a JSON object with separate fields for each piece of information.

Hi,
I want to make a button which if pressed works as if F11 key on keyboard is pressed.
For button html would be like this (I think)

<button type="button" onclick="some function">FullScreen</button>

Now I don't know what function would go in that onclick as I don't have the JS. One more thing that would be nice if the text 'FULLSCREEN' changes to 'NORMAL WINDOW' when the button is pressed, so that the user could realize that they have to press the same button again to get out of fullscreen, it would be like toggle at every click text changes from 'FULLSCREEN' to 'NORMAL WINDOW' and then if pressed again changing to 'FULLSCREEN'.

Hey, I have been using a tr onclick function in my tables to change the color of the most recently clicked row, it works fine.

I have recently added sorttable http://www.kryogenix.org/code/browser/sorttable/ to my table with the simple <table class="sortable">

Making the table sortable has overwritten my tr onclick functions, which are now dead. Any ideas/thoughts? Heres a quick sample of what it looks like:

Code:

<table class="sortable">
<thead><th scope="col">Header 1</th>
<th scope="col">Header 2</th></thead>
<tr onclick="doSomething(this);"><td>Some data</td><td>Some more</td></tr>
</table>

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;
            });
    });

I'm having a little bit of trouble with setting up a Google map to add markers for events venues.

The page is dynamically created using postcodes from a database which is why the code might look a little strange, but it's the only way I could find to make it work. However, I'm struggling to add any further functionality to the page.

As you will see from the code attached I would like to add buttons to reset the map to it's initial state, plus buttons to show only the "O" markers or the "E" markers. Also, I would ideally only like to see the "O" markers when the page first loads.

I know this is a lot to ask but could anyone please help.

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HPB Open days and Exhibitions Locator</title>
<style type="text/css">

html {
        
}
body {
        margin: 0;
        padding: 0;
        height: 100%;
		background-color:#000;
}
#map {
        width: 980px;
        height: 580px;
        z-index:1;
		position:relative;
		margin:25px auto;
}


.controls {
        background-color:#597681;
        padding:10px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.controls p {
        margin:0;
		padding:0;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext {
        position:absolute;
        top:10px;
        left:0px;
        width:425px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 {
        margin:0;
		padding:10px 20px;
		background-color:#000;
		color:#FFF;
		font-size:24px;
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-style:italic;
		font-weight:normal;
}

.introtext p {
        margin:0;
		padding:10px 20px;
		background-color:#BF443A;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 strong {
        font-weight:bold;
}

#postcode {width:150px; color:#999;}

</style>
        
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
function doBlur() {
	if (document.getElementById('postcode').value == '') { document.getElementById('postcode').value = 'Postcode'; document.getElementById('postcode').style.color = '#999'; }
};

function doFocus() {
	if (document.getElementById('postcode').value == 'Postcode') { document.getElementById('postcode').value = ''; document.getElementById('postcode').style.color = '#000'; }
};

function doSwitch() {
	if (document.getElementById('postcode').value == 'Postcode') {alert('Valid postcode required');} else {  usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint); }
};


</script>
  

</head>
<body>

<div id="map">

</div> 


      
<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();

var icon = new GIcon();
icon.image = "markers/yellow_MarkerO.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(10, 0);

var icon2 = new GIcon();
icon2.image = "markers/blue_MarkerE.png";
icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon2.iconSize = new GSize(20, 34);
icon2.shadowSize = new GSize(37, 34);
icon2.iconAnchor = new GPoint(10, 34);
icon2.infoWindowAnchor = new GPoint(10, 0);

var icon3 = new GIcon();
icon3.image = "http://www.google.com/mapfiles/marker.png";
icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon3.iconSize = new GSize(20, 34);
icon3.shadowSize = new GSize(37, 34);
icon3.iconAnchor = new GPoint(10, 34);




function usePointFromPostcode(postcode, callbackFunction) {
	localSearch.setSearchCompleteCallback(null, function() {
		if (localSearch.results[0]) {
			var resultLat = localSearch.results[0].lat;
			var resultLng = localSearch.results[0].lng;
			var anotherpoint = new GLatLng(resultLat,resultLng - 1.20000);
			var point = new GLatLng(resultLat,resultLng);
			callbackFunction(point, anotherpoint);
		}
		else 
		{
			alert("Postcode not found!");
		}
	});
	
	localSearch.execute(postcode + ", UK");
	
}

if (GBrowserIsCompatible()) {
	function createMarker(point,html) {
		var marker4 = new GMarker(point,icon);
		GEvent.addListener(marker4, "click", function() {
			marker4.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker4;
	}
	
	function createMarker2(point2,html) {
		var marker2 = new GMarker(point2,icon2);
		GEvent.addListener(marker2, "click", function() {
			marker2.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker2;
	}

	var map = new GMap2(document.getElementById("map"));
	
	map.setCenter(new GLatLng(53.80000, -8.41387), 6);
	map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));

}

else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}




function placeMarkerAtPoint(point, anotherpoint) {
	var marker3 = new GMarker(point,icon3);
	map.addOverlay(marker3);
	map.setCenter(anotherpoint, 8);
}
	
</script>

<script type="text/javascript">
$(document).ready(function(){
	$("#map").append("<div class='introtext'><div class='controls'></div></div>");
	$("#map > .introtext").prepend("<h2>Forthcoming <strong>shows</strong></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris eros, sollicitudin in rhoncus in, pharetra a lorem. Nunc semper lectus ut libero interdum ut pharetra ipsum mattis.</p>");
	$("#map > .introtext > .controls").append("<p>Find a show</p><input type='text' id='postcode' size='10' value='Postcode' onFocus='doFocus();' onBlur='doBlur();' /><input type='submit' value='Search' onClick='doSwitch();' id='yourlocation' /><input type='submit' value='reset' id='iliketoreset' /><input type='submit' value='set E' id='ionlywantex' />    <input type='submit' value='set O' id='ionlywantod' />");
});
</script>

<script type="text/javascript">
	var localSearchBH193HG = new GlocalSearch();
	
	localSearchBH193HG.execute("BH19 3HG, UK");
	localSearchBH193HG.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchBH193HG.results[0].lat,localSearchBH193HG.results[0].lng),'<h2>O Venue 1</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchSY79LT = new GlocalSearch();
	
	localSearchSY79LT.execute("SY7 9LT, UK");
	localSearchSY79LT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchSY79LT.results[0].lat,localSearchSY79LT.results[0].lng),'<h2>O Venue 2</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchRG46UT = new GlocalSearch();
	
	localSearchRG46UT.execute("RG4 6UT, UK");
	localSearchRG46UT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchRG46UT.results[0].lat,localSearchRG46UT.results[0].lng),'<h2>E Venue 1</h2>'));
	});	
</script>
	
<script type="text/javascript">
	var localSearchPE36GA = new GlocalSearch();
	
	localSearchPE36GA.execute("PE3 6GA, UK");
	localSearchPE36GA.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchPE36GA.results[0].lat,localSearchPE36GA.results[0].lng),'<h2>E Venue 2</h2>'));
	});	
</script>

</body>
</html>

http://mybestmaterial.blueeyedpandahosting.com/cep/1/

Works exactly as expected (and all the code is built into the source code view of the page.)

What happens is 2 timers are set up.

1 is running when user clicks the Start/Stop link.

The second is started when the user clicks the Laughter Start/Stop link.

So the sequence should be

User -- Start click

then after that -- laughter-start-stop click...

You will see both timers start running.

The laughter click will be clicked multiple times as the app is designed to time how much laughter a comedian or speaker is getting relative to the amount of time on stage.

So click the laughter start stop multiple times before clicking the START-STOP the last time.

Then a PAR score is generated - which is a simple percent of the time laughter happened, vs the time on stage.

The link above works like a charm.

THE PROBLEM is -- on my SPRINT TREO 700p ---

when I click the laughter start/stop click it stops all the timers.

I think for some reason the TREO won't allow the second NEW DATE() to be declared or something...

because when I comment those two lines out --- line 166 and 167 in Dreamweaver version of the file -- (if you copy full source into dreamweaver...)

Then the clicking doesnt' stop the main timer -- but it also doesn't work!!

ANY THOUGHTS on how to decloare the SCOPE fo the NEW DATE() so it only effects that one function?

OR any other suggestions?


Code pasted below

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Comedy Analyzer - Simple</title>
</head>
<script type="text/javascript">
	var flagclock = 0;
	var flagstop = 0;
	var stoptime = 0;
	var currenttime;
	var splitdate = '';
	var output;
	var clock;
		
	function startstop()
		{
		//var startstop = document.getElementById('startstopbutton');
		var startdate = new Date();
		var starttime = startdate.getTime();
		if(flagclock==0)
			{
			flagclock = 1;
			counter(starttime);

		
			}
		else
			{
			
					
				if(laughter_flagclock==1) {
					laughter_startstop();
				}	
	
			flagclock = 0;
			flagstop = 1;
			splitdate = '';
			
		//total laughter ===	running_total_laughter_time;
			//total time == 	running_total_time;
			var par_score = (Math.round(running_total_laughter_time/running_total_time*100))/100;
			var par_score_percent = par_score*100;
			//var par_score = running_total_laughter_time/running_total_time;
			laughter_output.value = "PAR SCORE = " + par_score_percent; 
			}
		}

var running_total_time;
	
	function counter(starttime)
		{
		output = document.getElementById('output');
		clock = document.getElementById('clock');
		laughter_output = document.getElementById('laughter_output');

		currenttime = new Date();
		var timediff = currenttime.getTime() - starttime;
		
		
		
		if(flagstop == 1)
			{
			timediff = timediff + stoptime
			}
		if(flagclock == 1)
			{
			clock.value = formattime(timediff,'');
			
			running_total_time = timediff;	

			refresh = setTimeout('counter(' + starttime + ');',10);
			
			}
		else
			{
			//start and stop the running counter while adding the values to the next deal.
			window.clearTimeout(refresh);
			stoptime = timediff;
			}
		}
		
	function formattime(rawtime,roundtype)
		{
		if(roundtype == 'round')
			{
			var ds = Math.round(rawtime/100) + '';
			}
		else
			{
			var ds = Math.floor(rawtime/100) + '';		
			}
		var sec = Math.floor(rawtime/1000);
		var min = Math.floor(rawtime/60000);
		ds = ds.charAt(ds.length - 1);
		if(min >= 60)
			{
			startstop();
			}
		sec = sec - 60 * min + '';
		if(sec.charAt(sec.length - 2) != '')
			{
			sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
			}
		else
			{
			sec = 0 + sec.charAt(sec.length - 1);
			}	
		min = min + '';
		if(min.charAt(min.length - 2) != '')
			{
			min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
			}
		else
			{
			min = 0 + min.charAt(min.length - 1);
			}
		return min + ':' + sec + ':' + ds;
		}
		
	function resetclock()
		{

		if(flagclock == 1)
			{
			//alert("if side of reset clock");
	
			var resetdate = new Date();
			var resettime = resetdate.getTime();
			
			counter(resettime);
			
			}
		else
			{
			//alert("ELSE side of reset clock");
			clock.value = "00:00:0";
			
	
		}
		flagstop = 0;
		stoptime = 0;
		splitdate = '';
		
		laughter_resetclock();		
		
		window.clearTimeout(refresh);
		output.value = '';
			
		
		}
</script>
<script type="text/javascript">
	var laughter_flagclock = 0;
	var laughter_flagstop = 0;
	var laughter_stoptime = 0;
	var laughter_currenttime;
	var laughter_splitdate = '';
	var laughter_output;
	var laughter_clock;
	var count = 0;
	
	function laughter_startstop()
		{
		
		var laughter_startdate = new Date();
		var laughter_starttime = laughter_startdate.getTime();
		
		if(laughter_flagclock==0)
			{

			laughter_flagclock = 1;
			laughter_counter(laughter_starttime);
			
			laughter_number_text = document.getElementById('laughter_number');
			count++;
			laughter_number_text.value = count;
			
			
			}
		else
			{

			
			laughter_flagclock = 0;
			laughter_flagstop = 1;
			laughter_splitdate = '';
			}
		}


var running_total_laughter_time;

	function laughter_counter(laughter_starttime)
		{
		laughter_clock = document.getElementById('laughter_clock');
		laughter_currenttime = new Date();
		var laughter_timediff = laughter_currenttime.getTime() - laughter_starttime;
		if(laughter_flagstop == 1)
			{
			laughter_timediff = laughter_timediff + laughter_stoptime
			}
		if(laughter_flagclock == 1)
			{
			laughter_clock.value = laughter_formattime(laughter_timediff,'');
			
			running_total_laughter_time = laughter_timediff;
			//laughter_output.value += "-- laughter -- "+running_total_laughter_time;

			laughter_refresh = setTimeout('laughter_counter(' + laughter_starttime + ');',10);
			}
		else
			{
			window.clearTimeout(laughter_refresh);
			laughter_stoptime = laughter_timediff;
			}
		}
		
	function laughter_formattime(laughter_rawtime,laughter_roundtype)
		{
		if(laughter_roundtype == 'round')
			{
			var laughter_ds = Math.round(laughter_rawtime/100) + '';
			}
		else
			{
			var laughter_ds = Math.floor(laughter_rawtime/100) + '';		
			}
		var laughter_sec = Math.floor(laughter_rawtime/1000);
		var laughter_min = Math.floor(laughter_rawtime/60000);
		laughter_ds = laughter_ds.charAt(laughter_ds.length - 1);
		if(laughter_min >= 60)
			{
			laughter_startstop();
			}
		laughter_sec = laughter_sec - 60 * laughter_min + '';
		if(laughter_sec.charAt(laughter_sec.length - 2) != '')
			{
			laughter_sec = laughter_sec.charAt(laughter_sec.length - 2) + laughter_sec.charAt(laughter_sec.length - 1);
			}
		else
			{
			laughter_sec = 0 + laughter_sec.charAt(laughter_sec.length - 1);
			}	
		laughter_min = laughter_min + '';
		if(laughter_min.charAt(laughter_min.length - 2) != '')
			{
			laughter_min = laughter_min.charAt(laughter_min.length - 2)+laughter_min.charAt(laughter_min.length - 1);
			}
		else
			{
			laughter_min = 0 + laughter_min.charAt(laughter_min.length - 1);
			}
		return laughter_min + ':' + laughter_sec + ':' + laughter_ds;
		}
		
	function laughter_resetclock()
		{
		//alert("laughter_resetclock called");
		if(laughter_flagclock == 1)
			{
			var laughter_resetdate = new Date();
			var laughter_resettime = laughter_resetdate.getTime();
			laughter_counter(laughter_resettime);
			}
		else
			{
			laughter_clock.value = "00:00:0";
			}
		laughter_flagstop = 0;
		laughter_stoptime = 0;
		laughter_splitdate = '';
	
		count = 0;
		laughter_number_text.value = count;
	
		window.clearTimeout(refresh);
		laughter_output.value = '';

		//window.clearTimeout(refresh);
		output.value = '';
		

			

		}
</script>
<body>
	Running Time :: <input id="clock" type="text" value="00:00:0" style="text-align: center;" size="14"readonly><br />
	Laughter Time :: <input id="laughter_clock" type="text" value="00:00:0" style="text-align: center;"size="14" readonly><br />
	Laugh Count :: <input id="laughter_number" type="text" value="0" style="text-align: center;" size="4" readonly><br />
	
	<div id="start_button"><a href="javascript:startstop();">Timing Start/Stop</a></div>
	

	<div id="laughter_start_button"><a href="javascript:laughter_startstop();">Laughter Start/Stop</a></div>
	
	
	<textarea id="laughter_output" style="height: 90%;" cols="40" rows="1"></textarea><br />
	
	<a href="javascript:resetclock();">Full-Reset</a><br /><br />

</body>
</html>

Hi all,

I have been using a border-fading script to give the impression of onmouseover fading underline, and I wish to tweak it a bit to give a slightly different effect

I have two scripts that do virtually the same thing, although the second has a display bug in FF both have their advantages and I don't have my heart set on using either one, although Vic's scripts are being used all over the page i'm creating so his has first dibs

here they are, and I will describe what I need to do below:
first script:
Code:

startColor = "FFFFFF"; // MouseOut link color 
endColor = "000000"; // MouseOver link color 

stepIn = 20; // delay when fading in 
stepOut = 30; // delay when fading out 

var fading=new Array();
fading['now']=startColor;

function initLinkFade() {
  var links = document.getElementById('pageHolder').getElementsByTagName('A');
  for(var i=0;i<links.length;i++){
    links[i].onmouseover = domouseover;
    links[i].onmouseout = domouseout;
    }
  }

if(document.getElementsByTagName){
  window.onload = initLinkFade;
  document.write("<style type='text/css'>#pageHolder a{text-decoration:none}</style>");
  }

function domouseover() { 
  var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
  if(target.nodeName!='A')return;
  for(var i=0;i<fading.length;i++) 
    clearTimeout(fading[i]);
  if(fading['el']!=target && fading['el']){
    fading['el'].style.borderBottom = "1px solid #"+startColor;
    linkFade(startColor,endColor,target,stepIn);
    }
  else
    linkFade(fading['now'],endColor,target,stepIn);
  } 

function domouseout() { 
  var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
  if(target.nodeName!='A')return;
  for(var i=0;i<fading.length;i++) 
    clearTimeout(fading[i]);
  if(fading['el']!=target && fading['el']){
    fading['el'].style.borderBottom = "1px solid #"+startColor;
    linkFade(endColor,startColor,target,stepOut);
    }
  else
    linkFade(fading['now'],startColor,target,stepOut);
  } 

function hex(i) { 
  var s=Math.floor(i).toString(16);
  return s.length==2?s:"0"+s;
  } 

function linkFade(s,e,element,step){
  fading['el']=element;
  var sr=parseInt(s.substr(0,2),16);
  var sg=parseInt(s.substr(2,2),16);
  var sb=parseInt(s.substr(4,2),16);
  var er=parseInt(e.substr(0,2),16);
  var eg=parseInt(e.substr(2,2),16);
  var eb=parseInt(e.substr(4,2),16);
  for(var i = 0; i <= step; i++) {
    var r=hex((sr*(step-i)+er*i)/step);
    var g=hex((sg*(step-i)+eg*i)/step);
    var b=hex((sb*(step-i)+eb*i)/step);
    fading[i]=setTimeout("fading['now']='"+r+g+b+"';fading['el'].style.borderBottom = '1px solid #'+fading['now']",i*step); 
    } 
  }

What I like about this one is that you can specify both the fade in and fade out speeds, allowing you a bunch of flexibility in how it looks also, I like how it allows you to set it to 'apply to all links in a given div... however that can have certain downfalls you can seethis script in action he www.enviromark.ca/head/YPP.htm
the second script
Code:

<!--
// by Vic Phillips (04-September-2006) http://www.vicsjavascripts.org.uk

function zxcMseOver(zxcobj,zxcd){
 var zxcp=zxcobj;
 if (!zxcp.oop){ return; }
 clearTimeout(zxcp.oop.to);
 zxcp.oop.d=zxcd||0;
 zxcp.oop.cng();
}

function zxcInit(zxccls,zxccol1,zxccol2,zxcstps){
 var zxclks=document.getElementsByTagName('BODY')[0].getElementsByTagName('A');
 for (var zxc0=0;zxc0<zxclks.length;zxc0++){
  if (zxclks[zxc0].className==zxccls){
  zxcStyle(zxclks[zxc0],{borderBottom:'solid '+zxccol1+' 0px;'});
  zxclks[zxc0].oop=new zxcOOP(zxclks[zxc0],zxccol1,zxccol2,zxcstps);
  }
 }
}

var zxcCnt=0;

function zxcOOP(zxcd,zxccol1,zxccol2,zxcstps){
 this.obj=zxcd;
 this.ary=zxcSTxtColors([zxccol1,zxccol2],zxcstps||10);
 this.cnt=0;
 this.d=1
 this.to=null;
 this.ref='zxcoop'+zxcCnt;
 window[this.ref]=this;
 zxcCnt++;
}

zxcOOP.prototype.cng=function(){
 if ((this.d>0&&this.cnt<this.ary.length-1)||(this.d<0&&this.cnt>0)){
  this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px';
  this.setTimeOut("cng();",100);
 }
 else if (this.d<0) {
  this.obj.style.borderBottom='0px';

 }
}

zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){
 this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}



function zxcStyle(zxcele,zxcstyle){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 return zxcele;
}


function zxcSTxtColors(zxcc,zxcnu){
 var zxcary=[];
 zxcc1=zxcc[0].replace('#',''); zxcc2=zxcc[1].replace('#','');
 var zxcr=zxcHexToInt(zxcc1.substring(0,2));
 var zxcg=zxcHexToInt(zxcc1.substring(2,4));
 var zxcb=zxcHexToInt(zxcc1.substring(4,6));
 var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
 var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
 var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
 var zxcrstep=Math.round((zxcr2-zxcr)/zxcnu);
 var zxcgstep=Math.round((zxcg2-zxcg)/zxcnu);
 var zxcbstep=Math.round((zxcb2-zxcb)/zxcnu);
 for (zxc0=0;zxc0<zxcnu;zxc0++){
  zxcary[zxc0]=zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
  zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
 }
 zxcary[zxcnu-1]=zxcc[1].substring(1);
 return zxcary;
}

function zxcIntToHex(zxcn){
 zxcn=(zxcn>255)?255:(zxcn<0)?0:zxcn;
 var zxcresult=zxcn.toString(16);
 if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
 return zxcresult;
}

function zxcHexToInt(zxchex){
 return parseInt(zxchex,16);
}


//-->

activated by:
<body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);">
...
<a class="mainLinks" href="#advantagesRisks" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a>

I like this script because it allows you to set the fade on a per-link basis, not on a per-div basis... more control
alrighty, here are the minor modifications I am hoping to get help with The fade-out effects stop when a second link is onmouseover'd. I would like to be able to set both the fade-in and fade-out delays (like in the first script), but have the fade-out continue for "Link A" even if "Link B" is onmouse'd over. Basically getting the smooth-fade effect seen he www.enviromark.ca/head/ --> the gray icons. When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked. When another link is clicked, I would like it's top border to fade in (like the first link) a have the first link's top border fade out. Again you can see the effect I'm going for at the link above by clicking on a few of the vertical links and seeing it's effect on the horizontal images
I know this might be a lot to ask, so I suppose I could live with the script I have... but I figured there was no harm in asking

Hey, I was talking to a coding friend about some work I have and he thought some JavaScript or JQeury would be able to help me out. However I really have no idea where to begin.

In it's simplest form, I want to have a button on a page that can pause and play an embedded YouTube video. I believe YouTube has customizable API's but this button needs to be separate from the video itself.

Why does it need to be separate? Because I want the button to exist by itself on one webpage, and the YouTube video to exist by itself on a second webpage.

So the idea is that I can be looking at my computer in one corner of the room and my friend can be looking at his, and I can pause the video he's watching from where I'm sitting.

...any ideas?

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

Hello Everyone,

I am in the process of creating a billboard script for our company front page which will switch between two images. I am using the following script as a base: http://tympanus.net/codrops/2009/12/...query-and-css/

I am eager to learn coding, but am still a novice at it so I was wondering if anyone could assist me with adding the following functionality:

1. Rather than (or perhaps in addition to) having the two images change based on a timer, I'd like to be able to insert a "next" arrow. Therefore I will need assistance in coding a button to change the images from "ad_1" to "ad_2" which is currently done automatically by the interval timer

2. I'd like to make the images clickable with unique destinations (so when you click on "ad_1" it will take you to "link 1", "ad_2" will take you to "link 2"

Below is my current code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Rotating Billboard with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
    </head>
    <body>
        <div class="palmtrees"></div>
        <div class="powerline"></div>
        <div class="city"></div>
        <div class="container">
            <div class="ad">
                <div id="ad_1" class="ad_1">
                    <img class="slice_1" src="ads/ad1_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad1_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad1_slice03.jpg"/>

                </div>
                <div id="ad_2" class="ad_2">
                    <img class="slice_1" src="ads/ad2_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad2_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad2_slice03.jpg"/>

                </div>
            </div>
        </div>
        <div class="billboard"></div>
        <a class="back" href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/"><a>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script>
$(function() {            
    $('#ad_1 > img').each(function(i,e){
        rotate($(this),500,10000,i);
    });
    function rotate(elem1,speed,timeout,i){
        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
            var other;
            if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
            else
                other = $('#ad_1').children('img').eq(i);
                other.animate({'marginLeft':'0px','width':'266px'},speed,function(){
                var f = function() { rotate(other,speed,timeout,i) };
                setTimeout(f,timeout);
            });
        });
    }
});
        </script>
    </body>
</html>

And here is a working example: http://www.santamarinas.com/RS/Tests/Billboard/

Thank you in advance for your help!!

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