...

View Full Version : Sorting content by tags?



apotd
06-19-2012, 04:13 PM
Hi,

I have no idea where I have to post this. But I want to do the following:

I have a lot of divs which I want to give a tag, for example I have div 1 which I give the tags "2010", "graphic design" and "photoshop" and div 2 which I give the tags "2011" and "graphic design". So when you click for example on the tag "graphic design" both divs should be displayed, if you click on the tag "2010" only the first div should display.

I have no idea how to start on this, I tried searching but I couldn't find anything useful. Good thing would be if someone could tell me whether I should use jQuery, JavaScript of PHP for this, and how to start on it? I can't find any tutorials or articles on it, I don't know how to search for them.

sunfighter
06-19-2012, 04:58 PM
Just give your divs a class, one for every tag.
<div class="2010" class="graphic design" class="photoshop">stuff</div>
<div class="2011" class="graphic design">stuff</div>

In your CSS set all class to display=none.
Have your tag anchors or buttons or whatever call a javascript to change the display on the divs with that tag.

Should be a walk in the park.

apotd
06-19-2012, 05:07 PM
Well that sounds pretty logical, I just don't know how to start on the "Have your tag anchors or buttons or whatever call a javascript to change the display on the divs with that tag." part. Are there any code example for this? I don't know much of JavaScript to be honest.

sunfighter
06-19-2012, 08:49 PM
comments should make this clear but if you have questions just ask.

This is a HTML file:


<!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" xml:lang="en" lang="en">
<head>
<title>New document</title>

<!--This next line must be used to enable jquery-->
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>

<style type="text/css">
.column {
display:none;
}
.one {
display:none;
}
.two {
display:none;
}
.four
{
display:none;
}
</style>
</head>
<body>
<!--Here down are the buttons to display the div images-->
<input type="button" value="ONE" onclick="reveal('one');" />
<input type="button" value="TWO" onclick="reveal('two');" />
<input type="button" value="COLUMN" onclick="reveal('column');" />
<input type="button" value="FOUR" onclick="reveal('four');" />

<!--Here are the divs - You should want to posistion these on the page -->
<div class="column one"> <!--This has 2 tags-->
<img src="images/4.jpg" alt="" /> <!--All of these are my images change to yours-->
</div>

<div class="two four column "> <!--this has 3 tags-->
<img src="images/5.jpg" alt="" />
</div>

<!--This is the jquery that does the work - it must be here after the page is rendered-->
<script type="text/javascript">
function reveal(lover)
{
$('div').css("display","none"); /*this line hides everything again*/
$('.'+lover).css("display","block"); /* this line showModalDialog the tagged image*/
}
</script>
</body>
</html>

apotd
06-20-2012, 02:30 AM
Thank you for the answer! The example works perfectly, however when I try to put the code in my actual page, it doesn't work. When I click one of the links, my included header and footer disappear and all the content is gone too (only the background remains). Surely I'm missing something I just can't figure out what.

This is my code:



<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="design/css/stylesheet.css" />
<script src="design/js/jquery-1.7.2.min.js" type="text/javascript"></script>

<style type="text/css">
.column, .one, .two, .four{
display:none;
}
</style>
</head>

<body>
<div id="container">
<header>
<?php include_once('includes/header.php'); ?>
</header>

<div id="content">
<!--Here down are the buttons to display the div images-->
<a href="#" onclick="reveal('one');">one</a>
<a href="#" onclick="reveal('two');">two</a>
<a href="#" onclick="reveal('column');">column</a>
<a href="#" onclick="reveal('four');">four</a>

<!--Here are the divs - You should want to posistion these on the page -->
<div class="column one"> <!--This has 2 tags-->
kfjlfjdslf column one
</div>

<div class="two four column "> <!--this has 3 tags-->
fkjdljksdf two four column
</div>

<script type="text/javascript">
function reveal(lover) {
$('div').css("display","none"); /*this line hides everything again*/
$('.'+lover).css("display","block"); /* this line showModalDialog the tagged image*/
}
</script>
</div>

<div id="footercontainer"></div>
</div>
<footer>
<?php include_once('includes/footer.php'); ?>
</footer>
</body>

</html>

apotd
06-20-2012, 01:38 PM
Apparently the problem only occurs when I put everything in my container (or another div). Any ideas on how to fix this? I need my container though.

sunfighter
06-20-2012, 03:32 PM
The problem is in the script
<script type="text/javascript">
function reveal(lover) {
$('div').css("display","none"); /*this line hides everything again*/
$('.'+lover).css("display","block"); /* this line showModalDialog the tagged image*/
}
</script>This line
$('div').css("display","none"); /*this line hides everything again*/hides all the divs on the page, you footer and header are in divs, so they disappear. Lets add another class to all img divs, call it see_pic and change that line to
$('.see_pic').css("display","none"); /*this line hides everything again*/ I think that will do it.

PS. forgot to warn you that "2011" can not be used as a class. use "a2011", it must start with an alpha..

apotd
06-20-2012, 05:01 PM
This works just perfectly. Thank you so much, how stupid of my that I couldn't think of that myself.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum