Expandable content box

RZX Developer · #1 Jun 27th, 2008, 08:37

Dear All,

I am not sure how to explain this or whether it is at all possible with css.

I am wanting to create a box that is hidden but when you click on a arrow it opens the box up and shows the content within it, also I would need a cross to then re close the box.

If this is possible then your help would be most appreciated.

Wayne

unitedcraig · #2 Jun 27th, 2008, 11:49

Have you heard of anything called JQuery? It is a great way for us non technical minded people to use Javescript affects on their site.

http://www.webintenta.com/wp-content...yCollapse.html

Here is an example of what i think it is you need, you can download JQuery from the official site below, which contains lots of documentation on how to acomplish what you need

http://jquery.com/

Hope this helps

Craig

RZX Developer · #3 Jun 27th, 2008, 13:04

Dear Craig,

Looking at the example provided that is exactly what I am looking for, I will have a read up on the jquery and how it works so that I have an understanding of it.

Thanks,

Wayne

moojoo · #4 Jun 27th, 2008, 14:56

To answer the question it is completely possible to do this with straight 100% CSS, but in this case jQuery would probably be more what you want.

ycc · #5 Aug 8th, 2008, 18:52

Thank you for the tip about the jquery Javascript library. I wish to produce an expandable/collapsable box like thet one described above. The jquery sample box is perfect. When I run the sample linked above in this thread, it works perfectly.
However, if I copy the sample code (and change the address of the downloaded jquery library to my own) I will get an alert when I run the page: You must activate ActiveX to view this page.
Please tell me what to do not to get this warning. I don't get it when I run the sample code from the page linked above.
(I have also tried http://www.flooble.com/scripts/expand.php
I get exactly the same problem. Sample page runs fine, but activeX warning when running sample code on my page.)
Please tell me how to avoid this. I assume many users are not willing to click the "enable ActiveX" button.
Thanks in advance.

moojoo · #6 Aug 8th, 2008, 19:07

That warning unfortunately is part of internet explorer/windows. try modifying your security settings.

ycc · #7 Aug 8th, 2008, 19:14

Thank you moojoo,

I know very little about activeX. (That is one reason why this warning scares me) But I have been able to surf the internet with the present settings for months without getting this warning. However using this script the warning appears when reaching the page I have made with sample code but not the sample page by jquery.

I fear other people who surf to my page will be reluctant to lower their security settings.

ycc · #8 Aug 8th, 2008, 19:51

Thanks for your input. The problem seems to be related to security settings. If I upload the page to the server, it will work without security warnings. (Another browser security zone.) However I now find that if I include links in the text that opens in the box; these links will only work if I right-click them "open in new window/tab". If I make a standard left-click on the link it will only close the text-box.

moojoo · #9 Aug 8th, 2008, 19:54

Then you did something wrong, probably put the class associated with the show/hide on the links.

ycc · #10 Aug 8th, 2008, 20:02

Thanks for your advice, I will try to see if I can follow it.

However, I am just a beginner with javascript, css and classes so I haven't done much yet. I just downloaded the library and made an exact copy of the sample page from jquery. I then only included a hperlink <a .... ></a> in the text in the box. This hyperlink will only work for rightclick, not leftclick. (Somehow, like you say, the "close box"-command will get higher priority than following the hyperlink.)

moojoo · #11 Aug 8th, 2008, 20:06

Yeah, sounds like your have the id or class appended to the href itself. jQuery will target a link with a specified ID or class to trigger the events

ycc · #12 Aug 8th, 2008, 20:09

The code looks like this, somehow the hyperlink should get higher priority?

Code: Select all

 
<div id="caja">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor <a href="http://hello.com">hello.com</a> ut labore et dolore magna aliquyam erat, sed diam 
kasd gubergren</p>
</div>

moojoo · #13 Aug 8th, 2008, 20:10

link pls. Would help to see it in action.

ycc · #14 Aug 8th, 2008, 20:13

Thanks for checking it out

EDIT: The hyperlink has been removed and replaced by the entire correct page source that was so swiftly corrected by moojoo in the post below.

Putting the jquery library in the same directory/folder as the code below will make it work.

The code originally comes from a link in a post above in this thread: http://www.webintenta.com/wp-content...yCollapse.html

Code: Select all

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Collapse</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
$("#caja a.close").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
</script>
<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666; 
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
</style>
</head>
<body>
<a href="#" id="mostrar">MOSTRAR</a>
<div id="caja">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
eirmod tempor invidunt <a href="http://google.com">Google</a> ut labore et dolore magna aliquyam erat, sed diam 
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren</p>
</div>
</body>
</html>

moojoo · #15 Aug 8th, 2008, 20:15

here is your problem

Code: Select all


$("#caja a").click(function(event) {

You are targeting every link in #caja. You need to have

Code: Select all


$("#caja a.close").click(function(event) {

ycc · #16 Aug 8th, 2008, 20:21

Well moojoo, I can only express my deepest admiration, thanks a miilion, works prefectly now

moojoo · #17 Aug 8th, 2008, 20:22

Just click the thanks button on my post =P. Glad its sorted. Cheers!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expandable Content Script (Swtich Content)	Matc	JavaScript Forum	0	Apr 8th, 2008 10:53
Content Placement + Content Dividing	josephman1988	Website Planning	2	Jan 22nd, 2008 05:02
What content to use?	1840dsgn	Website Planning	5	Sep 22nd, 2007 06:47
Layering content on content in CSS?	wickedmoon	Web Page Design	1	Sep 10th, 2007 15:23
Expandable Table Problem	legomaniac	Web Page Design	3	Jul 15th, 2005 14:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Expandable content box

The Following User Says Thank You to moojoo For This Useful Post:
ycc