When I use image markdown like , for some images Jekyll is adding class="full-img", making the image larger than it should be.
I observe the same behavior with both redcarpet and kramdown.
Why is that happening / how do I stop it?
I have the similar issue.
In my case I use theme kasper .
I found that class full-img was not added by markdown engine, but the JavaScript code that author wrote in the assets/js/index.js file.
There's a function saying
function updateImageWidth() {
var $this = $(this),
contentWidth = $postContent.outerWidth(), // Width of the content
imageWidth = this.naturalWidth; // Original image resolution
if (imageWidth >= contentWidth) {
$this.addClass('full-img');
} else {
$this.removeClass('full-img');
}
}
After commenting every picture works fine as the original class.
That's my case.
Hopes that works for you.
Related
I've created a small app to view all local fonts on a browser. (Demo).
I'm using Flash to get font names:
import flash.external.ExternalInterface;
ExternalInterface.call("getFontList", getDeviceFonts());
function getDeviceFonts(): Array {
var embeddedAndDeviceFonts: Array = Font.enumerateFonts(true);
var deviceFontNames: Array = [];
for each(var font: Font in embeddedAndDeviceFonts) {
deviceFontNames.push(font.fontName);
}
deviceFontNames.sort();
return deviceFontNames;
}
and later process the names and create a 4 column layout to view them:
function getFontList(fontList) {
$("#flash").remove();
fontList.forEach(function (fontName) {
var cell = elem("div", {"class":"tile"}, [
elem("div", {"class":"fontName"}, fontName),
elem("div", {"class":"demo", "style":"font-family: \"" + fontName.replace(/"/g, '\\"') + "\", Consolas, Arial;"}),
]);
output.append(cell);
});
updateCells($("#input").val());
}
This is working fine, but there's slight problem. Some fonts doesn't render on the browser, and the fallback font is applied.
For example, this font: !PaulMaul. I can view this on MS Word and Photoshop:
and this is how it looks (Consolas applied) on the browser:
I haven't encountered something like this before, so I don't know what the problem is. I thought any local font is usable on the browser, especially if MS Word and PS can render them fine. I guess, that isn't true.
What exactly is the problem here, and is there a way to solve this?
App is available on Github, if anyone wants to tinker.
I am using a template tag in a webkit browser (JavaFX WebView 2.2) to store elements that I may clone and append on the main part of the document.
However, I can't access its content using templateElement.content (the HTML5 standard). Instead, I use jQuery to get the elements inside the template TAG with the selector "#templateElement div".
Seems the template tag is not yet fully supported (inner scripts also run), although its contents are not rendered.
My fear is that, when the template tag becomes supported, the way to get its contents will break and my page will stop working.
What is the recommended way of getting template contents regardless future implementation changes?
HTML:
<template id="templateElement">
<div>Clone Me!</div>
</template>
JavaScript:
function getContentsCurrent() {
var toBeCloned = $("#templateElement div")[0];
//append where needed...
}
function getContentsFuture() {
var toBeCloned = templateElement.content.getElementsByTagName("div")[0];
//append where needed...
}
EDIT
I think jQuery won't be able to handle this automatically, even in the future, because the template "innerHTML" is purposely routed to content so that it becomes inaccessible to the DOM (so no selector touches it accidentally).
You could test if the content feature exists before:
function getContents() {
var toBeCloned;
if ( templateElement.content )
toBeCloned = templateElement.content.getElementsByTagName("div")[0];
else
toBeCloned = templateElement.querySelector("div");
//append where needed...
}
Another way:
var content = templateElement.content || templateElement
var toBeCloned = content.querySelector( "div" )
//...
Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
landing.jade
img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
landing.js
$scope.shareIcons = [
{orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
{orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
{orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
]
$scope.colorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
}
$scope.decolorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
// for (i = 0; i < $scope.members.length; i ++){
// return members[i].source + ",";
// }
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
)
I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/ perhaps you can test optimize a couple of images to see if you notice a change?
GL!
I'm working on a "browser extension" using "Kango Framework" (http://kangoextensions.com/)
When i want to link a css file i have to use external source (href='http://mysite.com/folder/mysite.css), how should i change the href to make is source from the plugin folder ? (ex: href='mylocalpluginfolder/localfile.css')
i've tried 'localfile.css' and putting the file in the same folder as the JS file.
$("head").append("");
How should i change the json file to make it work ? Should i declare the files as "extended_scripts" or "content_scripts" ?
I've a hard time finding support for this framework, even though the admins are awesome !
Thanks for your help. (please do not suggest to use other solutions, because i won't be able to code plugins for IE and Kango is my only option for this). I didn't find any samples matching my need as the only example available on their site is linking to outside content (christmas tree).
If you want to add CSS in page from content script you should:
Get CSS file contents
Inject CSS code in page
function addStyle(cssCode, id) {
if (id && document.getElementById(id))
return;
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (id)
styleElement.id = id;
if (styleElement.styleSheet){
styleElement.styleSheet.cssText = cssCode;
}else{
styleElement.appendChild(document.createTextNode(cssCode));
}
var father = null;
var heads = document.getElementsByTagName("head");
if (heads.length>0){
father = heads[0];
}else{
if (typeof document.documentElement!='undefined'){
father = document.documentElement
}else{
var bodies = document.getElementsByTagName("body");
if (bodies.length>0){
father = bodies[0];
}
}
}
if (father!=null)
father.appendChild(styleElement);
}
var details = {
url: 'styles.css',
method: 'GET',
async: true,
contentType: 'text'
};
kango.xhr.send(details, function(data) {
var content = data.response;
kango.console.log(content);
addStyle(content);
});
I do it another way.
I have a JSON containing the styling for specified web sites, when i should change the css.
Using jQuery's CSS gives an advantage on applying CSS, as you may know css() applying in-line css and inline css have a priority over classes and IDs defined in default web pages files and in case of inline CSS it will override them. I find it fine for my needs, you should try.
Using jQuery:
// i keep info in window so making it globally accessible
function SetCSS(){
$.each(window.skinInfo.css, function(tagName, cssProps){
$(tagName).css(cssProps);
});
return;
}
// json format
{
"css":{
"body":{"backgroundColor":"#f0f0f0"},
"#main_feed .post":{"borderBottom":"1px solid #000000"}
}
}
As per kango framework structure, resources must be placed in common/res directory.
Create 'res' folder under src/common folder
Add your css file into it and then access that file using
kango.io.getResourceUrl("res/style.css");
You must add this file into head element of the DOM.
This is done by following way.
// Common function to load local css into head element.
function addToHead (element) {
'use strict';
var head = document.getElementsByTagName('head')[0];
if (head === undefined) {
head = document.createElement('head');
document.getElementsByTagName('html')[0].appendChild(head);
}
head.appendChild(element);
}
// Common function to create css link element dynamically.
function addCss(url) {
var css_tag = document.createElement('link');
css_tag.setAttribute('type', 'text/css');
css_tag.setAttribute('rel', 'stylesheet');
css_tag.setAttribute('href', url);
addToHead(css_tag);
}
And then you can call common function to add your local css file with kango api
// Add css.
addCss(kango.io.getResourceUrl('res/style.css'));
Anyone knows how to get the variant tabs to work as actual tabs and not as a drop down?
This is how sr.wikipedia.org has it:
and this is how I have it on my zablude.com/wiki/ page:
and I've tried everything I found and searched everywhere I could think of but I wasn't able to find a solution... anyone has any ideas how this works?
They hack it in JavaScript — see this piece of code at the bottom of Медијавики:Vector.js:
//to be able to switch the language variant (overrides the default buttons with more visible ones)
function tabWorkaround() {
if(mw.config.get('wgUserVariant') == 'sr') {
var tab_urls = {};
tab_urls[0] = document.getElementById('ca-varlang-0').getElementsByTagName('a')[0].href; //Ћирилица
tab_urls[1] = document.getElementById('ca-varlang-1').getElementsByTagName('a')[0].href; //Latinica
$('#p-variants').remove();
mw.util.addPortletLink('p-namespaces', tab_urls[0], 'Ћирилица');
mw.util.addPortletLink('p-namespaces', tab_urls[1], 'Latinica');
}
}
$(document).ready(tabWorkaround);
It would probably be cleaner to do it with a MediaWiki hook, though. The following code is untested, but should work if I haven't made any silly mistakes:
// show language variants as tabs in Vector skin
function tabWorkaround( &$skintemplate, &$links ) {
$links['namespaces'] += $links['variants'];
$links['variants'] = array();
return true;
}
$wgHooks['SkinTemplateNavigation::Universal'][] = 'tabWorkaround';
(In MW 1.17, this hook is only called from the Vector skin. In MW 1.18, it will affect all skins. If you don't want that, you could test whether $skintemplate->skinname == 'vector'.)
Try $wgVectorFeatures['collapsibletabs']['global'] = false;. That is intended for the dropdown on the other side, but might work for other dropdowns as well.