Develop Reference

Pagedown markdown script inserts image url once

I have a modified pagedown markdown markup script for inserting image url to the editor but it works only the first time.
I have explained my code with comments
</script>
<script type="text/javascript">
(function () {
var converter = new Markdown.Converter();
var help = function () { window.open('http://mywebsite.com/editing-help'); }
var editor = new Markdown.Editor(converter);
editor.hooks.set('insertImageDialog', function(callback) {
setTimeout(function ()
{
//i use bootstrap dialog to enter the url
$('#fileModal').modal('show');
/*i have a button for clearing the textbox when i open
it the second time since when i open it the second
time the modal still contains what i had placed previously*/
$("#clear").on("click", function(e) {
e.preventDefault();
$("#imgt").val('');
$("#file").val('');
});
//the button that when clicked inserts the image url
$("#insert_image_post").on("click", function(e) {
e.preventDefault();
//the image file being inserted
if($("#imgt").val().length > 0)
{
var $url = $('input[type=text]');
var image = $("#imgt").val();
callback(image);
$("#fileModal").modal('hide');
}
});
}, 0);
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
})();
</script>
Any one with pagedown markdown javascript... ideas to help me understand where i am going wrong?

I managed to make it work
Its like markdown editor does not smoothly run the .on("click", function(e)... in my case. i.e.
$("#insert_image_post").on("click", function(e) {
e.preventDefault();
So i used theirs after going through their Markdown.Editor.js file i.e.
var thebtn = document.getElementById("insert_image_post");
thebtn.onclick = function () {
The full adjusted code below
<script>
(function () {
var converter = new Markdown.Converter();
var help = function () { window.open('http://stackoverflow.com/editing-help'); }
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function (callback) {
$('#fileModal').modal('show');
var thebtn = document.getElementById("insert_image_post");
thebtn.onclick = function () {
var images = $(".img-url").val();
callback(images)
$('#fileModal').modal('hide');
};
var theclear = document.getElementById("clear");
theclear.onclick = function () {
$("#imgt").val('');
$("#file").val('');
};
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
})();
</script>

Chrome Extension - How to pass variables from JS to popup.html?

I have some variables in the following JS:
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
}
As you can see, the variable is "allcompanynames".
However, how do I pass them and show it on the popup.html page?
I have tried
<script type="text/javascript" src="companynames.js"></script>
<p id="allcompanynames"></p>
no luck. What's wrong?

document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
document.getElementById("allcompanynames").innerHTML(allcompanynames)
}
I'm guessing you should add that last line after displaying the pop up to add the content into the page.

Write your code in this way
var background = chrome.extension.getBackgroundPage();
var allcompanynames = background.companynames;
alert(allcompanynames)

Accordion Next Button

I have tried searching for what I am trying to accomplish, however I have not found what I am looking for.
I am looking to create a Next and Previous button inside the content of the Spry Accordion provided with Dreamweaver CS6. I have searched the SpryAccordion.js and found this code below:
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
So I attempted to do this with "#acc-step-1-next" being my "Next" button in Panel 1.
<script>
$(document).ready(function(){
$("#acc-step-1-next").click(function(){
Spry.Widget.Accordion.prototype.openNextPanel = function(){
return ('#Accordian1').openPanel(this.getCurrentPanelIndex() + 1);
};
});
});
</script>
I was wondering if doing it this way might make it easy! How would I go about applying this? Would this work or not?
Also, with the "Next" button, could I just make it ".acc-step-next" and use it universally, instead of individually assigning new ID's?
EDIT:
Sorry, yes I read your answer incorrectly. I have tried searching for the init property, however have had no success.
This is what starts in the Accordion JS file:
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = false;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
if (this.element)
this.attachBehaviors();
};
Which I added this after, but still no luck:
var acc_next = document.getElementById("acc-step-next");
var acc_prev = document.getElementById("acc-step-prev");
$("acc_next").click(function(){
accordion.openNextPanel();
});
$("acc_prev").click(function() {
accordion.openPreviousPanel();
});

I have never worked with Spry.Widget.Accordion, but I would try something like the following.
Search for the code, where your accordion is initialized, it should look something like that:
var accordion = new Spry.Widget.Accordion("Accordian1",{});
And add this just below:
$(".acc-step-next").click(function(){
accordion.openNextPanel();
});
Together it could look something like that:
<script type="text/javascript">
$(document).ready(function(){
var accordion = new Spry.Widget.Accordion("Accordian1",{});
// Add a click handler to all buttons with the class 'acc-step-next' (yes you can do that)
$(".acc-step-next").click(function(){
// when the button is clicked, call the openNextPanel method of the accordion instance we saved above
accordion.openNextPanel();
});
});
</script>

How to change the order of events?

Is it possible to change the order of events to invoke alert function with message Huh? first and only then next alert with 'Yeah!' message?
<div class="elem" onclick="alert('Yeah!')"></div>
My jQuery code.
$('.elem').click(function () {
alert('Huh?');
})
Link to jsFiddle: http://jsfiddle.net/84Lyq3n9/

How about this:
var inline_click_handler_src = $('.elem').attr('onclick');
var inline_click_handler = new Function('e', inline_click_handler_src);
$('.elem').removeAttr('onclick');
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[Edit] Or without mucking with markup content:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[One more edit] In case your inline click handler uses this, use function.call(), to set the execution context:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler.call(el);
});

But you can do it with many ways.
First you can remove the attribute "onclick".You can do it with javascript.
$('.elem').removeAttr("onclick");
$('.elem').click(function () {
alert('Whatever you want');
alert('Huh?');
})
Here is a link: http://www.w3docs.com/learn-javascript/javascript-events.html

Getting drag and drop to work in firefox

I want to displayan alert box showing the source of images that are dragged into the #dropzone.
Can anyone see what I'm doing wrong here?
<img src="http://upload.wikimedia.org/wikipedia/en/5/53/Arsenal_FC.svg" alt="arsenal">
<div id="dropzone"></div>
<script>
var drop = document.getElementById(‘dropzone’);
drop.ondrop = function (event) {
window.alert(event.dataTransfer.getData(‘Text’));
return false;
};
drop.ondragover = function () { return false; };
drop.ondragenter = function () { return false; };
</script>

Few Ideas:
It seems that you have copied this code from some website, without correcting quotes. ‘dropzone’ should be 'dropzone'
Div without content is practically invisible. Do you have any css style for height and width?
To get dropped file name you should use something like event.dataTransfer.files[0].fileName

Most web browsers requires one to prevent default action on dragenter and dragover to be able to catch drop event.
drop.ondragover = function (ev) {
ev.preventDefault();
return false;
};
drop.ondragenter = function (ev) {
ev.preventDefault();
return false;
};