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>
Related
$(document).ready(function () {
var youTubeUrl = $('.note-video-clip').attr('src');
$('#stop-video').click(function () {
$('.note-video-clip').each(function () {
$(this).attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
});
});
Im using the above script to solve the issue, however its working only for the first page but not the second page on next function
by using the below code we were able to solve the issue
allNextChapter.click(function () {
var sectionkey = $(this).attr("data-section");
var chapterkey = $(this).attr("data-chapter");
var youTubeUrl = $('.note-video-clip').attr('src');
$("#stop-videoSection" + sectionkey + "Chapter" + chapterkey).find('.note-video-clip').attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
I have two codemirror editors on one page. A drop down list of items and radio group to target the correct editor.
What I want to do is on change of the drop down list insert the value of the item into the targeted editor (deleted by the radio group).
my code is as below: however the function isnt working. When I alert the item value and the target I get expected results, however the function to insert the text is failing:
<script type="text/javascript">
function editor(id) {
var editor = CodeMirror.fromTextArea(id, {
continuousScanning: 500,
lineNumbers: true
});
editor.setSize(null, 550);
}
var config_id = document.getElementById('id_config')
var config = editor(config_id);
var remote_config_id = document.getElementById('id_remote_config')
var remote_config = editor(remote_config_id);
function insertStringInTemplate(str, target) {
if (target== "id_config") {
var doc = config
} else {
var doc = remote_config
}
var cursor = doc.getCursor();
var pos = {
line: cursor.line,
ch: cursor.ch
}
doc.replaceRange(str, pos);
}
$(function(){
// bind change event to select
$('#template_vars').on('change', function () {
var var_data = $(this).val(); // get selected value
var var_target = $('input[name=target]:checked').val();
insertStringInTemplate(var_data, var_target)
return false;
});
});
$("#template_vars").chosen({no_results_text: "Oops, nothing found!"});
</script>
however the function to insert the text is failing
That function (i.e. insertStringInTemplate()) is working good/properly; however, the problem is with the editor() function, where you forgot to return the editor (i.e. the CodeMirror instance).
So a simple fix would be:
function editor(id) {
var editor = CodeMirror.fromTextArea(id, {
continuousScanning: 500,
lineNumbers: true
});
editor.setSize(null, 550);
return editor; // <- here's the fix
}
Demo on CodePen.
However in that demo, I added an if block to the insertStringInTemplate() function, as in the following code:
function insertStringInTemplate(str, target) {
if (target== "id_config") {
var doc = config
} else {
var doc = remote_config
}
// If there's a selection, replace the selection.
if ( doc.somethingSelected() ) {
doc.replaceSelection( str );
return;
}
// Otherwise, we insert at the cursor position.
var cursor = doc.getCursor();
var pos = {
line: cursor.line,
ch: cursor.ch
}
doc.replaceRange(str, pos);
}
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)
Every time when I try to run this code in visual studio I get the above error. I am not sure what is going on. I know it's question like this, but I did not see this error in the answered in the solutions to this problem. Can anyone help me with this?
// display the lightbox
function lightbox() {
var insertContent = "<div id='chartCon'>Test</div>";
// jQuery wrapper (optional, for compatibility only)
(function ($) {
// add lightbox/shadow <div/>'s if not previously added
if ($('#lightbox').size() == 0) {
var theLightbox = $('<div id="lightbox" class="highcharts-container"/>');
var theShadow = $('<div id="lightbox-shadow"/>');
$(theShadow).click(function (e) {
closeLightbox();
});
$('body').append(theShadow);
$('body').append(theLightbox);
//$().keydown(function (e) {
// if (e.which == 27) {
// closeLightbox();
// }
//});
}
// remove any previously added content
$('#lightbox').empty();
// insert HTML content
if (insertContent != null) {
$('#lightbox').append(insertContent);
}
//create chart
var chart = $('#ChartContainer').highcharts('StockChart');
var annots = chart.exportData()
window.chartwidth = $('#ChartContainer').width();
//chart.destroy();
window.chartops.series = window.seriesOptions;
$('#lightbox').highcharts('StockChart', window.chartops);
$('#lightbox').highcharts('StockChart').importData(annots);
// move the lightbox to the current window top
$('#lightbox').css('top', $(window).scrollTop());
// display the lightbox
$('#lightbox').show();
$('#lightbox-shadow').show();
})(jQuery); // end jQuery wrapper
}
// close the lightbox
function closeLightbox() {
// jQuery wrapper (optional, for compatibility only)
(function ($) {
//export possibly changed annotations and reset chartwidth
var chart = $('#lightbox').highcharts('StockChart');
var annots = chart.exportData()
$('#ChartContainer').highcharts('StockChart').removeAllAnnotations();
$('#ChartContainer').highcharts('StockChart').importData(annots);
window.chartwidth = $('#ChartContainer').width();
// hide lightbox/shadow <div/>'s
$('#lightbox').hide();
$('#lightbox-shadow').hide();
// remove contents of lightbox in case a video or other content is actively playing
$('#lightbox').empty();
})(jQuery); // end jQuery wrapper
}
Sorry, this is the function giving me the error
init: function (chart) {
var rangeSelector = this,
options = chart.options.rangeSelector,
buttonOptions = options.buttons || [].concat(rangeSelector.defaultButtons),
selectedOption = options.selected,
blurInputs = rangeSelector.blurInputs = function () {
var minInput = rangeSelector.minInput,
maxInput = rangeSelector.maxInput;
if (minInput) {
minInput.blur();
}
if (maxInput) {
maxInput.blur();
}
};
I have the following snippet:
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});
But when I test it and click on close for example I get this error message:
node.hide is not a function
node.hide(true);
Any idea why?
You may have to show us your HTML because with the right javascript includes and appropriate HTML, it works fine here: http://jsfiddle.net/jfriend00/27fJW/. So, I would suspect that you either don't have the right HTML or you don't have the right core YUI includes.
HTML I made up to match the code:
<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>
<button id="subscribe">Open</button>
<button id="close">Close</button>
<div id="popup-subscribe">Popup content</div>
Your code (unchanged):
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});