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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Category dropdown menu

    I'm currently tweaking the image script from 4images to use as a video archive instead of image gallery. I've got most parts under control, but I need some help with making dropdown menus for my subcategories. For example:

    My main category is called Nature
    Then the subcategory is called Plants and trees
    Then the next subcategories are called flowers, trees, grass etc.

    I only want dropdown menus to be shown for the second subcategories (flowers, trees, grass etc.). So if a member decide that s/he wants to view only Roses in the flower category, you can choose that in a drop-down menu and all images of roses will appear. Then s/he wants to view purple flowers so s/he clicks (in the colour drop down) the colour purple to view all images of purple roses. To reset or choose something else you just use the drop down again.

    I also want the drop downs to be different for each subcategory, so the first subcategory is Flowers with drop down options such as types of flowers, colours etc and the next subcategory is Trees with drop down options such as different countries, seasons etc (basically only sub-sub-categories showing for each sub-category).

    What I'm looking for is something similar to what they have at fanfiction.net (main category with books, movies, tv-shows etc., then a subcategory with different tv-shows for example where you can choose to define it more: http://www.fanfiction.net/book/Harry-Potter/).

    I've asked over at the 4images forum but no one seemed to have the answer for this.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I know the answer is in javascript. Maybe someone can give a css solution.
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <input type="button" value="Browse" style="float:left;margin-right:100px;" onclick="adjust('browse');">
    <input type="button" value="Communities" style="float:left;margin-right:100px;" onclick="adjust('communities');">
    <input type="button" value="Forums" style="float:left;margin-right:100px;" onclick="adjust('forums');">
    
    	<div id="browse" class="disappear" style="display:none;clear:left;">
    		<h3>Stories</h3>
    		<hr style="width:100px;float:left;"><br>
    		<li><a href='http://www.fanfiction.net/anime/'>Anime</a></li>
    		<li><a href='http://www.fanfiction.net/book/'>Books</a></li>
    		<li><a href='http://www.fanfiction.net/cartoon/'>Cartoons</a></li>
    		<li><a href='http://www.fanfiction.net/comic/'>Comics</a></li>
    		<li><a href='http://www.fanfiction.net/game/'>Games</a></li>
    		<li><a href='http://www.fanfiction.net/misc/'>Misc</a></li>
    		<li><a href='http://www.fanfiction.net/play/'>Plays</a></li>
    		<li><a href='http://www.fanfiction.net/movie/'>Movies</a></li>
    		<li><a href='http://www.fanfiction.net/tv/'>TV</a></li>
    		<h3>Crossovers</h3>
    		<hr style="width:100px;float:left;"><br>
    		<li style="clear:left;"><a href='http://www.fanfiction.net/crossovers/anime/'>Anime</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/book/'>Books</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/cartoon/'>Cartoons</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/comic/'>Comics</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/game/'>Games</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/misc/'>Misc</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/play/'>Plays</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/movie/'>Movies</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/tv/'>TV</a></li>
    	</div>
    
    <div id="communities" class="disappear" style="display:none;position:absolute;  left:200px;top:40px;">
    <li><a href='http://www.fanfiction.net/communities/general/0/'>General</a></li>
    <li><a href='http://www.fanfiction.net/communities/anime/'>Anime</a></li>
    <li><a href='http://www.fanfiction.net/communities/book/'>Books</a></li>
    <li><a href='http://www.fanfiction.net/communities/cartoon/'>Cartoons</a></li>
    <li><a href='http://www.fanfiction.net/communities/comic/'>Comics</a></li>
    <li><a href='http://www.fanfiction.net/communities/game/'>Games</a></li>
    <li><a href='http://www.fanfiction.net/communities/misc/'>Misc</a></li>
    <li><a href='http://www.fanfiction.net/communities/movie/'>Movies</a></li>
    <li><a href='http://www.fanfiction.net/communities/play/'>Plays</a></li>
    <li><a href='http://www.fanfiction.net/communities/tv/'>TV</a></li>
    </div>
    
    <div id="forums" class="disappear" style="display:none;position:absolute;  left:400px;top:40px;">
    <li><a href='http://www.fanfiction.net/forums/general/0/'>General</a></li>
    <li><a href='http://www.fanfiction.net/forums/anime/'>Anime</a></li>
    <li><a href='http://www.fanfiction.net/forums/book/'>Books</a></li>
    <li><a href='http://www.fanfiction.net/forums/cartoon/'>Cartoons</a></li>
    <li><a href='http://www.fanfiction.net/forums/comic/'>Comics</a></li>
    <li><a href='http://www.fanfiction.net/forums/game/'>Games</a></li>
    <li><a href='http://www.fanfiction.net/forums/misc/'>Misc</a></li>
    <li><a href='http://www.fanfiction.net/forums/movie/'>Movies</a></li>
    <li><a href='http://www.fanfiction.net/forums/play/'>Plays</a></li>
    <li><a href='http://www.fanfiction.net/forums/tv/'>TV</a></li>
    </div>
    
    <script type="text/javascript">
    var tog = 'yes';
    function adjust(elem){
    	if( tog == 'yes'){
    		tog = 'no';
    		document.getElementById('browse').style.display='none';
    		document.getElementById('communities').style.display='none';
    		document.getElementById('forums').style.display='none';
    		document.getElementById(elem).style.display='block';
    		last = elem;
    	}else{
    		document.getElementById('browse').style.display='none';
    		document.getElementById('communities').style.display='none';
    		document.getElementById('forums').style.display='none';
    		//document.getElementById(elem).style.display='block';
    		tog = 'yes';
    		if(last != elem){
    			document.getElementById(elem).style.display='block';
    			last = elem;
    			tog = 'no';
    		}
    	}
    }
    </script>
    </body>
    </html>
    I left off the <ul> tags. Add them.
    Last edited by sunfighter; 06-11-2013 at 07:06 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I know the answer is in javascript. Maybe someone can give a css solution.
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <input type="button" value="Browse" style="float:left;margin-right:100px;" onclick="adjust('browse');">
    <input type="button" value="Communities" style="float:left;margin-right:100px;" onclick="adjust('communities');">
    <input type="button" value="Forums" style="float:left;margin-right:100px;" onclick="adjust('forums');">
    
    	<div id="browse" class="disappear" style="display:none;clear:left;">
    		<h3>Stories</h3>
    		<hr style="width:100px;float:left;"><br>
    		<li><a href='http://www.fanfiction.net/anime/'>Anime</a></li>
    		<li><a href='http://www.fanfiction.net/book/'>Books</a></li>
    		<li><a href='http://www.fanfiction.net/cartoon/'>Cartoons</a></li>
    		<li><a href='http://www.fanfiction.net/comic/'>Comics</a></li>
    		<li><a href='http://www.fanfiction.net/game/'>Games</a></li>
    		<li><a href='http://www.fanfiction.net/misc/'>Misc</a></li>
    		<li><a href='http://www.fanfiction.net/play/'>Plays</a></li>
    		<li><a href='http://www.fanfiction.net/movie/'>Movies</a></li>
    		<li><a href='http://www.fanfiction.net/tv/'>TV</a></li>
    		<h3>Crossovers</h3>
    		<hr style="width:100px;float:left;"><br>
    		<li style="clear:left;"><a href='http://www.fanfiction.net/crossovers/anime/'>Anime</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/book/'>Books</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/cartoon/'>Cartoons</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/comic/'>Comics</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/game/'>Games</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/misc/'>Misc</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/play/'>Plays</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/movie/'>Movies</a></li>
    		<li><a href='http://www.fanfiction.net/crossovers/tv/'>TV</a></li>
    	</div>
    
    <div id="communities" class="disappear" style="display:none;position:absolute;  left:200px;top:40px;">
    <li><a href='http://www.fanfiction.net/communities/general/0/'>General</a></li>
    <li><a href='http://www.fanfiction.net/communities/anime/'>Anime</a></li>
    <li><a href='http://www.fanfiction.net/communities/book/'>Books</a></li>
    <li><a href='http://www.fanfiction.net/communities/cartoon/'>Cartoons</a></li>
    <li><a href='http://www.fanfiction.net/communities/comic/'>Comics</a></li>
    <li><a href='http://www.fanfiction.net/communities/game/'>Games</a></li>
    <li><a href='http://www.fanfiction.net/communities/misc/'>Misc</a></li>
    <li><a href='http://www.fanfiction.net/communities/movie/'>Movies</a></li>
    <li><a href='http://www.fanfiction.net/communities/play/'>Plays</a></li>
    <li><a href='http://www.fanfiction.net/communities/tv/'>TV</a></li>
    </div>
    
    <div id="forums" class="disappear" style="display:none;position:absolute;  left:400px;top:40px;">
    <li><a href='http://www.fanfiction.net/forums/general/0/'>General</a></li>
    <li><a href='http://www.fanfiction.net/forums/anime/'>Anime</a></li>
    <li><a href='http://www.fanfiction.net/forums/book/'>Books</a></li>
    <li><a href='http://www.fanfiction.net/forums/cartoon/'>Cartoons</a></li>
    <li><a href='http://www.fanfiction.net/forums/comic/'>Comics</a></li>
    <li><a href='http://www.fanfiction.net/forums/game/'>Games</a></li>
    <li><a href='http://www.fanfiction.net/forums/misc/'>Misc</a></li>
    <li><a href='http://www.fanfiction.net/forums/movie/'>Movies</a></li>
    <li><a href='http://www.fanfiction.net/forums/play/'>Plays</a></li>
    <li><a href='http://www.fanfiction.net/forums/tv/'>TV</a></li>
    </div>
    
    <script type="text/javascript">
    var tog = 'yes';
    function adjust(elem){
    	if( tog == 'yes'){
    		tog = 'no';
    		document.getElementById('browse').style.display='none';
    		document.getElementById('communities').style.display='none';
    		document.getElementById('forums').style.display='none';
    		document.getElementById(elem).style.display='block';
    		last = elem;
    	}else{
    		document.getElementById('browse').style.display='none';
    		document.getElementById('communities').style.display='none';
    		document.getElementById('forums').style.display='none';
    		//document.getElementById(elem).style.display='block';
    		tog = 'yes';
    		if(last != elem){
    			document.getElementById(elem).style.display='block';
    			last = elem;
    			tog = 'no';
    		}
    	}
    }
    </script>
    </body>
    </html>
    I left off the <ul> tags. Add them.
    Thanks, but not exactly what I was looking for. I'm trying to find something that can sort all the videos I have. As you can see on the page, you can sort all the fanfiction by genre, ratings, characters, status etc.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Pretty trivial.

    It's just a matter of putting the proper ORDER BY onto the SQL query.

    Say you had this HTML:
    Code:
    <form action="showResults.php" method="post">
    <select name="flower">
        <option value="*">--any--</option>
        <option>Roses</option>
        <option>Petunias</option>
        <option>Begonias</option>
    </select>
    <select name="color">
        <option value="*">--any--</option>
        <option>White</option>
        <option>Red</option>
        <option>Purple</option>
    </select>
    ...
    <input type="submit">
    </form>
    Then your showResults.php page might do something like this:
    Code:
    <?php
    $sql = "SELECT * FROM flowers WHERE 1=1 ";
    if ( $_POST["flower"] != "*" )
    {
        $sql .= " AND flower = '" . mysql_real_escape_string($_POST["flower"]) . "' ";
    }
    if ( $_POST["color"] != "*" )
    {
        $sql .= " AND color = '" . mysql_real_escape_string($_POST["color"]) . "' ";
    }
    ... etc ...
    (The 1=1 is just there to make the rest of the coding simpler. It won't affect the query.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    So I read this
    I've got most parts under control, but I need some help with making dropdown menus for my subcategories.
    wrong? You didn't want menus like those here http://www.fanfiction.net/book/Harry-Potter/

    And what I gave you, you can't modify for your stuff?

    What you want is a program to sort a bunch of videos for you and make a menu with the results? Why can't you sort em and put them into the menu I gave you? How can we sort em if you didn't list em?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Sunfighter: For the life of me, I don't see the relevance of what you posted to what is shown on that "fanfiction.net" site. How does what you show relate to all those <select> dropdowns??? I quote from his first post:
    if a member decide that s/he wants to view only Roses in the flower category, you can choose that in a drop-down menu and all images of roses will appear. Then s/he wants to view purple flowers so s/he clicks (in the colour drop down) the colour purple to view all images of purple roses.
    And from the second post:
    you can sort all the fanfiction by genre, ratings, characters, status etc.
    That has nothing to do with the stuff you showed.

    Perhaps the problem is that he uses the word "sort" when he really means "filter". That is, he wants to filter records so that he only gets "purple roses", for example. And of course that is properly done in the SQL query.

    To be fair, I'm not sure about the relevance of "fanfiction.net" to what he is asking for. He *seems* to be asking for what I call "dependent <select>s." That is, you select a category in the first <select> and then the *CONTENTS* of the second <select> change to be subcategories of that chosen category. And then maybe this continues through various levels of subcategories.

    mmaar: You need to be more specific if possible.
    Last edited by Old Pedant; 06-12-2013 at 08:18 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Sunfighter: For the life of me, I don't see the relevance of what you posted to what is shown on that "fanfiction.net" site. How does what you show relate to all those <select> dropdowns??? I quote from his first post:And from the second post:
    That has nothing to do with the stuff you showed.

    Perhaps the problem is that he uses the word "sort" when he really means "filter". That is, he wants to filter records so that he only gets "purple roses", for example. And of course that is properly done in the SQL query.

    To be fair, I'm not sure about the relevance of "fanfiction.net" to what he is asking for. He *seems* to be asking for what I call "dependent <select>s." That is, you select a category in the first <select> and then the *CONTENTS* of the second <select> change to be subcategories of that chosen category. And then maybe this continues through various levels of subcategories.

    mmaar: You need to be more specific if possible.
    Yes, filter is more accurate than sort (english is not main main language, sorry for the bad explenation).

    The reason why I used fanfiction.net as an example is because it's exactly what I want. The website has got (1) Different categories (books, movies, tv-shows etc), (2) different fandoms (Harry Potter, LoTR, Narnia etc), (3) The fanfictions where the reader has the opportunity to FILTER down to exactly what they are looking for (genre, characters, length etc).

    The thing I'm struggling with is that the script has a database (or table, not sure what it's actually called) named categories which adds a main category, sub categories and sub-sub categories etc. in an admin panel. I have no idea how to fix this mainly because I'm really awful with MySQL and everything related to it unless I have a manual. First of all, I don't know how to separate the main category (tv shows, movies, books etc) from the sub-sub-categories (characters, length, genre) so the main category doesn't show up when I want to filter out all these things. When I show the categories as links, it's just called {categories} or {sub_categories} which doesn't help all that much.

    It's a lot of information and I'm really bad at explaining things, so let me know if I need to re-phrase myself. Thank you both for the help



    Ps. "he" is a "she"

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    english is not main main language, sorry for the bad explenation
    WOW! English may not be your native language, but you WRITE English better than most of the people who post in these forums! I am *impressed*!

    *********

    Unfortunately, for all your explanation, it doesn't help a lot. The problem is that the form you showed us could be represented in the database in many different ways (some good, some bad).

    So what I would need to see would be the SCHEMA of the database.

    If you could use some database tool to explore the database, hopefully that tool could show you the various tables in the database and, in each table, the names and types of the fields. *THAT* is what we need to see. Can you do that?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    WOW! English may not be your native language, but you WRITE English better than most of the people who post in these forums! I am *impressed*!

    *********

    Unfortunately, for all your explanation, it doesn't help a lot. The problem is that the form you showed us could be represented in the database in many different ways (some good, some bad).

    So what I would need to see would be the SCHEMA of the database.

    If you could use some database tool to explore the database, hopefully that tool could show you the various tables in the database and, in each table, the names and types of the fields. *THAT* is what we need to see. Can you do that?
    I found something called information_schema in phpMyAdmin so I'm assuming this is what you're looking for?



  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    No. That kind of display is what we are looking for, but we want to see it for *YOUR* database.

    information_schema is one of the system databases in MySQL.

    If you weren't aware: MySQL-the-database-server can and does support multiple databases. Normally, each installation will have three SYSTEM databases:
    information_schema
    performance_schema
    mysql

    And then you would have your *OWN* databases, as well.

    So in that dropdown that shows as "information_schema" in the pictures you just showed us, change it to show the tables in YOUR database.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    No. That kind of display is what we are looking for, but we want to see it for *YOUR* database.

    information_schema is one of the system databases in MySQL.

    If you weren't aware: MySQL-the-database-server can and does support multiple databases. Normally, each installation will have three SYSTEM databases:
    information_schema
    performance_schema
    mysql

    And then you would have your *OWN* databases, as well.

    So in that dropdown that shows as "information_schema" in the pictures you just showed us, change it to show the tables in YOUR database.
    Okay, sorry for being such as noob with this Is this right then?

    Last edited by mmaar; 06-12-2013 at 11:39 PM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Okay, that is showing the list of all the TABLE NAMES.

    What you need to do is figure out which of those tables are relevant to this question/problem and then in turn view the fields of each of those.

    Start with videos_categories. I'm not sure what other tables are relevant, but surely that is.

    I don't use phpMyAdmin, so I'm not sure how you go from that view to viewing the table structure. Possibly it is as simple as clicking on the table name.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Also, it may be more useful to actually view 10 or 20 of the actual records in that table. Again, I don't know how to do that with phpMyAdmin.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay, that is showing the list of all the TABLE NAMES.

    What you need to do is figure out which of those tables are relevant to this question/problem and then in turn view the fields of each of those.

    Start with videos_categories. I'm not sure what other tables are relevant, but surely that is.

    I don't use phpMyAdmin, so I'm not sure how you go from that view to viewing the table structure. Possibly it is as simple as clicking on the table name.
    Here's the video_categories (which is the table that is used for my categories)



    And the structure

  • #15
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Quote Originally Posted by Old Pedant View Post
    Sunfighter: For the life of me, I don't see the relevance of what you posted to what is shown on that "fanfiction.net" site. How does what you show relate to all those <select> dropdowns??? I quote from his first post:And from the second post:
    That has nothing to do with the stuff you showed.

    Perhaps the problem is that he uses the word "sort" when he really means "filter". That is, he wants to filter records so that he only gets "purple roses", for example. And of course that is properly done in the SQL query.

    To be fair, I'm not sure about the relevance of "fanfiction.net" to what he is asking for. He *seems* to be asking for what I call "dependent <select>s." That is, you select a category in the first <select> and then the *CONTENTS* of the second <select> change to be subcategories of that chosen category. And then maybe this continues through various levels of subcategories.

    mmaar: You need to be more specific if possible.
    Here's what he said that lead to my code:
    ... but I need some help with making dropdown menus for my subcategories.
    and
    What I'm looking for is something similar to what they have at fanfiction.net
    So I gave him something he could plug his own information into; since he did not include it in his post. And seeing the number of posts here it looks like it's far more complicated than what the first post implied.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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