Develop Reference

Hugo: Javascript commands not working till after reloading the page

I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks

Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components

Get iframe element of current CKEDITOR instance

CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?

If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow

I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).

VS2010 WebApp .js+.css able to be embedded fully within HTML code?

So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.

Use external files to allow the browser to cache them. Put the reference to the external files in your master page.

Refrashing the Javascript File without page refresh.

I am working on a very complex web site which is wizard based and have many JavaScript files included.
Now problem is if I pass through many step and at some later stage I find a JavaScript problem, as I fix it I have to load the page again and as I load the page again the Wizard will be started from step one again.
What I want is if I make JavaScript change in a file, there should be a possibility to refresh the JavaScript file through Firebug or something like it.
Thanks a lot.

No, not really. You could try to change the <script>'s src attribute to something like /your/script.js?timestamp=1234567890, but this doesn't give a reliable guarantee that the script will be loaded again.
You could add another script element into the DOM, but then you'd have two very similar scripts loaded at the same time, which may be problematic.

Help with editing an existing Javascript file

I'm trying to edit the readability.js file from http://code.google.com/p/arc90labs-readability/.
It's a bookmarklet that "cleans" the current page by stripping everything except for the web page/web article title and body.
However, I'd like to edit the script so that when the bookmarklet is active, the current page is untouched but outputs the "cleaned" html file to a specified local directory instead.
Can anyone help? Thank you!
Note: The clean HTML file is called 'document.body.innerHTML'

To begin with, it can't be done without touching the original page. The way the script works, it edits the current page (so image urls continue to work, etc). The best you could do would be to store the innerHTML of the root html and then restore it after you have grabbed the content (or store the head and body separately) It would look something like this:
First you would need to store the existing innerHTML of the html element.
Next, you would have the script run as needed, just remove the readability-controls part.
Get the HTML contents of either the readability-content or the whole document and store it in a variable.
Restore the original content using the content stored in step 1 (so the page goes back to how it was before)
At this point, depending on your browser, you could either try to use a dataURI or you could dynamically add a reference to the Downloadify library, images, etc and add the download button to the page. Finally, clicking the "Download" button you could pre-supply the filename and the data stored in step 3, but the location would have to be selected every time.
Sorry this is so hypothetical, but it would take quite a bit of work to put this together.

You don't really need to modify the readability code. Just pull the contents of:
document.getElementById("readability-content");
You can then pass that onto a local script to be saved.