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.
Related
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;
}
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>
Inside an each loop, I need to add a class if the current element contains an img not anything else. Here's my latest iteration of not working code, which --- though not right --- probably gives you the idea anyway.
$(".details").each(function(index){
$(this).has("img").not(:contains("p, ul, ol, div, span")).addClass('screenshot-only');
});
Obviously I'm trying to exclude this if it also contains any of p, ul, ol, div, span -- so helping me fix that would be great.
If there's a way to select if this has only img and nothing else at all, that would be better.
:contains("p, ul, ol, div, span") should go into quotes since the Sizzle Engine will parse it as String:
':contains(p, ul, ol, div, span)'
but that's most likely not your main issue here, :contains if you read the jQuery docs searches for TEXT, not DOM nodes
rather take a look at https://api.jquery.com/has-selector/ or https://api.jquery.com/has/
A quick way would be using it in combination with https://api.jquery.com/only-child-selector/
$(".details:has(img:only-child)").addClass("screenshot-only");
Example
$(".details:has(img:only-child)").addClass("screenshot-only");
.screenshot-only {background: gold;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="details">
<img src="//placehold.it/40x40/0bf">
</div>
<div class="details">
<img src="//placehold.it/40x40/0bf">
<p>foo</p>
</div>
<div class="details">
<img src="//placehold.it/40x40/0bf">
</div>
or if you rather want to target such images instead:
$(".details:has(img:only-child)").find("img").addClass("screenshot-only");
.screenshot-only {border: 5px solid gold;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="details">
<img src="//placehold.it/40x40/0bf">
</div>
<div class="details">
<img src="//placehold.it/40x40/0bf">
<p>foo</p>
</div>
<div class="details">
<img src="//placehold.it/40x40/0bf">
</div>
You can do the following:
$(".details").each(function(index){
$(this).has("img:first-child:last-child").addClass('screenshot-only');
});
Working JSFiddle
Edit: As pointed out in other posts, you can also use :only-child selector instead of :first-child:last-child. Moreover, you can simply get rid of the each if you just want to add a class to each matching element as Roko C. Buljan's answer shows.
If you aren't attached to jQuery with plain javascript which that is all jQuery is you can do a test for it via:
`if (this.contains("img")) {
return; // doesn't do anything
} else {
$(this).addClass('screenshot-only');
}
` is much easier and is 5 lines using the DOM.
// then just
I am having a slight problem with my hover jquery show and hide function i have implemented. [click here for site][1]When i apply visibility: hidden; to my CSS, this div .hover-hide does not display. However when i remove the css property visibility: hidden; the hover show and hide function works once you have hovered over the div .hover-hide. Does anyone know what i am doing wrong. Below is a snippet of my code:
html
<figure class="tint">
<div class="carousel-col-copy hover-hide">
<h1>lee vintage</h1>
<div class="col-copy-passage col-copy-boarder">
<p>With prints inspired by the abstract artists Blinky Palermo and Robert Mangold, lee vintage presents bold pieces from their SS13 collection</p>
</div>
</div>
<img src="timthumb/timthumb.php?src=img/20.jpg&w=450&h=530&zc=1&q=100&a=0" class="slider-img grid-img">
</figure>
$(".tint").hover(function(){
$('.hover-hide').removeClass('hidden');
},function(){
$('.hover-hide').addClass('hidden');
});
Use display:none and jQuery's built in functions .show() and .hide() instead.
CSS
.hover-hide{
display:none;
}
jQUery
$(".tint").hover(function(){
$('.hover-hide').show();
},function(){
$('.hover-hide').hide();
});
Try this:-
http://jsfiddle.net/DhQjk/
css
.hidden { visibility:hidden; }
Html
Add hidden class to your dynamic content initially.
<div class="carousel-col-copy hover-hide hidden">
JS
Use .toggle() on hover.
$(".tint").hover(function(){
$('.hover-hide').toggleClass('hidden');
});
Ref .toggle()
You can do it just with css.
.hover-hide {
display: none;
}
.tint:hover .hover-hide {
display: block;
}
Example fiddle
I just don't getting why everybody want's to use jquery for this.
The better solution is to use CSS like this one:
.tint .hover-hide {
display:none;
}
.tint:hover .hover-hide {
display:block;
}
That's all. Nothing more needed to do any coding.
Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?
Current Code :
<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple <h2> tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Expected Code
<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.
And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.
How did you guys get around this?
one, of the tons of solutions
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single</span>
<span>line of text and css. Right now i am using</span>
<span>multiple <h2> tags and a css class to achieve this effect.</span>
<span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
<span class="clear"></span>
</h2>
with this styles in <head>
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
float:left;
}
h2.heading span {
clear:left;
display:block;
float:left;
background:#fff;
padding:1px;
margin:1px;
}
h2.heading .clear {
clear:left;
margin:0px;
padding:0px;
float:none;
}
</style>
EDIT: second variant
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
display:inline-block;
font-size:20px;
}
h2.heading span {
background:#fff;
padding:1px;
margin:1px;
line-height:30px;
}
</style>
with this markup
<div style="width:300px;">
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
</h2>
</div>
No need of CSS or JavaScript, just use the <br> tag.
<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br>
line of text and css. Right now i am using
<br>
multiple <h2> tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>
Or did I misunderstand the question?
I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)
HTML:
<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Same as your HTML except that I used a span instead of h2
And css:
.heading {
background: white;
line-height:2em;
padding: 0.3em;;
}
body { /*not really neccessary to show, but anyway*/
background: limegreen;
font-family: verdana;
color: #999999}
Problem with that is that there are no paddings to the left and right of the text.
And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.