Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript Function Help with onclick/onfocus prompt

Posted on 2010-08-21
6
Medium Priority
?
596 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 4

Accepted Solution

by:
flexiwebsw earned 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
Suggested Courses

618 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