I have a problem,and I don`t understand.. absolute..
So I tried to use html2canvas.js. I want to render html to img. The content is in modal. Till here no any problems.
When I try to render that area what I want the toDataUrl() is empty.
But when I try to render a simple button,its working!
Both of is in a Modal. My code:
<div class="modal-body ">
<div class="print" id="printDiv">
<div class="rows nopm">
<div class="full">
<div class="head">
Make & Model
</div>
<div class="data">
{{$data['make']}} {{$data['model']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/age.png')}}"> Age
</div>
<div class="data">
{{Carbon\Carbon::parse($data['age'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/enginesize.png')}}"> Engine Size
</div>
<div class="data">
{{$data['eng_size']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/vrt.png')}}"> VRT
</div>
<div class="data">
{{Carbon\Carbon::parse($data['vrt_date'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/power.png')}}"> Power
</div>
<div class="data">
{{$data['eng_hp']}}PS ({{$data['eng_kw']}}KW)
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/roadlicence.png')}}" > Road tax
</div>
<div class="data">
{{$data['vrt_price']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/fuel.png')}}" > Fuel
</div>
<div class="data">
{{$data['fuel']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/mileage.png')}}" > Mileage
</div>
<div class="data">
{{$data['mileage']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/transmission.png')}}"> Transmission
</div>
<div class="data">
{{$data['trans']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="quatrohead">
Extras
</div>
<div class="quatro">
#foreach($data_extra as $extra)
#if ($loop->last)
{{$extra}}
#else
{{$extra}},
#endif
#endforeach
</div>
<div class="quatrohead">
Price
</div>
<div class="quatroless">
€{{$data['price']}}
</div>
</div>
</div>
</div>
<div id="targetCanvas">
<img class="imageCanvas" src="">
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-default" id="print">Print</button>
</div>
</div>
</div>
</div>
<script>
$('#printModal').on('shown.bs.modal', function (e) {
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
})
Place your script in
$(window).load(function (){
//Your script here
})
Or you could try with
setTimeout(function (){
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
},1000)
Related
I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});
you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node
I have two form fields.if clicked the text from <div class="offer-text"> RS.750/- </div> the RS.750/- could be appear in the button. since I am new to bootstrap. Can anyone help me to do this?
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block"/>SEND</button>
</div>
</form>
</div>
<div class="col-sm-3"></div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
To send the value to the form button use the following code:
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
demo
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
$("img").click(function() {
$("form button[type=submit]").text($(this).attr("value"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block" />SEND</button>
</div>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"> </div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
<img src="img/Sar Utha Kay Jeo.png" alt="IMG" style="width:100%" value="RS.1750/-" class="hover-shadow cursor">
I am currently working on laravel 5.2.I am trying to make a comment section for each post.Here's my blade view,
`
<div class="row">
<section class="col-md-12">
#foreach($storages as $storage)
#if($storage->post_id==$post->id)
<div id="jumbo3" class="jumbotron">
<div class="row" id="rlr">
<section class="col-md-offset-1 col-md-2">
<img id="imagesize8" class="img-circle" src="/src/uploads/avatars/{{$storage->user->avatar}}"/>
</section>
<section class="col-md-3">
<a id="user10" href=""><h5 id="h52">{{$storage->user->getNameOrUsername() }}</h5></a>
</section>
<section class="col-md-offset-3 col-md-3">
<span id="rmvsgn1" class="glyphicon glyphicon-remove-sign"></span>
</section>
</div>
#if($storage->comment==0)
<div class="row">
{{ $storage->textcomment}}
</div>
#endif
#if($storage->textcomment==0)
<div class="row">
<img src="{{$storage->comment}}"/>
</div>
#endif
#endif
#endforeach
</section>
</div>
<button class="see-more">See Comments</button>
</div>
</div>
#endif
#endforeach
I am trying to display the comments by clicking on the comment section,here's my jquery,
<script>
$(document).ready(function () {
$('.jumbotron').hide('.jumbotron');
$('.see-more').click(function () {
$('.jumbotron').toggle('.jumbotron');
});
});
</script>
but every time I am trying to get it for one section,it opens up for all posts.
$(document).ready(function() {
$(".see-more").click(function(){
$(this).prev( ".content" ).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="article">
<div class="content">
Content 1
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 2
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 3
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 4
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 5
</div>
<button class="see-more">
See more
</button>
</div>
<div class="article">
<div class="content">
Content 6
</div>
<button class="see-more">
See more
</button>
</div>
</body>
</html>
I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?
My Code:
html:
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
javaScript Code :
function newPerson() {
document.getElementByClassName("item")
};
Try it :
$(document).ready(function(){
$("button.plus").on("click",function(){
$("div:last").after("<div class=item><p>Title</p></div>");
})
})
This is Demo : UpdatedDemo
Do it like this
<div id = "main">
//your same html code
</div>
<script>
function newPerson() {
var newdiv = document.createElement('div');
newdiv.className+='item';
var newp = document.createElement('p');
newp.innerHTML = "TItle";
newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
</script>
You need to create the element through JS and append it to the document
This is another way to solve it:
function newPerson() {
$('#wrapper').append('<div class="item"><p>Title</p></div>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
</div>
html want to show items based on the location in .offer_miliage
<div class="offer_list clearfix">
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_01.jpg" alt=""/>
</div>
<div class="offer_aside">
<h2>Project 1</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_02.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 2</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_03.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 3</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_04.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 4</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_05.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 5</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_06.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 6</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">44.300</div> <span class="offer_miliage">fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_07.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 7</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_08.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 8</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
</div>
<div class="widget-container widget_adv_filter">
<h3 class="widget-title">ADJUST SEARCH RESULTS</h3>
<form action="#" method="get" class="side_form">
<div class="row field_select" style="z-index:8">
<label class="label_title">Location:</label>
<select class="select_styled white_select" name="car_year" id='select'>
<option value="1">Pallavaram</option>
<option value="2">T Nagar</option>
<option value="3">Nungambakkam</option>
<option value="4">Choolaimedu</option>
<option value="5">Fort</option>
</select>
</div>
<div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>
</div>
how to show items which are having same location when click in searched button. I have started java script but couldn't advance.
here is java script
<script type="text/javascript">
function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
}
};
</script>
friend can u please tell me whats wrong with this script
function go_button(){
if(document.getElementById('select').value==1){
$(function() {
$(".offer_item").search(function(a) {
// Find the location name from element
var priceAText = $(a).find(".offer_miliage").text();
// Return the result
if(priceAText=="Pallavaram"){return true;}
}).each(function() {
// Add all the elements back into the parent, in order
$(this).appendTo(".offer_list");
});
});
}
};
Your working example with jQuery: http://jsfiddle.net/9VQRt/ (highlight found data with red background).
$('body').on('click', '.search_button', function() {
var offerCollection = $('.offer_miliage');
$.each(offerCollection, function(ind, val) {
if($("#select option:selected").text() == val.innerHTML) {
$(this).addClass('red_bg');
}
});
});