This is my code.
var warning = '<div class="ui inline cookie nag style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';
document.getElementById("resWarn").innerHTML = warning;
Nothing is showing up, when putting script into html page.
Script is included UNDER <span id="resWarn"></span>. When I set variable warning to anything like sdnhasjkshushduig, it show up.
Please help.
You are missing a quote after -> "nag"
class="ui inline cookie nag"
I think you just have to put quotation marks before the keyword style.
Like this:
var warning = '<div class="ui inline cookie nag" style="display: block;"><span class="title">Tava ekrāna rezolūcija ir pārāk maza, lai skatītu šo lapu. Lūdzu, palielini rezolūciju vai attālini lapu!</span><i class="fa fa-times fa-fw" style="color: #eee; float:right"></i></div>';
Related
I've read through many other questions on this but none seem to solve my problem.
I have created a div element which houses an icon from fontawesome. It's a media player icon where i use an if/else argument to change from PLAY to PAUSE and back again. Without using the fontawesome element it works but i like the icon. I've also looked up using jquery instead but it's a little beyond my knowledge.
It's the i class="fa fa-stop" aria-hidden="true" it doesn't like.
<script language="javascript">
function chPlay2() {
if (document.getElementById("player").title =="Toggle Play")
{
audio.play();
document.getElementById("player").title = "Toggle Stop";
document.getElementById("player").innerHTML = " <i class="fa fa-stop" aria-hidden="true"></i>";
}
else
{
audio.pause();
document.getElementById("player").title = "Toggle Play";
document.getElementById("player").innerHTML = " <i class="fa fa-play" aria-hidden="true"></i>";
}
}
</script>
You should use like this-
document.getElementById("player").innerHTML = ' <i class="fa fa-stop" aria-hidden="true"></i>';
Just replace the double quotes with single quotes.
You have a double qoute inside your string literals. Try using
the ` for string template or escape your double qoutes using \ (the escape character). it would look something like this
document.getElementById("player").innerHTML = ` <i class="fa fa-stop" aria-hidden="true"></i>`;
or alternatively,
document.getElementById("player").innerHTML = " <i class=\"fa fa-stop\" aria-hidden="true"></i>";
This is true for many languages so you might want to keep this in mind.
I changing HTML near the top of my website using JS and its not working I was having a similar problem earlier because the quotations were messing it up but i tried to fix it with that method but it still isn't working.
document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";
document.getElementById("accTabs").innerHTML = "<a onclick=\"document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Please try like this snippet.
Your error is raised because you used quote incorrectly.
document.getElementById("accTabs").innerHTML = "<a onclick="alert('ok')"></a>";
If you try like this code, then double quote inside double quote will cause the problem.
You need to change this like below to escape the problem
document.getElementById("accTbs").innerHTML = "<a onclick=\"alert('ok')\"></a>";
You could also use ES6 template literal. then you can use double quote and single quote inside string without any problem.
document.getElementById("accTabs").innerHTML = `<a onclick="alert('ok')"></a>`;
document.getElementById("accTabs").innerHTML = "<a onclick=\" document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Just properly escape your " with \" and use ' to wrap the string, reducing escapes
document.getElementById("accTabs").innerHTML = '<a onclick="document.getElementById(\'id01\').style.display=\'block\'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>';
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
Moreover, you could also try ES6's backtick ` to even completely avoid escaping.
document.getElementById("accTabs").innerHTML = `<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
try using template strings as shown below
document.getElementById("accTabs").innerHTML = `<a
onclick="document.getElementById('id01').style.display='block'" class="w3-bar-
item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
This would work.
Learn more about Templete strings Here
I am trying to remove the $movieDiv that is appended when clicking "#buttonLicensedMovie". It appends to the html just fine and the same button hides just fine, as it should. The issue I am having is when I click the anchor tag with id "licensedMovie1, the $movieDiv does not remove and the "#buttonLicensedMovie1" does not show back up. What am I doing wrong? Any help would be appreciated. Thanks!
JQuery:
$(function() {
$("#buttonLicensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").append($movieDiv);
$("#buttonLicensedMovie1").hide();
});
});
$(function() {
$("#licensedMovie1").click(function(){
var $movieDiv = '<p class="header">Becoming An Agent</p>\n<iframe width="500" height="281" src="https://www.youtube.com/" frameborder="0" allowfullscreen></iframe>\r\n<br/><a id="licensedMovie1" class="video-close"><i class="fa fa-times" aria-hidden="true"></i> Close Video</a>';
$("#movieLicensedWrapper1").remove($movieDiv);
$("#buttonLicensedMovie1").show();
});
});
HTML:
<div class="col-xs-12">
<button id="buttonLicensedMovie1" type="button" class="btn btn-default"><h5>Becoming an Agent <i class="fa fa-caret-square-o-right fa-lg" aria-hidden="true"></i></h5></button>
<div class="col-xs-12" id="movieLicensedWrapper1">
</div>
</div>
You could use (won't work in your case because not everything is inside the p):
$("#movieLicensedWrapper1 p.header").remove();
Or you create a global variable and assign the value with:
$movieDiv = $.parseHTML('...');
And then you can remove with just:
$movieDiv.remove();
When you append it works fine because you are just adding html. However, when you want to remove you need to select the DOM element. Try this instead:
var $movieDiv = $('#movieLicensedWrapper1').find('.header');
$movieDiv.remove();
jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});
First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!
For some reason I can't get my code to work
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
It draws from this and it isn't a problem with the setup as other functions work just fine, for some reason it doesn't replace myFull instead it just leaves it there.
<div id="LayoutDiv1">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
<img id="pusher" class="resize" src="../images/myFull/Young_Diego.jpg" alt="page1">
</div>
EDIT:::::::::::::::::::::::
The code suddenly decided to work...not sure what the error was before
try this
var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");
add this at below
$("#LayoutDiv1").children("img").attr("src",mainImg);