SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating div instead of alert boxes

    I'm intersted in using floating div's to display warning messages instead of JS alert(). Are there any disadvantages to doing that? Also, do you know of any tutorials on this? Thanks.

  2. #2
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure of any tutorials, but dojo (and im sure most ajax libraries) can do it for you:

    http://www.dojotoolkit.org/ -> see it in action -> layout widgets -> dialog

    If you download the toolkit you will get the code. It looks something like this:

    javascript:
    Code:
    <script type="text/javascript"> djConfig = { isDebug: true }; </script>
    <script type="text/javascript" src="../../dojo.js"></script>
    <script type="text/javascript">
    	dojo.require("dojo.widget.Dialog");
    </script>
    
    <script type="text/javascript">
    var dlg;
    function init(e) {
    	dlg = dojo.widget.byId("DialogContent");
    	var btn = document.getElementById("hider");
    	dlg.setCloseControl(btn);
    }
    dojo.addOnLoad(init);
    
    </script>
    css:
    Code:
    <style type="text/css">
    body { font-family : sans-serif; }
    .dojoDialog {
    	background : #eee;
    	border : 1px solid #999;
    	-moz-border-radius : 5px;
    	padding : 4px;
    }
    
    form {
    	margin-bottom : 0;
    }
    </style>
    inline javascript (link to show dialog):
    Code:
    <a href="javascript:dlg.show()">Show</a>
    Your dialog (they have a little for you can full in)
    Code:
    <div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250">
    	<form onsubmit="return false;">
    		<table>
    			<tr>
    				<td>Name:</td>
    				<td><input type="text"></td>
    			</tr>
    			<tr>
    				<td>Location:</td>
    				<td><input type="text"></td>
    			</tr>
    			<tr>
    				<td>Description:</td>
    				<td><input type="text"></td>
    			</tr>
    			<tr>
    				<td>Location:</td>
    				<td><input type="file"></td>
    			</tr>
    			<tr>
    				<td colspan="2" align="center">
    					<input type="button" id="hider" value="OK"></td>
    			</tr>
    		</table>
    	</form>
    </div>
    ..the nice thing about using floating divs instead of JS alert is that you can do so much more with it because it is just HTML.

    i can imagine that you may be in danger of not re-enabling stuff after you have disabled it for the dialog. Or maybe not hiding your dialog properly or something...Thats why i like to use a library like dojo. apart from the fact that it makes life a lot easier, i can relax a bit, because i am sure their javascript is much better than mine!

    hope that helps.


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
  •