Solved

div height() from jQuery to PHP variable

Posted on 2009-07-16
16
671 Views
Last Modified: 2012-05-07
Hello Experts!

I want to use jQuery's height() function to get the height from hundreds of divs.

For example: I have a page showing several articles like this:

<div class="article">
<?php echo $article1; ?>
</div>

<div class="article">
<?php echo $article2; ?>
</div>

<div class="article">
<?php echo $article3; ?>
</div>

etc

I need to find out the div height for these different div boxes (the same class). And then I need to put these values into a PHP variable, make some calculations for each div (different height's) and then show the page to the user. And the user should see nothing more than a regular web page.

Is that even possible?
0
Comment
Question by:AphX
[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
  • 7
  • 6
  • 2
  • +1
16 Comments
 
LVL 12

Expert Comment

by:Barry Jones
ID: 24869968
If you use AJAX, then once the DOM is ready, get the size of the DIVs and post it to the server to retrieve the content back, and populate the DIVs?
0
 
LVL 2

Author Comment

by:AphX
ID: 24870043
Alright. That should work. But, what about the div classes, they all have got the same class name. Do you think that will be a problem?

I'm not that into AJAX. I'm not able to write all the code from scratch. Do you know any tutorial or something where they're doing something like this?
0
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24870125
The order of processing means that this will be impossible to do all in the same HTTP request. Basically, you'll need to:

1. Request #1: Have the DIVs render fully.
2. Request #1: use jQuery(document).ready() to run a function that loops through the DIVs and collects their heights. Putting them into a JSON array would probably work best for this.
3. Request #1: Use jQuery to send the JSON data to the PHP script.
4. Request #2: PHP accepts the JSON data, decodes it, and renders the final page.

0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 12

Expert Comment

by:Barry Jones
ID: 24870131
Aphx, to be honest while there are worse things you can natively code in javascript than ajax calls, I would save yourself some work and use a framework such as Prototype.js or JQuery.  These frameworks make life much easier in my opinion.

If the DIVs have the same classname, thats not a problem as you are only concerning yourself with the dimensions, and can easily get an array of the DIVs by className, but best to give each DIV a unique ID as well - makes life easier when the ajax call is complete and you need to refer to a specific DIV.

If you let me know whether you are happy to use a JS framework, then I will mock up some sample code (HTML/JS/PHP) for you later tonight...
0
 
LVL 2

Author Comment

by:AphX
ID: 24870221
Thank you so much! I really appreciate your help!

Yes, I'm happy to use a JS framework. What technique or framework I need to use doesn't matter at all.
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 24870326
Ok, give me a few hours and Ill post the code.

One question: why do you need the PHP script to know the height of the DIVs?  Is it to be able to truncate the contents?
0
 
LVL 2

Author Comment

by:AphX
ID: 24870567
Thank you very much!

I need the div height because I'm building a site with a complicated design.

Gradient boxes with rounded corners and drop shadows, inner glows and so on. That´s easy if the boxes are static, but on boxes with dynamical height's it´s a little harder.

Everything is done except the gradient. What I'm going to do:

If box1's height is 110px, I will echo 110 div boxes inside box1 with different colors that will create the gradient color inside the box. I also need the height of the div to calculate the right RGB values for each gradient div.

I really appreciate your helpfulness!
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 24870819
No problem..

110 DIVs 1px high sounds scary!  Not sure browsers will appreciate that too much though...  Might slow things down somewhat.  I cant imagine IE6 handling that too well.. :) Can you not generate a gradient in PHP using the GD2 library perhaps? (http://forums.devshed.com/php-development-5/create-gradient-image-with-gd-php-536986.html)

How are the article DIVs created?  Surely they are coded into the html page?  What I am getting at, is if you know the heights of the DIVs before the page loads, then you can of course do your gradient processing in the PHP section at the top of the page, which would negate the need for any ajax calls at all?  Or perhaps I missed something.,.?
0
 
LVL 2

Author Comment

by:AphX
ID: 24872670
Actually it will output ~110 DIVs times how many article DIVs :D So it will be about 3000 DIVs. I'm not developing for IE6. Seems to work fine in other browsers :) Assuming that the user doesn't use a computer from the 90´s :)

About the GD2 library, it looks interesting, but the same problem is still there though, that I would need the DIV heights for all the article DIVs to make the gradient dynamic to the DIV height.

The article DIVs is echoed out from a database. The users can write articles so the first article DIV can be 30px and the second one can be up to 200px etc.

So the browser doesn't know the div height until the page is loaded =/ That´s the prob
0
 
LVL 12

Accepted Solution

by:
Barry Jones earned 250 total points
ID: 24873110
Ah ok gotcha.  Pls bear with me - I am not going to get time tonight.  I will definitely get back to you within 48 hours though ok?
0
 
LVL 2

Author Comment

by:AphX
ID: 24873303
Dude, I appreciate what you're doing so much! I'm so glad that you're willing to help me with this!

I don´t have the skills to do this by my self.

I'm looking forward to hear from you! :)
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 250 total points
ID: 24874904
save as hielo.html and compute.php and try it
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 
$(function(){
	var params="";
	$(".article").each(function(index)
	{
		params+="&div["+index+"]="+$(this).height();
	}
	);
 
 
$.ajax({
   type: "POST",
   url: "compute.php",
   data: params.substr(1),
   success: function(msg){
     alert( "Response:\n" + msg );
	
	var d=msg.split("^");
	var i=0;
	while(d.length){
		$(".article:eq("+i+")").html( d.shift() );
	}
   }
 });
 
});
</script>
<div class="article">
<?php echo $article1; ?>a
</div>
 
<div class="article">
<?php echo $article2; ?>b
</div>
 
<div class="article">
<?php echo $article3; ?>c
</div>
 
</body>
</html>
 
 
compute.php
<?php
if( isset($_POST['div']) ){
	foreach($_POST['div'] as $k =$v)
	{
		echo "Value Received for div {$k} = $v^";
	}
}
?>

Open in new window

0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 24876565
There you go - hielo beat me to it :)  

His solution looks good..
0
 
LVL 82

Expert Comment

by:hielo
ID: 24878360
actually,
...
        var i=0;
        while(d.length){
                $(".article:eq("+i+")").html( d.shift() );
        }
...
 
 
should be:
...
        var i=0;
        while(d.length){
                $(".article:eq("+i+")").html( d.shift() );
                ++i;
        }
...

Open in new window

0
 
LVL 2

Author Closing Comment

by:AphX
ID: 31604265
Guys, you are my heroes! I really wish that I had more points to assign on this one!

TheFoot, you showed a big engagement and you were fully helpful from start! I really appreciate this!

hielo, you made me a code snippet that works 100% like I wanted to!

Thank you again!

I am so happy about this!

I hope I can help you guys with something in the future!

Peace!

/Joel
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 24878893
Thanks for the points!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Node.js 11 76
Geolocation works...sometimes 2 36
display data from multiple ajax calls 9 38
Testing a list of Emails for validity 4 32
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

737 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