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;">
Related
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.
So, I have 4 categories, 2 subcategories and two button as shown below.
https://jsfiddle.net/mboz45fv/15/
So, here is what I am trying to achieve.
There are two buttons and 4 category buttons, 2 sub category buttons.
By default, it will say Button 1 and Button 2.
When cat_B button is clicked (Image-A), the user will be directed to .com/cat_B page (Image-B). I want to show the cat_B in the title of the button 1 as shown in the picture.
Each categories will have two sub-categories.
When sub_cat_B is clicked, the user will be redirected to .com/cat_b/sub_cat_b. I would like the title of the button 2 to be sub_cat_B when they are in that page.
How can I achieve this?
Thanks!
Personally I would build each page with seperate buttons already showing the host page URl, precisely as you describe, i presume there is a reason why not. if you do want to set a buttons text with jquery you could use:
$("#cat_b").html('.com/cat_b');
If reduced code is what youre after then assuming you are using buttons not inputs and have structured your button something like:
<button id="cat_b" class="butt" onclick="location.href='.com/cat_b'">button</button>
You could use #rkho's approach but grab the url directly from the buttons own onclick attribute, also triggering this by class should reduce the amount of code:
$('.butt').click(function(){
var link=$(this).attr('onclick');
var buttonText = link.substr(link.lastIndexOf('/') + 1);
$("#cat_b").html(buttonText)
})
We're going to get the URL in the window first. Let's store it in a variable called id:
var id = window.location.href
Then, let's grab everything to the right of that last slash:
var buttonText = id.substr(id.lastIndexOf('/') + 1);
Now, you can set your specific button (let's assume you've labeled it with a class 'button'):
$(".button").text(buttonText);
I have an issue with a jquery mobile 1.4.2 webapp. I have a page with 2 tables that both use the column toggle button. I want to move each of these buttons to their own placeholder to allow for horizontal scrolling.
I have this working when there is one table, but I can't figure out how to specify the table id for the column toggle button, to move the button for the correct table.
<div id="colUnit"></div>
$(document).on("pageinit", "#contractDetails", function () {
$(".ui-table-columntoggle-btn").appendTo("#colUnit");
});
Is there a way to specify the table id within the jquery so that the correct button is moved to <div id="colUnit"></div>
It currently places BOTH buttons (one from each table), into <div id="colUnit"></div>
column-toggle buttons are siblings of tables and placed before them. Use .prev() to move to another place.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.appendTo("#colUnit");
Update
You can also append them into a controlgroup and change their text.
<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>
Move buttons to controlgroup.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.each(function () {
var text = $.mobile.path.parseUrl($(this)
.prop("href"))
.hash.substring(1);
$(this)
.text(text.split("-")[0])
.appendTo($("#colUnit")
.controlgroup("container"));
});
$("#colUnit").controlgroup("refresh");
Demo
I have a menu that is displayed when a user hovers over an anchor tag with a certain class. The same menu is always displayed, but the anchor tags have a different "accNum" attribute. I want to get the value of the accNum attribute from the "parent" element that displayed the menu and append it to the click event of one of the menu items. Something like;
Actions
Actions
Actions
<div id="ActionsMenu" style="display:none;">
Show Account
</div>
Whichever 'ActionLink' is the one hovered over to display the menu, i want to take that AccNum value and create the onClick event of "ShowAccountValues" something like
onClick="showAccountValues('AccNum value of parent');"
any help would be great. Also, I assume I have to bind this to the document.ready() function for 'ActionLink' which makes sense, but i figured if i could get any of it through this that would be great.
Thank you
Firstly use jQuery to hook up your events, secondly accnum isn't a valid attribute, so use a data-* attribute like this:
Actions
Actions
Actions
<div id="ActionsMenu" style="display:none;">
Show Account
</div>
Then you can update the data attribute of the #showAccountValues link on hover of each a element:
$('.actionLink').on({
click: function(e) {
e.preventDefault();
$('#ActionsMenu').show();
},
mouseover: function() {
$('#showAccountValues').data('accnum', $(this).data('accnum'));
}
});
Then on the click of the a element in #ActionsMenu you can get the accnum:
$('#showAccountValues').click(function(e) {
e.preventDefault();
showAccountValues($(this).data('accnum'));
});
Example fiddle
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.