Jump to content

Kwisatsoundman

Member
  • Posts

    5
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Kwisatsoundman

  1. Hello domdag27, Here is a little program that solves your problem. You can test it by using the three files (test.html, screen.css and local-storage2.js) I've attached to my reply. It can of course be further improved, for example by checking that no two tasks have the same identifier before being added and displayed in your table. As a general rule of thumb, you should always split up your JavaScript programs into several parts (= or little functions) to write it and improve it more easily. You'll see that in this one, there is seven little functions each dedicated to a specific purpose. I've commented out as much as I could this javascript program. Enjoy! local-storage2.js screen.css test.html
  2. I think the first if statement is correct, Stefan, since we must be sure that the numbers array actually contains at least one number. So, numbers.length must indeed be strictly greater than 0. What is not correct is... 1) The initial variable declaration: var numbers = (1,2,3); // You can't use parentheses to declare an array without using the array keyword like this: //var numbers = new Array(1,2,3); // Instead, you have to declare an array by using the short square brackets notation: var numbers = [1,2,3]; 2) The arguments passed to the max() and the min() methods of the Math object can only be a list of numbers separated by commas, but not an array of numbers. So, to use it on an array, we first need to reduce this array... // ... a first time to get the maximum value: var maxValue = numbers.reduce(function(a, b) { return Math.max(a, b); }); // ... a second time to get the minimum value: var minValue = numbers.reduce(function(a, b) { return Math.min(a, b); }); And only then you substract the two previously obtained values. var differenceValue = maxValue - minValue; You function becomes: The text editor doesn't allow me to write the overall body of the mostNumbers() function, so I attached a text file to my reply for that. mostNumbers(numbers); // We call the function to test it in the browser. (Note: in addition to the initial if statement, we should check that all the values included in the numbers array only contain actual numbers, and otherwise display a message that warns that at least one member of the array is not a number.) One_quick_solution.txt
  3. Hello perryc, If you're still alive since you posted your last question on this forum (just kidding...), in order to get your absolutely positioned image to scale the way you want, you have to do two things : 1) Be sure to wrap your absolutely positioned image(s) in a relatively positioned container. 2) Set the desired width for each of the images you want to scale in a relative unit (like in percentage for exemple), and not in a fixed unit (like in pixels for exemple). It is not enough to set a max-width equal to 100% for all your images, because the "width" value applied to each of your images will take precedence over the general "max-width" value. In other words, width and max-width are two different properties. 3) Don't forget to add a min-height to your container if you ONLY have HTML elements that are positioned abolutely inside of it, otherwise this container will no longer be aware of their existence. (When you position an element absolutely, you completely remove it from the natural flow of the page.) So, to summarize, here is an example where I put two images (with "position: absolute") inside of an overall container (with "position: relative"). The first image appears in the top left hand corner of the container ; the second image, in the bottom right hand corner. If you try this setting, you'll see that both images scale perfectly, even with "position: absolute" applied to them. <div class="container"> <img class="absolute first" src="my_bogus_image1.jpg"> <img class="absolute second" src="my_bogus_image2.jpg"> </div><!-- end of container --> img { max-width: 100%; height: auto; } .container { position: relative; width: 90%; /* Whatever width you want it to be. */ min-height: 850px; /* In case you ONLY have ABSOLUTELY positioned html elements (like images) inside of your container, you must set a min-width sufficient to contain all your images. */ } .absolute { position: absolute; /* Use the top, left, right and/or bottom properties as usual to position the image in relation to the container div */ } .first { top: 0; left: 0; width: 20%; /* Whatever width you want, but expressed in a relative unit. */ } .second { bottom: 0; right: 0; width: 30%; /* Whatever width you want, but expressed in a relative unit. */ }
  4. You're welcome. Let me know if you are stuck at some point. Good luck!
  5. Hello Andrea, We are two years later, but since your website is still active, the following might be useful to you: 1) You already solved partly your problem regarding your header (from the "width" point of view, but not entirely from the "height" one). For you header div, you could use "background-size: cover;" instead of "background-size: 100%", because at the mobile width, your #dbe3f0 substitute background color for this div starts to appear as a grey horizontal strip below your background-image, which is not very beautiful. 2) Also, still at the mobile resolution, you should initally hide your navigation menu until a button is clicked, and not reveal it right away. As you still use Bootstrap in its version 3.3, this framework provides a quick and easy fix to this problem. Check out this page : http://getbootstrap.com/docs/3.3/javascript/#collapse But for this to work, you first need to include in your Wordpress theme both the jQuery library (which you already do) and the Bootstrap JAVASCRIPT library too, just below it, in the head section of your HTML code. Because currently, you only use the Bootstrap CSS responsive grid, but not its JavaScript capabilities. Don't worry if you didn't learn JavaScript, you wouldn't have to write a single line of JavaScript to take advantage of this feature. Then, basically, you add the following button with the following attributes: <button type="button" class="navbar-toogle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> And you add a "navbar-collapse" class to you nav div (this name must match the name of the data-target attribute of the previously inserted button): <nav class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li>Our services</li> <li>About us</li> <li>Photos</li> <li>Testimonials</li> <li>Contact Us</li> </ul> </nav>
×
×
  • Create New...