www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 21 of 21

Thread: Creating Line Breaks in Array String

  1. #16
    Join Date
    Dec 2009
    Posts
    16
    sorry for my long delays - my first opportunity to respond today. to "aj_nsc" - i have access to everything, but what you said about delimiters made sense; this may be more complicated than i thought - i may have to ask my teacher....

    to wbport, Kor, and rnd me - I tried both \n and \n\r, and they're definitely not working for me.

    to criterion9 - i had thought of that, but i think that would mess the whole system my teacher helped me set up. each array [i] is a recipe, with elements inside that are separated by quotation marks; the text from each element appears in a specified table ( under ingredients, name of recipe, etc) within a recipe template page i created.

    im all ears for any other ideas - thanks so much to everyone for their ideas/suggestions!!

  2. #17
    Join Date
    Dec 2009
    Posts
    16
    sorry for my long delays - my first opportunity to respond today. to "aj_nsc" - i have access to everything, but what you said about delimiters made sense; this may be more complicated than i thought - i may have to ask my teacher....

    to wbport, Kor, and rnd me - I tried both \n and \n\r, and they're definitely not working for me.

    to criterion9 - i had thought of that, but i think that would mess the whole system my teacher helped me set up. each array [i] is a recipe, with elements inside that are separated by quotation marks; the text from each element appears in a specified table ( under ingredients, name of recipe, etc) within a recipe template page i created.

    im all ears for any other ideas - thanks so much to everyone for their ideas/suggestions!!

  3. #18
    Join Date
    Jan 2009
    Posts
    3,346
    Code:
    var r= new Array();
    r[0]=new Array("Apple Pie","Dessert","me",new Array("5-6 Cooking Apples","1 1/4 Cups Granulated Sugar","1 tsp Cinnamon","1/8 tsp Nutmeg","Pastry for a two-crust pie","3 tbsp Butter or Margarine"),new Array("Peel, core, and slice the apples.","Preheat the oven to 425 degrees.","Roll out half the dough and line a 9-inch pie plate with it. Arrange the apple slices over the bottom of the pastry, packing the slices closely and letting them pile up.","Combine the sugar, cinnamon, and nutmeg, and coat the apples with the mixture. Dot with tablespoons of butter or margarine.","Roll out the remaining dough. Wet the rim of the bottom crust and put the top crust on. Trim and crimp the crust. Prick the upper crust with a design. Bake the pie at 425 degrees for 15 minutes, then lower temperature to 375 for remaining 30 minutes or until pie begins to bubble through design and is delicately browned."));
    Then you just need to loop through the ingredients or instructions and you can format as you wish...
    Code:
    var content = "";
    for(i=0;i<r.length;i++){
    	content += "Recipe: "+r[i][0]+"<br />";
    	content += "Category: "+r[i][1]+"<br />";
    	content += "Author: "+r[i][2]+"<br />Ingredients:<ul>";
    	for(j=0;j<r[i][3].length;j++){
    		content += "<li>"+r[i][3][j]+"</li>";
    	}
    	content += "</ul>Instructions:<ol>";
    	for(j=0;j<r[i][4].length;j++){
    		content += "<li>"+r[i][4][j]+"</li>";
    	}
            content += "</ol>";
    }
    document.writeln(content);
    Last edited by criterion9; 12-18-2009 at 09:45 AM.

  4. #19
    Join Date
    Dec 2005
    Posts
    2,984
    Criterion, perhaps you've noticed the ingredients aren't in an array - they are in a long string that has no delimiters and, thus, there aren't any current means of getting them into an array.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #20
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by chavad View Post
    I'm making a recipe program and have created the following array (this is only the important part):

    var r = new Array();

    r[0]=new Array("Apple Pie","Dessert","5-6 Cooking Apples 1 1/4 Cups Granulated Sugar.");

    I need a line break between the two ingredients and nothing is working for me - I tried \n and other stuff;<br> is interpreted as part of the string and <pre> didn't work either.

    Any ideas would be greatly appreciated!!
    I was presenting a possibility based on the "I've created an array" portion of the original post. I'm suggesting that altering the source material will be the best solution and have not seen anywhere where changing the array was not possible.

  6. #21
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,390

    Lightbulb Consider this ...

    How about something like this ...
    Code:
    <html>
    <head>
    <style type="text/css">
    .info {
    	width:600px;
    	height:auto;
    }
    </style>
    <!-- following not supplied in request -->
    <!-- script type="text/javascript" src="recipes_code.js"></script -->
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=221650
    
    var r = new Array();
    
    r[0]=new Array(
     "Apple Pie",				// Recipe Name
     "Dessert",				// Category
     "me",					// From
     "20 minutes",				// Preparation time
     "45 minutes",				// Cooking time
     "8",					// Servings
    					// Ingredients
     "5-6 Cooking Apples <br>"		
    +"1 1/4 Cups Granulated Sugar <br>"
    +"1 tsp Cinnamon <br>"
    +"1/8 tsp Nutmeg Pastry for a two-crust pie <br>"
    +"3 tbsp Butter or Margarine",
    					// Instructions
     "1. Peel, core, and slice the apples. <br>"
    +"2. Preheat the oven to 425 degrees. <br>"
    +"3. Roll out half the dough and line a 9-inch pie plate with it. "
    +"Arrange the apple slices over the bottom of the pastry, packing the slices closely and letting them pile up. <br>"
    +"4. Combine the sugar, cinnamon, and nutmeg, and coat the apples with the mixture. <br>"
    +"Dot with tablespoons of butter or margarine. <br>"
    +"5. Roll out the remaining dough. <br>"
    +"Wet the rim of the bottom crust and put the top crust on. <br>"
    +"Trim and crimp the crust. <br>"
    +"Prick the upper crust with a design. "
    +"Bake the pie at 425 degrees for 15 minutes, <br>"
    +"then lower temperature to 375 for remaining 30 minutes <br>"
    +"or until pie begins to bubble through design and is delicately browned.",
    
      "Like the soup ... mmmmm mmmmm good"	// Comments
    );
    
    //figure out recipe number (recipenum)
      var recipenum = 0;		// following function not supplied AND only one recipe available
    // var recipenum=getQueryStringPiece("r");
    
    //get recipe title for that number
      document.write('<title>'+r[recipenum][0]+'</title>');	// getRecipeTitle function not supplied
    // document.write("<title>" + getRecipeTitle(recipenum) + "</title>");
    
    </script>
    
    </head>
    <body>
    <form name="RecipeForm">
    <table cellpadding="15" align="center" border="1" width=1000px style="margin-top:50">
     <tr>
      <td style="border:none"><strong>Recipe Name:</strong></td>
      <td><div class="info" id="recipe_name" name="recipe_name"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Category:</strong></td>
      <td><div class="info" id="recipe_category" name="recipe_category"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>From the Kitchen of:</strong></td>
      <td><div class="info" id="kitchen_of" name="kitchen_of"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Preparation Time:</strong></td>
      <td><div class="info" id="prep_time" name="prep_time"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Cooking Time:</strong></td>
      <td><div class="info" id="cook_time" name="cook_time"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Servings:</strong></td>
      <td><div class="info" id="servings" name="servings"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Ingredients:</strong></td>
      <td><div class="info" id="ingredients" name="ingredients"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Instructions:</strong></td>
      <td><div class="info" id="instructions" name="instructions"></div></td>
     </tr>
     <tr>
      <td style="border:none"><strong>Comments:</strong></td>
      <td><div class="info" id="comments" name="comments"></div></td>
     </tr>
    </table>
    <input type="button" name="back_link"
     value="Back to Main Page" onClick="location.href='main_area.html'"
     style="margin:20 180 10 600">
    
    <script type="text/javascript">
    document.getElementById("recipe_name").innerHTML = r[recipenum][0];
    document.getElementById("recipe_category").innerHTML = r[recipenum][1];
    document.getElementById("kitchen_of").innerHTML = r[recipenum][2];
    document.getElementById("prep_time").innerHTML = r[recipenum][3];
    document.getElementById("cook_time").innerHTML = r[recipenum][4];
    document.getElementById("servings").innerHTML = r[recipenum][5];
    document.getElementById("ingredients").innerHTML = r[recipenum][6];
    document.getElementById("instructions").innerHTML = r[recipenum][7];
    document.getElementById("comments").innerHTML = r[recipenum][8];
    </script>
    
    </form>
    </body>
    </html>
    NOTE:
    1. Some of functions were not supplied in this thread so I bypassed them. Put them back in if important to you.
    2. You only supplied ONE recipe in this thread, so only one display at this time.
    Also, some of the fields were incomplete, so I added my own. Change to match your information.
    3. The <br> in the 'r' array could just as easy be '\n', but you would need to convert it with a .replace() function for the final display.
    4. Simplified display with one CSS statement. Could add others to make it fancier.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles