First of all I will explain how website functions. First of all user clicks on a template and that is pulled from a database into a div. I than have a button and if that button is clicked a div from that pulled template should change a color. I will now further explain that with a code:
Template pulled:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is:
#extends('layouts.master')
#section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#section('content')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
#endsection
#show
So once template is clicked it is inserted inside div id="content-link2"
Jquery:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens.
Can someone post some suggestions or solutions?
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript,
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
try this
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
You can use :
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
Related
I want to use this script on angular project but is not working how it should, it ignores every $ line and I got just the window alert.
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
window.alert('test') ;
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
});
</script>
and the html code
<div class="genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="" alt="Member">
<div class="member-details">
John
</div>
</div>
</div>
</a>
.....
I am able to download content of HTML page but page contain image of QR code, which is not visible in my downloaded image instead of that I am getting blank space
My HTML and jQuery code is in the following fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="content">
<form method="post" id="qrForm">
<center>
<h4 style="color:red">Generate QR Code using Google Chart API</h4>
<br>
<b>Type Website URL:</b>
<!--Create TextBox Code-->
<input type="text" id="QRCode" value="https://www.google.com" size="25">
<br><br>
<h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />
<img id="embedImage" />
<img id="embedImage" />
<!--<!--<!-- Create Button Code-->
<center>
<input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
</center>
</center>
<center>
<a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
<br />
<!--Print Preview Img In this Div-->
<h3>Preview :</h3>
<div id="previewImage">
</div>
</center>
</form>
</div>
</div>
<script>
//Generate QR Code Function
function generateQRCode() {
this.qrImage.style.display = 'none';
//GoogleAPI + TextBox Value= Create QR Image.
this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display = 'inline';
//Convert Html To Png
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
$("#QRCanvas").append(canvas);
getCanvas = canvas;
}
});
//jQuery: Download HTML to IMAGE
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
$("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
//<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
});
}
</script>
I found your html a bit complicated so I changed it to fit with my style. I did not use html2canvas, I was doing some annoying stuff for some reason, so I used another library that does the same thing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Download QR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
</head>
<body>
<div style="background-color:lightgrey; padding: 25px;">
<h3>Generate QR Code using Google Chart API</h3>
<form>
<label for="QRCode">Type url:</label>
<input type="text" id="QRCode" value="https://www.google.com">
<button type="button" id="btn-generateQR">Generate QR</button>
</form>
<div id="displayImg"> </div>
<button id="btn-downloadQR" style="display:none;">Download QR</button>
</div>
<script>
$(document).ready(function () {
$('#btn-generateQR').click(function () {
let inputValue = $('#QRCode').val().trim()
$('#displayImg').html(
`
<h4>Output QR Image:</h4>
<img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
`
)
$('#btn-downloadQR').show()
})
$('#btn-downloadQR').click(function () {
domtoimage
.toJpeg(document.getElementById('linkQR'), {
quality: 0.95
})
.then(function (dataUrl) {
let link = document.createElement('a')
link.download = 'imageQR.jpeg'
link.href = dataUrl
link.click()
})
})
})
</script>
</body>
</html>
TRY THIS
$('#btn-generateQR').click(function () {
html2canvas(document.getElementById('displayImg'), {
onrendered: function(canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data,
width: 500,
height:400,
}],
pageMargins: [ 50, 20, 20, 10 ]
};
pdfMake.createPdf(docDefinition).download("budget.pdf");
},
logging: true,
useCORS:true,
});
});
I try to put background-color in paragraph through jquery before this i create div and there is two buttons show and hide when click on show div displayed and when click on hide div is hide .. so after this when i try this background-color not visible
check this code
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
$document.ready(function () {
$("p").css("background-color", "red");
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
any solution?
Replace your script like this,
$(document).ready(function () {
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
$("p").css("background-color", "red");
});
And remove this part
$document.ready(function () {
$("p").css("background-color", "red");
});
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").css("background-color", "red");
$("#btnhide").click(function () {
$("#dvmain").hide("slow");
});
$("#btnshow").click(function () {
$("#dvmain").show("slow");
});
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="show" />
<input type="button" id="btnhide" value="hide" />
<div id="dvmain" style="width:100%;height:400px;background-color:red;">
</div>
<p>this is paragraph one</p>
<p>this is paragraph two</p>
<p>this is paragraph three</p>
</body>
I am using the plugin ScriptCam to basicly take a picture with the webcam. I want to save the img once the user clicks "snapshot to image". It can download via the web browser thats okay for now, the end goal is have the img download to a particular destination folder, i would like this to work without using any php.
My Code:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("#webcam").scriptcam({
showMicrophoneErrors:false,
onError:onError,
cornerRadius:20,
cornerColor:'e3e5e2',
onWebcamReady:onWebcamReady,
uploadImage:'upload.gif',
onPictureAsBase64:base64_tofield_and_image
});
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
};
function base64_toimage() {
$('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image').attr("src","data:image/png;base64,"+b64);
};
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function onError(errorId,errorMsg) {
$( "#btn1" ).attr( "disabled", true );
$( "#btn2" ).attr( "disabled", true );
alert(errorMsg);
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
$.each(cameraNames, function(index, text) {
$('#cameraNames').append( $('<option></option>').val(index).html(text) )
});
$('#cameraNames').val(camera);
}
</script>
</head>
<body>
<div style="width:330px;float:left;">
<div id="webcam">
</div>
<div style="margin:5px;">
<img src="webcamlogo.png" style="vertical-align:text-top"/>
<select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
</select>
</div>
</div>
<div style="width:135px;float:left;">
<p><button class="btn btn-small" id="btn2" onclick="base64_toimage()">Snapshot to image</button></p>
</div>
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
<a href="#" class="downloadAsImage hide" download>Download</a>
<script type="text/javascript">
$(function() {
html2canvas($('.main'), {
onrendered: function(canvas) {
$('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide');
}
});
});
</script>
</body>
</html>
I am really having a hard time with this. the script at the bottom will save the whole page and when it does this the img isn't even saved to the page. I just want to save the img only that goes into the
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
here, I have code that enables dragging and dropping of accordian.
But what I want is when User clicks on edit, then content in accordian should be editable.
I have tried the answers from following link How to make an element's content editable with JavaScript (or jQuery). But not getting the result i want.
The script is:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$('#accordion').accordion({
collapsible: true,
active: false,
height: 'fill',
header: 'h3'
}).sortable({
items: '.s_panel'
});
$('#accordion').on('accordionactivate', function (event, ui) {
if (ui.newPanel.length) {
$('#accordion').sortable('disable');
} else {
$('#accordion').sortable('enable');
}
});
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
});
</script>
<script>
$('#btn1').click(function () {
$('#content1').attr('contenteditable', 'true');
});
</script>
</head>
The HTML is:
<body>
<br /><br />
<div id="source" style="width:345px;float:left; border:1px dotted ">
<div id="accordion" style="height:450px;width:300px; " class="sortable">
<div class="s_panel">
<h3 class="ui-state-default unassigned">About Us</h3>
<div id="data">
<div id="content1">This is about Us</div>
<form>
<input id="bt1" type="button" value="edit"/>
</form>
</div>
</div>
</div>
</div>
<div id="teams" style=" position:absolute; top: 100px; left:400px; width:600px;" >
<ul class="sortable" style="height:450px;width:550px; "></ul>
</div>
</body>
Working FIDDLE
$('#btn').click(function () {
$('#content1').attr('contenteditable', 'true');
});
<input id="btn" type="button" value="edit" />
New Edited :-
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
FIDDLE 2