Solved

Javascript Function Help with onclick/onfocus prompt

Posted on 2010-08-21
6
539 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now