|
JavaScript - Javascript Hashmap-like Functionality?
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! Similar TutorialsLooking 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 ? 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> 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? 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>
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&v=1.0&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&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>
A little difficult to explain, but here goes: I've combined a couple different jquery scrollable functions to a webpage that I'm creating. This: http://flowplayer.org/tools/demos/sc...one-sized.html for my horizontal scrolling. And this: http://flowplayer.org/tools/demos/sc.../vertical.html for my vertical. The problem with the vertical scrolling function is that it relies on the mousewheel and mouse clicks for scrolling and I don't feel it's immediately apparent that the text scrolls. But I really like the effect, so I've added arrows and tried to get the functionality from the vertical scrolling example, but it's not working, except for the down arrow in the content in the very last tab. When you click on an arrow, it currently takes you to the previous or next horizontal section. I know the answer is in there somewhere, but I'm not sure where to look for it. Here's the javascript file that controls the functionality: http://www.chevalia.net/js/jquery.tools.min.js And the link to the page: http://www.chevalia.net/chevalia/index2.html The CSS for the scrollable: Code: #flowtabs {
/* dimensions */
width:425px;
height:31px !important;
margin:0 !important;
padding:0;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}
/* single tab */
#flowtabs li {
float:left;
margin-left:7px;
padding:0;
text-indent:0;
list-style-type:none;
}
/* a- tag inside single tab */
#flowtabs li a {
display:block;
height: 31px;
padding:30px 12px 10px 0;
margin:0px;
/* font decoration */
text-align:center;
text-decoration:none;
}
/* style for horizontal flow */
#flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;}
#flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;}
#flowpanes ul li {float:left; display:block; width:924px;}
/* style for vertical flow */
/* root element for scrollable */
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 450px;
width: 611px;
}
/* root element for scrollable items */
.vert_items {
position:relative;
width: 600px;
float:left;
/* this time we have very large space for height */
height:5000em;
margin: 0px;
}
.actions {
width:15px;
height:auto;
float: right;
margin:auto;
}
.actions a {
cursor:pointer;
}
.nextPage {
float:right;
margin-top:38px;
}
.prevPage {
float:right;
margin-top:200px;
}
Anyone care to take a stab at this puzzle? Many thanks in advance. 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!! In homePage(1 photo) and in Gallery(9 photos) at http://www.pafos-wedding.com/ I setup mouse rollover functionality > bigger photo...but bigger image appear below smaller...what to do appear next to smaller, so top side of both photos are on same line? I'm building a shop and would like to have some sort of mix and match functionality where the visitor can match tops and bottoms. Anybody have any ideas as to how I would maybe build something like this? Is there a plugin already out there for something similar to this by any chance? I guess something like Abercrombie's site but instead I'd have two rows: one for the tops and one for the bottoms. I am using the following javascript on the target page to open it as top location from within an iframe, which is working ok. Code: <script type="text/javascript">
if(self!=top) {
top.location.href=location.href
}
</script>
However my problem occurs when the user uses the browsers back arrow to return to the previous page, the script executes again returning them once more to the page they have come from. Is anyone aware of a work around to this problem as it would seem there isn't one? perhaps even a better solution for opening the target page from the iframe as top location. This is really causing confusion for users, and I really need to get the issue fixed. Thanks for any assist. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... |
|||||||