I use bootstrap and have a simple layout including a button. I tried the code solution from here but it is not working. This is my code, it is not even showing 'test' after clicking the search button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('#output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using document.getElementByid(), you dont need the # before the id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
// I removed the event search code because I do not have the files and it was breaking the example.
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
First of all, don't use the "#" sign when using document.getElementById. Secondly, you need to add the "require" reference.
Check the console message:
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
Related
function takeshot() {
let div = document.getElementById('result');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css#master/dist/aqua.min.css">
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<script type="module"
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="subj.css"> -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
rel="stylesheet">
<title>Constructor</title>
</head>
<body>
<div class="parent">
<div id="result">
<img src="https://picsum.photos/500/500" alt="" />
en inch piti tpvi
<h3>Heading </h3>
</div>
<form class="login-form" action="javascript:void(0);">
<button onclick="takeshot()">
Take Screenshot
</button>
</form>
</div>
<div id="output"></div>
<!-- <button onclick="delete1()">Delete</button> -->
<script src="script.js"></script>
</body>
</html>
In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all
Why it is not working?
Capturing everything except img tags, and not only I am using tag they are not getting captured neither...
try setting useCORS to true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
I am currently working o a quote APP, Jquery getJson to inflate the elementes. I'm having trouble integrating twitter's share button into my code. For some reason I cannot get it to pick up the text values from the API source when I use the attr function to change the tweet URL data-text value.When I click the tweet button all I got is a new tweet window with the hardcoded text. My intention is to set the quote + author in the text field. Any ideas to make it work? I did a lot of research and experimentation with the tweet event binds but no success
My HTML code:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->
</head>
<body>
<div id="btn-container" class="container">
<p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
</div>
<div id="quote-container" class="container">
<blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
</blockquote>
<footer id="author">Bill Bernback</footer>
</div>
<div id="share-container" class="container">
Tweet it
</div>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
My JS code:
<pre><code>var quote;
var author
$(document).ready(function(){
$(".btn").click(function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
quote = getQuote[0].content;
author = getQuote[0].title;
$("#quote").html(quote);
$("#author").text(author);
$('.twitter-share-button').attr('data-text',author); // not working
});});});
I have this code:
HTML:
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
JAVASCRIPT:
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p1').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p1').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
The two buttons are meant to change the language of the page but I they are not working. Why? What did I do wrong?
My javascript code:
$(document).ready(function () {
//var cow = 'Check out this image <img src="http://image.com" style="border:2px solid #ccc;" /> and one with a width <img src="http://image.com" width="700" align="left" />';
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
});
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>One Page Wonder - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- my js -->
<script src="js/test.js"></script>
</body>
</html>
This works. Make sure you are including jQuery and your js file after jQuery.
I've been searching high and low for something like this, but for some reason I'm having trouble making it work. I'm not sure what I'm missing or doing wrong.
References found here:
http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html
Selecting text in an element (akin to highlighting with your mouse)
If someone could possibly spare some time would be much appreciated thanks.
I'm setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to a demo which was found here.
(function() {
function selectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
preTags = document.getElementsByTagName('pre');
for(var i=0;i<preTags.length;i++) {
preTags[i].onclick = function() {selectText(this)};
}
})();
Here is a demo code I've set up.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="js/select2.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-top: 20px;"></div>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active">Demo 1</li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
Maybe, you could use window.getSelection() to get the global Selection objects, and then modify it? Example from developer.mozilla.org:
var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();
if(s.rangeCount > 0) s.removeAllRanges();
for(var i = 0; i < strongs.length; i++) {
var range = document.createRange();
range.selectNode(strongs[i]);
s.addRange(range);
}
Thanks guys, I really appreciate your help. I did some research on your responses, and had gotten a reply from the author of the script. I was pulling my hair out and kind of wanted to throw the puter out the window :P
Anyways, the author Satya stated that the select.js script needs to be at the END of the document rather in the header. It works great too!
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active">Demo 1</li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="js/select2.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
I am developing a dynamic slideshow using MAXIMAGE Jquery. When Iam trying to append the img tag element to my HTML page it will not work. I am also outputting an alert with the image URL from the server and it gets picked up. Below is my code. I am pretty sure that something is conflicting with maximage.min.js. Note that If I change the maximage id to something else then the image will appear!
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Le Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Viessmann Slideshow</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Le CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="slideshow/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="slideshow/css/style.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le Javascript
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Le Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="slideshow/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="slideshow/images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Le Slider -->
<div id="maximage">
<img id="show" />
</div>
<script type="text/javascript" charset="utf-8">
var urlstring = "http://localhost:8000";
$(function() {
var logourl = urlstring + "/api/v1/image/?format=json";
$.ajax({
type: "GET",
url: logourl,
dataType: "json",
success:function(data){
alert(urlstring + data.objects[5].image);
$("#show").attr("src", urlstring + data.objects[2].image);
}
});
});
</script>
<!-- Le Javascript -->
<script src="slideshow/js/jquery.cycle.all.js" charset="utf-8"></script>
<script src="slideshow/js/jquery.maximage.min.js" charset="utf-8"></script>
<script src="slideshow/js/scripts.js" charset="utf-8"></script>
</body>
</html>
I found what the Mistake was. I had to call MAXIMAGE after the HTML elements have been added:
var urlstring = "http://localhost:8000";
$( document ).ready(function() {
var logourl = urlstring + "/api/v1/image/";
$.ajax(logourl,{
dataType: "json"
})
.done(function( data ) {
$.each(data.objects, function(i, obj){
var tag = $("<img>");
tag.attr("src", urlstring + obj.image);
tag.appendTo("#maximage");
});
jQuery('#maximage').maximage();
});
});