SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 29 of 29
  1. #26
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, sorry for biting your head off...lol, anyway, your script works (I only had to make a few tweaks, but it was fundamentally sound)...you can see it here:

    http://www.html4me.com/imgScript/wri...n_images2.html

    I still prefer the original script, even though its code is perhaps a bit more complex than it needs to be...but I wrote it from scratch so I have to be proud of it...(I also really like the "Reset" button in mine, heh).

    Anyway, I had fun tweaking your script, and thanks for being classy.

  2. #27
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've used the same method for another little script, if your interested.
    Have you seen the naff drawing boxes made with grids? I used the same method as we've built here, but positioning absolutely the HTML output.
    A nice little drawing pad.....

    After drawing for a while it slows down alot. Does anyone know of a way of speeding it up, or any other small draw scripts?

    Code:
     
    <script>
    var IE = document.all?true:false
    function getMouseXY(e) {
      if (IE) {
    	tempX = event.clientX + document.body.scrollLeft
    	tempY = event.clientY + document.body.scrollTop
      } else {
    	tempX = e.pageX
    	tempY = e.pageY
      }  }
    var FdotString=""; 
    var AllowDraw=0; 
    var penTool="•"
    function draw() {
    if(AllowDraw==1){
    getMouseXY() 
    xpo=tempX-170
    ypo=tempY-180
    dotString=("<div id='dot"+xpo+"x"+ypo+"' style='position:absolute; left:"+xpo+"px; top:"+ypo+"px; z-Index:3; font-size:30px'>"+penTool+"</div>\n");
    document.getElementById("drawDiv").innerHTML+=dotString
    }}
    function TogglePen() {
    if(penTool=="•") {penTool="o"} else penTool="•"
    document.getElementById("PenToolSpan").innerHTML=penTool
    }
    </script>
    <div id="drawDiv" onMousedown="AllowDraw=1;draw()"  onMouseup="AllowDraw=0;" onMousemove="draw()" style="position:absolute; top:160px; left:160px; height:250px; width:250px; background-color:tan;z-Index:2; border-width:2px">
    </div>
    <div id=undrmn onclick=TogglePen()>Pen <span id=PenToolSpan>•</span></div>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #28
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greg -- I realize that you really don't give a hoot about what other people think of your scripts, and that's fine. But desiring self-censorship of feedback that may be of benefit to the poster (nicolenexus) so you can save face or whatever is not in the spirit of these forums. Point is, nicolenexus might care, even if you do not. Negative feedback is usually constructive criticism -- try not to take it so personally.

    You are both right and wrong about the document.write + loops issue. document.write() can be used successfully as long as the document object hasn't yet fully loaded, because at this time it's still open and you can write to it. Basically, once the BODY tag's onload event fires, the document object has loaded and it's too late to use document.write(). Well, you can still use it, but it the browser will create a new document object containing the requested content, and replace the current document object with it. So, looping through the string and adding image elements this way won't work.

    The most common method for dynamically adding HTML to a fully loaded page usually involves innerHTML. The other option is to create DOM nodes and append them to the document at a specified place. Since you've already seen innerHTML at work here, I'll show you how the node creation/appendation process works.
    Code:
    <html>
    <head>
    	<title>test</title>
    	<script type="text/javascript">
    		function preloadLetters()
    		{
    			textToImage.letters = new Object();
    			var ltrs = textToImage.letters;
    			var ll, lu;
    			for ( var i = 65; i < 91; i++ )
    			{
    				lu = String.fromCharCode( i );
    				ll = lu.toLowerCase();
    				ltrs[ll] = new Image;
    				ltrs[ll].src = ll + ".gif";
    				ltrs[lu] = new Image;
    				ltrs[lu].src = lu + ".gif";
    			}
    		}
    		function textToImage( str, pID )
    		{
    			var parent = document.getElementById( pID );
    			var img, c, i = 0;
    			while ( c = str.charAt( i++ ) )
    			{
    				img = document.createElement( 'img' );
    				img.src = ( this.letters ) ? this.letters[c].src : c + ".gif";
    				parent.appendChild( img );
    			}
    		}
    		function removeChildren( pID )
    		{
    			var parent = document.getElementById( pID );
    			while ( parent.lastChild )
    			{
    				parent.removeChild( parent.lastChild );
    			}
    		}
    	</script>
    </head>
    <body onload="preloadLetters()">
    	<form>
    		<input type="text" name="name" />
    		<input type="button" value="Go" onclick="textToImage( this.form.name.value, 'target' )" />
    		<input type="reset" value="Reset" onclick="removeChildren('target')" />
    	</form>
    	<div id="target"></div>
    </body>
    </html>
    I didn't add any modifiers for text-case since I didn't see anyplace that you specified what you wanted. I added a preloader -- the textToImage() function will still work, however, if you choose not to preload the images.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #29
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gregc
    I'm almost positive that wouldn't work. In my experience, document.write() doesn't work that well when used dynamically (with a loop), which is why I opted to use the innerHTML properthy instead. You can try editing my script to implement your function, to see if it works if you want.

    But stop ****ting on my script, I worked hard on it and it's an EXCELLENT piece of work.

    I hate it when people like you and beetle only give negative input, saying that too much namespace was used or some stupid **** like that. If you don't have anything constructive to say, just back off. If you edit my script with simpler code and it still works the same, then I'd be interested in your input. Otherwise, I couldn't care less about what you think. Got it?
    If my memory serves me rightly you are partly right that there is slight performance hinderance, in which the document.write method is slower than accumulating it as a variable. So basically just increment a variable like +1 or what ever string and use a single document.write(withAccumulatedVariable);

    This is what I presume you are getting at?

    http://www.xs4all.nl/~ppk/js/innerhtml.html

    Greg I have to say that I rather like Marks approach and I find it quite elegant. However, I must say as you kindly requested "constructive critism" that in your approach you should have opted for a switch statement instead of a nested if else statement, this will improve the performance, not only that you could have quite simply put it into a for loop, "why write something x amount of times", when you have already indexed them, anyway there are numerous faults in what you have coded, but hopefully that will get on the track to improving yourself. Take another look at how Mark simplifed it.

    Basically keep things simple and to a minimum, this will make it easier instead of putting a lot of hard work into what your trying to accomplish as the real solution is most likely far simpler than you first may imagine.


Bookmarks

Posting Permissions

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