Jump to content

dustcomposer

Members
  • Posts

    33
  • Joined

  • Last visited

Everything posted by dustcomposer

  1. Update: Save button added. You can save the code as HTML file to your desktop.
  2. Hi, on the CSS, use dot (.) selector for 'sortable' instead of (#) because it's a class.
  3. I've just created a really simple online editor for HTML, Javasacript and CSS in "w3schools tryit" style. I call it WePro. The title stands for Web Programming, so, it doesn't mean I'm a pro developer. Feedback are welcome as this is one of my lesson in learning web programming. Please visit: WePro Hit "Run" to execute. The Code area is draggable and you can toggle it by clicking the "WePro title above the page. Is this any good?
  4. hi, thanks dsonesuk. It would work for me, I have to run some test first; in my case, the svg images are created by users with their own numbers of dimension and style, and what makes it little bit more complicated is that users have a chance to create more than one 1 image to be appended on vary div as holder, my job is to get those svg image to a json file where other inputs also stored there too. I thought it would be easier if I can just get innerHTML of divs to stored svg images in a json, but then I found this info: create an SVG DOM tree from JSON, SVG 2 DOM/JSON Constructors; I think this is exactly what I need, but as the page says, there is no easy way to achieve this, json is a bad option to construct svg image. however, I will try your solution, I have created this new structure to try: [[{"parentId":"", "class":"svg", "id":"svg1", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path1", "d":"", "stroke":"", "stroke-width":"", "fill":""}],[{"parentId":"", "class":"svg", "id":"svg2", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path2", "d":"", "stroke":"", "stroke-width":"", "fill":""}],[{"parentId":"", "class":"svg", "id":"svg3", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path3", "d":"", "stroke":"", "stroke-width":"", "fill":""}]] Have a look at this nice free online json editor. but it would take some time for me. Thanks again.
  5. Hi, I'm using fileReader to load .txt file contains json. It works, apparently, when I parsed it, the <svg> tag doesn't show a svg image, it appears as text. Here's the json: [["24/11/2014 - 4:32", "blah", "blah blah", "blah blah blah"],[ "<svg class="dyHolder" id="dyHolder" style="1px solid red" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 5 L 140 0 M 0 5 L 140 10" style="stroke-width: 1; stroke: black; fill:none;"></path></svg>", "", ""]] and the result: This is text Lorem Ipsum blah blah <svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: black; fill:none;"></path></svg>. Another text..
  6. Hi, I have this following code: http://jsfiddle.net/dustcomposer/bapwnhy0/ var cresc_path = '<path class="dyna_line" id="dyna_line" d="M ' + 0 + ' ' + 0 + ' L ' + 50 + ' ' + 25 + ' M ' + 0 + ' ' + 50 + ' L ' + 50 + ' ' + 25 + '" style="stroke-width: 1; stroke: red; fill:none;" />';var dl = document.createElementNS("http://www.w3.org/2000/svg", "svg");dl.setAttribute('class', 'dyHolder');dl.setAttribute('id', 'dyHolder');dl.setAttribute('style', 'border:1px solid red');dl.setAttribute('width', '50');dl.setAttribute('height', '50');dl.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");dl.innerHTML = cresc_path;document.getElementById('a').appendChild(dl);var str = '<svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: red; fill:none;"></path></svg>';document.getElementById('b').innerHTML = str; both dl and str does result a svg image in html page. but when I grab similar string with str from json file, it appears as text like: <svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: black; fill:none;"></path></svg> can anyone explain what the problem is? UPDATE: I've found the problem! the saved json structure must be typed neat. If the json structure made like this: [[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]] the svg (as string) won't appears as svg but a paragraph/text. therefore it should written like this: [[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]] Everything works well now.
  7. Select option with css will work. <select name="mycountry"> <option value="Afghanistan">Afghanistan</option> <option value="Afrique du Sud">Afrique du Sud</option> <option value="Albanie">Albanie</option> <option value="Algérie">Algérie</option> <option value="Allemagne">Allemagne</option> <option value="Andorre">Andorre</option> <option value="Angola">Angola</option> <option value="Antigua et Barbuda">Antigua et Barbuda</option> <option value="Arabie saoudite">Arabie saoudite</option> <option value="Argentine">Argentine</option> <option value="Arménie">Arménie</option> <option value="Australie">Australie</option> <option value="Autriche">Autriche</option> <option value="Azerbaïdjan">Azerbaïdjan</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option></select> CSS select option { height: 50px; background-color: lavender;} Or simply size the select input: <select size='5' name="mycountry"> <option value="Afghanistan">Afghanistan</option> <option value="Afrique du Sud">Afrique du Sud</option> <option value="Albanie">Albanie</option> <option value="Algérie">Algérie</option> <option value="Allemagne">Allemagne</option> <option value="Andorre">Andorre</option> <option value="Angola">Angola</option> <option value="Antigua et Barbuda">Antigua et Barbuda</option> <option value="Arabie saoudite">Arabie saoudite</option> <option value="Argentine">Argentine</option> <option value="Arménie">Arménie</option> <option value="Australie">Australie</option> <option value="Autriche">Autriche</option> <option value="Azerbaïdjan">Azerbaïdjan</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option></select>
  8. as far as I know, when I still use html 4, the align attribute is only for left/right only. Try following code: <div style='text-align: center'><p><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="QGF5P9TN7L74U"><input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online."><img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"></form></p></div> Insert the image to a div and align the div to center.
  9. The <center> tag is not supported in HTML5. You need to add Style attribute to align an element, just like dsonesuk has told or using external CSS.
  10. what do you mean 'dynamic formatting' (sorry, I don't speak English well).
  11. the first one is XHTML declaration and you can read about the script here (CDATA).
  12. You want to make something like these?: http://corehtml5canvas.com/# http://corehtml5canvas.com/code-live/ch02/example-2.7/example.html my choice would be Canvas; it could be so complicated but could be fun too, just follow the links.
  13. My website is wp-based too, usually I ask a friend to modify it's codes (appearance-editor), but in your case, Ingolme's right, you shouldn't modify your wp-themes codes, contact woocommerce instead to see their documentations. For example: it seems to me that the page above (the one with the coupon button) controls with wc-cart-functions.php. Ask woocommerce to see if you can modify their script.
  14. I am. I will need it.
  15. I'm focusing on the XMLHttpRequest. I was looking for a method to 'Save/Open' file contains values of html elements, and then I found that XMLHttpRequest is a good one for me, like in this tutorial: http://www.w3schools.com/json/json_http.asp. I create a simple simulation as follows: User modify values of html elements on the web page (Input values, innerHTML, CSS, etc.). They can save the new values as a .txt file containing array (json). I create a string as json format template, user can copy them and save it with Notepad as .txt on their PC. They're going to need to upload the .txt file to our server (I guess this one will need PHP). Using XMLHttpRequest, as in the tutorial, user can 'open' the web page with 'saved' values from their .txt file. I tested this by upload my own array .txt and 'open' them using XMLHttpRequest, the web page updated with new values for its elements, it looks good for now. Just like AJAX intro says 'AJAX is about updating parts of a web page, without reloading the whole page.'. And as for the PHP, I think I'm going to need a classroom to learn them, but thanks for the lesson.
  16. Hi, what is the 'q' thing in this PHP AJAX tutorial: http://www.w3schools.com/php/php_ajax_php.asp : HTML page: xmlhttp.open("GET","gethint.php?q="+str,true); PHP file: $q=$_REQUEST["q"]; And how PHP read value of an input element (html) to be processed? The same question if using jquery AJAX.. I'm learning XMLHttpRequest and trying to figure out how PHP get data value from HTML element to be processed. I don't know anything about PHP, I've just started a start. Thanks!
  17. Yes, it all works fine and doesn't have to be in the same folder. Thanks again.
  18. so what should I do to get the tutorial work, can I simply upload the html page along with the js to the same folder where the .txt is (my web server)? Thanks Ingolme.
  19. I'm trying this w3schools tutorial about JsonHttp. All setted up but catch an error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. I surfed to find solution but some suggest to use php. w3schools doesn't say anything about php in the tutorial above, so I get confused as I don't use php. All I want to do is open a .txt file (contains json) and access its some values. Any help? Thanks!
  20. no, not website. just a little part of it, you know, small snippets, small apps, element styles, calendar, clock, map, brain games, etc. and it's not for critique purpose, it's more like.. fun, like to compete.
  21. Dear experts, As we know that we can do so much with these great languages such as: tools, plugins, templates, applications, design/styles, etc. and even games. I think a little bit member activity will be great. Perhaps w3schools could add one more category on this forum, a place where members can share their creation (the small one of course). Perhaps some of you can even make some kind of competition (?) just for fun. It's not like I have creations to share, this just came up in mind. Beside, I only know some basics; but will learn to make some if there's a room for that.
  22. well, don't give up. There is a way to detect user's device using navigator.userAgent; (just in case) here is the link about Navigator and userAgent, and here's another example to implement the code. I learnt about this before, but again, I never dealing with mobile stuff.. they always have very small things. You might want to try userAgent to detect user's device and insert some functions you need.
  23. I don't know what you're trying to achieve, but if you want to open/close the window (on the pic) when the mouse moving on the image.. this will do: * change the cursor css to pointer to make it more 'make sense'. * move the mouse horizontally on the image $(".model").mousemove(function(){ var relativeX = Math.ceil(event.pageX/123);var currentStep = relativeX*-230;$(".model").css("background-position", 0+" "+(currentStep)+"px");$("span").text("X: " + event.pageX + ", Y: " + event.pageY); });
×
×
  • Create New...