|
JavaScript - Script Similar To Picture Cube?
I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal?
Thanks for any help! Similar TutorialsHi, I need to allow some other websites to show certain portions of my website as though it were part of theirs. Simplest way would be in an iframe, but I would prefer to make the content available similar to the google map api where something like this is included in the header:- Code: <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=blahblahblah" type="text/javascript"> </script> and in the body something like this:- Code: <div id="map" style="width: 740px; height: 520px; margin: 5px 0px 20px 0px; padding: 5px; border: 3px solid #FFDD00;"></div> So I am guessing that something in the file being called in the src of the script tag is replacing the div with id="map" with other contents. Can someone give me a simple example of doing this? Thanks. On this website: http://evancoleman.net/index.php I really like on the top how the menu has like 5 or 6 icons, and when you hover over them it shows a bubble with the name in them. Does anybody know where I can find this script? Thanks. hi all, i wanna make a 3d cube made of images (like this one: http://www.petitpub.com/labs/media/flash/3dcube/). it should rotate by itself randomly in various directions and stop on demand. does anyone know where to find a prototype or tutorial for that? thanx, Hello everyone I have this grand idea of creating a website and on it would be a large cube that, when one clicks and drags a corner, the cube would rotate in correspondence to the direction one drags his/her mouse and displays the other sides of the cube. I'm a total beginner in Javascript so I don't know where to start out! Should I first make the cube in a 3-D model rendering program such as Blender? Or Photoshop? Etc. All help is appreciated. So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code:
<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
Hi All, I am very new at this and do not have any script editing skills. I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited. However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load. The pictures URL is correct, thus my dilemma! I don't know what else to do.... Copy of script bellow <script type="text/javascript"> // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg'] ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg'] ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg'] ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg'] ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg'] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="540px" //set to width of LARGEST image in your slideshow var slideheight="412px" //set to height of LARGEST iamge in your slideshow var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="no" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> I cant seem to get the top picture carousel to work i think this is my problem but Im not sure what in th coding needs to change: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:17 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:28 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js Hello! A client of mine wanted a picture slideshow like this website. http://themeforest.net/item/dark-atl..._preview/50415 I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this. Can anyone help? I did find this: http://sorgalla.com/jcarousel/ but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated Kristen http://www.twitter.com/kris10ized This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Thread Closed
Hello all i need to be able to make small peace of js code that the user can drag to is IE browser and then invoke it on the page . Hello, I have the code in the annexe wich is working but grossly redondant, clearly, I would like to have only one function toggleEditor(), that would manage the global variables editInstance with a parameter or something equivalent to avoid having 2 twin like functions. Thanks for your suggestions. HJS Annexe : Code:
<html>
<body>
<script src="../flovinax.js" type="text/javascript"></script>
<script>
var editInstance= null;
function toggleEditor1(edtN) {
if(editInstance===null) {
editInstance = new flovinaxa({fullPanel : true}).panelInstance(edtN);
} else {
editInstance.removeInstance(edtN);
editInstance= null;
}
}
var editInstance2= null;
function toggleEditor2(edtN) {
if(editInstance2===null) {
editInstance2 = new flovinaxa({fullPanel : true}).panelInstance(edtN);
} else {
editInstance2.removeInstance(edtN);
editInstance2= null;
}
}
</script>
<div>
<textarea style="width: 800px; height: 200px;" id="myArea"></textarea>
<br />
<button onClick="toggleEditor1('myArea');">+</button>
</div>
<div style="clear: both;"></div>
<div>
<textarea style="width: 800px; height: 200px;" id="myArea2"></textarea>
<br />
<button onClick="toggleEditor2('myArea2');">+</button>
</div>
<div style="clear: both;"></div>
</body>
</html>
I would like to ask people's opinions as to which "offline" language is most similar to javascript? I don't program for a living, but I have been learning javascript in my spare time. I would now like to have a shot at making a desktop application, and I think it would help to choose one which is most similar, if at all possible, to javascript? e.g. python, ruby, C#, visual basic ... I have no idea and haven't had much luck googling this Thanks Matt I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this: http://www.myeloma.org.uk/ any guides on how to do this? help much appreciated So what I'm actually refering to is something similar to facebooks sign up page. Where you have a form and you start typing the name of a high school or college and they automatically match what your typing in a drop down window. Here's an example pictu Any help pointing me in the right direction would be outstanding. Also I am pretty sure this is javascript, so I figured this was the right section for it. Thanks in Advance, Ryan Hi There, I really need your help. I am aware that there is no isDate() function for javascript, however, how could one check a date against a validator to ensure that the date entered is either returned true or false the date format that I would like to check would consist of the dd/mm/yyyy so essentially: isDate("12/01/2012") would return as true isDate("N/A") = would return as false I have searched high and low and am counting on the experts on this forum for some major help. A huge thanks in advance and I really appreciate everything. Cheers, Jay http://www.premierleague.com/page/Ga...047853,00.html
I have created a program that works great but sometimes it does not finish. It is the exact same as the one we see in this forum when you want to insert an image into a forum post. The program takes in a users image url through prompt, then regenerates the information within the textbox with [img] tags. The problem is I try to do this once and it will work great, but then I will try it again and fill out all of the information the exact same way and nothing happens. By nothing happens I mean after I hit enter the text box will remain empty with no regenerated code. But if I do a page refresh it works. That leads me to believe there is nothing wrong with my code b/c I do it once and get a sound result, then again and get nothing. Anyone have any experience with broken programs like this before or any words of advice? PHP Code: <script language="javascript"> function imgGenerator(){ var question=confirm("Share a Picture?"); if (question==true){ var obj=document.getElementById("mngl-board-post-input"); var imgurl = prompt('To Share an image paste the image url here \nSupport .jpg .jpeg .gif .bmp and .png'); if (imgurl == "" || imgurl == null) {return false;} var txt=document.createTextNode("[a][img]"+imgurl+"[/img][/a]"); obj.appendChild(txt); } else {} } </script> PHP Code: <a href="javascript:void(0);" onClick="imgGenerator();"><img src="http://instride.org/images/image.png" alt="Share an Image" /></a> Hello Coding Forums, I am working on building a watch app for the Pebble smartwatch that works in combination with a Bluetooth light bulb that could trigger on and off functionality. I have bits of the source code from a the same bulb project someone started from another site that is coded Java, so I imported them into cloud pebble their java library. I've been working on this since last year and I'm wondering what at all could I be doing wrong. I get the "cards" to show up, but as far as a connection to the bulbs I have not established that yet. I've attached my source code and if anyone has any time to give me some pointers that would be appreciated massively. I know that Hubble worked on a similar project, to control lighting from a pebble smartwatch so I know it can be done. I've even tested this code with other developers who are experienced and they are also wondering why the connection does not take place. It would be really neat if I got this to work. Thank you everyone. Attached Thumbnails The code I will am including is far from finished, but some of what I do have works (the "submit" code does not work yet). I am able to prevent certain kinds of input including Shift-Ins pasting, but Ctrl-v pasting still works (and I do not want it to). Could you please tell/show me what code needs to be entered to my existing functions, or what new function I need to create (and call from my existing functions) to eliminate any kind of CtrlKey input? Thanks in advance, mitchellA <code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Mitchell's Test Form </title> <meta name="Generator" content="Alleycode HTML Editor"> <meta name="Description" content="Your description here..."> <meta name="Keywords" content="Your keywords here..."> <script type="text/javascript"> function is_it_A (e) {// allows only a-z, A-Z, <backspace>, <space>, apostrophe, and hyphen var a; document.all ? a = e.keycode : a = e.which; return ((a > 64 && a < 91) || (a > 96 && a < 123) || a == 8 || a == 32 || a == 39 || a == 45); } function is_it_P (w) {// allows only a-z, A-Z, 0-9, <backspace>, hyphen, and underscore var p; document.all ? p = w.keycode : p = w.which; return ((p > 47 && p < 58) || (p > 64 && p < 91) || (p > 96 && p < 123) || p == 8 || p == 45 || p == 95); } function is_it_N (i) {// allows only 0-9, <backspace> var n; document.all ? n = i.keycode : n = i.which; return ((n > 47 && n < 58) || n == 8); } function is_it_T (p) {// allows only 0-9, <backspace>, <right & left brackets()>, and hyphen var t; document.all ? t = p.keycode : t = p.which; return ((t > 47 && t < 58) || t == 8 || t == 40 || t == 41 || t == 45); } function is_it_E (m) {// allows only 0-9, a-z, A-Z, <backspace>, hyphen, <period (.)>, <at (@) sign>, and underscore var e; document.all ? e = m.keycode : e = m.which; return ((e > 47 && e < 58) || (e > 64 && a < 91) || (e > 96 && a < 123) || e == 8 || e == 45 || e == 46 || e == 64 || e == 95); } function xA (str) { return str.replace (/[^a-z\'\-\ ]/gi,""); } function xN (str) { return str.replace (/[^0-9]/gi,""); } function xT (str) { return str.replace (/[^0-9\(\)\ ]/gi,""); } function xE (str) { return str.replace (/[^a-z\0-9\-\_\.\@\_]/gi,""); } function validateFormOnSubmit (theForm) { var f=document.forms["theForm"]["fname"].value var l=document.forms["theForm"]["lname"].value var p=document.forms["theForm"]["pwd"].value var e=document.forms["theForm"]["eml"].value if (f==null || f=="") { fld.style.background = "red"; alert = ("Please enter your First Name."); return false; } else if (l==null || l=="") { fld.style.background = "red"; alert = ("Please enter your Last Name."); return false; } else if (p==null || p=="") { fld.style.background = "red"; alert = ("Please enter your Password."); return false; } else if (e==null || e=="") { fld.style.background = "red"; alert = ("Please enter your e-mail address."); return false; } else { fld.style.background = "white"; } } </script> </head> <body> <CENTER> <FORM name="theForm" onsubmit="return validateFormOnSubmit ()"> <H1>Please supply the following data...</H1> <br /> <FONT size="5"> <label for="fname">First Name: </label><INPUT type="text" onkeypress="return is_it_A(event)" onblur="this.value=xA(this.value)" name="firstname" id="fname"><br /> <br /> <label for="lname">Last Name: </label><INPUT type="text" onkeypress="return is_it_A(event)" onblur="this.value=xA(this.value)" name="lastname" id="lname"><br /> <br /> <label for="pwd">Password: </label><INPUT type="text" onkeypress="return is_it_P-(event)" onblur="this.value=xA(this.value)" name="password" id="pwd"><br /> <br /> <label for="eml">E-mail Address: </label><INPUT type="text" onkeypress="return is_it_E(event)" onblur="this.value=xA(this.value)" name="email" id="eml"><br /> <br /> <input name="info" type="submit" value="Done>>"> </font> </CENTER> </FORM> </body> </html> </code> |
|||||||