Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
What is the most beginner way to put some little changes into an HTML page?
For example, we need to choose between "./textC.js" and "./imgC.js" files, both having function countCows() {} of different algorithms.
I've spent lots of time browsing through "changing script src dynamically" articles, but location.reload() reloads the whole page (or a <div>, I haven't found the pattern yet), some things don't work at all, some answers use complicated high software technologies I have never seen before.
This be the template html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template page</title>
<link id="sizescheme" rel="stylesheet" type="text/css" href="./texty.css" media="screen"/>
</head>
<body class="custombackground">
<div id="commonblock">
<button id="coucow" onclick="countCows()">Count the cows</button>
<div id="countResult"></div>
</div>
<div id="textOnly">
Something that has nothing to do with images
</div>
<script id="counter" src="./textC.js"></script>
</body>
</html>
The caller HTML page has something like this:
<div id="initial-things" >
<button id="txb" onclick="setType("t")"> Text </button><br />
<button id="imb" onclick="setType("i")"> Image </button>
</div>
And could have done this if it were the same page as the template (but scripts do not load dynamically, see the first paragraph):
<script>
function setType(param) {
if (param == "i") {
document.getElementById("sizescheme").href = "./imgy.css";
document.getElementById("counter").href = "./imgC.js";
document.getElementById("textOnly").style.visibility = "collapse";
}
if (param == "t") {
document.getElementById("sizescheme").href = "./texty.css";
document.getElementById("counter").href = "./textC.js";
}
}
</script>
So, how does one create a page from a template?
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 12 months ago.
Improve this question
I want to create an HTML script that does the following:
Copies a URL to the clipboard.
On a black background — Shows a green tick and says "Link Copied to Clipboard" for a couple of seconds in white text.
Closes the current tab where this script is running.
I want all 3 of these actions to happen automatically when the file is opened in the order above. Ideally, I'd like it to take less than 5 seconds. How can I go about doing this? Thanks in advance.
Reason: I'm going to add a "Copy Link" button to my website and this is the only way I can do it. I use Google Sites.
try this code
<!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.0" />
<title>Document</title>
</head>
<body>
<!-- button to trigger the action -->
<button id="button">close window</button>
<h1 id="text">some text</h1>
<script>
// get the button
const button = document.getElementById("button");
//add event listener to the button
button.addEventListener("click", () => {
// get the text
const text = document.getElementById("text");
//copy the text to the clipboard
navigator.clipboard.writeText(text.innerHTML).then(() => {
//add time out to close the window
setTimeout(() => {
window.close();
}, 3000);
// add your toaster here to show the text copied
// hare is some reference https://www.w3schools.com/howto/howto_js_toast_message.asp
text.innerHTML = "Copied to clipboard!";
});
});
</script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a beginner and fairly new to programming (so please keep your answers simple as possible).
I just heard of HTML5 history API, This API lets you update browser address bar with JavaScript, so you can change the contents of the page according to the URL. (Which I have no idea how to do)
I'm currently using XAMPP as localhost, phpmyadmin as database, and using Notepadd++ as a file editor, viewing and testing my website on Google Chrome.
My questions is, how do I use this new HTML5 History API so that my 3 php files, work seamlessly when navigating between pages using purely PHP or javascript at most.
Best example I can give is exactly how soundcloud can play music seamlessly when navigating between pages.
I would like the same result and the same concept on my 'header', 'Vis1' and 'Vis' php files to work seamlessly when navigating between pages(these pages are listed).
Files I want to work seamlessly when navigating:
Directory: i-neo\htdocs\i-neo\inc..
<?php include ( "./inc/header.inc.php" );?>
<?php include("./inc/vis1.inc.php");?>
<?php include("./inc/vis.inc.php");?>
These same 3 files are included all across the following php pages:
Directory: i-neo\htdocs\i-neo\
'home.php, index.php, msmyg.php, prof.php, nudg.php & frireq.php'
Coding below: vis1.inc.php
<!doctype html>
<html>
<head>
<div id="vinfo">
<meta name="description" content="blah">
<title>blah</title>
<link type="text/css" rel="stylesheet" href="style/style.css">
<div id="wrapper">
<div id="fileWrapper" class="file_wrapper">
<div id="info">
</div>
<label for="uploadedFile">
Drag & drop
</label>
<input type="file" id="uploadedFile">
</input>
</div>
</div>
</div>
</head>
</html>
Code for: vis.inc.php
<!doctype html>
<html>
<footer>
<link type="text/css" rel="stylesheet" href="style/style.css">
<div id="v_wrapper">
<canvas id='canvas' width="1950" height="800"><script
type="text/javascript" src="js/hav.js"></script>
</canvas>
</div>
<div id="c2">
<small>random infowebsite name - Owner</small>
</div>
</footer>
</html>
Code for: header.inc.php
<?php
include ("./inc/connect.inc.php");
session_start();
if (isset($_SESSION['user_login'])) {
$user = $_SESSION["user_login"];
}
else {
$user = "";
}
?>
<!doctype html>
<html>
<head>
<title>i-neo</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="ineoMenu">
<div id="ineoWrapper">
<div class="logo">
<img src="./img/i-neo.png" />
</div>
<div class="search_ineo">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="50"
placeholder="Search" .../>
</form>
</div>
</div>
</div>
<?php
if (isset($_SESSION["user_login"]))
{
echo '
<div id="menu">
Home
Prof
Set
Me
Fr
Nudg
Logout
</div>
';
}
else{
echo'<div id="menu">
<a href="index.php"/>S</a>
L
</div>
';
}
?>
<div id="wrapper">
</html>
<footer>
<div id="c1">
<?php echo "Hedi Bej © i-neo 2015"; ?>
</div>
</footer>
Each of your PHP pages render a full webpage, so you're probably better off just using ordinary links between them.
You could remove all the parts that are the same on each, have the homepage render those and then when an internal link is pressed it could download the relevant section from your server and insert it into the page (using the History API to update the URL). You'd also want to have some way of having the server render the appropriate page in full after following a link to it, possibly by using some kind of server side routing.
To me, it doesn't look like you need to use the History API yet, your website will work fine with hyperlinks.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
You know, the 8 small iframes that show your most visited websites. How do they get the snapshots of the websites? How do they decide which websites to use? Just how do they work.
Edit: So that I can do something similar.
Edit 2: Is this not programming? I'm asking how to code an iframe that takes a snapshot of a websites.
By using an internal method that shows the picture (in this particular case; chrome-search://thumb/53/22) ? Did you take a look at the source?
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="thumbnail.css">
<script src="util.js"></script>
<script src="thumbnail.js"></script>
</head>
<body dir="ltr">
<a href="http://www.reddit.com/" ping="/log.html?pos=1" title="reddit: the front page of the internet" target="_top" tabindex="-1" style="color: rgb(119, 119, 119); font-size: 11px; font-family: arial, sans-serif;">
<span class="shadow"></span>
<!-- RIGHT HERE! -->
<img src="chrome-search://thumb/53/22">
</a>
</body>
</html>
Have a look at chrome-search://most-visited/thumbnail.js:
function createThumbnail(src) {...} // creates the thumbnails
you can try to remove the contents of
function showDomainElement() {}
if you don't want to see those in new tab page. I haven't tried this.
These snapshots are generated by internal layout engine. But, you can do it with some classes, like html2image, DOMPDF, etc.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a html page with a button whos onclick calls a javascript function...but I have been getting a function not defined error for two days! Can someone help?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="css/jqm-docs.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.2.1.js"></script>
<script>
function doSomething(){
alert('this is a test');
}
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="content" id = "test" data-theme="c">
$confirm
Cancel
</div>
</div>
</body>
</html>
This might be handy:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
You need to stick your scripts within the page element:
<div data-role="page">
<script>
function doSomething(){
alert('this is a test');
}
</script>
<!-- the rest of your stuff -->
</div>
In fact i have passed personally with this error even with valide HTML all what you need to do is move all of your functions to the head element.
Here is a fiddle:
http://jsfiddle.net/WekEA/1/
To demonstate what i have said in the framework & change the NoWrapToHead to onload