Is there any solution how to set the background-image to BlogEngine.NET post header. I'm trying to modify custom them PostView.ascx to get first image from post body and set it as background-image to post header, but there is only and i don't know how to get image url from it.
My workaround is that user must added in post editor class "imgheader" to picture which he wants to set as background to post header. Then add
.imgheader {display: none;} to styles.css
Then add script to theme site.master
<script type="text/javascript">
var updateImageHeaders = function() {
var postArticles = document.evaluate("//article[contains(#class,'post-home')]", document, null, null, null);
var article = postArticles.iterateNext();
while (article != null) {
var imgheader = article.getElementsByClassName("imgheader");
if (imgheader.length > 0) {
var postHeader = article.getElementsByClassName("post-header");
if (postHeader.length > 0) {
var imgSrc = imgheader[0].getAttribute("src");
postHeader[0].style.backgroundImage = 'url(' + imgSrc + ')';
}
}
article = postArticles.iterateNext();
}
};
document.addEventListener('DOMContentLoaded', function () {
updateImageHeaders();
});
</script>
Related
I am looking for function for WooCommerce which change meta title text in non-active tab. Anybody know how can I do it? I find this JS code but it does not work in themes function.php file:
$(function() {
var message = "Don't forget us";
var original;
$(window).focus(function() {
if (original) {
document.title = original;
}
}).blur(function() {
var title = $('title').text();
if (title != message) {
original = title;
}
document.title = message;
});
});
The following goes into functions.php
add_action('wp_head', function () {
?>
<script>
(function () {
var message = "Don't forget us"
var original
jQuery(window).on("focus", function () {
if (original) {
document.title = original
}
}).on("blur", function () {
var title = jQuery("title").text()
if (title != message) {
original = title
}
document.title = message
})
})()
</script>
<?php
});
You can put that script into a tag <script></script> in the footer.php file wich should be located in your theme (don't forget to actually duplicate this file inside your child theme)
EDIT: Also make sur to have JQuery in your frontend
I would like to be able to change the background color of the address bar in firefox based on the protocol. How can I do that?
e.g. when https is used, bg-color: blue
mixed content warning: orange
ev-certificate: green
invalid cert: red
This is how I did it long ago, in Firefox 7, looking at it now it has lots of problems, but it does the trick you need, should definitely improve on the code though:
var {Cc, Ci} = require('chrome');
var sss = Cc['#mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var ios = Cc['#mozilla.org/network/io-service;1'].getService(Ci.nsIIOService);
var windowUtils = require('window-utils');
var wm = Cc['#mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);
exports.main = function() {
//nothing to export
};
var aWin = wm.getMostRecentWindow('navigator:browser'); //aWin stands for anyWindow. this is used by stuff to use functions like encodeURI
//hide the extended label when a page is verified
var identityBoxCss = '.verifiedDomain .plain {display:none}';
var identityBoxCssData = 'data:text/css;charset=utf-8,' + aWin.encodeURI(identityBoxCss);
var identityBoxCssUri = ios.newURI(identityBoxCssData, null, null);
//end hide the extended label when a page is verified
//url bar colorize
var gUrlBarColorize = {
func: function(win) {
var identityIconLabel = win.document.getElementById('identity-icon-label');
var identityBox = win.document.getElementById('identity-box');
var gURLBar = win.gURLBar;
if (gURLBar.value.search(/https/i) == 0) {
if ((identityBox.classList.contains('verifiedDomain') || identityBox.classList.contains('verifiedIdentity'))&& identityIconLabel.value.length > 0) {
gURLBar.style.backgroundColor = '#D0F7B9';
} else {
gURLBar.style.backgroundColor = '#F8D6DE';
}
} else {
gURLBar.style.backgroundColor = '';
}
}
};
//end - url bar colorize
//hide icons in bookmarks toolbar
var bookmarksToolbarCss = '.bookmark-item .toolbarbutton-icon {display:none}';
var bookmarksToolbarCssData = 'data:text/css;charset=utf-8,' + aWin.encodeURI(bookmarksToolbarCss);
var bookmarksToolbarCssUri = ios.newURI(bookmarksToolbarCssData, null, null);
//end - hide icons in bookmarks toolbar
var wt = new windowUtils.WindowTracker({
onTrack: function (window) {
//hide the extended label when a page is verified
var IdentityBox = window.document.getElementById('identity-box');
if (IdentityBox) {
if (sss.sheetRegistered(identityBoxCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
sss.loadAndRegisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
//end hide the extended label when a page is verified
//url bar colorize
if (window.gBrowser) {
window.FF7TweaksForScot = {}
window.FF7TweaksForScot.gUrlBarColorize = function() { gUrlBarColorize.func(window) };
window.FF7TweaksForScot.gUrlBarColorize();
window.gBrowser.addEventListener('load', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.addEventListener('pageshow', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.tabContainer.addEventListener('TabSelect', window.FF7TweaksForScot.gUrlBarColorize, true);
}
//end - url bar colorize
//hide icons in bookmarks toolbar
var PlacesToolbarItems = window.document.getElementById('PlacesToolbarItems');
if (PlacesToolbarItems) {
if (sss.sheetRegistered(bookmarksToolbarCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
sss.loadAndRegisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
//end - hide icons in bookmarks toolbar
},
onUntrack: function (window) {
//hide the extended label when a page is verified
var IdentityBox = window.document.getElementById('identity-box');
if (IdentityBox) {
if (sss.sheetRegistered(identityBoxCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
}
//end hide the extended label when a page is verified
//url bar colorize
if (window.gBrowser) {
window.gURLBar.style.backgroundColor = '';
window.gBrowser.removeEventListener('load', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.removeEventListener('pageshow', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.tabContainer.removeEventListener('TabSelect', window.FF7TweaksForScot.gUrlBarColorize, true);
delete window.FF7TweaksForScot;
}
//end - url bar colorize
//hide icons in bookmarks toolbar
var PlacesToolbarItems = window.document.getElementById('PlacesToolbarItems');
if (PlacesToolbarItems) {
if (sss.sheetRegistered(bookmarksToolbarCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
}
//end - hide icons in bookmarks toolbar
}
});
Please help!!!! I'm including a link to a page with a menu I would like to use for a site I'm building. I can't seem to figure out how to get the ".menu-outer" to reposition itself after I click on a link in the nav. I've tried all sorts of combinations of code but to no available. Could anyone be of any assistance?
http://cssdeck.com/labs/css-side-menu
The Menu has a hover effect that moves the menu back and forth, but I would also like the links to allow the menu to retract once a page link is clicked.
Thank You
You never mentioned using Javascript but here is a version that uses it to close the menu once and item is clicked (Note: from the url below a slight change to the css):
var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');
var addClass = function(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
removeClass(element, className);
element.className = (element.className + ' ' + className).replace(/^\s/, '');
}
};
var removeClass = function(element, className) {
if (className.indexOf('*') !== -1) {
var aryClasses = element.className.split(' ');
for (var i = 0; i < aryClasses.length; i++) {
if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
element.removeClass(aryClasses[i]);
}
}
} else {
if (element.classList) {
element.classList.remove(className);
} else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
};
var open = function() {
console.log('opening');
addClass(menu, 'active');
};
var close = function() {
console.log('closing');
removeClass(menu, 'active');
};
if (menu) {
menu.addEventListener('mouseover', open, false);
menu.addEventListener('mouseout', close, false);
for (var l = 0; l < links.length; l++) {
var link = links[l];
link.addEventListener('click', close, false);
}
}
jQuery would be something like:
$('body').on('click', 'nav ul li a', function() {
$('.menu-outer').removeClass('active');
});
$('body').on('mouseover', '.menu-outer', function() {
$(this).addClass('active');
});
$('body').on('mouseout', '.menu-outer', function() {
$(this).removeClass('active');
});
http://cssdeck.com/labs/x0lpogde
Is there a way to get all the CSS rules that are applied to a page? Currently, I'm using jQuery to do it, but is there a server side solution?
var style = "";
//grab all styles defined on the page
$("style").each(function () {
style += $(this).html() + "\n";
});
$.ajaxSetup({ async: false });
//grab all styles referenced by stylesheet links on the page
$("[rel=stylesheet]").each(function () {
$.get(this.href, '', function (data) {
style += data + "\n";
});
});
$.ajaxSetup({async: true});
style = "<style type='text/css'>" + style + "</style>";
You can try with HtmlHead.StyleSheet property
Link : http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlhead.stylesheet.aspx
I'm trying to manually clean the HTML of a Telerik RadEditor with Javascript but I can't seem to find the correct place to store the value so that it gets saved on post back.
Here's the JS I have:
$(function () {
jQuery.fixHash = function ($html) {
// modify $html
return $html;
};
$("#adminEditingArea input[id$='SaveButton']").unbind("click").click(function () {
$("iframe[id$='_contentIframe']").trigger("save");
// call .net postback
return false;
});
});
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
$body.html(html);
// also tried storing the modified HTML in the textarea, but it doesn't seem to save:
//$thisFrame.prev("textarea").html(encodeURIComponent("<body>" + html + "</body>"));
}
});
editorSaveEventInit = true;
}
}
};
$(window).load(function () {
InitSaveEvent();
});
Is there any way to access the Telerik RadEditor object with JavaScript (using OnClientCommandExecuted()?) so that I can access the .get_html() and .set_html(value) functions? If not, what values do I need to set before posting back?
Why don't you use custom content filters.
Ah, just discovered Telerik's built-in $find() function: http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html
Edit: here's the solution I came up with for my InitSaveEvent() function:
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
// SOLUTION!
var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
var editor = $find($radeditor.attr("id"));
editor.set_html(html);
// ☺
}
});
editorSaveEventInit = true;
}
}
};