Posts by AleMonteiro

Hi everybody.

I'm trying to insert an indented code inside another indented code, using the first indentation as base for the second. I mean, the second indentation must begin at the end of the first.

The indentation i got working right, but it is adding some undesired line breaks, that i need to avoid.

Here is the example for the code, i won't post the actual code because the strings are build dynamically and some i got from text files. So i split it up and put it together for easy understanding.

//-------------------------------------------------
// STRING TO REPLACE WITH
//-------------------------------------------------
<div class="form-item">
	<div class="form-item-label inline" ><span></span></div>
	<input type="text" value="" >
</div>

//-------------------------------------------------
// STRING WHERE REPLACING IN
//-------------------------------------------------
<div id="formFiltro" class="form-filtro">
	<fieldset>
		<legend>Filtros</legend>
		
		<-'REPLACE_HERE'->

	</fieldset>
</div>


//-------------------------------------------------
// DESIRED RESULT
//-------------------------------------------------

<div id="formFiltro" class="form-filtro">
	<fieldset>
		<legend>Filtros</legend>
		
		<div class="form-item">
			<div class="form-item-label inline" ><span></span></div>
			<input type="text" value="" >
		</div>

	</fieldset>
</div>


//-------------------------------------------------
// MY ATTEMPT
//-------------------------------------------------

// newCode = string to replace with
// code = string where replacing

string pattern = "\r\n|\r|\n"; // Replace line breaks with "$1" to be used on the second replace

newCode = Regex.Replace( newCode, pattern, @"$1" );

pattern = @"([\s\t]*)(<-'REPLACE_HERE'->)"; //Copy default identation for new code while keeping "<-'REPLACE_HERE'->" on the original position

code = Regex.Replace(codigo, pattern, String.Format(@"$1$2$1{0}", newCode));


//-------------------------------------------------
// WHAT I GOT
//-------------------------------------------------

<div id="formFiltro" class="form-filtro">
	<fieldset>
		<legend>Filtros</legend>
		
		<div class="form-item">
		
			<div class="form-item-label inline" ><span></span></div>
			
			<input type="text" value="" >
			
		</div>

	</fieldset>
</div>

Thanks in advance.

It's quite simple, and you can do it in a lot of ways.

One one is to have an hidden drop down that'll be shown as the user clicks the button, and at the same time you need to hide the label that os appearing.

Another way is to request the drop down data to the server when the user clicks the button and then create the options dynamically.

Another way is to request the entire drop down to the server and just use the innerHTML property to set it.

And then you'll need a button to get the new information and send it to the server, and then change it back to the label only.

Hope it helps.

The link is not working, so i can't see the problem.

Hey, there you go:

$(this).parents('div.etiquetas').next('div.contentor_visualiza').toggle(200);

This works, but i recommend you to change your HTML structure.

Actual: <etiquetas> <botoes_comando/> </etiquetas> <contentor_visualiza/>...

For what you wanna do, it should be: <etiquetas> <botoes_comando/> <contentor_visualiza/> </etiquetas>...

and then you use:

$(this).parents('div.etiquetas').children('div.contentor_visualiza').toggle(200);

The HTML that your PHP page generates. Use the view source option in your browser.

Can you post an resulting HTML?

Take a look at AjaxQueue plugin.

Sorry, i forgot to one level, try this:

$('div.visualiza').click(function() {    
    $(this).parent().parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});

Hey, you need to specify wich div you want to show up. By the structure of your HTML I guess this should work:

$('div.visualiza').click(function() {    
    $(this).parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});

Hope it helps

You don't have any clue about coding, do you?

I recommend http://w3schools.com for begginers.

Good luck!

I understand, but JQuery in fact is not another language, it's just a javascript library so you can write less code.

But if you'll stick with pure javascript, tell me what is happening with your solution and maybe i can help.

You'r welcome!

About your fade problem, did you give a try at JQuery?

It has a pretty helpfulls effect methods:

$("#id2").fadeIn("normal");
$("#id1").fadeOut("normal");

It should do the trick.

http://jquery.com

Just an idea for you to test:

elem2.style.opacity = parseFloat(elem2.style.opacity) + interval;

There is a lot of ways you can do that, one of them is:

<html>
	<head>
		<title>JavaScript Window Open/Close Example </title>
	</head>

	<script type="text/javascript">
	   
		var my_window;
	   
		function popuponclick()
		{
			my_window = window.open("",	"mywindow","status=1,width=350,height=150"); // Open window
	 
			if (my_window.opener == null) // Set opener window of the child for compatibility issues
				my_window.opener = self;
	 
			my_window.document.write // Insert content in the child (so i don't have to create an b.html)
			(
				'<input type="text" id="my_window_text" value="" />' +
				'<a href="javascript: opener.updateAndClose();">OK</a>'
			);
		}
	 
		function updateAndClose()
		{
			document.getElementById("my_text").value = my_window.document.getElementById("my_window_text").value; // Set the parent window text input with the child window text input value
			my_window.close(); // close child window
		}
		
	</script>
	
	<body>
		  <a href="javascript: popuponclick()">Open Popup Window</a>
		  
		  <br/>
		  
		  <input type="text" id="my_text" value="" readonly />
		  
	</body>

</html>

Base example from: http://www.javascript-coder.com/

Hope it helps, and if it does, please set it as an answer.

Hi, normally it should have an = yes, but using JQuery we use methods to set values. And in methods, the value is passed in ();

Just to be explict, the jquery.js needs to be on the same folder as the html.

Here's the working example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">

<style>
	#indexcontent{
	background-color:#336699;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	display:inline;
	position:relative;
	width:421px;
	float:left;
}
	
#indexblog {
	background-color:#3333FF;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	position:relative;
	width:421px;
	float:left;
	margin-left:100px;
}

</style>

<script type="text/javascript" src="jquery.js"></script>

<script>


// Tell the browser to execute fixHeights when the document is ready

$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference

	var content = $("#indexcontent");
	var blog = $("#indexblog");

	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}


</script>


</head>


<body>


<div id="column-container">

 <div id="indexcontent">dwqdwqf<br>
 dnjkwlka<br>
 dsadsa<br>
 daDASDS<br>
 dsadsadas<br></div>
 <div id="indexblog">dsadfw<br>
 few<br>
 fe<br>
 wf
 ew
 few
 f
 ew
 few
 few
 </div>

</div>




</body>
</html>

Hi, you should use JQuery to make it easier.

<script type="text/javascript" src="jquery.js"></script>

With JQuery the folliwing script should work:

// Tell the browser to execute fixHeights when the document is ready
$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference
	var content = $("#indexcontent"); 
	var blog = $("#indexblog");
	
	
	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}

http://jquery.com/

It should work but i recommend you to study a little about javascript, it can be very usefull.

Hi, you should use JQuery to make it easier.

<script type="text/javascript" src="jquery.js"></script>

With JQuery the folliwing script should work:

// Tell the browser to execute fixHeights when the document is ready
$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference
	var content = $("#indexcontent"); 
	var blog = $("#indexblog");
	
	
	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}

http://jquery.com/

It should work but i recommend you to study a little about javascript, it can be very usefull.

Hi, I would do it using JQuery.

I just didn't understood if the refresh will be trigerred by some user event or if it should refresh automatically.

function requestDivContent()
{
	var url = "http://myPage.com"; // URL to get the data
	var data = // Paramters, PHP Ex.: $name = $_POST["name"];
	{
		name : "name", 
		id : 20 
	};
	
	$.post(url, data, showDivContent); // Send the request
	
	// if you don't need to pass any data
	// $.post(url, showDivContent);
}

function showDivContent(divContent)
{
	$("#divContent").html(divContent); //Replace any existing content
}

// -------------------------------------------
// IF it should do automatically

var oTimer;

function initMySQLLink()
{
	var time = 5000; // 5 seconds
	oTimer = setInterval(requestDivContent, time); // Start the timer and save the it's reference
}

function stopMySQLLink()
{
	clearInterval(oTimer); // Cancel the timer
}

Links:
$.post()
setInterval()

It should work (I didn't test it), but there is no error handling. To handle errors you should use $.ajax()

Here is a condensed version:

var oTimer;

function refreshDivContent()
{
	oTimer = setInterval
	(
		function()
		{
			$.post
			(
				"http://myPage.com", 
				{name : "name", id : 20}, 
				function(divContent)
				{
					$("#divContent").html(divContent);
				}
			); 
		},
		5000
	);
}

Hope it helps.

Just set type="button"

<input type="BUTTON" name="ConfirmBooking" id="ConfirmBooking" value="Confirm Booking" onclick="Accept()" />

When using input for buttons, use onClick event for type="button" and onSubmit for type="submit"(in this case, the listener must return false for canceling the submit).

Hope it helps.

You're welcome Shuka79.

I've nerver used this Flock browser, i'm from Brazil and it's not a popular browser down here, but you should debug the script to see what part is going wrong.

Have a good day.

I would try something like this, tested on IE 8 and FF 3

<script type="text/javascript">

window.onload = function ()
{
	var menu = document.getElementById("menu"); // Get menu object
	for (var i=0; i < menu.children.length; i++)
	{
		menu.children[i].children[0].onclick = menuItemClick; // Add click events for each menu item
	}
}

function menuItemClick(event)
{
	
	var target = window.event ? window.event.srcElement : event.target; // Get the menu item being clicked
	var parent = target.parentNode; // Get current LI
	
	if ( parent.children.length > 1 ) // If has submenu
	{
		var submenu = parent.children[1]; // Get the submenu object
		
		if ( submenu.style.display == "block" )
		{
			submenu.style.display = "none";
			target.style.color = "#FFFFFF";
			parent.style.background = "#FF0000";
		}
		else
		{
			submenu.style.display = "block";
			target.style.color = "#000000";
			parent.style.background = "#00FF00";
		}
	}
}

</script>

<style type="text/css">

	.menu li
	{
		background: #FF0000;
	}

	.menu li a
	{
		color: #FFFFFF;
	}

	.menu li ul
	{
		display: none;
	}

</style>

<div class="menu-layout">
	<ul id="menu" class="menu">
		<li><a href="#">item 1</a></li>
		<li>
			<a href="#" >item 2</a>
			<ul  class="submenu">
				<li><a href="#">sub item 1</a></li>
				<li><a href="">sub item 2</a></li>
				<li><a href="">sub item 3</a></li>
				<li><a href="">sub item 4</a></li>
			</ul>
		</li>
		<li><a href="#">item 3</a></li>
		<li><a href="#">item 4</a></li>
	</ul>
</div>