This is the code at a high level, and there are multiple such lists I have of the following structure:
<li class="wrap-input">
<p>Some sentence</p>
<select class="form-control">
...
</select>
<div class="button-in-input">
...
</div>
</li>
.
.
.
What I want to do is, whenever the user focuses on the "form-control" select, then the div with the "button-in-input" class should be shown, but only in that particular li element. i tried it with this jquery code:
$(".form-control").focusin(function() {
$(".button-in-input").show();
}).focusout(function() {
$(".button-in-input").hide();
});
But of course, this generalizes to all the li elements I have. I'm assuming there is a way to do it with the this keyword but note that the select and div elements are siblings.
Any help would be appreciated!
PS: I want to avoid using IDs otherwise there would be tons of repetetive code
You can do this with pure CSS.
.wrap-input .button-in-input {
display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
disply: block;
}
The select in the second selector is not necessary, but it helps in case there's a different item with the same class.
you can simply use :focus in css to do it, no fancy javascript code needed for this
.form-control:focus + .button-in-input {
display: block;
}
Related
As far as I understand I have the syntax here correct, but it's still all fading in? I must be doing something wrong is anyone able to help?
I'm simply trying to get .map_1 to fade in, but not .routemapred.
$('#listItem1').click(function(){
$(".map_1:not('.routemapred')".fadeIn(500);
});
The selector you used looks for a single element that has class="map_1" but doesn't have class="routemapred". Your HTML has these classes on different elements, so you need to select them individually:
$('#listItem1').click(function() {
$(".map_1").fadeIn(500);
$(".map_1 .routemapred").hide();
});
.map_1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="listItem1">Click</button>
<div class="map_1">
This should fade in
<div class="routemapred">
This should not be visible
</div>
</div>
I'm trying to add a class to my p element when the textarea is active
This is what I've got so far with no luck.
<textarea class="text"></textarea>
<p class="someClass">
<span class="span">
TEXT
</span>
</p>
jQuery
$('textarea').focus(
$(".someClass").addClass("focused");
});
The final result I'm trying to accomplish is when the textarea is focused
<textarea class="text"></textarea>
<p class="someClass focused">
<span class="span">
TEXT
</span>
</p>
Can this be done by grabbing the set class "someClass"?
You are actually doing it wrong. You should do this way by sending an anonymous function:
$('textarea').focus(function () {
$(".someClass").addClass("focused");
});
You have missed that. I would say a better way, if the .someClass is next to the element in question, you can use CSS's sibling selector +, without using JavaScript:
textarea:focus + p {
background: #99f;
}
<textarea></textarea>
<p>Click on TextArea</p>
You should to supply an anonymous function to the focus event handler. Try this:
$('textarea').focus(function() {
$(".someClass").addClass("focused");
});
Also note that you can do this in CSS alone without the need for any JS code. Using the CSS method has the added benefit of the styles being automatically removed when the textarea loses focus.
textarea:focus + p {
/* styles in here which matched the .focused class */
}
Working example
I'd like to hide a column in css for only one specific page and i saw several options for it, but every one uses page id. What if two pages have the same id and the differences are only in the class definitions?
I want to use the 'display none' tag only on /Page 2/.
Here is the example:
/Page1/
<body id="body" class="bootstrap-body page-body home_body body-admin-logged" role="document">
/Page 2/
<body id="body" class="bootstrap-body page-body list_page_body category_list_body body-pathway-top body-admin-logged" role="document">
/Column - Page2/
The html code
<aside class="col-md-3 col-sm-12 col-xs-12 column-left">
/Column-Page2/ css code
.column-content-left, .column-left {
float: left;
}
If I use the display none in the css above, it will works perfectly. The problem is that it reflects on /Page1/ too.
Is it possible to do that in css or javascript, without accessing the html?
You can select the body css too like this:
body.list_page_body .column-content-left, body.list_page_body .column-left {
display: none;
}
This should only trigger for the body with the class .list_page_body (or you can use another class specific to that page.
Use a class unique to the second page, for example list_page_body and in your css
.list_page_body .column-content-left, .list_page_body .column-left
{
display:none;
}
It is possible in javascript. Just get the url of the page using window.location.href and add a class or something if it's the page you want the special treatment on.
The classes that distinguish page 2 from page one are: list_page_body category_list_body and body-pathway-top. So you can use any of them to implement your CSS on page 2 without effecting page 1.
Example:
body.category_list_body .column-left{
display:none;
}
You can do it with jQuery by aiming the url path
jQuery(function ($){
var pathname = window.location.pathname;
if (pathname == "/page2/"){
$(".column-class").css("display","none");
}
})
If page 2's body tag has a unique class, you can use the .parent .child {} CSS selector. From what you've provided:
body.list_page_body .column-content-left, body.list_page_body .column-content-left {
display: none;
}
Just so you know, with parent / child selectors, you can use either .parent .child or .parent > .child. The former would select all instances within .parent that the .child class is used in the document:
<body class="parent">
<div class="child">
<div class="child">
</div>
</div>
</body>
In the example above, .parent .child {} would apply rules to both the initial .child as well as the nested .child.
The latter .parent > .child applies to only direct descendants. Using the same example above, only the initial .child element would be selected by .parent > .child. The nested .child wouldn't be affected.
So I start with items 1-4:
<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>
Then I have some input checkboxes:
<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />
So basically I have jQuery showing and hiding divs. Now I have another function that must iterate through these divs (one for each checkbox), and show/hide based on another criteria. But I don't want the already hidden divs to be shown again.
$(".someDiv").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
};
In this example, the only remaining div should be the last div. Unfortunately, this code will make the second and fourth divs shown.
This code is very basic example of all the filters I'm going to be applying, adding etc.
You can use the :visible selector to find only visible.
$(".someDiv:visible").each(....);
You can use the .not() selector to find only hidden.
$(".someDiv").not(":visible").each(....);
I think you can perform the same operation in your code with this one line.
$(".someDiv").hide().find(".regular").show();
Find all .someDiv and hide them, then find those with a .regular class and show them.
You could use :visible selector to select the .someDiv that are visible.
$(".someDiv:visible").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
}
});
Here is another funny way utilizing the chaining :) and making it single line.
$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
You could do this two ways: You could add another class for the display: none elements and make them invisible via css, or you could find out the css property via jquery
via css class
html
<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>
css
.someDiv{
display: block;
}
.hidden{
display: none;
}
js
$(".someDiv").each(function(){
if($(this).hasClass("hidden")){
$(this).show();
} else {
$(this).hide();
};
via jquery
$(".someDiv:visible").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
}
});
You can use the :not() selector for that and filter the results before going into the .each():
$(".someDiv:not(:hidden)").each(function(){
Assume we have an element that is similar to this
<div id="navigation">
<div class="nav-block-1">....</div>
<div class="nav-block-2">....</div>
This is the offer
Report
</div>
Now I want to hide all the elements including the textelements but not the nav-block-2, so is there a way through which I can do this? Something like using CSS negation?
I tried using
#navigation :not(.nav-block-2) {
display:none;
}
but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?
Maybe not what you want but here's what i'd do.
#navigation * {
display:none;
}
#navigation a {
display:inline;
}
EDIT:
As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.
Try this
#navigation div:not(.nav-block-2) {
display:none;
}
<div id="navigation">
<div class="nav-block-1">Div 1</div>
<div class="nav-block-2">Div 2</div>
This is the offer
Report
</div>
Use this:
#navigation > *:not(.nav-block-2) {
display:none;
}
However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2.