I have the following gist...
https://gist.github.com/4445255
I try adding it to my Blogger entry (per here) into my post by adding this to the very end...
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
finally in position I add
<div class="gistLoad" data-id="4445255" id="gist-GistID">Loading ....</div>
But it just shows loading...
The script you just referenced (gistLoader.js) contains a call to the function initGist(), which I do not see anywhere.
It is also looking for a DOM element by the id "gistPrinter", when the element you have created has an id of "gist-GistID".
I'm not familiar with gist, maybe someone else can correct me.
EDIT: I found initGist() here: https://raw.github.com/moski/gist-Blogger/master/public/gistBlogger.js
I hadn't yet converted my project over to a Dynamic View. So I went to Template>Dynamic View.
There is a little issue, saving formatting only seems to work in IE for dynamic views...
http://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY%5B1-25-false%5D
You forgot to setup on of the attributes. It should look like this.
<div class="gistLoad" data-id="4445255" id="gist-4445255">Loading ....</div>
I had recently found this issue wherein the gist was not loading after putting the embed url eg
<script src="https://gist.github.com/dishabhatt123/43e98122304000687293b4c3ef3dc474.js"></script>
directly into the HTML view of my blog. Here is what has finally helped me after grilling down.
Basically browsers does not support random included scripts hence using rawgist. Place the below script on the top of bottom of the page.
<script src="https://rawgit.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Then, add the div as under:
<div class="gistLoad" data-id="43e98122304000687293b4c3ef3dc474" id="gist-43e98122304000687293b4c3ef3dc474">Loading or something, this is just text to display while the browser pulls the gist....</div>
Here, in the above div, data-id ="whereveryourgistidis" and id="gist - whereveryourgistidis"
In the above example of embed url, my gist Id is '43e98122304000687293b4c3ef3dc474'. You can replace it with your gist id from the embed url.
Please Note: you will not see the gist in 'Compose view'. But when you preview your blog, you can see it!!
Related
Im trying to install tinymce to use with my text editor to allow the user to have a text box just like the stack overflow one. I cant get it to display though
ive put this in the head of my index file
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src='https:https://cloud.tinymce.com/stable/tinymce.min.js'>
</script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'infotextarea'});
</script>
then in my info page ive put
<textarea id="infotextarea">Your content here.
</textarea>
can anyone explain why its not displaying
It may be that at the time you run the tinymce.init function, it is not yet rendered and there is no textarea in the DOM.
Try debugging your code on the following line:
<script>
debugger;
tinymce.init({selector:'infotextarea'});
</script>
When the web's execution has stopped on that line, in the development console of your browser type the following:
$('#infotextarea').length
If the size is greater than 0, textarea exists at that moment and it is another problem, but if it shows 0 is that you have not yet created that view, this will help us get more information about your problem.
If you want to target a <textarea> by ID you need to use a valid CSS selector.
selector: "#infotextarea"
(note the # at the beginning of the string)
I would also note you appear to be loading TinyMCE 3 separate times - I have no idea why you would need to do that - loading it once should be sufficient
Its not a perfect answer to my question, but i used ckeditor and it worked perfectly.
I must have a mistake somewhere that i or my team could not find with tinymce
Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery
I'm having problem on the page I'm working with, I'm trying to set a permalink with an id so that if the page is fully loaded, it would show the page and it focuses on the element with the ID as its top of the page. But the scenario here, after the focus goes to the ID, eventually the view goes to the top of the page.
The page view should go to the heading that says "Care facilities with rest home and hospital level care"
http://metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility
What could a quick fix. Not familiar with the issue.
Any help would be greatly appreciated.
Like Evan Knowles said you need to add names to your anchors for the browser to be able to browse there.
Replace
<a id="trigger-sa" href="http://metlifecare.staging.wpengine.com/living-at- metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
with
<a id="trigger-sa" name="care-facility" href="http://metlifecare.staging.wpengine.com/living-at-metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
I see what you are referring to as the 'jump to the top'. It looks like this piece of code make the entire page block and then jumps to the top
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
</script>
Removing that code stop the jump and makes the #care-facility work correctly.
I have never worked with html2canvas, so I can't comment on what it is doing.
I am coding in HTML and i want to add the subscribe button into my code for a certain channel, how? i have tried multiple ways. PLease help if you need more information please just say so.
This should work just add your channel name in the div.
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="UEDCaamflyer" data-layout="default" data-count="default"></div>
For example my channel
Read the documentation here
Make sure you have included this JS file:
<script src="https://apis.google.com/js/platform.js"></script>
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.