|
JavaScript - How To Create A Virtual Library With Javascript
I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me.
I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds. I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that? Thank you. Similar TutorialsFirst off I'm incredibly new to JavaScript and its likely I am going about this completely the wrong way. But gotta start somewhere. Also my apologise if I am posting in the wrong area. Here's my problem. I have setup a site in CSS3/XHTML that I will use to display some of my photography (im a keen photographer) The way my Gallery will work will be using Submenu's then there will be a table of Thumbnails which I have setup. The part I am stuck on is that I want people to be able to click the thumbnails and then the corresponding picture held in the next folder to be displayed in a CSS defined container in the center of the page. So clicking _Images/Thumbnails/1.gif will bring up _/Images/1.gif in the CSS container For the life of me I cannot work out how to do it though. Here is my code so far. HTML -> <td> <a onclick="newImage" href="nogoto"> <img src="_images/Thumbnails/1.png" align="left" width="47px" height="33px" alt="1" id="1"/> </a> </td> CSS -> #mainpage { color:#FFF; text-align:right; font-size:.7em; height:365px; width:529px; position:relative; top:25px; left:35px; } JavaScript -> window.onload = newImage(); function newImage() { document.getElementById(mainpage).innerHTML = "<script>background-image:_images/1.png;</script>" } Obviously I want to expand on this once it works but for now I would just like to get the images to appear correctly when clicked. Thank you so much in Advance if anyone can help. I am trying to create a virtual pet using javascript and HTML. the pet responds to the 2 buttons I have created on my page, and the text in the two boxes as well as the photo on the page changes depending on the state of the pet. I can't seem to get my buttons to work and I don't know what code I would use to change the picture of the pest. Any help would be appreciated. my file is attached as a .txt file. Hello, I am trying to create a virtual room painter where a user can choose from one of our photos and when they choose a certain wall color or finish, that color or finish will overlay overtop the chosen photo. I would also like an option where they can share or save the finished photo. Here is an example: Glidden Paint - Virtual Room Painter And Paint Color Visualizer | Glidden.com (I think that this will be done using javascript but I am not sure.) Thanks Reply With Quote 01-09-2015, 10:59 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts That Glidden version was done using Flash. Flash is going to be much better at something like this than JavaScript will. Essentially, if someone imports a photo and (say) designates a wall area to be repainted, you have to find the bounds of that area. How do you do that? Find adjacent pixels that are within some percentage of being the same color? Maybe. But what do you do if there is a corner in/on the wall? How do you detect that and make the part around the corner a separate area? etc. etc. etc. JavaScript *can* inspect individual pixels, but figuring out the edges of various shapes and colors in an image is not trivial. Hey guys! Was wondering if anyone knew a simpel javascript library? With things like alert ,displayDate() and other basic things. Im pretty new to JS so I think that a lib like jquery would be to hard for me right now. Thx // Kiwo Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does. For example jQuery allows you to write a string like this: $('li').add('p').css('background-color', 'red'); Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions. Right now its a very small code because I started again to allow better overview of where things are but this is it so far. This allows the use of both SDK and $ at the start of the function for example. $.Display({'file':'index.php','id':'divid'}); And SDK.Display({'file':'index.php','id':'divid'}); Code: (function(window)
{
var $ = {
Display: function(info)
{
this.call(info.file,info.id,'file='+info.file);
},
call: function(file,id,parameters)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",file,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send(parameters)
},
Flash: function(params)
{
if(params.file){alert(params.file);}
if(params.id){alert(params.id);}
}
};
// Expose SDK to the global object
window.SDK = window.$ = $;
})(window);
Hello, UPJS is an open source JavaScript Library that caters needs and requirements of web developers. It is currently under development, we encourage you to use this Library. For any bug, we will be glad to help you. Please follow upjs on facebook, http://www.facebook.com/pages/upjs/239536299419136 http://www.upjs.org Have a nice day! Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today. The features of Qatrix a Hardware Accelerated Animation Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother. High performance code Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient. Easy-to-learn The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge. Cache system Qatrix included a simple cache system to storage and fetch data with high speed. Incredible size Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation. Read more and download: http://qatrix.com I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery): http://docs.jquery.com/Using_jQuery_...ther_Libraries (Including jQuery before Other Libraries) My code (in a cold fusion environment, which should be irrelevant) looks like this: Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 });
});
</script>
</head>
<body>
<select id="cbo_status" name="cbo_status" multiple="multiple">
<option value="-1">All</option>
<option value="1" SELECTED>Assigned</option>
<option value="2" SELECTED>In Progress</option>
<option value="3" SELECTED>Complete</option>
<option value="4" SELECTED>Verified Resolved</option>
<option value="5" SELECTED>Will not be addressed</option>
<option value="6" SELECTED>Wishlist</option>
</select>
</body>
</html>
When I run the debugger, here's the error I'm still receiving: Error: Object doesn't support this property or method (pointing to the line below, character 3) jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); Does anyone have any idea why this might still be failing? I want to do virtual ipod for ipad, iphone, android by javascript & HTML. Quote: http://farm.vumon.vn/mediastore/phuc.../ipod-nano.jpg I found this plugin: Quote: http://yuilibrary.com/yui/docs/dial/...teractive.html maybe, it's nearly the same, but I want to find only javascript. not allow jQuery, because, I want to launch app for ipad, iphone, android apps. GeoKBD.js and Geo.js is a virtual keyboard that is intended to simplify support for Georgian Writing. for Geo.js this code working fine: Code: onkeypress="return makeGeo(this,event);" But i dont know code with same function for GeoKBD.js Please help me Hello all, Ok i been practising on this a bit, trying to make a virtual keypad where someone would click and have the numbers he / she clicked display in the text box. source goes like this , am new to this dont know how to go about it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="submit" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="submit" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="submit" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="submit" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="submit" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="submit" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="submit" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="submit" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="submit" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="submit" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
</body>
</html>
Kindly help someone ... Reply With Quote 12-26-2014, 12:27 PM #2 vwphillips View Profile View Forum Posts Visit Homepage Senior Coder Join Date Mar 2005 Location Portsmouth UK Posts 4,540 Thanks 3 Thanked 513 Times in 500 Posts Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="button" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="button" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="button" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="button" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="button" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="button" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="button" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="button" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="button" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="button" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
<script type="text/javascript">
<!--
function Enter(p){
document.getElementById('formtext1').value+=p.value;
}
var p=document.getElementById('table1').getElementsByTagName('INPUT');;
for (var z0=0;z0<p.length;z0++){
p[z0].onclick=function(){ Enter(this); }
}
//-->
</script>
</body>
</html>
Hey guys. Been trying to mod an existing open source virtual keyboard script by adding a scramble function for security purposes which scrambles the keyboard after each click. Quite new to javascript and have spent a full week studying OOP for Javascript and testing it out, but to no avail. Partially i guess that the script is too complex for a newbie like me. Would appreciate it alot if i could get some tips/ guidience. Here's the full script: http://www.greywyvern.com/code/javas...yboard.user.js Excerpts of what i'm trying to work on: An attempt to get it to randomise (without any clicking yet) The numpad is apparently stored in an array so i tried to pass it into a sorting algorithm. Doesn't work and actually i have no idea if i'm even trying in the right direction. Would appreciate any help! Code: /* ***** Layout Number Pad ************************************* */
this.VKI_numpad = [
[["$"], ["\u00a3"], ["\u20ac"], ["\u00a5"]],
[["7"], ["8"], ["9"], ["/"]],
[["4"], ["5"], ["6"], ["*"]],
[["1"], ["2"], ["3"], ["-"]],
[["0"], ["."], ["="], ["+"]]
];
function fisherYates (VKI_numpad) {
var i = this.VKI_numpad.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = this.VKI_numpad[i];
var tempj = this.VKI_numpad[j];
this.VKI_numpad[i] = tempj;
this.VKI_numpad[j] = tempi;
alert ('This line is read');
}
}
fisherYates(VKI_numpad);
I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: www.doner.com In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID. For example... Code: <a href="#" class="michigan">Michigan</a> <a href="#" class="ohio">Ohio</a> <a href="#" class="illinois">Illinois</a> <div id="michigan"> Michigan container </div> <div id="ohio"> Ohio container </div> <div id="illinois"> Illinois container </div> The JavaScript I have written so far is... Code: var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes
var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs
if (anchor = div) { // check to see if a hyperlink's class has a matching div ID
div.style.display = "none";
if (anchor.onclick) { // if the hyperlink is clicked...
div.style.display = "visible"; // make matching div ID visible
}
}
Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading. Can anyone help me? hie everyone plz i want to know how to make tabs using javascript.... i want to make tabs like this website http://traveline.idea-sys.net/CSP/Default.aspx?A=2&P=50 --> (M/S Darakum - Description / GalleryDeck / Plan) can anyone help me plz? I need to create an interactive map similar to the one on this site: http://viewers-guide.hbo.com/game-of-thrones/#!/map/ It is a map of a fictional area ( a real area but there are fictional buildings and characters on it) so I don't think google maps plugins are suitable. I don't want to reinvent the wheel, so if anybody has a good suggestion of a good jquery/javascript solution for interactive maps, please refer me to the relevant information. In other words, I need a map where by clicking the objects on the map, a popup window pops up with additional information about the 'scene' or a 'character'. In addition, the map will be dark from the beginning and more and more sites and characters will be revealed on it every week. Thanks for any tips! I'm writing a script in javascript(actually a chrome extension) and I need an object that I can write to it like this(sorry, don't know how to explain it better) and then I convert it to string with format of json. Code: id[129].weekDay[6].hour[23] = 0 Here, id is an array, that each element in it contain another array(weeksDay) and in that array each contain another array(hour). The id indices are unlimited, for weekDay 7 and hour 24. I searched in google but i couldn't find what I wanted. Actually don't know the best keyword to search.(objects in arrays?) I don't know what exactly it is called, I can write it's declaration in VB.NET if that helps you. how to create a customizable event based calender i need to create a grid calender where user can edit the fields of the dates and he can block some dates ! is it possible please help to me i hope u will help to me thanking you reply soon Hi i need to use an equivalent of the php function array_count_values() Any help with that please cheers ewire Hello, I'm trying to create a textarea using Javascript, the function creates a textarea in IE, but it does not create that element in Firefox and chrome. JavaScript Code:- Code: function addRow()
{
alert("function start");
var table = document.getElementById('tableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var textNode = document.createTextNode(rowCount + 1);
cell1.appendChild(textNode);
var cell2 = row.insertCell(1);
var textArea = zxcFormField('TEXTAREA','option1');
textArea.setAttribute("cols","20");
textArea.style.height = "42px";
textArea.style.width = "496px";
cell2.appendChild(textArea);
alert("function end");
}
function zxcFormField(tag,nme,type){
alert("2 function start");
var el;
try {
alert("In Try");
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
alert("In Catch");
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}
When I call this function it goes in the catch block in Firefox and Chrome, the textarea is displayed and it disappears with a flash. I've banged my head against wall trying to figure this out. Thanks, Abhishek |
|||||||