What I am trying to do
I am trying to make some text bold when I click the bold button. This triggers a function which calls the execCommand function... unfortunately when I click the button the whole page refreshed and I lose all my text inside the iframe.
I can see the text go bold for a split second and then the page reloads.
My Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body onLoad="enableEditMode();">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>My Text Editor</h2>
<form class="" action="index.html" method="post">
<div class="form-group">
<label for="title">Title</label>
<input class="form-control" type="title" name="title" value="">
</div>
<div class="form-group">
<div class="" id="toolbar">
<button onClick="execCmd('bold')"><i class="fa fa-bold"></i></button>
</div>
<iframe class="form-control" src="" width="" height="" name="richTextField" style="width:100%;height:100%"></iframe>
</div>
<button class="btn btn-default btn-block" type="submit" name="button">Go!</button>
</form>
</div>
</div>
</div>
<script>
/**
*
*/
function enableEditMode(){
richTextField.document.designMode = 'On';
}
/**
*
*/
function execCmd(command){
richTextField.document.execCommand(command, false, null);
}
</script>
</body>
</html>
My Question
How do I make my text bold here and preserve my text?
Found my answer: just have to add a type to the buttons to prevent them from automatically submitting the form.
<button onClick="execCmd('bold')" type="button"><i class="fa fa-bold"></i></button>
I think the use is wrong you could firstly set a variable
var rtField = document.getElemetByID('richTextField')
please not in the function ! than add an eventlistener to the button which changes the text
var btn = document.getElementByID('button')
btn.addEventListener('click', function (event) {
rtField.style.fontWeight = 'bold';
}
should work.
Related
I need to run a code in HTML with checkboxes when the user triggers a specific cell, but i don't know how to do.
function onEdit(){}
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></head>
<body>
<div class="container">
<p>
<label>
<input type="checkbox" id="Obj" value="A&E"/>
<span>A&E</span>
</label>
</p>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Adicionar
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
you can add a event listener in the checkbox:
checkbox = document.getElementById("Obj").addEventListener("click",onEdit)
The addEventListener() method attaches an event handler to the specified element.
I'm changing over from Java to Javascript as I'd like to expand my programming capabilities, and I'm not sure why but I'm having a really hard time adjusting. For example, I'm not even sure why I can't get the Javascript function to run, nevermind actually work the way I want it to.
I feel like I might not have the JS wired up to my HTML document properly, but I have included the correct filename within a script tag, and the two files are within the same folder, so why isn't the JS function even being called?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="script.js"></script>
<body>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task"/>
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button onclick="addTask()">Button element</button>
</div>
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
It is window.alert("hello");, not document.alert("hello");
And inline script is not recommended, use addEventListener instead
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('button').addEventListener('click', addTask);
});
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
Note, the line adding the event listener needs to be called after DOM loaded, as seen in above code sample, or in a script at the end of the body, as shown in below sample.
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
<script>
document.querySelector('button').addEventListener('click', addTask);
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
</script>
I have problem with trigger a modal,
i check for jquery and its ok.
I am using 1.12.4 version and i have tag in head of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
My open modal tag is:
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a>
And my modal cocde is:
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
With this code i try trigger showing a modal:
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function () {
alert('da');
});
});
</script>
Just for note, modal was show but trigger not work.
With the code you've provided, I created this in a .html file:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<a data-toggle="modal" class="modal-trigger" data-id="11"
href="#komentarM">Howdy</a>
</body>
<div id="komentarM" onload="funtiontest()" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function () {
alert('da');
});
});
</script>
Note that I added Howdy inside the <a> tags meant to trigger the modal. That makes it so there is an area where the user can click. I clicked on the link, the alert appeared, followed by the modal. This works on Safari 10.0.3. Hopefully this helps.
I don't think there is wrong in your html code. As you can see below its properly working in Chrome/Firefox. I hope this might work for you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM">Modal Open</a>
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#komentarM').on('shown.bs.modal', function () {
alert('da');
});
});
</script>
</body>
</html>
First: Input tags don't need to be closed, so I advise you to remove the close tag for input and leave it like this:
<input type="text" name="id" value="">
Second: The data-toggle and href attributes already link the anchor to open the modal, so you don't need the javascript function to do it, simply use your html code
See it working here
So basically what I'm trying to do is when I fill out a form. All the information gets displayed in a newly created div after I hit a submit button. The problem I'm having is that when I press the submit button. A div doesn't show up at all. Does anyone know how I can accomplish this?
Javascript
$(document).ready(function() {
$('#submit').click(function() {
//Form Disappears after Submission
var form = document.getElementById("form");
var formBackground = document.getElementById("form-background");
if (form.style.display == "block" || form.style.display == "") {
form.style.display = "none";
formBackground.style.display = "none";
}
//Creates New Div After Submission
var titleInput = document.getElementById("titleInput").value;
var descInput = document.getElementById("descInput").value;
var structure = $('<div class="note"><div class="note-content"><div class="imagecontainer"><img src="./images/jose.jpg"/></div><div class="description"><h3>Title:</h3>' + titleInput + '<p>Description:</p>' + descInput + '</div></div></div>');
$('#container').append(structure);
return false;
});
});
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personal Note Taker</title>
<!--Button Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Index Styling-->
<link rel ="stylesheet" href="./css/styling.css"/>
</head>
<body>
<div id="header">
<h1>Personal Note Taker</h1>
</div>
<div id="containter"></div>
<!--How the Note should look like
<div class="note">
<div class="note-content">
<a href="./quote1.html">
<div class="imagecontainer">
<img src="./images/jose.jpg"/>
</div>
<div class="description">
<h3>Quote 1</h3>
<p>Every action that you commit, will develop who you are. </p>
</div>
</a>
</div>
</div>
-->
<!--Add Note Button-->
<div id="addNoteButton">
<i class="fa fa-plus" aria-hidden="true"></i>
<div>
<!--Form Background-->
<div id="form-background">
</div>
<!--Form Field-->
<div id="form">
<div id="cancel-button-div">
<button id="cancel-button">X</button>
</div>
<h2 id="form-title">Add a Note</h2>
<!--Title and Description Questions-->
<form>
<br>
<input placeholder="Title" type="text" id="titleInput">
<br><br>
<textarea placeholder="Description" type="text" id="descInput" rows="5" cols="30">
</textarea>
<br><br><br><br>
<button id="submit">Submit</button>
</form>
</div>
<!--Index Javascript-->
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="./js/index_script.js"></script>
</body>
</html>
change
id="containter"
to
id="container" :D
I have a website that I'm testing across browsers. In IE(8) and Chrome(Version 54.0.2840.87 m), it takes a bit of time before loading, but once it does it's rendered completely. However, in Firefox(43.0.1) it shows incompletely rendered html elements for a second before rendering properly. Also, I've used a Glyph icon on a button which's not working either. This is an unwanted distraction and an overall sub-optimal user experience.
Here's my code :
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Site Title</h1>
<p>Some text describing the site functionality</p>
</div>
</div>
</br>
</br>
<div class="form-group">
<div class="container">
<label for="url-entered">Name for label</label>
<div class="input-group">
<input type="text" class="form-control" id="url-entered" autofocus onFocus="this.select();" onkeyup="onEnterKeyUp(event, this)" placeholder="Some placeholder text here">
<span class="input-group-btn">
<button class="btn btn-custom" type="button" onClick="trimURL()"><span class="glyphicon glyphicon-user">Crop it!</span></button>
</div><!--input-group ends here -->
<div class="res" id="hidden-res" style="margin-top: 15px; visibility: hidden;">
<span id="err-msg"></span><a id="trimmed-link"></a>
</div>
</span>
<p>Mail me at admin#site.com</p>
</div>
</div>
</div>
Can you suggest a solution for these issues? Thank you.