Page 1 of 1

echo with div and php code in div

Posted: Fri Mar 30, 2012 2:42 am
by andy1212
I'm having a hard time getting this to work. I have a search feature which works perfectly and I want the search results to be visible in a div only if someone searches for something. I tried to add the php code inside a div with a javascript function which allowed the div to slide up and down however it never seemed to work. So I'm trying a different way to do it by scrapping the javascript feature and just having the div display or not display based on if the viewer searches something and i have a link in the div which when clicked will change the divs display to none. I've tried echoing the div and putting the php code inside the div, and everything seems to work except when I put a background color for the div, it only changes the background of the "close search window" link and not the search results. I'm wondering how I can make the background visible for the whole div because I have an image I'd like to put as the backround. I've attached my code below. Thanks for your time and help.

Code: Select all

<?php include 'func.inc.php' ;?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    
<html>
<head>
<title>Search</title>
<style type="text/css">
</style>
</head>
    
<body>
    
<h2>Search</h2>

<form action="" id="myform" method="post">
	<p>
    	<input type="text" name="keywords" /> <input name="submit" type="submit" value="Search" />
    </p>
</form>

<?php

if ($_POST['submit'] & $_POST['keywords']) {
	echo '<div id="dropSearch" style="display: inline; overflow: hidden; height: 190px; background-color: #000;">
		 <a href="" name="closeSearch">[x] <u>Close Search Window</u></a>';
		 
		 if (isset($_POST['keywords'])) {
	$suffix = '';
	$keywords = mysql_real_escape_string(htmlentities(trim($_POST['keywords'])));
	
	$errors = array();
	
	if (empty($keywords)) {
		$errors[] = 'Please enter a search term';
	} else if (strlen($keywords)<3) {
		$errors[] = 'Your search term must be 3 or more characters';
	} else if (search_results($keywords) === false) {
		$errors[] = 'Your search for '.$keywords.' returned no results';
	}
	
	if (empty($errors)) {
		
		$results = search_results($keywords);
		$results_num = count($results);
		
		$suffix = ($results_num != 1) ? 's' : '';
		
		echo '<p>Your search for <strong>', $keywords, '</strong> returned <strong>', $results_num, '</strong> result', $suffix, '</p>';
		
		foreach ($results as $result) {
			echo '<p><strong>', $result['title'], '</strong> <br /> ', $result['description'], '... <br /> <a href="', $result['url'], '" target="_blank">', $result['url'], '</a></p>';
		}
		
	} else {
		foreach ($errors as $error) {
			echo $error, '<br />';
		}
	}
}
		 
		 '</div>';
		 
		 if ($_POST['closeSearch']) {
			 echo '<div id="dropSearch" style="display: none; overflow: hidden; height: 190px;">
				   </div>';
		 }
} else {
	echo '<div id="dropSearch" style="display: visible; overflow: hidden; height: 190px;">
		 </div>';
}

?>
    
</body>
</html>

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 3:57 am
by theserve
try setting the width and height of the div if its a fixed size.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 5:50 am
by andy1212
That's not the issue, I tried adding the background color to the div in the else statement to test and see if it was applied to the whole div and it did, so I'm thinking it has something to do with the echo statement within the if statement and how it's laid out. can a div with php code inside be echoed like this,

<?php
//example of what the echo statment looks like
echo '<div id="">'; if (php code here...) { }... '</div>';
?>

Or is that not right. Am I doing something wrong there or is there a better way of laying something like that out? Thanks for the help so far.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:37 am
by azycraze
so far from reading your problem ,using jquery will be the better way.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 8:42 pm
by andy1212
Thanks for reading however if you read further you'd see that I tried using javascript with the php code and it didn't work out very well. When I did some research on it, from comments and posts on other forums it looks like php and js don't work well together. Are you saying I'd be better off using javascript for the whole search function as well as the div display feature instead of php altogether? Or do you know of a way where php and javascript can work together nicely. I can post the example with the js and php that I tried to get to work and maybe someone could help me find the problem with that.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 9:05 pm
by andy1212
Here's my code for the example with php and js. When tested the div drops down and then automatically rolls up again without clicking anything, however when the search button is clicked, the div should stay down until someone clicks the link for the "[x] Close Search Window" and then the div should roll back up. All the code being used for this is shown below. Thanks for your help and time.

index.php

Code: Select all

<?php include 'func.inc.php' ;?>

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

<script language="JavaScript" src="motionpack.js"></script>

</head>
    
<body>
    
<h2>Search</h2>

<form action="" id="myform" method="post">
	<p>
    	<input type="text" name="keywords" /> <input name="submit" type="submit" value="Search" onclick="slidedown('dropSearch');" />
    </p>
</form>

<div id="dropSearch" style="display: none; overflow: hidden; height: 190px; background-color: #066;">

<a href="" onclick="slideup('dropSearch');">[x] Close Search Window</a>
<?php
		 
if (isset($_POST['keywords'])) {
	$suffix = '';
	$keywords = mysql_real_escape_string(htmlentities(trim($_POST['keywords'])));
	
	$errors = array();
	
	if (empty($keywords)) {
		$errors[] = 'Please enter a search term';
	} else if (strlen($keywords)<3) {
		$errors[] = 'Your search term must be 3 or more characters';
	} else if (search_results($keywords) === false) {
		$errors[] = 'Your search for '.$keywords.' returned no results';
	}
	
	if (empty($errors)) {
		
		$results = search_results($keywords);
		$results_num = count($results);
		
		$suffix = ($results_num != 1) ? 's' : '';
		
		echo '<p>Your search for <strong>', $keywords, '</strong> returned <strong>', $results_num, '</strong> result', $suffix, '</p>';
		
		foreach ($results as $result) {
			echo '<p><strong>', $result['title'], '</strong> <br /> ', $result['description'], '... <br /> <a href="', $result['url'], '" target="_blank">', $result['url'], '</a></p>';
		}
		
	} else {
		foreach ($errors as $error) {
			echo $error, '<br />';
		}
	}
}

?>
</div>
    
</body>
</html>
motionpack.js

Code: Select all

var timerlen = 5;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display != "none")
                return; // cannot slide down something that is already visible

        moving[objname] = true;
        dir[objname] = "down";
        startslide(objname);
}

function slideup(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display == "none")
                return; // cannot slide up something that is already hidden

        moving[objname] = true;
        dir[objname] = "up";
        startslide(objname);
}

function startslide(objname){
        obj[objname] = document.getElementById(objname);

        endHeight[objname] = parseInt(obj[objname].style.height);
        startTime[objname] = (new Date()).getTime();

        if(dir[objname] == "down"){
                obj[objname].style.height = "1px";
        }

        obj[objname].style.display = "block";

        timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
        var elapsed = (new Date()).getTime() - startTime[objname];

        if (elapsed > slideAniLen)
                endSlide(objname)
        else {
                var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                if(dir[objname] == "up")
                        d = endHeight[objname] - d;

                obj[objname].style.height = d + "px";
        }

        return;
}

function endSlide(objname){
        clearInterval(timerID[objname]);

        if(dir[objname] == "up")
                obj[objname].style.display = "none";

        obj[objname].style.height = endHeight[objname] + "px";

        delete(moving[objname]);
        delete(timerID[objname]);
        delete(startTime[objname]);
        delete(endHeight[objname]);
        delete(obj[objname]);
        delete(dir[objname]);

        return;
}// JavaScript Document

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 9:13 pm
by Celauran
Wouldn't it be a lot easier to just use jQuery's slideUp and slideDown effects?

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:03 pm
by andy1212
do you know if jquery works well with php? im not really concerned with the javascript function i have, it works fine when testing it out with a div without php code, but if I add in php code to the div and have a submit button for a form, the php code still works fine but the javascript function doesn't work properly. That's why, at the start of this thread I was just using php to display or not display the div in an echo statement but I can't figure out how to properly echo out the div with the php code inside it and can't seem to get any help searching on Google or on here for that so far. I think what I'm trying to do should be pretty simple, just have a div appear when a keyword is entered in the input text field and the "search" button is clicked, and results for the search (results made available by the php code) are displayed in the div. Then to hide the div, the viewier would simply press a button that would hide the div. If this isn't possible though, I can just scrap this idea and try another unique way of displaying search results. any help with this is appreciated.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:25 pm
by andy1212
so I tried jQuery and this still isn't working. instead of the javascript function I posted previously, I deleted that and added this,

Code: Select all

<script type="text/javascript">
$('input[type=submit]').click(function() {
  $('#dropSearch').slideDown('slow', function() {
    // Animation complete.
  });
});

$('a[id=closeSearch]').click(function() {
  $('#dropSearch').slideUp('slow', function() {
    // Animation complete.
  });
});
</script>
with the submit button and the close search window link, I took out the onclick events and added ids. I referenced the submit button and animate the div to drop down in the first jquery function and referenced the close search window link in the second jquery function and havings the div close back up. This however doesn't work at all for some reason. This is turning out to be a really difficult task for something that is seemingly simple.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:31 pm
by andy1212
ok so i tried changing the display for the div in the style from none to inline and that seems to work with the jquery. however I'm still stuck with the background of the link only showing up as coloured and the rest of the div where the search results are has no background color...

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:42 pm
by andy1212
It seems the close search button doesn't work.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 10:45 pm
by andy1212
Ok ya JQuery isn't working at all with the php code

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 11:06 pm
by andy1212
Ok so I scrapped the javascript, jQuery and stuck with php echo and noticed I was doing it all wrong. instead of wrapping the php code in a div for the search results to appear in a div with a background color, I forgot that when I echo out the search results, I can simply put the div in that echo. So When someone searchs something, the search results now appear in a div with a background color and at a width and height I specified with a scroll bar and so on. Haven't yet tried a way to hide the results but I'm sure it won't be very hard. Thanks for all the help though, haven't really looked in jQuery much before but after looking up some of the cool things it can do, I'll be reading more up on it now for sure.

Re: echo with div and php code in div

Posted: Fri Mar 30, 2012 11:51 pm
by azycraze
try to use jquery modal..