Im realtively new to html/css and having trouble finding a way to make an element that I want. Ill start off with saying that I am using Material Design Lite in a rails project.
So what Im trying to do is I have a grid of search results and Im trying to create a filter bar that users can select different tags and characteristics to filter the results. The html and form part to filter the results I can handle the part that Im having trouble figuring out is the way I want the layout...
Im trying to create a bar across the top with different categories and when the user clicks on one of the categories a box expands with all the different filtering options for that category. Similar to a menu dropdown but looking to make it part of the group so if they choose another category it will close the first one and open the new one instead.
Im looking for a push in the right direction to find a tutorial or example that will get me in the right direction. For a visual reference for what Im thinking the recipe website yummly uses this kind of system...heres a screen shot:
Using jQuery, you can add an attribute for your top navigation's links corresponding to an ID on each individual group, then use that to target the correct tab, and fade out the rest with .siblings()
HTML
<div id="topbar">
link
link
</div>
<div id="groups">
<div class="sub" id="category1">
filter
filter
filter
filter
filter
</div>
<div class="sub" id="category2">
filter
filter
filter
filter
filter
</div>
</div>
jQuery
$(document).ready(function(){
$(".sub, .close").hide(); // hides filter tabs and close button
$('#topbar a.toggle').click(function(){ // on click
var category = $(this).attr("data-group"); // checks the ID to fade in
$(".sub" + category).fadeIn().siblings(".sub").hide(); // fades in the correct subcategory and fades out all the other categories
$(".close").fadeIn(); // fades in close button
return false; // prevents anchor link behaviour
});
$("#topbar a.close").click(function(){ // close button click
$(".sub").fadeOut(); // fades out whatever subcategory is active
$(this).fadeOut(); // fades out close button
return false; // prevents anchor link behaviour
});
});
jsFiddle: https://jsfiddle.net/4t6k2ftd/
You can do this with tabs. There are lot of tutorials for this. In your case ingredients, taste, diet(links) can be tabs. For each tab you have tab-content.For example "Diet filter options"(content) for "diet tab"(tab). When you click on "diet tab" "diet filter options"(content) is made visible and some css is added. Here is a tutorial.
Example tabs html
<ul class='tabs'>
<li><a href='#ingredients'>Ingredients</a></li>
<li><a href='#tastes'>Tastes</a></li>
<li><a href='#diet'>Diet</a></li>
</ul>
<div id='ingredients'>
Ingredients filter options
</div>
<div id='tastes'>
tastes filter options
</div>
<div id='diet'>
diet filter options
</div>
Example tabs javascript(jquery)
$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
Here active is class for currently active link.
Related
I am working on a web site to show customizable store products.
There is button on every product info box like in the screenshot:
Every time the user clicks on the button Options, there appears information about customizable product options, like this:
Here you have the piece of code from the producto info box that manages the button Options:
<div class ="oculto" id="customDiv'.$row["id"].'" style="display:none;" class="answer_list" >
<H3>Options</H3>
</div>
And here you have the JavaScript piece of code that manages the toggle method:
$(document).ready(function () {
$(".customizable").click(function () {
var product = $(this).attr("id");
$(".oculto").toggle('slow', function() {
// Animation complete.
});
});
});
When the user clicks on the Options button, then the customizable options do appear in the Options div just below the Options tag, and when the user clicks on the button again, the customizable options do disappear.
My issue is that when the user clicks on product A Options button, all customizable options do appear for all products, not only for product A.
I don't know how to identify the Options button for every single product and make the toggle method active only for the clicked product Options button.
By using $('.oculto') you are targetting all element in the page. You need to target only .oculto inside the product. Please try with below code.
$(this).children(".oculto").toggle('slow', function() { ... }
And I also see 2 class attributes, remove one. You can combine multiple classes seperated by space
<div class ="oculto" id="customDiv'.$row["id"].'" style="display:none;" class="answer_list" >
change to
<div class ="oculto answer_list" id="customDiv'.$row["id"].'" style="display:none;">
For a Wordpress page, I am using filter buttons to filter the display of posts depending on their respective categories. The filter buttons work via a small javascript which turns on and off the display of the posts depending on the post-category the button is linked to.
Now, I would like to make these buttons accessible through a dropdown menu, which always shows which filter button is active. Putting them into a dropdown menu was no problem. However, with the next step I need some help: I would like the dropdown menu to always show the active filter button which the user has clicked on, at the top of the menu itself (i.e. instead of the menu's original title which is displayed when the page is loaded, before any buttons inside the menu have been clicked). How might that be possible?
Here's the html of the filter buttons inside the dropdown menu as well as the javascript which enables the filter buttons to filter the post-categories:
<div class="dropdown">
<button class="dropbtn">Dropdown Menu Title</button>
<div class="dropdown-content">
<button class="btn" id="category-filter1"> Filter 1 </button>
<button class="btn" id="category-filter2"> Filter 2 </button>
<button class="btn" id="category-filter3"> Filter 3 </button>
</div>
</div>
Javscript:
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projects > .post').fadeIn(300);
} else {
var $el = $('.' + this.id).fadeIn(300);
$('.projects > .post').not($el).fadeOut(300);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
I think you are looking for this..
You must get the text from the active list and add it to the title div or button.
var textx = $(this).text();
$('.dropbtn').text(textx);
Example of whole code : https://jsfiddle.net/eh4chb48/
Only if i got ypur question right! :) ;)
I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?
You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.
I want this menu: Horizontal drop down menu to push o move the content down, is it possible? Because when I change the position to relative (it pushes) in the "submenu" , the tags a's don´t continue in the same line as the example. Help would be appreciate.
You'd have to something like this to the HTML structure.
<menu>
<ul>
<!-- main menu -->
</ul>
</menu>
<nav>
<!-- sub navigation -->
</nav>
<main>
<!-- your content -->
</main>
Each element inside the menu would need to correspond to an element in the sub navigation. You could do this with ids and data attributes.
//in main menu
<li data-menu="downloads"></li>
//in sub navigation
<div id="downloads"></div>
Then the javascript would listen to a click event in the main menu, and then show the correct sub navigation. If you click a main menu item twice, it should close the sub navigation panel. Here's jQuery to make it easy to read:
$('menu').on('click', 'li', function(){
//get the id of the li
var id = $(this).attr('data-menu');
//select the correct element and check it's current visibility
var navigation = $('#' + id);
var isHidden = navigation.is(':hidden'); //returns true or false
//close all navigation items
$('nav').children('div').hide();
//if the navigation item was hidden, show it
if(isHidden){navigation.show()};
});
Just as an aside, jQuery 3.0 .show() and .hide() do different things than just toggle display:none;
I just started with JavaScript and have a small question. On my website I have three div-elements:
<div id="id_1" class="class_1" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_2" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_3" onclick="itemSelected('id_3')"></div>
I added the following script to highlight the one that the user has clicked:
var selected = false;
function itemSelected(element) {
if (selected == false) {
document.getElementById(element).style.backgroundColor = "#f5b03d";
selected = true;
}
else {
document.getElementById(element).style.backgroundColor = "#99d4e5";
selected = false;
}
}
So far, this works and the user clicks an item and it gets highlighted in another color. If he clicks it again, it gets his default background color. But as soon as the user clicks one of the other items, it gets highlighted too. What I want is a single-choice functionality: As soon as the user clicks one item, the other too appear in their default background-color. Can someone help me with this problem?
Thanks in advance!
Add a shared class to each element.
When the user clicks an element use that shared class to set the default background color to all three elements.
Then use the element's unique ID to set the highlighted background color to the element that has been clicked.
<div id="id_1" class="class_0" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_0" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_0" onclick="itemSelected('id_3')"></div>
function itemSelected(element) {
$('div.class_0').css({'background-color':'#99d4e5'});
document.getElementById(element).style.backgroundColor = "#f5b03d";
}
Change the html as above and use this jquery
You can do this without using javascript, created a fiddle for this:
http://jsfiddle.net/6PUwz/
What I have done is, making the divs focusable by setting tabindex="-1" and doing the selection by the use of the css-pseudo-class :focused.
Check if this fits you requirements.