I want to capture a div element when clicked on it using jquery & HTML2Canvas library in an environment where I have multiple div of that same class name.
This is for a console page on which I want to give user an extra choice to capture the div or not, everyone just don't bother about the event listener here I'm using.
$('.panel.panel-default', this).one("mouseenter", function() {
html2canvas(document.getElementsByClassName("panel panel-default")).then(canvas => {
//document.body.appendChild(canvas);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(image);
window.location.href = image;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel one</a><br><br>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel two</a><br><br>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel three</a><br><br>
</div>
</div>
Actual result should be like when I click on the this is panel one the event will capture that div into the file.
You need to just pass the right context
$('.panel-body').on("click", function () {
html2canvas(this).then(canvas => {
//document.body.appendChild(canvas);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(image);
window.location.href = image;
})
});
Related
I'm trying to create a slider with html- vanilla javascript. I'm able to open a modal, show a wide slider image and small images (thumbnails). Everything looks fine but when I click the thumbnails (which have "small_image" class) they trigger events, change image and add the same images to the thumbnails section again.
I checked the console with console.log(e.target.className) when I clicked any of the thumbnails and it shows "slider" class not "small_image" class.. Why is this happening and how can I fix this ?
Html section
<div id="photos" class="tabcontent">
<div class="tabslider">
<div>
<img src="{{image_path("posts/5-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/6-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/7-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/8-1537128615.jpg")}}" class="slider">
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<!-- wide image -->
<div class="mySlides">
<img class="show_slider" src="">
</div>
<!-- small images -->
<div class="small_images"></div>
</div>
</div>
</div>
</div>
Javascript section
document.querySelector(".tabslider").addEventListener("click", function (e) {
if (e.target.className = "slider") {
let smallImages = document.querySelector(".small_images"),
images = document.querySelectorAll(".slider"),
slider = document.querySelector(".show_slider"),
sliderDiv = document.querySelector(".mySlides"),
model = document.querySelector("#myModal");
model.style.display = "block";
images.forEach(function (image) {
let img = Elementor.create("img", {"src": image.src, "class": "small_image"}),
div = Elementor.create("div", {"class": "columnlightbox"},);
div.appendChild(img);
smallImages.appendChild(div);
});
slider.setAttribute("src", e.target.src);
sliderDiv.style.display = "block";
}
})
e.target.className = "slider"
You are setting the value here, not comparing :D
I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work properly. Sometimes i have to click more than one time and some times the chart inside don't resizes like the div. (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
I could use angularjs too.
Thank you.
Use this:
$(".elementoGrafico").each(function() {
let panel = this;
$(this).find(".resize-button").click(function() {
$(panel).toggleClass("col-md-12");
$(panel).toggleClass("col-md-6");
});
});
What this does is find the resize button for each panel and assign it a click handler which changes the panel itself.
I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
<div class="panel panel-default">
<div class="panel-heading">--Here should say 1--</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">--Here should say 2--</div>
<div class="panel-body">
Panel content
</div>
</div>
the following should put if its the 1'st 2'nd 3'rd... panel in the panel header
$(".panel .panel-heading").append($(this).eq());
Use .html() followed by function like below :
$('.panel-heading').html( function ( i, old ) {
return ( i + 1 );
});
DEMO
Did't fully understand what this statement mean the following should put if its the 1'st 2'nd 3'rd, is it you want to put the content only for panel element 1st, 2nd and 3rd only even exist more than that? If that's the case :
$('.panel-heading').html( function ( i, old ) {
if ( i < 3 ) return ( i + 1 );
});
You need to use jquery each along with the index() function with of the panel heading element within the panel heading list.
Elements indexes start from 0 so you need to add 1 to it to view proper numbering:
$(".panel .panel-heading").each(function(){
$(this).append($(this).index('.panel-heading') + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>
$('.panel .panel-heading').each(function(k,v){ $(v).text(k); });
// or if you want to start from 1:
$('.panel .panel-heading').each(function(k,v){ $(v).text(k + 1); });
So if an accordion div has information/a body, how can I alert this? The information is dynamically loaded, and if the div has information (not all do) - it looks like this:
<div class="panel panel-default">
<div class="panel-heading"></div>
<div id="collapse_1" class="accordion-body collapse"></div>
</div>
...other wise it's
<div class="panel panel-default">
<div class="panel-heading"></div>
</div>
so, if the icon for the div I'm clicking has a child with the class .accordion-body...how can I use jQuery to traverse this? So far my idea was:
$('.accordion-toggle > i').click(function () {
if ($(this).closest('.panel-default').has('div.accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
//$.toggle('open');
alert('expandable section')
} else {
alert('nothing to expand')
}
});
Thanks in advance.
$('.accordion-toggle > i').click(function () {
if ($(this).closest(".panel-default").children("div").hasClass('accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
alert('expandable section')
}else{
alert('nothing to expand')
}
});