...

View Full Version : Exiting Function



mikhial66
07-13-2011, 04:57 AM
The code below is simply supposed to have a menu show up whenever one of the paragraphs is clicked on. There are two options in that menu: Turn the paragraph that was clicked red or exit(hide) the menu. The problem I'm having is that I cannot find out how to get out of the two functions when exit/hide is clicked on.

So if I click on Paragraph 1 and hide the menu, I want to be able to turn another paragraph red without it affecting the first paragraph. I hope this makes sense. Also, I know there are easier ways of doing this task, but my goal is not to simplify this task. I want to learn how to fix the problem as it is presented. Anyway, thanks in advance!


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(".numbers").live('click', function(event){
$('.action, .menuhead').css('visibility','visible');
var num = $(this).attr('id');

$(".menuhead").click(function(){
$('.menuhead, .action').css('visibility', 'hidden');
//I need to exit both functions here
});

$(".action").click(function(){
$('.menuhead, .action').css('visibility', 'hidden');
$('#'+num).css('color','red');
});
});


</script>
</head>
<body>
<p class='numbers' id='1'>1</p>
<p class='numbers' id='2'>2</p>
<p class='numbers' id='3'>3</p>
</div>
<p class='menuhead' style='visibility: hidden'>Exit Menu</p>
<p class='action' style='visibility: hidden'>Cange Color</p>
</body>

devnull69
07-13-2011, 10:09 AM
EDIT: My post was nonsense

ereignis
07-13-2011, 10:30 AM
a simple way would be to attach each event separately, make 'num' global to the functions, et voila... (i think a more elegant solution with callbacks and such might work too, but probably unnecessary here)


$(document).ready(function(){
var num = "";
$(".numbers").live('click', function(event){
$('.action, .menuhead').css('visibility','visible');
num = $(this).attr('id');
});
$(".menuhead").live('click', function(){
$('.menuhead, .action').css('visibility', 'hidden');
});
$(".action").live('click', function(){
$('.menuhead, .action').css('visibility', 'hidden');
$('#'+num).css('color','red');
});
});

smsatish
07-13-2011, 10:37 AM
This is for testing


a simple way would be to attach each event separately, make 'num' global to the functions, et voila... (i think a more elegant solution with callbacks and such might work too, but probably unnecessary here)


$(document).ready(function(){
var num = "";
$(".numbers").live('click', function(event){
$('.action, .menuhead').css('visibility','visible');
num = $(this).attr('id');
});
$(".menuhead").live('click', function(){
$('.menuhead, .action').css('visibility', 'hidden');
});
$(".action").live('click', function(){
$('.menuhead, .action').css('visibility', 'hidden');
$('#'+num).css('color','red');
});
});

bullant
07-13-2011, 10:50 AM
If it doesn't need to be done with jquery, maybe use this demo as a guide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#menu {
display: none;
}
</style>
<script type="text/javascript">
function changeParColor(obj){
curParO = obj;
menuO.style.display = 'block';
}
function hideMenu(){
curParO = '';
menuO.style.display = 'none';
}
window.onload=function(){
menuO = document.getElementById('menu');
//set the paras onclicks
var parasO = document.getElementsByClassName('paras');
for(i=0; i < parasO.length; i++){
parasO[i].onclick = function(){changeParColor(this);}
}
//set the menu btns onclicks
document.getElementById('btnChangeColor').onclick=function(){
curParO.style.color = 'red';
hideMenu();
}
document.getElementById('btnCancel').onclick=function(){
hideMenu();
}
}
</script>
</head>
<body>
<p class="paras">Parag. 1</p>
<p class="paras">Parag. 2</p>
<p class="paras">Parag. 3</p>
<div id="menu">
<button id="btnChangeColor">Change color</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum