Jump to content

mr_mars2011

Members
  • Content Count

    11
  • Joined

  • Last visited

Community Reputation

0 Neutral

About mr_mars2011

  • Rank
    Newbie
  • Birthday 12/01/1983

Previous Fields

  • Languages
    HTML, CSS, Javascript - Still a lot to learn

Contact Methods

  • Website URL
    http://
  • ICQ
    0

Profile Information

  • Location
    England
  1. Try giving your #wrapper a width, for example 960px, then try resizing your browser window. Is this the effect you wanted?
  2. Microsoft's Webmatrix is free and is actually really good. There's code hinting for most languages (including functions for Content Management Systems like Wordpress). The UI is pretty nice too.
  3. Slightly off topic but I always use ordered lists <ol> for navigation, I think it's more semantic and navigation bars tend to have an order to them (you don't often see the homepage link in the middle of a nav bar). It also makes sense to you the new <nav> tag.
  4. Finally got this working with a for loop. In case anyone's interested here's the code. <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title></head><body> <h1>To do list</h1> <ul id="toDoList"> </ul> <form id="toDOForm"> <label for="listItem">Add something to do: </label> <input type="text" id="listItem" name="listItem"> <input type="button" value="Add to list" id="addToList"> </form> <script> (function(){ var button = document.getElementById('addToList'), txtBox = document.getElementById('listItem'), toDoList = document.getElementById('toDoList'), li, t,pp, frag, listItem = document.getElementsByTagName('li'); function addItem(){ if(txtBox.value===""){ alert('Please enter a value'); } else{ li = document.createElement('li'); t = document.createTextNode(txtBox.value); frag = document.createDocumentFragment(); li.appendChild(t); frag.appendChild(li); toDoList.appendChild(frag); if(document.addEventListener){ if(listItem && listItem.length){ var len = listItem.length; for ( var i = 0; i < len; i++ ) { listItem[i].addEventListener('click', deleteItem, false); } } } } } function deleteItem(){ var deleteItem = confirm('Delete Item'); if (deleteItem){ this.parentNode.removeChild(this); } } if(document.addEventListener){ button.addEventListener('click', addItem, false); } }()); </script></body></html>
  5. I am creating a little to do list just for some practice. But I am having trouble deleting nodes I have created. Here is my code so far: <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title></head><body> <h1>To do list</h1> <ul id="toDoList"> </ul> <form id="toDOForm"> <label for="listItem">Add something to do: </label> <input type="text" id="listItem" name="listItem"> <input type="button" value="Add to list" id="addToList"> </form> <script> var button = document.getElementById('addToList'), txtBox = document.getElementById('listItem'), toDoList = document.getElementById('toDoList'), li, t, frag; function addItem(){ if(txtBox.value===""){ alert('Please enter a value'); } else{ li = document.createElement('li'); t = document.createTextNode(txtBox.value); frag = document.createDocumentFragment(); li.appendChild(t); frag.appendChild(li); toDoList.appendChild(frag); } } function deleteItem(){ alert('test function is being executed'); this.parentNode.removeChild(this); } if(document.addEventListener){ button.addEventListener('click', addItem, false); if(li){ li.addEventListener('click', deleteItem, false); } } </script></body></html> I can create nodes easily, if you enter some text in the text box and click the button you can add a todo item easily. Trouble is I want to be able to delete one when I click on it. But the deleteItem() function is never called. Obviously the addEventListener() only works in modern browsers but it's just a little example I'm working on so I not bothering to create cross browser compatiblity. Any help would be much appreciated.
  6. p><img src="BackgroundColorBar.jpg" alt="Background" style="float:left" />Text that is supposed to go be on the right of the image.</p><p style="clear: left"> <br /> Text that is supposed to go be below the image. <br /></p> Adding clear: left to the second paragraph seems to fix it.
  7. I'm currently using E Text editor but have recently discovered Sublime Text 2, which once you have downloaded a few plugins has all the functionality of E but also has more communication between the developer and community which gives me hope that Sublime will be kept up to date and constantly improved. It's a little buggy at the moment but that's because it's still being developed.
  8. Thanks for the updated reply. I new I was along the right lines just needed some reassurance. The info on shorthand properties was useful. Thinking about it I really only use shorthand properties on padding, margin and borders.
  9. Just a quick question I can't seem to find the answer to.I was wondering if there's a specific order that declarations should appear.For Example div{ width: 200px; font-family: Arial, "MS Trebuchet", sans-serif; border-bottom: 2px dotted #000; border: 1px solid #999; color: red; height:200px;} Does it matter that width comes first then font-family then border? I know there are issues with specificity: border-bottom won't be applied because border will overide it. But does it matter that I have width at the top and height at the bottom? I'm guessing it's a good idea to keep related properties together or use shorthand where possible.Can't help feeling that with the amount of time I've been learning CSS I should probably know the answer to this.
  10. I think the main problem is that I am trying to learn JS the right way. There's lots of tutorials out there that produce functional results but the code used isn't great and they always end up mixing JS in with the HTML. The fact that IE does many things differently to all other browsers doesn't help.
  11. Hello everybodyBeen browsing this forum for a while and thought I should join up.I have taught myself HTML and CSS to an intermediate level and I’m currently learning JavaScript, which can be quite confusing at times.
×
×
  • Create New...