Jump to content


Photo

The Effect I'm Trying to Achieve...


  • Please log in to reply
6 replies to this topic

#1 nick1

nick1
  • Members
  • PipPipPip
  • Advanced Member
  • 41 posts

Posted 27 April 2006 - 07:55 PM

I'm not sure how to describe the effect I'm trying to achieve, so I'll point out a website that has implemented what I'd like to do:

[a href=\"http://isohunt.com/torrents.php?ihq=nature&ext=&op=and\" target=\"_blank\"]http://isohunt.com/torrents.php?ihq=nature&ext=&op=and[/a]

Notice that a 'drop down' menu appears when a title is clicked on.
How is this done? Can PHP accomplish this neat feature?
On my website I have a blog and I want readers to have the option of leaving a comment about a blog entry.
But I don't want all the comments displayed at once. At first, I only want to display the number of comments that exist for a specific blog entry. Then make that number a hyperlink that drops down the comments for that specific blog entry. Make sense?

So basically:

------------------------
| Blog entry here............|
| blah blah blah blah blah |
| blah blah blah blah blah |
| blah blah blah blah blah |
| blah blah blah blah blah |
| blah blah blah blah blah |
------------------------

There are 5 comments available. (clicking the #5 would display the comments)

--------------------------
|comment 1: blah blah blah |
--------------------------

--------------------------
|comment 2: blah blah blah |
--------------------------

--------------------------
|comment 3: blah blah blah |
--------------------------

--------------------------
|comment 4: blah blah blah |
--------------------------

--------------------------
|comment 5: blah blah blah |
--------------------------

Close Comments (this feature would make the comments disappear again)

Any help would be greatly appreciated! Thank you for your time,

*Nick*

#2 Kris

Kris
  • Staff Alumni
  • Advanced Member
  • 2,755 posts
  • LocationThe Internet

Posted 27 April 2006 - 08:11 PM

Looks more like JavaScript, remember - PHP is a server side language.

#3 koencalliauw

koencalliauw
  • Members
  • PipPipPip
  • Advanced Member
  • 36 posts

Posted 27 April 2006 - 08:20 PM

You don't need php to do this, you need javascript/css

1. create a div that contains all your comments, give it an id or a class that you refer to in your css file

<div id='comment'>
comments go here
</div>

2. in the css, set 'display: none;' for the div that contain comments
3. create a button on your page
4. add the onclick event (javascript) to the button

<input type='button' value='show comments' onclick="document.getElementById('comment').style.display=block;">

this is all from the top of my head, I usually keep javascript language reference nearby. If you want to do some other things or just to keep things readable in your code, you could create a function that doest the same.

<input type='button' value='show comments' onclick="showcomments()">

<script type='javascript'>
var comment = document.getElementById('comment').style;
comment.display = 'block';
</script>

Warning: this will NOT create the slider effect, you need something like on [a href=\"http://script.aculo.us\" target=\"_blank\"]http://script.aculo.us[/a] for that, don't ask me questions about it, cos I just know it exists, never used it

#4 nick1

nick1
  • Members
  • PipPipPip
  • Advanced Member
  • 41 posts

Posted 28 April 2006 - 12:54 AM

Greetings,

Thank you for trying to help me out with this small project. I very much appreciate your ideas and time.
Unfortunately the only thing I see when I try to execute this code is the button. I'm not sure why it isn't working.

Here is my index.html page:

<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
</head>

<body>

    <div id='comment'>
        comments go here
    </div>

    <input type='button' value='show comments' onclick="document.getElementById('comment').style.display=block;">

</body>
</html>

And here is my index.css page:

#comment {
  display: none;
}

Sorry, I don't know Java at all. I tried researching some things on Google, however, that lead to lots of frustration trying to troubleshoot something I don't understand. What do you think needs adjusting in this code?

Thank you for your continued help,

*Nick*

#5 .josh

.josh
  • Staff Alumni
  • .josh
  • 14,871 posts

Posted 28 April 2006 - 01:08 AM

you need to ask this question on javascript forum this is php forum not trying to be rude but you're more likely to find a good answer there.
Did I help you? Feeling generous? Buy me lunch! 
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#6 Kris

Kris
  • Staff Alumni
  • Advanced Member
  • 2,755 posts
  • LocationThe Internet

Posted 28 April 2006 - 08:31 AM

I'll move this to our JavaScript forum. Please be aware, Java and JavaScript are two very different languages!

#7 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 28 April 2006 - 03:29 PM

Hi there,

Try this code example,,
html/javascript part is about:
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
</head>
<body>

<script>
function ShowComments(comment_id,text_id,nb)
{
var tochange="<span class=\"comments\" onclick=\"HideComments('"+comment_id+"','"+text_id+"',"+nb+");\"";
tochange=tochange+" style=\"background-color:#ECECD9;\"";
tochange=tochange+" onmouseover=\"\"";
tochange=tochange+" onmouseout=\"\">";
tochange=tochange+"see the comment "+nb+"</span>";
document.getElementById(comment_id).innerHTML=tochange;
document.getElementById(text_id).style.display="block";
}

function HideComments(comment_id,text_id,nb)
{
var tochange="<span class=\"comments\" onclick=\"ShowComments('"+comment_id+"','"+text_id+"',"+nb+");\"";
tochange=tochange+" style=\"background-color:#CAD9EA;\"";
tochange=tochange+" onmouseover=\"this.style.backgroundColor='#ECECD9';\"";
tochange=tochange+" onmouseout=\"this.style.backgroundColor='#CAD9EA';\">";
tochange=tochange+"see the comment "+nb+"</span>";
document.getElementById(comment_id).innerHTML=tochange;
document.getElementById(text_id).style.display="none";
}
</script>

<div id="comment1">
<span class="comments" onmouseover="this.style.backgroundColor='#ECECD9';" onmouseout="this.style.backgroundColor='#CAD9EA';" onclick="ShowComments('comment1','text1',1);" >see the comment 1</span>
</div>
<div id="text1" class="text" style="display:none;">
<table border=1 align=center width="700px">
<tr><td style="background-color:#CAD9EA;">
This is my first comment,...<br>hoping it's a nice one,...
</td>
</tr>
</table>
</div>
<div id="comment2">
<span class="comments" onmouseover="this.style.backgroundColor='#ECECD9';" onmouseout="this.style.backgroundColor='#CAD9EA';" onclick="ShowComments('comment2','text2',2);" >see the comment 2</span>
</div>
<div id="text2" class="text" style="display:none;">
<table border=1 align=center width="700px">
<tr><td style="background-color:#CAD9EA;">
& this is my second comment,,  :)
</td>
</tr>
</table>
</div>
</body>
</html>
& index.css file:
.comments {
    cursor:pointer;
    background-color:#CAD9EA;
    border: 1px solid gray;
    width:800px;
    padding:0.1em;
}

.text {
    background-color:#ECECD9;
    border: 1px solid gray;
    border-top:none;
    width:800px;
    padding:0.1em;
}
it gives also the slider effect using onmouseout/onmouseover properties,

Hoping it helps,,

l8tr,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users