Solved

Javascript Function Help with onclick/onfocus prompt

Posted on 2010-08-21
6
547 Views
Last Modified: 2012-05-10
Hi, I've made a Javascript function that gives a prompt, though is there anyway that if a user clicks on the Subject, the contents of it disappears?
<script language="javascript">
function Test(){
	var ok = prompt("Title", "Subject");
	if (ok){
		window.location = "?root=main" + ok;
	}else{
		return false;
	}
}
</script>

Open in new window

0
Comment
Question by:eNarc
6 Comments
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 33491183
Not with a native "prompt", but you could achieve it with a div overlay and an input control and some buttons.
0
 
LVL 3

Expert Comment

by:JtR
ID: 33491213
why using that ugly prompt (i already forgot that this function exists in javascript) ;D

make a fancy div based form or open a new window which you can control!
0
 
LVL 5

Author Comment

by:eNarc
ID: 33491484
what should I use and how would I go about achieving this? would anyone provide an example function?
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 4

Accepted Solution

by:
flexiwebsw earned 500 total points
ID: 33492080
You could implement a simple blackout script with a popup div.

you can find an example for what you need below.

<head>
<style type="text/css">
body{
      z-index: 0;
}
#outer {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      display: none;
      z-index: 90;
}
.popup {
      display: none;
      position: relative;
      background-color:#FFF;
      width: 300px;
      height: 100px;
      z-index: 100;
      margin: auto;
}
#popuptitle {
      color: #FFF;
      background-color:#0CF;
      font-weight: bold;
      height: 20px;
      text-align: center;
}
.popupbody {
      padding-top: 10px;
      padding-bottom: 10px;
      color: #FFF;
      text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
     
        
        //----------
        

      function showPopup(p, o)
      {
        scroll(0,0);
              if (document.all)
            {              
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
            greyout(true);
        document.getElementById(p).style.display = 'block';
            document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
             document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
            document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
              obj.style.height = '100%';
              obj.style.width = '100%';
              obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
              obj.style.height = '100%';
              obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
      hidePopup('popup', 'outer');
            window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
      document.getElementById('popuptitle').innerHTML = title;
      document.getElementById('popuptext').value = subject;
      var w = window.innerHeight / 2;
      document.getElementById('popup').style.marginTop = w - 50 + 'px';
      showPopup('popup', 'outer');
}
function clr(id){
      document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>


<head>
<style type="text/css">
body{
	z-index: 0;
}
#outer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	display: none;
	z-index: 90;
}
.popup {
	display: none;
	position: relative;
	background-color:#FFF;
	width: 300px;
	height: 100px;
	z-index: 100;
	margin: auto;
}
#popuptitle {
	color: #FFF;
	background-color:#0CF;
	font-weight: bold;
	height: 20px;
	text-align: center;
}
.popupbody {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
      
	  
	  //----------
	  

      function showPopup(p, o)
      {
        scroll(0,0);
		  if (document.all)
            {               
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
		greyout(true);
        document.getElementById(p).style.display = 'block';
		document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
		 document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
		document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
		  obj.style.height = '100%';
		  obj.style.width = '100%';
		  obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
		  obj.style.height = '100%';
		  obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
	hidePopup('popup', 'outer');
		window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
	document.getElementById('popuptitle').innerHTML = title;
	document.getElementById('popuptext').value = subject;
	var w = window.innerHeight / 2;
	document.getElementById('popup').style.marginTop = w - 50 + 'px';
	showPopup('popup', 'outer');
}
function clr(id){
	document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:eNarc
ID: 33494860
that is very fancy, I like it allot, thankyou.
0
 
LVL 4

Expert Comment

by:flexiwebsw
ID: 33495105
You are more than welcome.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Fulfillment API php code sample 1 40
mysql date time 14 30
How can I make this form submit to itself? 10 27
Select case on click 3 16
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question