On my website, I created a string replace method, but when I checked the page on my android phone web browser and I saw that doesn't working.
Here is the example:
/*Normally it's working with page onload*/
function changeclr() {
var body = document.getElementById('body').innerHTML;
var all = body.replace(/</g, '<code><').replace(/>/g, '></code>').replace(/</g, '<span style="color:blue;"><</span>').replace(/>/g, '<span style="color:blue;">></span>');
document.getElementById('body').innerHTML = all;
}
code {
color: brown;
}
<div id="body">
<p>Here is an example <li>text</li></p>
<button type="button" onclick="changeclr()">Try</button>
</div>
Do you know why is not working on mobile web browser?
Maybe javascript of your browser is disabled or not supported!
Related
I want to convert HTML to PDF with the click of a button and download.
My js working perfectly only need the latest JavaScript CDN link.
HTML
<div id="pageprint">
<div id="reportbox">Hello World!!</div>
</div>
<button type="button" onclick="downloadCode();">Download HTML</button>
Javascript
<script>
function generatePDF() {
const element = document.getElementById("pageprint");
document.getElementById("reportbox").style.display = "block";
document.getElementById("reportbox").style.marginTop = "0px";
document.getElementById("pageprint").style.border = "1px solid black";
html2pdf().from(element).save('download.pdf');
}
function downloadCode(){
var x = document.getElementById("reportbox");
generatePDF();
setTimeout(function() { window.location=window.location;},3000);}
</script>
If all you need is the CDN then simply add it after the </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
function generatePDF() {
const element = document.getElementById("pageprint");
document.getElementById("reportbox").style.display = "block";
document.getElementById("reportbox").style.marginTop = "0px";
document.getElementById("pageprint").style.border = "1px solid black";
html2pdf().from(element).save('download.pdf');
}
function downloadCode(){
var x = document.getElementById("reportbox");
generatePDF();
setTimeout(function() { window.location=window.location;},3000);}
<div id="pageprint">
<div id="reportbox">Hello World!!</div>
</div>
<button type="button" onclick="downloadCode();">Download HTML</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
However seems a very odd way to ask a user to download a pdf page since the option disappears after the download is attempted, so change of mind does not keep it user visible to try differently on fail.
So for example, I say open the download on current page, I see
but if I say open in PDF Viewer I see
It's much simpler to layout the printable HTML page as text not image, and suggest the user prints or saves exactly as their browser is configured and their desire, best result for all, especially as no libraries are needed.
Nor will the page be cluttered by buttons.
You can print html just as follow.
<style type="text/css">
#media print{ button {display:none} };
</style>
<div id="pageprint">
<div id="reportbox">Hello World!!</div>
</div>
<button type="button" onclick=javascript:window.print()>Download HTML</button>
Please let me know if any issue found
There isn't an easy way to do this. The best thing you could do is to open an empty page, fill it with your html data and print it to pdf. Or look for some external libary like jsPDF.
example for print to pdf:
var wnd = window.open('about:blank', '', '_blank');
wnd.document.write("<p> Some HTML-Content </p> ");
wnd.print();
Target Environment: Wordpress VIP
header.php
goal: click icon div to open third party chat, toggle to close if needed, chat icon to persist acrross all pages.
Hi All
I've been tasked with integrating a 3rd Party Chat app in our site. I want it to perform like a traditional chat in-page chat app (in a div) , however, the shared script uses js the window.open method and open the chat into a separate window. I've tried unsuccefully to use , tags.
Suspect this shouldnt be to hard but I can't figure it out. I hope I have enough information here.
Thanks in advance!
The code I am replacing is straight forward yet opens into a new window but I need the window to look like a modern chat
script type="text/javascript "
const chatFunc = () => {
var x = screen.width - 550;
var y = screen.height - 800;
var params = 'height=550,width=375,popup=yes,left='+x+',top='+y;
var Url = 'thridpartychat link';
**window.open(Url, '', params);** // this seems to be the issue
}
script
<div id="test" class="chat" onClick="chatFunc()" data-toggle="tooltip" data-placement="top" title="Chat" style=""> </div>
My attempt:
<div id="test" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style="">
<iframe id="chatIframe" class="embed-responsive-item" style="border:none" seamless>
</iframe>
</div>
var x = screen.width - 550;
var y = screen.height - 800;
var params = "height=550,width=375,popup=yes,left=" + x + ",top=" + y;
var Url =
"[link to third Party Chat]";
var test = document.getElementById('test');
test.addEventListener("click", function() {
// Get Iframe - I had exception catch here -didnt work
var iframe = document.getElementById('chatIframe');
// Assign Attr-Used Object.assign at one point to no avail
iframe.setAttribute('left', '+' + x + '+');
iframe.setAttribute('top', '+' + y, );
iframe.setAttribute('height', '550');
iframe.setAttribute('weight', '375');
iframe.setAttribute('src', 'Url');
this.parentNode.appendChild(iframe);
this.parentNode.removeChild(this);
});
Here is how I want the chat to look :
No idea why you are over complicating this. is there a specific reason you want to load the iframe after? if not using css to style it and just toggling it to be visible is the best solution.
HTML
<body>
<header>
<button id="js-chat-toggle" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style="">
Chat now!
</button>
</header>
<div class="chat-container" id="js-chat-container">
<iframe id="chat-iframe" class="embed-responsive-item" seamless src="https://google.com">
</div>
</iframe>
</body>
CSS
.chat-container {
display: none;
position: absolute;
bottom: 10px;
right: 10px;
max-width: 320px;
overflow:hidden;
}
.chat-container.open {
display: block;
}
.chat-container iframe {
width: 100%;
border: none;
overflow:hidden;
}
JavaScript
const chatToggle = document.getElementById('js-chat-toggle');
const chatContainer = document.getElementById('js-chat-container')
chatToggle.addEventListener('click', function() {
chatContainer.classList.toggle('open')
})
I am doing the freeCodeCamp Local Weather App Zipline Challenge, and got to the part where I have extracted my location using an IP-Location API, and am supposed to use the location with the Open Weather API to get information about the local weather.
I've done this successfully and opening the JSON links in a new tab in my Browser(Chrome) displays the JSON with all the objects/arrays/info I need/etc.
However, were I to try and log this info to the console or change an html element's contents with specific information from the callback info, I get nothing. Not even any errors.
I did some research and tried to use http instead of https on my codepen, but that didn't solve the problem. I also tried going through some Youtube tutorials, but nobody else encountered the issue.
I have included code snippets with all of my code from the codepen(NOTE: I removed the api key for the local weather app)
Here are some useful links:
1. The challenge info itself: https://www.freecodecamp.com/challenges/show-the-local-weather
2.The IP API I used to get my location: http://ip-api.com/
3.The Open Weather API: https://openweathermap.org/current#geo
EDIT: To make my question more clear: Why does the info I get from the API not display in the HTML elements specified in the jQuery function?
$(document).ready( function() {
var city;
var countryCode;
$.getJSON("http://ip-api.com/json",function(data2){
city = data2.city;
countryCode = data2.countryCode;
var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE";
$.getJSON(api, function(data3){
$("cityName").html(data3.city);
$("temperature").html(data3.temp);
$("weather").html(data3.weather[0].description);
});
});
});
body{
color:#FFF;
background-color: #f4495d;
}
.mainContainer{
margin:7% auto;
background-color: #ce2336;
width:50%;
}
h2{
text-align:center;
font-size: 180%;
}
p{
text-align:center;
font-size: 150%;
}
<div class="mainContainer">
<h2>The Local Weather APP</h2>
<div class="coordinates">
<p id="data">something something</p>
</div>
<div class="one-Third">
<p id="cityName">YourCity</p>
</div>
<div class="one-Third">
<p id="temperature">TheTemperature</p>
</div>
<div class="one-Third">
<p id="weather">TheWeather</p>
</div>
<img src="#">
</div>
okay based on the comment, you need to fill the html that you are creating, to do this, you have to put "#" character in order to fill a specific element, so your code should be
$(document).ready( function() {
var city;
var countryCode;
$.getJSON("http://ip-api.com/json",function(data2){
city = data2.city;
countryCode = data2.countryCode;
var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE";
$.getJSON(api, function(data3){
$("#cityName").text(data3.city);
$("#temperature").text(data3.temp);
$("#weather").text(data3.weather[0].description);
});
});
});
Following is the javascript code
var text;
var name;
window.onload = init;
function init() {
var button = document.getElementById("submitButton");
text = document.getElementById("nameTextInput");
button.onclick = handleButtonClick;
}
function handleButtonClick() {
if (text.value == "") {
alert("oops !! Enter Name");
}
else {
var content = document.getElementById("content");
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
name = document.getElementById("name");
name.innerHTML = text.value + ", I am tracking you at ";
getMyLocation();
}
}
When I click the button, the elements are removed but name div doesn't show anything. It works on IE8 but in chrome, safari and opera it falters.
Following is the HTML :-
<body>
<div class="topMiddle">Locate ME ;-)
</div>
<div id="content" class="content">
<h4 id="h4">Your Name</h4>
<img id ="img" src="rows-hand-.png" alt="arrow image" height="70" width="70" />
<form id="form">
<input type="text" id="nameTextInput" size="40" placeholder="Enter your name dear" class="inputTextClass">
<input type="button" id="submitButton" value="Submit" class="inputButtonClass">
</form>
<div id="name" class="name">
</div>
<div id="user" class="user">
<div id="map_canvas"></div>
</div>
<div id="me" class="me">
</div>
</div>
Following is the CSS :-
.content
{
text-align:center;
margin-top:10px;
}
h4
{
color: #E9E9E9;
}
.inputTextClass
{
width:150px;
}
.inputButtonClass
{
margin-top:20px;
width:80px;
}
.name
{
color:#000;
font-size:16px;
}
EDIT
Here is the online link :- http://rdinvent.com/locateMe.html
This code shouldn't work, because you didn't define variables h4, img and form.
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
Why it does work in IE8, is because IE does by default make global JavaScript variables for each element with an id attribute, with the same name. So h4, img and form are equivalent to the following code in IE.
h4 = document.getElementById('h4')
img = document.getElementById('img')
form = document.getElementById('form')
Just add this, and the code will work in the other browsers as well.
What is happening here is that you're not actually using your own variable named name, but a property of the global object window named name, so it's equivalent to using window.name which is a string and cannot be set to any other type (the browser forces that). So when you're setting it to the div it gets converted to a string and the string does not have a property innerHTML on it so you're setting a new property with that name which does nothing.
You can do two things:
You can rename your global variable name to something that's not in window object already (like name1 or inputName);
You can put all your code inside a function and run that. This would make a new scope and your variables would override and hide the global ones.
(function(){
/* your code goes here */
})();
EDIT:
It's just this name which messes everything up:
name = document.getElementById("name");
Replace this line and the following with:
document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";
And of course, remove the var name; at the beginning.
name is a global property (window.name) and should not be used in the global scope otherwise.
Is your div "name" outside the form.
Enable javascript in the browsers...
Check this link for reference
Adjusting images, JavasScript, and other web content settings
Not all browsers support setting innerHTML or innerText directly. What you can do is create a text-element and append as a child.
I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.
One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.
Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>
Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":
<input type="button" value="OK" unselectable="on"
style="width: 80px" onclick="insertContent();">