Jump to content

drayarms

Members
  • Posts

    125
  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

drayarms's Achievements

Regular Member

Regular Member (3/5)

0

Reputation

  1. I have a multidimensional array that I create dynamically like this var pairs = new Array(); pairs.push({person:"joel",fruit:"peach"}); pairs.push({person:"amina",fruit:"mangoe"}); pairs.push({person:"peter",fruit:"mangoe"}); So basically, the array has several elements each of which has two child elements, the first having key "peoson" and the second having key "fruit" such that pairs[0].fruit would have value "peach" for example and pairs[2].person would be "peter" Now I want to convert this array into a global javascript object so that I can access members of the array anywhere from my script. The object should look something like so: var NS.harvest = { 0:{person:"joel",fruit:"peach"}, 1:{person:"amina",fruit:"mangoe"}, 2:{person:"peter",fruit:"mangoe"} } So I tried this: var NS.harvest = {}; for (var i = 0; i < pairs.length; ++i){ if(pairs[i] !== undefined){ NS.harvest[i] = pairs[i]; } } return NS.harvest; That didn't do the trick. What should I do? And what do I do if I need to convert the object back into the array?
  2. Hello folks, I think the question is rather self explicit. I need to create an object from which I can create instances during the life of my application. So I opted for a constructor object. I just don't know how to make it global so that all my scripts can have access to it. I have tried including it in a namespace without succes var myNamespace = { myConstructorObject:function(){ //Attributes and methods of my constructor go here } } Also tried this... var myNamespace = { function myConstructorObject(){ //Attributes and methods of my constructor go here } } In both cases, I create a new instance of my constructor like so var newInstance = myNamespace.myConstructorObject I also tired creating the constructor object as a global object outside of my namespace like so myConstructorObject = function(){ //Attributes and methods }
  3. Good day people. Anyone familiar with using the iscroll plugin for mobile development. Well I tried to implement it into one of my projects but unfortunately as the topic suggests, I it doesn't work when the page is loaded. But when I rotate my mobile device and change orientation, it starts to work. Anyone ran into this problem? What's the fix anyone? I'll include the code below <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <!--include JQM --> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script <!--include i scroll plugin--> <script type="application/javascript" src="js/iscroll/iscroll.js"> </script> <!--include the iscroll library--> <script type="text/javascript"> var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll("wrapper"); }, 100); } window.addEventListener("load", loaded, false); </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id = "active_games_page" class = "page" data-role = "page"> <div data-role = "header" data-position = "fixed"> </div> <div data-role = "content" class = "content" style = "background:black"> <div id = "wrapper" data-role = "content" style = "position:relative;bottom:10%;height:75%;border:1px solid white"> <div id="scroll_this" data-role = "content" style = "margin:auto;width:70%;position:relative;top:0%;border:1px dotted white"> <p> <a style = "background:red;height:1%">vngxfgffff</a> <p> <p> <a style = "background:red;height:1%">vhghgfghjg </a> <p> <p> <a style = "background:red;height:1%">ggjsddjgh </a> <p> <p> <a style = "background:red;height:1%">cvngghgcghg </a> <p> <p> <a style = "background:red;height:1%">vjghssgg </a> <p> <p> <a style = "background:red;height:1%">dfghgdvngh </a> <p> <p> <a style = "background:red;height:1%">fghdgjdtst</a> <p> <p> <a style = "background:red;height:1%">gjhdrthdt</a> <p> <p> <a style = "background:red;height:1%">ghtbjyjyy </a> <p> <p> <a style = "background:red;height:1%">htytrertr</a> <p> <p> <a style = "background:red;height:1%">afdfdfdafdae</a> <p> <p> <a style = "background:red;height:1%">dafdfdfdfdd</a> <p> <p> <a style = "background:red;height:1%">gdadfdfdfdf </a> <p> <p> <a style = "background:red;height:1%">agdereafee </a> <p> <p> <a style = "background:red;height:1%">aerergadfd</a> <p> <p> <a style = "background:red;height:1%"> </a> <p> <p> <a style = "background:red;height:1%"> </a> <p> <p> <a style = "background:red;height:1%"> </a> <p> </div> <!--/scroll me--> </div> <!--/wrapper--> </div> <!--/content--> </div> <!--/active games page--> </body> </html>
  4. I can't seem to understand where I went wrong. Refer to this url to see the problem I'm describing (www.http://playcheckonline.com/test_draggable.html) I have this very simple script which is supposed to enable the card get dragged from the orange box (id box 2) into the green one (id box 1). Here's the entire script. I have links to the latest jquery and the jquery ui versions embedded at the beggining as you can see. Well, the script just won't work and there is no error message. Who can figure out the problem? <!DOCTYPE html> <html> <head> <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="Stylesheet" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script type="text/javascript"> function play(){ $('#box2').find('.card').draggable({ helper: 'clone', cursor: 'pointer', revert: true, }); $('#box1').droppable({ accept: '#box2 .card', }); }//End player go board function play();//Parse the function </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id = "box1" style = "height:200px;width:600px;background:green"> </div> <div id = "box2" style = "height:200px;width:600px;background:orange"> <div> <img class = "card" src = "images/new_deck/11h.png"/> </div> </div> </body> </html>
  5. Here's the error: Uncaught TypeError: Object [object Object] has no method 'draggable'
  6. I had sort of completed working on a simple card game (found at www.playcheckonline.com) based on jQuery about 6 months back. A great deal of the ocde relies on jQuery ui's draggable method. It enables a player to drag the cards dealt to them onto the deck. Anyway, aside from a few glitches, the game worked perfectly good as intended when I completed it (at least as far as draggble is concerned). I even had a few friends play it across the world. I haven't updated the code since then but recently when I checked on it to make some updates, it was all but impossible to play because the dragabble method won't work. I get the following error in Chrome debugger Now before i delve into debugging and trying to pinpoint the source of the problem, I just want to find out if anyone has had such and experience or if it is normal. Remember, no changes had been made to any of the files and now all of a sudden, an important method won't work. What's even more puzzling is that initially, I had the jQ ui version 1.8 hosted on my server and that's what I linked my site to. So any changes to jQui shouldn't have affected the game. Now i have linked the site to the online hosted version of jQ core and jQui as follows: <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <link type="text/css" href="jQui/css/jquery-ui-1.8.18.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="jQui/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jQui/js/jquery-ui-1.8.18.custom.min.js"></script> And the problem persists. The site (playcheckonline.com)has a user friendly interface, and it's pretty easy to navigate to the play area. Just click on the "play game" tab in the menu bar and fill out the resulting form.
  7. I'm not sure if this topic is relevant to this forum but I figured enough of you PHP coders are familiar with integrating Facebook to you sites. I'm new to using Facebook APIs and I'm tying to load the user registration iframe from facebook onto my my site. But I get the following error every time I load the page: Unable to load the registration form for XXXX. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: That 'redirect_uri' isn't allowed for that client_id.) I'm not sure what I didn't do correctly. I setup my facebook app Id and here is a screenshot from the setup page And here is how I configured the iframe: I replaced my app Id with 1111111111 for obvious reasons <iframe name = "fb_signup" src="https://www.facebook.com/plugins/registration? client_id= 111111111111& redirect_uri=http%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F& fields=name,birthday,gender,location,email" scrolling="auto" frameborder="no" style="border:none" allowTransparency="true" width="100%" height="330"> </iframe> Also tried the facebook XML but neither got an error message nor the pre-filled dialog from facebook <fb:registration fields="name,birthday,gender,location,email" redirect-uri="http://developers.facebook.com/tools/echo/"> </fb:registration>
  8. I get the following error with jquery mobile when trying to use a conditional to check if a checkbox has been checked Uncaught Error: Syntax error, unrecognized expression: #[object HTMLDivElement] jquery-latest.js:4680 So here is the code if( !($("#terms").is(":checked")) ){//If terms box is not checked //Do something }//End of if terms box is not checked This produces the same problem if( !$('#terms').attr('checked') ){//If terms box is not checked //Do something }//End of if terms box is not checked The problem doesn't occur with pages that run on regular jQuery, just the mobile version. I don't know if these methods I used above are deprecated for the latest jQM. I believe it is 1.8.2 Who knows what I should use?
  9. I'm building a site with both jQuery mobile and native HTML5. I send a PHP cookie named "language" from the site to the browser to and assign it a value of either "english" or "spanish" depending on user input. Then I use the function below to output all content on the site in the language chosen <?php function translate ($english_txt,$spanish_txt){ switch ($_COOKIE['language']){ case "english": echo $english_txt; break; case "spanish": echo $spanish_txt; break; default: echo $english_txt; }//End of switch }//End of translate function ?> Here is example of a paragraph printed on the website using this fucntion <p> <?php translate("Happy New Year","Feliz Navidad"); ?> </p> Everything works just fine on the HTML site. With the jQM site however, only the default case is echoed. But I do know for a fact that the cookie exists (I used the isset funtion to verify that) and I also know for a fact that the value of the cookie is either "spanish" or "english" depending on the user input. Yet I'm puzzled as to why the conditional doesn't work in jQM. Keep in mind that it works in HTML. I also tried using the if conditional thus: <?php if($_COOKIE['language']=="english"){echo "Happy New Year";} if($_COOKIE['language']=="spanish"){echo "Feliz Navidad";} ?> to no avail. Anyone can tell me what I'm not doing right?
  10. @thorpe, followed your advice, tried to use the jQ UI functionality instead but that led to a new problem. Can you take a look at my new posting titled "How Can Elements Generated on the Fly be Made Draggabble?" Tnanks
  11. I'm using the script below to generate a set of images on the fly(image names correspond to the names of elements in an array which I call array1). I also give each image an id that is the image's src value, or corresponding array element value.I know you are probably asking yourself why i can't just assign the id names in the HTML image tag. Reason is, each time i run the program, a different random set of array elements are chosen (array 1 is actually created from a larger array. the 3 elements making up array1 are randomly selected from that larger array) and their corresponding images need to be appended to the DOM array1 = ['image1', 'image2', 'image3'];//Created on the fly from a larger array for(i=0; i<array1.length; i++){//Generate an image for each element in array1 $("#image_container").append("<img id = ' "+array1[i]+" ' class = 'images' width = '86px' height = '128px' src =' "+array1[i]+".png'/>"); } I'm trying to use jQ UI to make all 3 images draggable(I can't use inline HTML5 statements for the same reason why I have to generate the ids on the fly as explained above). But I just can't figure out how to accomplish this, since there is no way of telling before the program is run, which images will be presented. Here's what I tried which didn't work example1 jQuery.each(array1, function(i,val){//The idea is to iterate the array and get the names of each element which is also the id of corresponding image $( init ); function init() { $('#'+val).draggable(); } }); example2 $('.images').mouseover(function() { var id = $(this).attr('id'); $( init ); function init() { $('#'+id).draggable(); } }); HTML <img src = 'image1'/> <img src = 'image2'/> <img src = 'image3'/>
  12. Hello, Just in case the topic wasn't very clear, I'm talking about the functions triggered by the ondragstart, ondrop and ondragover events in HTML5. I just used that for my first time and from what I gathered, it doesn't seem like these functions would be defined within another jS/jQ function for instance within a document.ready function. What I was trying to accomplish was to place these functions within other functions in my script in order to call local variables within those functions when the drag and drop events were triggered. well I found out that this is seemingly impossible. I'll provide two simple examples to illustrate the point in case it's unclear. Example 1, which works <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js </script> <script type="text/javascript"> //Drag and drop events function allow_drop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Drag Drop</title> </head> <body> <div id="div1" style = "height:400px;width:450px;background:yellow" ondrop="drop(event)" ondragover="allow_drop(event)"> Drop here <div style = "height:130px;width:130px;background:green"> </div> </div> <br /> <div id ="blue_box" style = "height:100px;width:100px;background:blue" draggable="true" ondragstart="drag(event)"> </div> </body> </html> And this is what I'm trying to accomplish which of course doesn't work. Is there a workaround? <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var message1 = "just dragged"; var message2 = "just dropped" //Drag and drop events function allow_drop(ev){ ev.preventDefault(); alert(message1); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); alert(message2); } });//End document ready method </script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Drag Drop</title> </head> <body> <div id="div1" style = "height:400px;width:450px;background:yellow" ondrop="drop(event)" ondragover="allow_drop(event)"> Drop here <div style = "height:130px;width:130px;background:green"> </div> </div> <br /> <div id ="blue_box" style = "height:100px;width:100px;background:blue" draggable="true" ondragstart="drag(event)"> </div> </body> </html>
  13. @kicken, well, I solved the problem by making a replica of the array (p1cards) right after it was originally declared. Then inside the computer_play() fucntion, I used this replica, not the p1cards array itself, and got expected results.
  14. @kicken, well, I'm going to take your advice and use the splice() method to simplify things. Not sure if it would solve this particular problem though. The game is very similar to uno. Same basic principles. Main difference here is that we use the traditional pack of 54 cards instead of the colored uno cards. The rules wouldn't really matter at this stage as all I'm trying to accomplish at this point is to deal the cards, indicate who's turn it is(computer vs player), and remove a random card from the computer's deck, when it is the computer's turn and place that in the play area(board1), and do the same for the player's deck when it's player's turn and player click in his play area(player2container). Then I will worry about the intricaces of deciding exactly what card the computer should play and and the animations later.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.