SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    webality...dunno what it means bcp_2005's Avatar
    Join Date
    Jun 2002
    Location
    Huntsville Alabama
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    custom JS prompts

    Is there a way to create your own custom JS prompts? I need to make one with text boxes and stuff like that. I would rather not open a new window with text boxes and stuff. If you know a of a good resource please, let me know! Thanks in advance!
    [ metabahn ] : changing the course of the web.

  2. #2
    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)
    How much data do you need to collect? You can use a succession of prompts, but your better choices are to use a hidden form (toggled to visible) or a popup.
    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




  3. #3
    webality...dunno what it means bcp_2005's Avatar
    Join Date
    Jun 2002
    Location
    Huntsville Alabama
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, i've been using a succession of prompts but need something different. I've seen it done before. I only need about 2-5 pieces of data.
    [ metabahn ] : changing the course of the web.

  4. #4
    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)
    I've never seen it, although there may be something that ActiveX lets you do.

    why not just do this?
    Code:
    <script>
    function toggleForm(l) {
    	var f = document.getElementById('formCont');
    	if (f.currentStyle.display == 'none') {
    		f.style.display = 'block';
    		l.innerText = 'Click here to hide form';
    		}
    	else {
    		f.style.display = 'none';
    		l.innerText = 'Click here to show form';
    		}		
    	}
    </script>
    
    <div id="formCont" style="display:none">
    	<form>
    	(...HTML...)
    	</form>
    </div>
    
    <span style="cursor:hand" onClick="toggleForm(this)">Click here to show form</span>
    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




  5. #5
    webality...dunno what it means bcp_2005's Avatar
    Join Date
    Jun 2002
    Location
    Huntsville Alabama
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea that would definately work. why didn't i think of that? dang i feel stupid. anyways thanks for your help!
    [ metabahn ] : changing the course of the web.

  6. #6
    SitePoint Addict been's Avatar
    Join Date
    May 2002
    Location
    Gent, Belgium
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been working a bit on the same thing, but I don't think that the
    Code:
    if (f.currentStyle.display == 'none')
    test works in Mozilla. In the same way I suspect the onClick() event handler to fail in Mozilla.

    I do the following test:
    Code:
    if( f.style.display == 'none' )
    which seems to work in both browser I use (IE & Mozilla)
    The span tag, I would substitute it for something like
    Code:
    <a href="javascript:toggleForm()">...</a>
    BUT, I have a somewhat related, albeit different problem:
    I have a little DHTMLapi.js lib, containing (among others) following functions:
    Code:
    function getObject( obj )
    {
        if( typeof( obj ) == "object" )
        {
            return obj;
        }
        else
        {
            return document.getElementById( obj );
        }
    }
    
    function collapse( obj )
    {
        var theObj = getObject( obj );
        theObj.style.display = "none";
    }
    
    function expand( obj )
    {
        var theObj = getObject( obj );
        theObj.style.display = "block";
    }
    Then, in a php generated page, I, or at least the script ( wooohahaha sometimes I just crack myself), outputs something like this:
    Code:
    <style>
    #collapsedMessage
    {
        display: none;
    }
    </style>
    <script language="javascript" src="lib/DHTMLapi.js"></script>
    <script language="javascript">
    function toggleMsg( objIdName )
    {
        obj = getObject( objIdName );
        if( obj.style.display == "none" )
        {
            expand( obj );
        }
        else
        {
            collapse( obj );
        }
    }
    
    ...
    <a href="javascript:toggleMsg( 'msg21' )">titel 21</a><br />
    <div id="msg21" class="collapsedMessage"> some message </div>
    
    <a href="javascript:toggleMsg( 'msg22' )">titel 22</a><br />
    <div id="msg21" class="collapsedMessage">some other message</div>
    
    ...
    Now the problem is it works (huh?)
    BUT not the first time I click on the link...
    If I've clicked it once, it works like a charm, but NOT on the first click!

    Now if I use a boolean to test on in my toggleMsg() function (instead of the obj.style.display=='none' test) it DOES work from the first click ?

    Now has this to do with something like '<i>a tag with its display-property set to 'none' is not 'recognized' in the document object</i>' or something? Cause I'm intending to put out quite some messages on 1 page, which should result in the use of an array of booleans, just to keep track of which message are in collapsed view, and which are in expanded view, and that doesn't seem like very good programming to me...

    Maybe anyone knows of another solution, similar to mine, but where the object DOES collapse with the first click ?
    Or am I doing something stupidly wrong here?

    PS: I've experienced exactly the same 'problem' in both IE5.5 IE6 and Mozilla1.0rv1.0.0, which indicates somewhat that I am making the 'mistake'...
    Per
    Everything
    works on a PowerPoint slide

  7. #7
    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)
    Well, although I didn't know that the currentStyle property doesn't work in Moz, I DO know that it's purpose is specific, and may be causing your errors. Here's the diff as they apply in IE

    obj.style
    Read/write. Retrieves/sets style data for obj. Will only read inline style data.

    obj.currentStyle
    Read only. Retrieves inline AND cascaded styles.

    obj.runtimeStyle
    Read/write. Retrieves/sets inline and cascaded style data for obj. obj.runtimeStyle affects obj.currentStyle, but NOT obj.style.

    Since you are applying display:none to your DIV in a cascaded style, I may suspect that is why you are having trouble accessing it.

    Like I said, don't know about Moz tho...
    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




  8. #8
    SitePoint Addict been's Avatar
    Join Date
    May 2002
    Location
    Gent, Belgium
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the display.currStyle doesn't do it in my Mozilla. So that's not an option for me...

    But, my reasoning about the object not being recognized in the document object was kinda right, except it's the script that doesn't know about the display property being set in the CSS!

    So what I did:
    I inversed the display-test as so:
    Code:
    if( obj.style.display == "block" )
    {
        collapse( obj );
    }
    else
    {
        expand( obj );
    }
    And that does seem to work in both Moz as IE.

    Anyways, thx for your insights.
    Per
    Everything
    works on a PowerPoint slide

  9. #9
    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)
    Cool, glad it's working. Of course, I think you have too many functions for that purpose...I'd combine these
    Code:
    function collapse( obj )
    {
        var theObj = getObject( obj );
        theObj.style.display = "none";
    }
    
    function expand( obj )
    {
        var theObj = getObject( obj );
        theObj.style.display = "block";
    }
    
    function toggleMsg( objIdName )
    {
        obj = getObject( objIdName );
    	if( obj.style.display == "block" )
    	{
    		collapse( obj );
    	}
    	else
    	{
    		expand( obj );
    	}
    }
    into this
    Code:
    function toggleMsg( objIdName ) {
    	obj = getObject( objIdName );
    	obj.style.display = ( obj.style.display == "block" ) ? "none" : "block";
    	}
    Because your collapse() and expand() funtions don't do anything special, they just call the getObject() function again (which is unecessary) and alter the CSS display property.
    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




  10. #10
    SitePoint Addict been's Avatar
    Join Date
    May 2002
    Location
    Gent, Belgium
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off course, you are right.

    Still, I'm going to keep the collapse() and expand() functions, 'cause you never know when they could come in handy.

    I'm not able to give you an example of a situation where I would need to use expand() or collapse() instead of toggleMsg(), but it's not because I can't think of one that it won't occur
    On top of that, it's only 10 lines of code extra, that shouldn't be a problem in a test environment ;-)

    greetz, and thx again.
    Per
    Everything
    works on a PowerPoint slide


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
  •