Posts by AleMonteiro

You are welcome.

If you don't have any other doubts, please mark as solved, and if you think, as helpful.

I really didn't understand what you are trying to do, but post you css so I can see the menu working and see if I figure it out.

You just spit some code, but what's your problem? What are you trying to accomplish? What work and what does not?

I think that works, but you can improve that, if you want.

You could perhaps, in case of conflict when removing, alert the user and offers him the choices he would have, for example:
- Delete the row and conflicted row
- Keep change (must change conflicted row)
- Cancel change

Right and wrong depends too much on the flexibility you want your use to have.

Your HTML structure don't let you do it. a#one is inside div.round, so every time you click a#one, you are mousing over div.round.

The best way is to modify your HTML with that in mind.

One way to do it, is this:

$(document).ready(function(){
    $("#expand").hide();
    $("#open").mouseover(
        function(){ $("#expand").slideDown(); }
    );
	$("#one").click(function(){
		$("#expand").slideUp("slow");
		 return false;
	  });
});
</script>
	<div class="round">
		<p><span id="open">Content here visible from start...</span><span class="ap-link"><a id="one" href="#expand">Show / hide full content </a></span></p>
		<div id="expand"><p> ...the rest of content is here.</p></div>
	</div>
</body>

But there is a lot of another ways too.

This is something that should work:

$(function() // document ready
{
	$('<div/>') // create div 
		.html('<?= $chat_member_name; ?>') // set html content
		.attr({ // set attributes
			  id: 'chat_name_<?= $chat_user_id; ?>',
			  className: 'chat_name'
		})
		.appendTo('#chat_bar'); // append to chat box

	$('<div/>')
		.html('<?= $chat_text; ?>')
		.attr({
			  id: 'chat_text_<?= $chat_user_id; ?>',
			  className: 'chat_text'
		})
		.appendTo('#chat_box');
});

Your approach was more clean, but it has compatibility issues with IE(http://api.jquery.com/jQuery/)

You have some options, two of them are:

Option 1. Before removing one row you need to check if it will cause any rout problem. If there is a problem, you don't remove the row.

Option 2. After you remove one row, you check if that lead to any rout problem. If so, you need to alert the error or set the location to 'Select Location' on the problematic row.

Hope it helps.

Does it throws any errors?

One more though about your code: All images(thumbs and big) are loaded when the page loads. Because all images are created on the HTML.

So, if the big images that are not seen, are loaded.

If you wish to just load the viewed images: instead of creating one image tag for each big image, you need to create only one image and change the src with JS.

Instead of passing the id of the image to the change_image() you could pass the image url and then set it on the big image display.

Just an observation.

Violet, '$' doesn't mean anything to the browser, it's just part of the variable name.

I only name the vars with $ so I can tell it's a JQuery object. But if you want to name it objImage, it's the same thing.

The problem was not the $, but the misspell of the var name.

Violet,

you are using the '$image' var but you are creating with the name 'image'.

var image = $("#" + image); // This should be var $image
$image.hide().fadeIn(1000);

Fix this and see the result.

Violet, yes. It removes the handlers that the button has.

I did it because: every time the change_image() runs it adds a new click handler to the close_button, and when you click the button all handlers are executed.

Example: you open image one, close it and then open image two. When you close the image two it will actually try to close image one again(because the handler is still there).

If you open 10 images, when you close the last one, it would try and close all 10 again.

In your code this wasn't a problem, because the image one was already closed, so it won't do anything on the UI, but it still running and consuming memory.

This is a simple test page so you can see what really happens:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(function(){
            var $btn1 = $("#myButton_1");
			var $btn2 = $("#myButton_2");
			
			$btn1
				.click(function() { // Adds handler 1
					alert("Handler 1");
				})
				.click(function() { // Adds Handler 2
					alert("Handler 2");
				});
				
			$btn2
				.click(function() { // Adds handler 1
					alert("Handler 1");
				})
				.unbind('click') // Unbinds handler 1
				.click(function() { // Adds Handler 2
					alert("Handler 2");
				});
        });
    </script>        
</head>
<body>
    <button id="myButton_1" type="button">No Unbind</button>
	
	<button id="myButton_2" type="button">Unbinded</button>
</body>
</html>

You're welcome.

Hi Violet, I think it's a good way to do it, and it's quite fast. I did something similar myself.

But you can always improve your code, I suggest something like this:

var $box, $overlay, $closeButton;

$(function()
{
	// Get re-used jquery objects only at page load
	// It would be even better if used ID(faster)
	$box = $(".box");
	$overlay = $(".overlay");
	$close_button = $(".close_button");
});

function change_image(image)
{
	var $image = $("#" + image);
	
	$overlay.hide().show();
	$box.hide().show("slow");
	$image.hide().fadeIn(1000);	
	$close_button.show();

	$close_button.unbind('click').click(function() {
		$(this).hide();
		$image.fadeOut("fast");
		$box.hide("slow");
		$overlay.hide("slow");
	});
}

Good work.

Hi,

for what I can see, you don't have the id value, you just have the string '$id'.

This is all of your code?

The function htmlspecialchars() returns a string and you are testing it against a integer, that might be the problem.

When the click occurs you have to set the cookie, and then on the page load function you have to check the cookie and apply the class again.

Pravinrasal,

if you want the length, you need to use an array.

//Create array
var graphArray =new Array();
// Add item to array
graphArray.push({ "concentration" : concentration,"answers" : ans });
// Alert array length
alert(graphArray.length);

But your code has some problems, for example: the options has no value, so the changeConcentration() function is not working.

I'm glad to know it.

Just mark as solved then.

Seeya.

Something like this, if you are closing from the parent window.

var childWindow = window.open(....);
childWindow.close();

if you want to close from the child window, you can do this:

self.close();

Hope it helps.

This should work fine:

<asp:Label ID="Label1" runat="server" Text="<%= Session["value"].ToString() %>" />

Doesn't it?

You need to the set the target of the anchor: target="FRAME"

Would be something like this:

<ul>
      <li><a href="first.html" target="myInlineFrame">First Page</a></li>
      <li><a href="second.html" target="myInlineFrame">Second Page</a></li>
    </ul>

Good luck.

You can make something like this:

data = data.substring(data.lastIndexOf('-->') + 4);

That's sucks... the best option is to disable this functionality on the pages you need.Talk to your host provider to know how you can do it.

But you gotta other options too, one of them is to ignore that text, use replace or something like that.

what do u mean? show me the result.

try alerting the data and see that it says:

alert(data);

what do you mean? The length should be 4, isn't it?

And your code remains wrong: data != "true"

when you print the data, what does it show?

This

if (data != "true")

shoud be:

if (data == "true")

Try this one:

$('ul#one > li:has(a.identified) > a').css('background-color', 'red');

Is only one div that you want to resize? What do you want to do with it?

You have the logic, you just need to get the divs instead of the images. To do that use: document.getElementsByTagName("div").

And don't forget to loop throw the array, cause in your code you are justing change the image indexed at 0.

Your code looks ok, did you check those itens:
- From e-mail and from password are really ok?
- Gmail port is really 587?

If it's ok, try those things:
- Don't set EnableSsl
- Don't set UseDefaultCredentials
- Don't set DeliveryMethod

i used gmail smpt and never set those, and it worked. But i don't remeber the smpt port.

Hope it helps.

Please post the code for gallery.php.

The parameter 'g' is being passed thru the link, but maybe is not being used on gallery.php.

You are welcome.

Just mark as solved please.

And an advice, try to be more specific on the thread title. "JS Help" means nothing inside an javascript forum. This thread, in example, could be named like "Text problem with dynamic box size" or "Dynamic box size with text".

Cheers.

You have to set the text before starting the expanding.

And to be sure that the text will not overcome the size, and display outside, you have to set the overflow style to hidden;

#move { overflow: hidden; }

asif39, what text? Your code don't have any text.

Violet, yes. You have to calculate the coordinates and set it to the image.

And yes, it's better to start a new tread about the compatibility issue.

Please mark as solved if you don't have any more doubt about the subject.

Good luck.

Violet,

about the img and src: The src is a property of the img element, so we must first find the img element to be able to get it's src. In my code I first create a variable for the img just to make the code more understandable, but we can do it all at once:

var url = $(this).children("img").attr("src");

About the quotes: it's not necessary, it's just a code pattern I use. In css we can use both url(path) and url('path'). So we can do the same in JS. If you think it's better, just cut off those things.

About the .children() and .next(): JQuery has a lot of good methods to find DOM elements. Those are just a couple, but there is a lot more, like: .find(), .parent(), .siblings(), .closest() and etc.

JQuery documentation is great for discovering those methods, and it has a lot of samples and usage example.

Now about your code:

When you use onClick="change_image('big_image_2')" you are calling the function passing the string "big_image_2" as parameter. I mean, you are sending a string not an object. That's why you need to get the object. But you can pass the object directly.

change_image('big_image_2') // The quotes means it's a string
change_image(big_image_2) // Without the quotes you are referring to the object witch the ID is big_image_2

About centering the image: If you always want to keep the image on the center you need to listen to the …

Violet, your code won't work cause you can't use $(function(){}) inside an function.

$(function(){}) is a shortchut to window.onload event, so if you put it inside another function it won't be executed.

Also, the param you recieve in the changeImage function is a string, so you would need to get the element by that id.

To your function to work it should be something like this:

function change_image(image)
{
    $(".overlay").show();
    $(".box").show("slow");
    $("#" + image).fadeIn(4000);
    $(".close_button").show();
 
    $(".close_button").click(function() {
        $(this).hide();
        $("#" + image).fadeOut("fast"); // You need to close the opened image now
        $(".box").hide("slow");
        $(".overlay").hide("slow");
    });
});
}

But let me explain my code, i've ajusted to your new html with hidden full image:

// Set on document ready/window onload event
		$(function() {
			// Set click listener on <a>
			$("a.full_image").click(function() {
				
				// $(this) is the <a> element clicked
				var $imgThumb = $(this).children("img"); // Get the <img> element inside the <a>
				var $imgFull = $(this).next("img"); // Get the next <img> element besides <a>
				
				var urlThumb = $imgThumb.attr("src"); // Get the src attribute from the thumb <img>
				var urlFull = $imgFull.attr("src"); // Get the src attribute from the full <img>
				
				$(".overlay").show();
				$(".box").show("slow");
				$(".standalone_image").css("background", "url('" + urlFull + "')") .fadeIn(4000);
				$(".close_button").show();			
			});
			
			$(".close_button").click(function() {
				$(this).hide();
				$("standalone_image").fadeOut("fast");
				$(".box").hide("slow");
				$(".overlay").hide("slow");
			});
		});

Taywin, I didn't know that. Why?

You should only create the elements by JS when needed. You can create the table in pure html and then just add the dynamic rows.

Something like this:

<html>
    <head>
        <title>Future Value Calculation</title>
        <style type = "text/css">
            table { width: 100% }
            th    { text-align : left } 
			th span { color: #008; margin-left: 15px; }
        </style>
        <script type = "text/javascript">
        // Start the script once the page has loaded
		window.onload = function()
		{
			var EndBal;
			var principal = 2000.00;
			var rate = 0.12;
			
			for ( var age = 28; age <= 65; ++age )
			{
				// Do calculations
				EndBal = principal * Math.pow(1.0 + rate, age );
				// Insert row
				var row = getById("tBody").insertRow(0); //Insert row at index 0
				// Create cells for the created row
				// Empty cells are set to &nbsp to be displayed in the table
				row.insertCell(0).innerHTML = age; 
				row.insertCell(1).innerHTML = EndBal.toFixed(2);
				row.insertCell(2).innerHTML = "&nbsp;";
				row.insertCell(3).innerHTML = "&nbsp;";
				row.insertCell(4).innerHTML = "&nbsp;";
			}
			
			// Set the header values
			getById("spnInitial").innerHTML = principal.toFixed(2);
			getById("spnRate").innerHTML = rate.toFixed(2);
			getById("spnDeposit").innerHTML = "...";
			getById("spnInvestment").innerHTML = "...";
        }
		
		// Helper function to get element by id
		function getById(id)
		{
			return document.getElementById(id);
		}
        </script>
	</head>

<body>
	<table border="1">
		<thead>
			<tr><th colspan="5">Future Value Calculation</th></tr>
			<tr><th colspan="5">Initial Investment:<span id="spnInitial"></span></th></tr>
			<tr><th colspan="5">Interest Rate:<span id="spnRate"></span></th></tr>
			<tr><th colspan="5">Deposit every 30 days:<span id="spnDeposit"></span></th></tr>
			<tr><th colspan="5">Investment started:<span id="spnInvestment"></span></th></tr>
			<tr>
				<th>Age</th>
				<th>Beg Bal</th>
				<th>Interest</th>
				<th>Deposits</th>
				<th>Ending Bal</th>
			</tr>
		</thead>
		<tbody id="tBody">
		
		</tbody>
	</table>
</body>

</html>

Hope it helps.

To get the text box is very simple, you can use the class selector to match all text boxes with that class:

<script>
    $(".contentbox").keyup(function()
    {
        ...
    });
</script>

<input type="text" class="contentbox" />

For each dynamically created text box you will have an count box? If so you'll have to change your code to get the nearest count box from the current typing text box.

Violet 82, you are right about the url. In this way the url of the full image will be the same of the thumb.

To overcome that you need to store the full image url in somewhere. There a lot of ways you can do it: Store in some non-using attribute, create some new attribute like bigImageSrc(in XHTML), use an input hidden, javascript array, jquery.data and etc.

I made an example with alt non-using attribute and input hidden.

<script>
		$(function() {
		
			$("a.full_image").click(function() {
				var $img = $(this).children("img");
				var urlImg = $img.attr("src"); // thumbnail src
				urlImg = $img.attr("alt"); // big src from alt attr
				urlImg = $(this).children("input").val(); // big image from input hidden 
				
				$(".overlay").show();
				$(".box").show("slow");
				$(".standalone_image").css("background-image", "url(" + urlImg + ")") .fadeIn(4000); // works
				$(".standalone_image").css("background", "url('" + urlImg + "')") .fadeIn(4000); // works as well
				$(".close_button").show();			
			});
			
			$(".close_button").click(function() {
				$(this).hide();
				$("standalone_image").fadeOut("fast");
				$(".box").hide("slow");
				$(".overlay").hide("slow");
			});
		});
	
	</script>
	

	<body>

         <div class="overlay" id="overlay" ></div>
         
         <div class="box" id="box">
         	
			<div class="standalone_image"></div>
           	  
             <div class="close_button" id="close_button"></div>
               	
         </div>

		<div class="thumb_container">                
			<div class="thumbnail">  
				<a href="#" class="full_image">
					<img src="images/water_thumb_1.jpg" alt="images/water_thumb_1_big.jpg" style="border:0">
					<input type="hidden" value="images/water_thumb_1_big.jpg" />
				</a>
			</div>
		
			<div class="thumbnail">    
				<a href="#" class="full_image">
					<img src="images/water_thumb_2.jpg" alt="images/water_thumb_2_big.jpg" style="border:0">               
					<input type="hidden" value="images/water_thumb_1_big.jpg" />
				</a>
			</div>
		</div>
	</body>

Let's see the problems:

1. You don't have to use an <a href="#">, you can set the click directly on the image.

2. You have to got the url of the thumbnail clicked and then set it on the stand alone image.

3. Use the css property cursor: pointer.

Your JQuery could be something like this:

<script type="text/javascript">

		$(function() {
			$("img.full_image").click(function() {
                                var urlImg = $(this).attr("src");
				$(".overlay").show();
				$(".box").show("slow");
				$(".standalone_image").css("backgroundimg", "url('" + urlImg + "')") .fadeIn(4000);
				$(".close_button").show();			
			});
			
			$(".close_button").click(function() {
				$(this).hide();
				$("standalone_image").fadeOut("fast");
				$(".box").hide("slow");
				$(".overlay").hide("slow");
			});
			
		});

		</script>

and the thumb html:

<div class="thumbnail">  
     <img  class="full_image" src="images/water_thumb_1.jpg" alt="" style="border:0">
</div>

Please post your JS code.

I'd suggest that you first create the HTML and CSS of the image displayer(the 3 layers your friend told you about).

When the look is the way you want, you hide it(display: none; for example) and then start playing with JS e JQuery to open the displayer and set the image that should be displayed.

I'd also use JS to center vertically the image displayer on the browser.

Good luck.

The best way to validate e-mail address is with regular expression.

Here's the one I use:

// returns true or false
function isEmail(str)
{
	var regExp = /\b([\w-\.]+\@([\w-]+\.)+[\da-zA-Z]{2,4})\b/;
	regExp.test(str);
}

Hope it helps.

You are welcome. :D

Please, mark the thread as solved.

Seeya.

Hi,

you have to loop the existing rows and see if the values matches.

And one advice, don't use ////////// in comments. Instead use //------ or /******/.

Here is the loop code:

//------------------------------------------
			// here is my code to change quantity
			//------------------------------------------
			if ( tab.rows.length > 2 )
			{
				for(var i=1; i < tab.rows.length-1; i++) 
				{
					// Create var to minimize the code
					var cells = tab.rows[i].cells;
					
					if ( cells.length > 1 )
					{
						// Get current row values
						var rowName = cells[1].children[0].value.toLowerCase();
						var rowQnt = parseFloat(cells[2].children[0].value);
						var rowPrice = parseFloat(cells[3].children[0].value);
						
						// Only group if name and price are the same
						if ( name.value.toLowerCase() == rowName && priceVal == rowPrice )
						{
							cells[2].children[0].value = qtyVal + rowQnt;
							
							calcValue(cells[2].children[0], cells[3].children[0], cells[4].children[0]);
							return;
						}
					}
				}
			}

Here is the full code:

<html>
<head>
<script language="javascript">
// JavaScript Document
	function updateSum(formID, nameID, quantityID, priceID) {
		var f = document.getElementById(formID)
		var name = document.getElementById(nameID)
		var quantity = document.getElementById(quantityID)
		var price = document.getElementById(priceID)
 
		if (f && name && quantity && price) {
			var tab = f.getElementsByTagName("table")[0];  // expect a table	

			var qtyVal = parseFloat(quantity.value)
			var priceVal = parseFloat(price.value)
			if (!qtyVal) { qtyVal = 0 }
			if (!priceVal) { priceVal = 0 }
	
			//------------------------------------------
			// here is my code to change quantity
			//------------------------------------------
			if ( tab.rows.length > 2 )
			{
				for(var i=1; i < tab.rows.length-1; i++) 
				{
					// Create var to minimize the code
					var cells = tab.rows[i].cells;
					
					if ( cells.length > 1 )
					{
						// Get current row values …

So, there you go.

You don't have a JS problem anymore, it's just not working because the ajax doesn't return what is should.

You got to resolve your PHP and MySQL problem, maybe it's missing some include in this page.