I was looking for a solution to automatic generation of the VuePress sidebar and found this module which was recommended in this tutorial - solution2
I'm trying to get it working as described however the sidebar displays the actual folder path to the html rather than just the name as can be seen below, i've tried a different folder structure, adding and removing MD files but i cannot get the sidebar to display correctly. Would anyone know how I can fix this / what i've done wrong?
Config.js:
const getConfig = require("vuepress-bar");
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around',
themeConfig: {
...getConfig(`${__dirname}/..`)
}
}
Sidebar result :
I fixed this by adding the correct front matter to my MD files, title and permalink
Related
I have an existing file upload (manual) in my web application. My application already shows existing uploaded files and a way to delete files.
I would like to incorporate the dropzone.js drag and drop into a small target area - but that is all. I don't want dropzone to print/render anything back to the screen - no messages, no images, nothing.
Could someone provide and example of how to configure dropzone for this limited functionality?
You can accomplish this by modifying the stylesheet. For example, setting
.dz-details
{
display:none;
}
will remove the box which shows what was uploaded. By modifying more styles, you should be able to remove the other elements that normally appear.
You can do that on init:
const dropzoneConfig = {
addedfile: file => { console.log(file); }
}
const myDropzone = new Dropzone(myDiv, dropzoneConfig)
I am building a firefox addon through the Mozilla Addon Builder https://builder.addons.mozilla.org
I'm starting really basic, I figure it doesn't get any more simple than changing google.com to red. I made the css change the body, html, and divs and added important, so I could be sure that if the stylesheet displays, it will change the background red, and will overwrite the current css.
However, when I activate it (through the testing button which installs the addon), nothing happens. The CSS is not injected into the page.
Here is what the extension looks like:
Here is the code:
main.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.google.com/*",
contentStyleFile: data.url("data/style.css")
});
style.css
html, body, div {
background: red !important;
}
I also tried using the following urls, all which did not work either:
http://google.com/*
https://google.com/*
http://www.google.com/*
https://www.google.com/*
http://google.com/
https://google.com/
http://www.google.com/
https://www.google.com/
I also tried changing the following locations to style.css, which did not make any difference either:
style.css
data/style.css
../data/style.css
I also tried removing the sdk/ from the data and pagemod variables, but that did not work either.
Why is it not working and how can I fix it?
Match patterns contain only one *.
The pattern "*.google.com" matches all the Google url's in your list. Match pattern can also be a regular expression. You can match http://google.ie and all the other google.*'s with
pageMod.PageMod({
include: /.*\/(\/\w*\.)?google\.[A-Za-z]{2,3}\/.*/,
contentStyleFile: data.url("style.css")
});
I'm using a Magento 1.4.1.1 install that I'm having issues with the javascript on a custom themed store.
For example, going to any product page (e.g. http://www.papakuraeducation.co.nz/index.php/teachers/magic-caterpillar-handwriting-casey-caterpillar-small-book.html) loads a Javascript file, which contains code which is supposed to scale down the .jpg file to fit the 'product-image' container it sits inside.
The relevent code seems to be around line #10279, which is causing a exception that $(imageEl).parentNode = null
Product.Zoom.prototype = {
initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl){
this.containerEl = $(imageEl).parentNode;
this.imageEl = $(imageEl);
this.handleEl = $(handleEl);
this.trackEl = $(trackEl);
this.hintEl = $(hintEl);
(snipped...)
I've tried debugging it in Chrome and adding breakpoints, but tbh I'm not actually sure how to use this information to find the solution.
Any help in pointing me in the right direction would be greatly appreciated.
You have to add an ID to the <IMG> in question. This ID should than be fed into the following code-space:
product_zoom = new Product.Zoom('IMAGE_ID', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
I am trying to setup my model so I can use the
#Html.EditorFor(e => e.publicationTitle) and have it show a Watermark with a hint.
Currently I am doing
#Html.LabelFor(e => e.PublicationTitle) #Html.TextBox("PublicationTitle",tempTitle.ToString(), new { style = "width:350px", placeholder = "Put title here" })
#Html.ValidationMessageFor(e => e.PublicationTitle)
I have found that you can put a [Display(Prompt="Enter title here")] in my model
but it is not showing up in my view for some reason.
On a side note. I did try to follow the instructions from this post
Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?
At the end of this post it says to change the ~/Views/Shared/EditorTemplates/String.cshtml file but this file is not located in my project.
Any hints would be appreciated. Thank you in advance.
FOLLOW UP!
Ah the joys of MVC3. Apparently the above post answers the question once you understand what is going on. If you create the EditorTemplates/String.cshtml file in your ~/Views/Shared/ folder then it will use this template for your editfor boxes.
Final Answer to be concise for others looking will be posted below.
In your controller you need to do the following
[Display(Prompt="First Name Goes Here",Name="First Name")]
[StringLength(100,ErrorMessage="First Name may not be longer than 100 characters")]
public string AuthFirstName { get; set; }
The Prompt="This is what will display" under display is the watermark that will be created.
Then you will need to create the folder "EditorTemplates" under ~/Views/Shared the entire path will be ~/Views/Shared/EditorTemplates/
Then create the file String.cshtml and place the following code in it
#Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, new { #class="text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })
More detailed information can be found at the link posted by tugberk (SO question and SO answer).
This will not work with IE unfortunately. At least IE9 and earlier. I spent couple hours pulling my hair as to why this helped others and doesn't work here. Apparently IE won't show prompts. Hope IE10 will address the issue.
The placeholder attribute is not supported in earlier versions of IE, so for the Display[(Promt="...")] to work fine I recommend to use (along with the String template as Samack described) any jQuery watermark plugin (I used the google one) then add this to the Document.Ready function:
$(document).ready(function(){
$(':text').watermark({ textAttr: 'placeholder' });
})
I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development