This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I am selecting some elements using jQuery and applying CSS like this...
$(".items div").not(".active").css({"color":"green","background":"red","z-index:":"-9"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
<div>Item 1</div>
<div class="active">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
The background and the color both work, but the z-index is not being applied.
Where am I going wrong?
If you don't style the element with the position property (relative, absolute, fixed), the element will remain in the normal document flow as a block or inline element. Elements in the normal document flow can't be layered with z-index.
You have an extra colon in your jQuery when setting z-index.
Should be
$(".items div").not(".active").css({"color":"green","background":"red","z-index":"-9"});
Related
If I have a few divs like below, is it possible to remove or hide the divs that have images in them (I don't want to use something like nth-child in case another image is added in the future)
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"</div>
<div>Test 1</div>
<div>Test 1</div>
One of the great things about jQuery is it's set-based. So: You find the set of imgs directly contained by divs via $() with a child combinator selector div > img, then find each of those img's parent via parent, and remove them via remove:
$("div > img").parent().remove();
Example (with two divs with imgs, just to demonstrate that the above doesn't just handle a single one):
$("div > img").parent().remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to handle the img being anywhere within the div, not just as a child, just use a div img selector and closest:
$("div img").closest("div").remove();
Example:
$("div img").closest("div").remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<!-- Note the added span to demonstrate finding a non-child img -->
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$('div').each(function() { // for each div
var $this = $(this);
if($this.find('img').length) // if the div has images as descendants
$this.remove(); // remove it
});
Note: If you're looking for divs that has images as direct children then replace .find with .children.
I have a very simple issue that I can't figure out whether I'm doing something wrong or if it's an issue from the library itself. I'm scratching my head for hours on this.
I'm using Swiper from iDangerous.
I'm trying to create a simple Horizontal Swiper and inside each slide, there will be another slider which will be in vertical mode and I need to have that vertical slider in freeMode. That inner vertical slider will always have one slide having lots of content (at least some, that can be scrolled). The nested scroller works but the freeMode is not working for me at all. freeMode is only working if I declare it on the outer one. I have a fiddle in place so you can see what I'm trying to do. Some sample code from the fiddle is as follows.
HTML
<div class="swiper-container outer">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container inner">
<div class="swiper-wrapper">
<div class="swiper-slide">
lots of lorem ipsum here. see fiddle
</div>
</div>
</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
Javascript
var swiper = new Swiper('.swiper-container.outer');
var swiper1 = new Swiper('.swiper-container.inner', {
direction: 'vertical',
freeMode: true
});
Fiddle
http://jsfiddle.net/sdugx1Lu/
Any help is greatly appreciated.
Update
My original intention is not at all in favor of using nested sliders. What I actually want to accomplish is to have vertically scrollable content (via touch, I'm using it in an app) inside Horizontal slider through Swiper. So, if this can be accomplished without using the second level of nested slider, please do suggest. As when I tried to do that, the vertical scroll was not available in case of single level horizontal slider.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>
</head>
This line make your code adjust to mobile, and also will make the width become device-width.
But your height is 100% and you can't change if you don't
so when you change your style in your css file, maybe it will be used in every section (container) if you don't add that line of code.
but you add that line of code every section will become :height is device-height,
so what you should is add special style in your css file for which you want change
such as your article is longer than device-height, you have to add special style for that section. if not, your scroll will not working.
Chinese: I want to print Chinese, but not allowed.
I have the following html and I want to change the divs around onclick. For example:
Initial
<div class="box1">Story 1</div>
<div class="box2">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
When I click on Story 2, it becomes
<div class="box2">Story 1</div>
<div class="box1">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
So .. whichever div is clicked will take the property of box1 and the others will become box2. Is it possible?
One more possible solution with toggleClass() method:
$("div").on("click", function() {
$(this)
.siblings(".box1")
.andSelf()
.toggleClass("box1 box2");
});
DEMO: http://jsfiddle.net/x8vxh/
Something like this perhaps:
$('.box1, .box2').click(function() {
$('.box1').addClass('box2').removeClass('box1');
$(this).addClass('box1').removeClass('box2');
});
It might be neater to have one box class for all boxes, and one active class that you add and remove, and the latter class could override the properties of the former. Would save you the trouble of toggling two different classes.
Try this
$("div").on("click",function(){
$(".box1").prop("class","box2");
$(this).prop("class","box1");
});
http://jsbin.com/igugop/3/edit
Below I have a small js based simulator for different command tools. The user enters a command, and if it's correct, it displays it at the top. For future uses, I need to make sure it can handle as many commands as needed before completing the simulation. This means inevitably I'll have content overflowing.
My solution now was setting the Y overflow to auto, adding the scrollbar, and a little jquery to keep the client scrolled to the bottom of the output div at all times, because the content is being appended below the previous content each time a user enters the correct command.
Right now this works fine, except I would like to remove the scroll bar. I'd like the content to behave in the same way overflow auto would and does, except without a visible scrollbar.
Is there a way I could do this with jquery or javascript?
I know I can do some css tricks to put some sort of black over the scrollbar with a z-index, but I'd like to avoid that if possible.
All you need is to add overflow: hidden to your container and scroll it once content is loaded:
div.scrollTop = div.scrollHeight;
Demo http://jsfiddle.net/nT75k/2/
Yes, you can add an event listener and when that event is emitted you can have it scroll down to the bottom by checking the height like so
$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;
$('.input').keypress(function (e) {
if (e.which == 13) {
$container = $('.container');
$container.append('<p class="row">' + e.target.value + '</p>');
$container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
}
});
http://jsfiddle.net/w2qbe/
Continue to use javascript to do the scrolling, and put the div containing your simulator inside another div that's slightly less wide and do overflow hidden on the outer div. I've used this technique a couple of times, and it's pretty fun.
The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.
for example:
html:
<div id="outside">
<div id="inside">
<div>more content 1</div>
<div>more content 2</div>
<div>more content 3</div>
<div>more content 4</div>
<div>more content 5</div>
<div>more content 6</div>
<div>more content 7</div>
<div>more content 8</div>
<div>more content 9</div>
<div>more content 8</div>
<div>more content 7</div>
<div>more content 6</div>
<div>more content 5</div>
<div>more content 4</div>
<div>more content 3</div>
<div>more content 2</div>
<div>more content 1</div>
</div>
</div>
css:
div#outside {
width: 120px;
height: 100px;
overflow: hidden;
}
div#inside {
width: 135px;
height: 100px;
overflow-y: auto;
}
Check out this fiddle -> http://jsfiddle.net/5bkz5/1/ <- and scroll down over the text!
div.scrollTop = div.scrollHeight;
but you do not need overflow: hidden.
Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');