In Anki, I have a note type where one card is effectively a cloze deletion, however I am using other cards at the same time, with the cloze deletion field in it. I've tried to use javascript to replace everything within two '\'s and it appears to work in the preview when editing, but when the card appears during normal use, only the first line appears as plain text. I'm using the desktop linux program for editing, but would also like to be able to use it in AnkiDroid.
So the question is: what's the problem and how can I fix it?
Front Template:
<script>
function showDef() {
document.getElementById("def").innerHTML = '{{Bedeutung 1}}'.replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
};
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>[...]</n>" + splitBeispiel[2]);
</script>
<p onclick="showDef()" id="def">Click to show definition</p>
Styling:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#cloze {
font-family: arial;
font-size: 25px;
text-align: center;
color: blue;
background-color: white;
}
#def {
font-family: arial;
font-size: 15px;
text-align: center;
color: green;
background-color: white;
}
#beispiel {
font-family: arial;
font-size: 15px;
text-align: center;
color: orange;
background-color: white;
}
Back Template:
<script>
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>" + splitBeispiel[1] +"</n>" + splitBeispiel[2]);
</script>
<hr id=answer>
{{Singular Nominativ}}
The 'Beispiel 1' field in the following example is "ein kirchlicher, ein \gesetzlicher\ Feiertag"
Screenshot of editor preview:
Screenshot of test:
I guess, you should look for the solution here.
Avoid using document.write in your templates and use document.getElementById("HTMLidToReplace").innerHTML = '<b>' + your_var + '</b>';, for example. Hope it helps.
Related
After pressing the button, the arrow I got is
something like this :
Is there a way for me to increase the size of the arrow so that it is more visible? Thanks for any help.
function ChangetoArrows() {
var str = document.getElementById("Arrows").innerHTML;
var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x){
if(x=='undefined'){return x='↑';}
if(x=='turn-right'){return x='→';}
if(x=='turn-slight-right'){return x='→';}
if(x=='turn-left'){return x='←';}
if(x=='turn-slight-left'){return x='←';}
else{return x;}//must need
});
document.getElementById("Arrows").innerHTML = res;
}
.button4{
background-color: Yellow;
color: black;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
HTML code renders as text so you can use font-size to adjust size.
Since it looks like you're putting these into an element with id Arrows you should be able to add this to your css:
#Arrows {
font-size: 30px;
}
→ is an example of HTML unicode. Learn more here: https://www.w3schools.com/charsets/ref_utf_arrows.asp
You can increase the font-size of button. for eg: font-size:25px and add in .button4 class.
You could add a CSS class to the element, which defines a larger font-size: document.getElementById("Arrows").classList.add('big-arrows');
Or you could use Font Awesome arrows, which will be bolder than unicode arrows.
Simply wrap it with span and give css. checkout my snippet, hopefully it can help you in some way. have a nice day
function ChangetoArrows() {
var str = document.getElementById("Arrows").innerHTML;
var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x){
if(x=='undefined'){return x='↑';}
if(x=='turn-right'){return x='→';}
if(x=='turn-slight-right'){return x='→';}
if(x=='turn-left'){return x='←';}
if(x=='turn-slight-left'){return x='←';}
else{return x;}//must need
});
document.getElementById("Arrows").innerHTML = '<span class="arrow">'+res+'<span>';
}
.button4{
background-color: Yellow;
color: black;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.arrow{
font-size:150px;
color:red;
}
<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
<div id="Arrows">turn-right</div>
The others already answered the question, so I'm not going to repeat that. However, in this case I would recommend you to use Material Design - Icons:
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-34 { font-size: 34px; }
.material-icons.md-44 { font-size: 44px; }
.material-icons.md-54 { font-size: 54px; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<i class="material-icons md-24">arrow_back</i>
<i class="material-icons md-34">arrow_forward</i>
<i class="material-icons md-44">arrow_upward</i>
<i class="material-icons md-54">arrow_downward</i>
Just add the CSS library to your code and replace with JS like so:
return x='<i class="material-icons md-24">arrow_back</i>';
I'm new to programming in general. I'm learning HTML/CSS/Javascript atm.
I created a simple script that allow the user to change the font size of the paragraph element.
I tired my code is jsFiddle and it works fine, but when I copied it into an HTML document and started the page. The HTML and CSS are functioning properly, but the problem is: JavaScript is not working. Btw I'm using Chrome as a browser.
Is something wrong with my HTML document..? I'm so confused!
Here is the working jsFiddle: https://jsfiddle.net/o60gtvh8/
My HTML file (Download link / Dropbox):
https://www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar?dl=0
HTML file code ( Copy of the code in the HTML file provided in the download link above ):
<!doctype html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
</style>
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
</head>
<body>
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
</body>
</html>
Move your JavaScript to the end of the page before the closing body element. As it stands now you're trying to access elements that don't exist yet. jsFiddle works because by default they wrap the JavaScript code in a window.onload event.
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
So there's nothing really wrong with your code (although you should avoid legacy DOM notation like document.body.style.fontSize) -- you're just executing it too early.
I'm using the append function to add different divs, images, links and text onto my html. When I do this though, the content that I get from a JSON file that I'm trying to append is being placed outside of the background that I want it to be placed on. Here is what the content is supposed to look like:
http://i.stack.imgur.com/iShVe.png
The image and text is placed onto the gray background when I create this html content myself, but when I try to create all this content with append(), it puts all the content to the left of the background:
Here is also the codepen that I'm doing it on if you needed to see that: http://codepen.io/JaGr/pen/XXMPQY
html:
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<div>
<div class="header">
<div>
Camper
</div>
<div>
News
</div>
</div>
<div class="stories">
<div class="story">
<img src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" class="profilePicture">
<div class="headline">Test Headline</div>
<div class="author">by - TestName</div>
<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon"> 13</div>
</div>
</div>
</div>
css:
body {
background-image: url("http://s22.postimg.org/bondz7241/grey_wash_wall.png")
}
.header {
font-family: 'Oswald', sans-serif;
font-size: 100px;
float: left;
color: #A9A9A9;
border-right-style: solid;
border-bottom-style: solid;
margin-left: 20px;
margin-top: 10px;
padding-right: 135px;
padding-bottom: 18px;
width: 210px;
margin-bottom: 29px;
}
.story {
text-align: center;
float: right;
background-color: #A9A9A9;
width: 230px;
height: 330px;
margin-bottom: 30px;
margin-right: 30px;
box-shadow: 2px 2px 13px;
}
.headline, .author, .likes {
padding-top: 7px;
font-family: 'Droid Serif', serif;
}
.likes {
vertical-align:middle
padding-top: 5px;
}
a {
text-decoration: none;
color: #0052cc;
}
.profilePicture {
width: 230px;
height: 230px;
}
.heartIcon {
width: 15px;
height: 15px;
}
javascript:
$(document).ready(function() {
$.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
for (var x = 0; x < json.length; x++) {
var headline = json[x].headline;
var headlineLink = json[x].link;
var authorName = json[x].author.username;
var authorNameLink = "http://www.freecodecamp.com/" + authorName;
var authorPicture = json[x].author.picture;
var likes = json[x].rank;
if (headline.length > 15) {
headline = headline.slice(0, 16);
}
var divStory = '<div class="story">'
var profilePic = '<img src="' + authorPicture + '"' + ' class="profilePicture">'
var divHeadline = '<div class="headline">' + headline + '</div>'
var divAuthor = '<div class="author">by - ' + authorName + '</div>'
var divLikes = '<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">' + likes + '</div>'
var lastDiv = '</div>'
$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)
}
});
});
I think my html and css is OK, it works alright when I type in the code myself; it's just the javascript that introduces the problem. I've checked the variables and incoming JSON and they both seem fine as well, so I think the problem is just with append() itself, but I don't know exactly whats causing it.
It is the jquery append multiple elements.
$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)
I haven't found out exactly why it created the issue, but change it to will fix the problem.
$(".stories").append(divStory + profilePic + divHeadline + divAuthor + divLikes + lastDiv)
Check fix here
Did u ever use the devtools? (F12)
They're pretty useful, and you can see on first sight that your elements aren't wrapped into the .story-tags.
I'd do it like this:
var tplStory = '\
<div class="story">\
<img src="{{authorPicture}}" class="profilePicture">\
<div class="headline">{{headline}}</div>\
<div class="author">by - {{authorName}}</div>\
<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">{{likes}}</div>\
</div>';
$(".stories").append(
divStory
.replace('{{authorPicture}}', authorPicture)
.replace(...)
)
I am thinking of making a "magic 8 ball" kind of website. I would like a version of the following code that looks more like the helix fossil website.
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I hope so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
document.getElementById('answerButton').onclick = function () {
var answer = answers[Math.floor(Math.random() * answers.length)];
document.getElementById('answerContainer').innerHTML = answer;
};
p, input, button {
font-family: sans-serif;
font-size: 15px;
}
input {
width: 200px;
}
<p> How can I help you today? </p>
<input type="text" placeholder="enter a question"></input>
<button id="answerButton"> Answer me </button>
<p id="answerContainer"></p>
Also, when I put this into the "insert code" feature in Weebly, it keeps showing the raw code above the elements. Any way I could clean this up or should I just use a different website creator?
I know nothing about CSS.
Below is a snippet that adds some styling to the basic code.
If you want to make a web page out of this, you can put the CSS inside style tags, the JavaScript inside script tags, and the HTML inside body tags.
Like this: right-click on my page and select "View Page Source" (or whatever your browser of choice calls it) to see how the page is organized.
Better yet, if the Weebly file manager allows it, put the CSS and JavaScript into external files and link to them in the HTML file.
window.onload = function () {
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I would say so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
var container = document.getElementById('answerContainer'),
opacityPercent,
previousAnswer;
function updateOpacity() {
opacityPercent += 1;
container.style.opacity = opacityPercent / 100;
if (opacityPercent < 100) {
window.requestAnimationFrame(updateOpacity);
}
}
function makeVisible() {
container.style.opacity = '0';
opacityPercent = -1;
updateOpacity();
}
opacityPercent = -1;
document.getElementById('questionArea').value = '';
document.getElementById('answerButton').onclick = function () {
while (true) {
var answer = answers[Math.floor(Math.random() * answers.length)];
if (answers.length == 1 || answer != previousAnswer) {
previousAnswer= answer;
break;
}
}
container.className = '';
container.innerHTML = answer;
makeVisible();
};
};
body {
background: #e8e8d6;
color: #333;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
p, input, button {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
}
#answerContainer {
opacity: 0;
}
p {
padding: 20px 0;
}
input {
width: 500px;
padding: 5px 15px;
background: #fff;
border: 2px solid #ddd;
outline: none;
}
input:focus {
border: 2px solid #888;
}
button {
background: #ffe;
color: #666;
border: 2px solid #666;
border-radius: 8px;
margin-left: 10px;
padding: 5px 15px;
outline: none;
}
button:hover {
background: #ffc;
color: #222;
border: 2px solid #222;
cursor: pointer;
}
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<div id="wrapper">
<p> What do you want to know about the future? </p>
<p>
<input id="questionArea" type="text" placeholder="enter a question"></input>
</p>
<p>
<button id="answerButton"> Make a prediction </button>
</p>
<p id="answerContainer"></p>
</div>
I have a Google Maps map and have some MarkerWithLabels there. When the user hovers over the marker I want to show some additional information about the marker. E.g.
Not hovering => 10
Hovering => 10 people
However, the bottom text should be in another color, so I thought I'd be best using a span to change the text colors of the two texts. I've done this
googleMaps.event.addListener(marker, 'mouseover', function () {
var mouseoverImg = new googleMaps.MarkerImage('/images/pin_xl.png', null, null, null, new googleMaps.Size(53, 72));
this.setIcon(mouseoverImg);
this.set('labelClass' ,'' );
this.set('labelContent', "<p class='startContinentCountryBigTop'>" + poiObject.count + "</p><br><p class='startContinentCountryBigBot'>" + cities + "</p>");
this.set('labelAnchor', new googleMaps.Point(20, 65));
});
googleMaps.event.addListener(marker, 'mouseout', function () {
this.setIcon(markerImage);
this.set('labelContent', poiObject.count);
this.set('labelAnchor', new google.maps.Point(11, 42.5));
this.set('labelClass' ,'startContinentCountrySmall' );
});
The problem is, that with the span, as soon as I mouseover the marker the mouseout function is also triggered. So the Marker get's repeatidly smaller/bigger. When I remove the span and am just using the text it works without problems, but the bottom text needs to have a different color and a different text-size. What are some workarounds to this problem?
These are my css classes
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.startContinentCountrySmall {
cursor: pointer;
color: #bdc3c7;
font-size: 14pt;
font-weight: 100;
}
.startContinentCountryBigTop {
cursor: pointer;
color: #bdc3c7;
font-size: 14pt;
font-weight: 100;
width: 100%;
}
.startContinentCountryBigBot {
cursor: pointer;
color: #f69d00;
font-size: 10pt;
font-weight: bold;
text-transform: uppercase;
width: 100%;
}
Some additional information: It seems to be the problem, that you can't add HTML Elements to a MarkerWithLabel. Even when I created a Node like this
var newDiv = document.createElement("span");
newDiv.className = "startContinentCountryBigTop";
newDiv.innerHTML = poiObject.count;
it doesn't work. The problem occurs when you hover over the text on the marker that has the HTML tags wrapped
I hope you understand the problem. The mouseover and mouseout listener are fired at the same time all the time as soon as I start using span for the text on the marker. Any ideas?