What I have in my template is just a bunch of divs and a list, consisting of multiple li elements. The use case is simple, the li elements are a dropdown and are displayed only on clicking a button. When the dropdown is visible and someone begins to type, the matching li element should be selected, or there should be a visual indication.
My approach is this, on a keyup event, I look for the typed word (this is quite easy) in the li elements. I find a few elements, which I've confirmed. Now, when I try to do something with these elements, nothing seems to happen WHILE the dropdown is open (right now, I'm trying to .toggle()) these elements. Now, when I click the button again (which showed the dropdown in the first place) (this click hides the dropdown), and then click the same button again to reveal the dropdown, voila! The values have been changed as they should be – the matching elements have been hidden/shown.
This has me stumped. For company policies, I can't upload the code up here, but I'll be very thankful if someone else has had this problem before and can help me out.
EDIT:
Code: function to change the dropdown on keypress, this is being fired correctly:
filterOptionsForKeypress: function (event) {
var typedString = this.$('input.filter-button-text').val(),
searchToken = _.trim(typedString.toLowerCase().replace(/ /g, '_')),
matchingLi = this.$("li[data-field^='" + searchToken + "']", this.$el), // makes no difference with or without the context, this.$el
that = this;
if (matchingLi && matchingLi.length) {
this.$(matchingLi[0]).html('kaka'); // this change shows only if the dropdown is hidden + shown again
console.log('trying to move focus', this.$(matchingLi[0]).attr('data-field'));
}
// this.$el.append('Some text'); -- this works, I see the changes as they happen
}
And the template looks something like this:
<div class="filter-button filter-option {{if !model.include}}button-red{{else}}button-green{{/if}} toggle-dropdown" data-dropdown-class="{{if !model.include}}button-red{{else}}button-green{{/if}}">
<div class="filter-button-text">${model.option}</div>
<div class="filter-drop"></div>
<div class="dropdown filter-dropdown">
<ul>
{{each model.config.options}}
<li data-field="${$value.op}" data-include='${$value.include}'>${$value.name}</li>
{{/each}}
</ul>
</div>
</div>
EDIT #2:
When the dropdown is open, this is how the html looks:
OPEN:
CLOSED:
So basically, apart from adding a few styles to the enclosing div and a class 'open', I don't see any differences.
The problem was that we're using a plugin for dropdown menus. So basically, what we saw on the screen wasn't what we found selecting with this.$(). The solution? Look globally and with a :visible filter voila, problem solved.
Related
I have a long page, where one section is tabbed content. However, at the same time as showing tabs, I'd like for other sections further down the page to be visible or hidden, depending on which tab is clicked. Since each tab would display about 4 containers further down the page, I'd like to use classes for this rather than ID's. This is a rough outline of what I have so far (tab content removed, as it's unnecessary):
<div class="horisontal-tabs">
<ul class="tabs">
<li class="tab-label active person-sam" rel="tab1">Sam</li>
<li class="tab-label person-bob" rel="tab2">Bob</li>
<li class="tab-label person-jack" rel="tab3">Jack</li>
<li class="tab-label person-kelly" rel="tab4">Kelly</li>
</ul>
</div>
<div class="container-sam section-visible">Custom content only for Sam</div>
<div class="container-bob section-hidden">Custom content only for Bob</div>
<div class="container-jack section-hidden">Custom content only for Jack</div>
<div class="container-kelly section-hidden">Custom content only for Kelly</div>
<div class="container-sam section-visible">Other content for Sam</div>
<div class="container-bob section-hidden">Other content for Bob</div>
<div class="container-jack section-hidden">Other content for Jack</div>
<div class="container-kelly section-hidden">Other content for Kelly</div>
And I have jquery as per below for each person, but it doesn't seem to be working, and I can't figure out how to simplify it down. The idea is that when you click on one person's tab, all the other people's sections will be hidden and that person's will be visible.
$('.horizontal-tabs ul.tabs li.person-sam').click(function (event) {
$('.container-sam').removeClass('section-hidden').addClass('section-visible');
$('.container-sam.section-visible').removeClass('section-visible').addClass('section-hidden');
event.stopPropagation();
});
I have opted to not use ID on the sections and use a class instead, because multiple will need to show at once, so they wouldn't be unique.
Any tips will be greatly appreciated! :)
So the question is how to make simpler?
What comes to mind is you don't need active and inactive classes, you just need one of them, and then you can make the other be the default state . That is, add a default class .section to all sections and either use .section as the visible state and add .section-hidden to hide it, or use .section as the hidden state and add .section-visible to show it.
Say you go with .section-visible, the css would be something like this:
.section { display: none }
.section.section-visible { display: block }
This would also simplify your javascript because now you can reset all sections and just turn on/off the ones you need.
If you go, again, with .section-visible, run this on click:
$('.section').removeClass('section-visible'); // reset all sections
$('.container-sam').addClass('section-visible'); // add visible class to specific sections
You can see you only need one extra class, not two.
BONUS 1: you can use BEM to make it clearer.
BONUS 2: it looks like you have one click listener for each person, but instead you can use the HTML dataset API and the jQuery .data() function to detect which person's button you're pressing. That way you would have only one click listener, and you can detect which li was clicked by checking the data- attribute. Like <li data-person="sam">sam</li> and const containerSelector = `.container-${$(this).data('person')}`;. $(this) will select the li clicked, and .data('person') will return 'sam'. So the selector will be .container-sam.
I have a script where clicking on a particular div (eg id=packtoa) will (amongst other things) .addclass('show') to listview items with a class which matches the id of the div clicked.
Which works great, but then I'll want the next div (id=packfhag) to do the same thing, and then the next one. So I've got the same script many times in my js with just the id & class name changed.
I'm sure there's a stupidly obvious way to automate this so that any div with an id starting with "pack" will trigger this script, pull the div id, and insert it into the script where the name of the class is called.
And I'm sure I'm close with trying to adapt this script:
$("div[id^=pack]").each(function() {
var match = this.id.match(/\w+$/)[0];
$(this).addClass('show');
});
But I just can't crack it. Either something above is wrong, or I'm inserting it into the wrong place in the script:
// Tears of Ameratsu menu functions
$(document).bind('pageinit', function() {
// When link is clicked
$('#packtoa').click(function() {
// collapse the expansions menu
$("#expansionsmenu").click();
// hide everything except this expansion
$(".hidden").removeClass('show');
$(".packtoa").addClass('show');
// clear the search, and trigger a blank search
$('input[data-type="search"]').val('');
$('input[data-type="search"]').trigger("keyup");
});
});
What am I missing?
// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");
The best option is to use class attribute, add class attribute to all those div, and then
$('.commonClass').addClass('show');
For Example :
// this is for testing
// say you click
$('#test').on('click',function(){
$('.testclass').addClass('show');
});
.testclass{
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>
<input type='button' value='Click me to view div' id='test' />
I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));
I want to make menu that will filter list on main page.
For example:
<div id="filters">
Все
Топ-40
Топ-20
Топ-10
</div>
So, the problem is that how I can highlight active item in this menu.
Help me or if there is another aproach to do it, please show.
Thanks for any advices!
You can somewhat achieve this with the :focus state.
#filters a:focus {
color: red;
}
Here is a JSFiddle as a quick example. It isn't perfect though
How do you define "active"?
If you mean the one you are currently hovering over, you can do so by
applying a #filters a:hover rule.
If you mean the currently selected page, you can only do so manually
by adding a class name to the "active" link, or setting the ID / class
of the <body> (that way, you can style multiple things based on the
"current" page).
Update: Here's a way to select links using JavaScript.
<script type="text/javascript">
function select (x)
{
var a = document.getElementById ("filters").getElementsByClassName ("active");
for (var i = 0; i < a.length; ++i)
a[i].className = "";
x.className = "active";
}
</script>
Foo
Baz
Bar
It doesn't seem clear what you actually want to achieve. I seem to understand that you have a menu that changes content on the page, so no page reloads are happening, correct? But it remains not clear to me if the menu filters (shows less or more) content or if it switches content. In the second case, http://jqueryui.com/tabs/ seems to me an easy option (but this is also possible with less code).
Hereby an demo of contents that gets filtered with a menu: http://codecanyon.net/item/jquery-sort-and-order-portfolio-plugin/full_screen_preview/2669205
I hope you can figure it out or can give more information.
More inspiration: http://api.jquery.com/toggleClass/
$("#filters a").click(function () {
$(this).toggleClass("active");
});
I am trying to use a jQuery listener to listen for a users clicks on the html body and perform a specific function if anywhere on the body has been clicked except for a specific div and the children within that div.
The idea is that the div is a popup type element and instead of having to have a close button that the user can click, they should just be able to click anywhere on the page besides that div and it will automatically close.
I have been using this listener:
var initialClick = false;
$('body').on('click.addPhoneListeners', function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
if(target.parentNode.id != clone.id && target.id != '') {
finish();
};
}
initialClick = true;
});
Which listens for all clicks on the body and unless the click comes from within the element I want the user to be able to interact with, it closes. Unfortunately this only works with a div that has only one level of children. As soon as I start getting multiple hierarchies such as this:
<div id="addressContainer">
<div id="address" class="hidden row">
<div class="row">
<div id="address.primary" class="hidden">P</div>
<div id="address.type"></div>
<div id="address.street"></div>
<div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div>
<div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div>
</div>
<div class="row">
<div id="address.city"></div>
<div id="address.state"></div>
<div id="address.zip"></div>
</div>
<input type="hidden" id="address.id"></input>
</div>
</div>
The target.parentNode.id gives me the objects parent element as opposed to the addressContainer id and thus does not work. Is use the top level parent from within nested elements? Other elements will be using this same code, so it has to work on both divs with just one level and div's with multiple.
UPDATE: Found a few excellent solutions, thanks guys. I do however have one other question. Refer to my code above where I set an initialClick boolean to false, then set it to true. I am doing this because for some reason if I don't, when I go to add the popup div, the initial click from the button used to set that popup fires the listener and closes the popup before I have a chance to do anything. This has been my solution around the problem, but is that the only way? Or am I just setting the listener slightly incorrect?
I usually do something like this:
$(document).click(function(e) {
// hide popup
});
$('#popup_div').click(function(e) {
e.stopPropagation();
});
That way the clicks from your popup never propagate to the document, so the close function never fires.
Replace
if(target.parentNode.id != clone.id)
with
if ($(target).closest("#" + clone.id).length === 0)
(I left the second clause alone since it didn't seem related to your question.)
This tries to find the closest ancestor with ID equal to clone.id. If none is found, an empty jQuery object is returned (i.e. one with length === 0), which is what we test for.
Incidentally: jQuery normalizes event.target, so you can just use that instead of whatever custom monstrosity EventUtility.getTarget(event) embodies.