I am a newbie to jQuery and need to change the class of the parent div.
When the user clicks on "Toggle Class" button, the class of the parent div changes from "col-md-8" to "col-md-4" and the height attribute of the image changes from "500" to "300". Can anyone suggest me a solution to this problem.
My html code is
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Image</strong>
<button class="btn btn-default" style="float:right;">Toggle Class</button>
</div>
<div class="panel-body">
<img class="img-responsive" height="500" src="http://lorempixel.com/750/500/" />
</div>
</div>
</div>
You've added the class='img-responsive' inside your image element. This is a Bootstrap class which converts your image into a responsive one.
It means that will resize itself as you resize its parent div.
Bootstrap responsive images: http://v4-alpha.getbootstrap.com/content/images/#responsive-images
To change the parent div, add an id='parent' to the div and an id='toggle' for your button. Also, in your button, instead of style='float:right' you can add a class called pull-right. It's the same thing.
<div class="col-md-8" id='parent' >
<div class="panel panel-default">
<div class="panel-heading">
<strong>Image</strong>
<button class="btn btn-default pull-right"
id='toggle'>Toggle Class</button>
</div>
<div class="panel-body" style=''>
<img class="img-responsive" height='500'
src="http://lorempixel.com/750/500/" />
</div>
</div>
</div>
Jquery
$(document).ready(function(){
$('#toggle').on('click',function(){
$('#parent').toggleClass('col-md-4');
});
});
Cheers! :)
Here you go, the code you need is:
var $div = $('#div');
var $img = $('#img');
$('button').on('click', function() {
if ($div.hasClass('col-md-8')) {
$div.removeClass('col-md-8');
$div.addClass('col-md-4');
$img.attr('height', 300);
} else {
$div.removeClass('col-md-4');
$div.addClass('col-md-8');
$img.attr('height', 500);
}
});
Add div ID to your div, and img ID to your image (or target them by the class or tag name).
Related
I have multiple(it can be 100+) collapsible div (using bootstrap)
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id1" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id2" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
And have Jquery
$('#id1').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('#id1').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
I want to add hidden class on show.bs.collapse(this is from bootstrap) and remove hidden class on hidden.bs.collapse'With the jq code above I can do this just with one div that has id1. But how can I do this independently?
Try not to subscribe on the elements by ids but by element type
$('a').on('show.bs.collapse', function () {
$(this).next().find("div.image")[0].addClass('hidden');
});
$('a').on('hidden.bs.collapse', function () {
$(this).next().find("div.image")[0].removeClass('hidden');
});
Where
$(this)
should return a pointer to the collapsed/uncollapsed element
next()
should move pointer to the next element ( div id="id1" as example)
find("div.image")[0]
will find div with class "image" and take the first found element
then you can hide the image in this block or show it without using ids
If you're using
$(".image").addClass('hidden');
this will hide all the images in all blocks (not only in that one that has been collapsed)
Id refers to one element on the DOM therefore you should use classes instead. Therefore you should select divs based on their classes.
The following is a possible solution:
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
Jquery:
$('.some-class').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('.some-class').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
I want to call click function using JQUERY on the div containing text "Save as JPEG" . The div with ID= "graph1" is static and all other nested divs are dynamic. The dynamic div containing text has no class or ID.
<div id="graph1" class="col-sm-12" style="height: 250px">
<div class="contianer">
<div class="convascharttoolbar">
<div>
<div>save jpeg</div>
<div>save png</div>
</div>
</div>
</div>
</div>
Use :contains(TEXT) selector => Select all elements that contain the specified text.
$("div:contains('save jpeg')").on("click",function(){
console.log(this.textContent);
});
Working Demo
$(document).ready(function() {
$("#graph1").on('click','div', function() {
if($(this).text() == "save as jpeg"){
alert('Div clicked')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph1" class="col-sm-12" style="height: 250px">
<div class="contianer">
<div class="convascharttoolbar">
<div>
<div>save as jpeg</div>
<div>save png</div>
</div>
</div>
</div>
</div>
I am new and start to learn writing html. In my code, the situation would be that when I click to a button, I used $(event.currentTarget).parents('.page-container') to get the whole html element of my currentTarget and then I have all elements like below:
<div class="page-container">
<div id="mainContainer" class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div id="accordionSummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
<div class="mainTenant">
<div class="subTenant">
<h5 data-toggle="collapse" data-parent="#accordionSummaryList" href="#toggleAbleListGroup1">Admins</h5>
<div class="container-fluid panel-collapse collapse in" id="toggleAbleListGroup1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to do is I would like to find all of the div element which have the class = "collapse in" and I want to remove the class "in" to hide the content inside of this div box.
How can I do that?
in vanilla-JS
[].forEach.call(document.querySelectorAll('.subTenant .collapse.in'), function(el){
el.classList.remove('in');
}
or with jQuery (if already included)
$('.subTenant .collapse.in').removeClass('in');
If you want to do it with jquery: $(".collapse.in").removeClass("in")
you can do it with jquery
jQuery('.collapse').removeClass('in');
You can also do it with this
if($(event.currentTarget).parents('.page-container').find('.collapse'))
{
$('.collapse').removeClass('in');
}
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I am trying create drop zones programmatically, but it doesn't work.
HTML Code:
<div class="content-wrap">
<div class="row">
<script type="text/javascript">
$(function() {
$("div#myDropZone").dropzone({
url : "/file-upload"
});
});
</script>
<div class="col-sm-12">
<div class="nest" id="DropZoneClose">
<div class="title-alt">
<h6>DropZone</h6>
</div>
<div class="body-nest" id="DropZone">
<div id="myDropZone" >
</div>
<button style="margin-top: 10px;" class="btn btn-info"
id="submit-all">Submit all files</button>
</div>
</div>
</div>
</div>
</div>
The drop zone in <div id="myDropZone"> not appers!
best regards :)
You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.
Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.
Add class dropzone to the div element which holds your drop zone.
Hope that you have added the dropzone stylesheet to your page.