I'm currently trying to hide a button using LESS. My HTML looks the following way:
<div class="targets">
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
</div>
The problem: I use jQuery to add a "target" div to "targets" div, the html looks like this after the DOM manipulation:
<div class="targets">
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
<div class="target">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-delete" />
</div>
</div>
</div>
</div>
I always want to hide the first button with the class btn-delete. I use LESS.
My current LESS looks like this:
.targets {
button[type="button"] {
.btn-delete {
visibility: hidden;
}
}
}
Unfortunately my LESS coding doesn't work as I expected.
Do you know how to solve this issue, thus to always hide the first .btn-delete button with LESS Css?
Thanks! :)
As you are targeting the button with btn-delete class, You need & operator
.targets {
button[type="button"] {
&.btn-delete {
visibility: hidden;
}
}
}
OR, Traditional way
.targets {
button[type="button"].btn-delete {
visibility: hidden;
}
}
Hello use below code it work properly
.targets{
.target:first-child{
button[type="button"] {
&.btn-delete{
visibility: hidden;
}
}
}
}
Its applying the visibility to a element with a class inside the button so
.targets {
button[type="button"].btn-delete {
visibility: hidden;
}
}
Would look for button[type="button"] with the class .btn-delete.
Related
I know this might be a repeat question but I still need help. I am creating a website that when a button is clicked on, the text will appear. I have it hidden in a div using display: none on a class. When I'm testing the site ill click the button and nothing happens. There are no errors on the console so I'm assuming its an issue with Jquery not being installed correctly (I did use the npm install jquery).
$(function(){
$(".button").click(function(){
$(".projectTextInfo").toggleClass(".show");
});
});
.projectTextInfo {
position: relative;
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
<div class = "mr-4 mb-5 monxProject col-md-6 col-sm-6">
<div class = "caption">
<h4 class="project-text"> Ludem Dare </h4>
</div>
<div class = "thumbnail">
<img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
<button class="button">Test</button>
<div class="projectTextInfo">
<p>Howdy</p>
</div>
</div>
</div>
toggleClass(".show") is wrong , it is toggleClass("show"). Try it:
$(function(){
$(".button").click(function(){
$(".projectTextInfo").toggleClass("show");
});
});
.projectTextInfo {
position: relative;
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-start">
<div class = "mr-4 mb-5 monxProject col-md-6 col-sm-6">
<div class = "caption">
<h4 class="project-text"> Ludem Dare </h4>
</div>
<div class = "thumbnail">
<img class="projectIcon" src = "http://monxcleyr.net/images/mainsite/LDsmall.png">
<button class="button">Test</button>
<div class="projectTextInfo">
<p>Howdy</p>
</div>
</div>
</div>
I have element sidebar and div with class sticky-top:
<div class="row">
<div class="col-lg-4">
<div class="sticky-top">
....
</div>
</div>
</div>
I need pass a margin, when sidebar is sticky, because class sticky-top doesn't have a margin-top.
How I can write margin when sidebar is sticky?
Try:
.sticky-top { top: 0.5em; }
You need to use top instead of margin-top
<div class="row">
<div class="col-lg-4">
<div class="sticky-top" style="top: 30px">
....
</div>
</div>
</div>
Try to use:
.sticky-top{
margin-top:10px;
}
if it gives you trouble, you can force it with !important, like this:
.sticky-top{
margin-top:10px !important;
}
Please note that !important should be used only when other solutions are not working.
Hope it help!
I'm testing a pagination type where the buttons are on a separate div from the target.
When I try to toggle the next div of the body, all of them are toggling, instead of just one.
$('#next_q').on('click', function(){
$('.question-item').hide().next('.question-item').show();
})
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
use :visible to select the question-item that is currently visible
$('#next_q').on('click', function(){
$('.question-item:visible').hide().next('.question-item').show();
})
also if you want it not to "skip" past the last element, use
if ($('.question-item:visible').prev('.question-item').length)
$('#next_q').on('click', function() {
if ($('.question-item:visible').next('.question-item').length)
$('.question-item:visible').hide().next('.question-item').show();
})
$('#prev_q').on('click', function() {
if ($('.question-item:visible').prev('.question-item').length)
$('.question-item:visible').hide().prev('.question-item').show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
You can use .data() to store an integer reflecting an index of the .question-item elements .length, use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length
$('#next_q')
.data({
"index": 0,
items: $(".question-item")
})
.on("click", function() {
$(this).data().items
.hide()
.eq(++$(this).data().index % $(this).data().items.length)
.show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
Check the current visible .question-item and hide it and then show the next .question-item. I also added the not last-child selector since I thought that you might want to stop at the last question.
$('#next_q').on('click', function(){
$('.question-item:visible:not(:last-child)').hide().next('.question-item').show();
});
$('#prev_q').on('click', function(){
$('.question-item:visible:not(:first-child)').hide().prev('.question-item').show();
});
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .
You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>
If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>
I was insert text to <div> from java script. Looks like <div> tag width and height already setup. So If I insert large paragraph text then <div> is overlapping on to other <div> under below.
$("#formDescription").text($("#Description").val());
html
<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
<div class="panel panel-default">
<div class="panel-body">
---
---
<div class="form-group">
<div class="col-sm-5" style="overflow: auto">
#Html.Label("Description", new { #class = "control-label" })
</div>
<div class="col-sm-7" id="formDescription">
</div>
</div>
If I use less text, it will show like this
JSFiddle
With the bootstrap CSS you are setting the containers of that information with float:left you may need to clear the floats to keep each form in separate lines; use this:
.form-group:after {
content: " ";
display:block;
clear:both;
}
The demo http://jsfiddle.net/Q2FHr/2/
use display: inline-block; and max-height