Jump to content

drayarms

Members
 View Profile  See their activity

  • Posts

    125

  • Joined

  • Last visited

 Content Type 

Everything posted by drayarms

  1. drayarms
    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. drayarms
    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. drayarms
    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. drayarms
    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. drayarms
    Here's the error: Uncaught TypeError: Object [object Object] has no method 'draggable'
  6. drayarms
    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. drayarms
    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. drayarms
    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. drayarms
    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. drayarms
    @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. drayarms
    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. drayarms
    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. drayarms
    CSS padding solved the problem.
  14. drayarms
    @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.
  15. drayarms
    @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.
  16. drayarms
    @kicken, ok i tried to keep the code as original as possible, cutting out parts that are irrelevant to this problem while trying to still get the program working as intended. Here's the link to the fiddle http://jsfiddle.net/w8gDg/ You could ignore everything before line 88 on the js section because these are just functions which have been defined and are used by various throughout the program. To put you in perspective, it is a simple card game. The array a which i described in the problem could be one of the following in the actual code, var deck (line91), var clubs(line 103), var aces(line107), var twos(line 109), or var threes(line11). The array b corresponds to b1cards(line191). modify_b() function corresponds to computer_play() fucntion (line240). This function is called within the whose_turn() function on line 352 PS, The output on the fiddle may flicker when you first load it and you may need to hit "run a couple of times". And in the input area, limit the number to be entered in the input box to 3 or 4 for best viewing results. Player 1 container would be the first row of images, the row right beneath it (1 column) is board1, and beneath that (also 1 column) is board two and finally the bottom row, player 2 container.
  17. drayarms
    Hi everyone, I can't seem to figure out if the following problem is actually a variable scope problem or not. To undertand the problem, it's best if you just go right ahead and take a look at the code. It's an over simplified version of the actual code. Pay close attention to the explanations within the code especially within the modify_b() function which is where the heart of the problem is. The problem is well described within the explanation lines. $(document).ready(function() {//Check var a = [1,2,3,4,5]; $("#div").click(function(){//On clicking some div, the following should happen var start = "yes" if(start != "yes"){//Alert error alert("error"); }else{//Proceed var b = [6,7,8,9,10]; function modify_b(){ var new_b = b;//create a new array out of b array whihc we will modify below var c = b.shift();//Obtain the element at begining of b array alert(c);//When the run_modify_b function(see below) is run, 6 is alerted, an indication that the array b is actually accessible from within this function var l = b.length; alert(l);//But when we try to obtain the length or array b, we get 0. Makes me wonder if this array is really accessible from within this function. Mind you, this same line when taken outside the fucntion, gives us the desired 5. Same thing happes with new_b for(var i=0;i<b.length;i++){alert(b[i]);}//Obviously, this line (which is what I originally wanted to to do with my function), does nothing as b.length is 0. Again, when taken outside the function, this line alerts the desired 6,7,8,9,10 if($.isArray(b)){alert("aye!");}else{alert("nay!");}//Alerts aye!, an indication that b (also new_b) is actually recognized as an array within this function. So why in the world can't normal array methods be performed on this array?? Beats me. //Now I tested all the above functions on array a and got the desired results as follows var l = a.length; alert(l);//alerts 5 for(var i=0;i<a.length;i++){alert(a[i]);}// alerts 1,2,3,4,5 }//End of modify b function function run_modify_b(){ modify_b(); }//End of run modify b function //Run the run modify b function. This may appear redundant but in the original code, there is much more than just this one line run_modify_b(); }//End of else proceed. });//End of div click function });//End document ready method So, Im really confused. Is this a variable scope problem where the modify_b() function cant access the b variable (i really don't see any reason why), in which case, why would it even be modifiable within that function or why would it be recognized as an array? please help.
  18. drayarms
    @chrisdburns, quite interesting. I hadn't thought of it that way. I had earlier solved the problem like this var new_deck = concat(deck); //Assigning the deck array to a new array called new_deck since deck is about to be modified var deck_minus_player1 = pop_array(2,deck); Your method seems cleaner though. I'm gonna try it. Thanks
  19. drayarms
    @liam, thanks for pointing that out. @requinix, thanks for the explanation.
  20. drayarms
    @requinix, your suggestion (taking the click function outside of whose_turn function works). But I'm not quite sure why the onclick keeps getting added with each recursion, or maybe I didn't quite understand your explanation. Please can you clarify a little more @liam, I'm not sure what you are talking about because I believe my first if statment uses the equality == operator and not the assignment = operator. Admitedly it is not the strict === equality but the == seems fine in this situation.
  21. drayarms
    Hello, I'm using a recursive function (must admit I'm a novice in that area) to indicate whose turn it is (between a player and the computer) in a simple card game im developing. Before the function is set into motion, a variable is defined outside the function called play first, which can either be fed the value, "me" or "computer". Now depending on which the player choses, an alert box indicates who plays first. If it is the player, it reads "your turn", waits for a prompt from player (a click in some designated container mimicks that for now), at which point, the value for play_first variable is changed to computer and the function is run recursively. Now since it is the computer's turn, a fucntion is executed (which i haven't coded yet), and soon after that, the play_first value is again changed to "me" indicating the player's turn and the cycle continues. The point of exit is when either player or computer has no more cards. It seems to work fine except for the fact that, when I prompt the player to play, I dont just get a simple "computer's turn" followed by a "your turn" alert, but also all the previous "your turn" and "computer turn" alerts that had preceeded this particular prompt, depending on the number of times the prompt has been clicked. So for example, if it is the second round for player to play and I click on the prompt, it would alert "computer's turn" followed by "Your turn" twice, instead of just once as I expect it to. Any ideas?? var play_cards = "me" //Could also be "computer" function whose_turn(who){ if( (p1cards.length = 0)||(p2cards.length = 0) ){//If either player is out of cards alert("Game Over!"); }else{//If neither player is done, the game should continue if(who == "me"){//If it is player's turn alert("Your turn"); //Mimick the player playing a card by clicking in some div $("#player2_container").click(function(){ //Execute player 2 play function... //Run the whose turn function recursively, this time handing the baton to the computer play_first = "computer"; whose_turn(play_first); //It's now computer's turn }); }else{//If it's computer's turn alert("Computer's turn"); //Prevent player2 from playing if he attempts... //Execute the computer play function... //Run the whose turn function recursively, this time handing the baton to the player play_first = "me"; whose_turn(play_first); //It's now your turn }//End else if it's computer's turn }//End of else if neither player is done
  22. drayarms
    The topic may sound vague, so please read on to get the details clarified. Ok I have an array which I called deck as defined below. I remove the last two elements from this array using a function pop_array() that i constructed, and assign the resulting array (deck_minus_player1) to a new variable. Now I want to be able to manipulate both arrays, ie the original deck, and the new deck_minus_player1 created from it, independently. But it seems as if, everytime I run the pop_array() function which creates the new array from the old, the old array automatically morphs into the new one and doesn't retain all its original contents. So how do I keep my old array (deck) with all its contents unscathed, even after I perform an operation on it? Here's the code. <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <script type = "text/javascript"> function pop_array(num_popped,array){ for(i=0; i<num_popped; i++){ array.pop(); } return array; }//Function end var deck = ["one","two","three","four","five"]; var deck_minus_player1 = pop_array(2,deck); for(i=0; i<deck.length; i++){ alert(deck[i]); } </script> So when I run this code, the output is one, two, three instead of one, two , three, four, five as I intended. But if I eliminate the var deck_minus_player1 = pop_array(2,deck); line, i get desired results.
  23. drayarms
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> </head> <body> <form id="form1" runat="server" enctype="multipart/form-data"> <input type='file' onchange="readURL(this);" /> <img id="blah" src="#" width = "300px" max-height = "340px" alt="your image" /> </form> </body> </html>
  24. drayarms
    Hello, I seem to have just run into a brick wall. I have 2 modal dialogs on the same webpage, each of which can be triggered by clicking on the appropriate button. Well The first one seems to prevent the second one from being loaded into the DOM. I'm going to really simplify the code that I'm working with. jQ $(document).ready(function() {//Picture upload dialog window $("#dialog1").dialog({ width: 660, height: 495, dialogClass: "dialog", autoOpen: false, position: "center", overlay: { opacity:0.9, background: "black"} }); //Open the modal window when link1 is clicked $('#link1').click(function(){ $('#dialog1').dialog('open'); }); }); $(document).ready(function() {//Picture upload dialog window $("#dialog2").dialog({ width: 660, height: 495, dialogClass: "dialog", autoOpen: false, position: "center", overlay: { opacity:0.9, background: "black"} }); //Open the modal window when link1 is clicked $('#link2').click(function(){ $('#dialog2').dialog('open'); }); }); html <div id = "dialog1"> content1 </div> <div id = "dialog2"> </div> <div id = "link1" style = "pointer:cursor">// Link that pop opens modal dialog 1 <div id = "link2" style = "pointer:cursor">// Link that pop opens modal dialog 2 Well, the separate dialog windows open when I have just one on them on the page. But when I have two of them as above, just the first one (in this case dialog 1) opens and not the other. So clearly the first is preventing the second from being loaded or it would seem. How can I fix this?
  25. drayarms
    Hello, I'm trying to create a drop down menu. I'm just going to paste the relevant html and css below. What do I have to do to make sure that the <li> items in question, get the height that I want to specify? I have tried using css height: and line-height: to no avail. The <li> items don't get any higher than the length of the text enclosed within them. html <ul id = "pic_options_panel"> <li class = "comment_color pic_options">Picture Options <ul id = "pic_options_div"> <li id = "pic_options_collapse"> collapse </li> <li align = "center">Make Main Picture</li> <li align = "center">Delete This Picture </li> <li id = "upload_pic_link" align = "center">Upload New Picture </li> </ul> </li> <li class = "comment_color pic_comments">Comments</li> <li class = "clear"> </li> </ul> css .pic_options ul li{z-index:603;color:#fff;margin:0px;padding:0px;width:142px;height;80px;border-bottom:1px solid #fff;cursor:pointer;}
×
×
  • 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.