Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Sorting content by tags?

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    comments should make this clear but if you have questions just ask.

    This is a HTML file:
    Code:
    <!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>
    Last edited by sunfighter; 06-19-2012 at 07:52 PM.

  • Users who have thanked sunfighter for this post:

    apotd (06-20-2012)

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    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>

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by apotd; 06-20-2012 at 12:46 PM.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    The problem is in the script
    Code:
    <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
    Code:
    $('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
    Code:
    $('.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..

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This works just perfectly. Thank you so much, how stupid of my that I couldn't think of that myself.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •