how can i add a font-size:bold to the groupingName using jqgrid ?
$("#ddGrupare").change(function () {
var groupingName = $(this).val();
if (groupingName != -1) {
$("#list2").jqGrid('groupingGroupBy', groupingName, {
groupOrder : ['desc']
});
}else{
$("#list2").jqGrid('groupingRemove');
}
});
this is my code and i want to add css to groupingName. How can i do that ?
Add this CSS to your stylesheet:
tr.jqgroup td {
font-weight: bold !important;
}
Make sure your stylesheet where you define this CSS rule is included AFTER the jQGrid stylesheet.
Add a style via the .jqgroup class that is applied to your group headers.
Related
I had used SpringRestDoc and want to collapse Table of Contents.
Below my index.adoc
= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:
[[introduction]]
== information
----
Spring Rest Document
----
...
Thanks,
The default template for Asciidoctor does not include functionality to expand/collapse the ToC. You would need to add your own CSS/JavaScript to achieve that goal.
The simplest way to do that is to use a "docinfo" file. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for details.
Here is a very simplistic implementation that demonstrates the concept:
In your document, in the header (say, just under the :doctype: attribute definition), add the line :docinfo: shared.
Create a file called "docinfo.html" in the same folder as your document; this file contains your custom CSS and JavaScript.
Add the following content to the docinfo.html file:
<style>
button.tocSwitch {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('#header')
var button = document.createElement('button')
button.className = 'tocSwitch'
button.innerHTML = 'ToC'
button.addEventListener('click', function (e) {
e.stopPropagation()
var toc = document.querySelector('#toc')
var body = document.querySelector('body')
if (body.classList.contains('toc2')) {
body.classList.remove('toc2')
body.classList.remove('toc-left')
toc.style.display = 'none'
}
else {
body.classList.add('toc2')
body.classList.add('toc-left')
toc.style.display = 'block'
}
})
target.appendChild(button)
})
</script>
This content defines some CSS styling for a button, and some JavaScript the dynamically creates the button, adds the button to the header of the page, and an event listener such that when you click the button, the appropriate class name and CSS style adjustments are made to show/hide the ToC.
I have an issue when using bootstrap 3 & prototype.js together on a magento website.
Basically if you click on the dropdown menu (Our Products) & then click on the background, the dropdown menu (Our Products) disappears (prototype.js adds "display: none;" to the li).
Here is a demo of the issue:
http://ridge.mydevelopmentserver.com/contact.html
You can see that the dropdown menu works like it should without including prototype.js on the page at the link below:
http://ridge.mydevelopmentserver.com/
Has anyone else ran into this issue before or have a possible solution for the conflict?
EASY FIX:
Just replace Magento's prototype.js file with this bootstrap friendly one:
https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js
You can see the changes made in the prototype.js file to fix the bootstrap issue here:
https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554
NOTE: JQuery must be include in your magento skin before prototype.js.. Example:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
I've also used code from here: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework but without a need to modify any source. Just put code below somewhere after prototype and jquery includes:
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip',
'hide.bs.popover',
'hide.bs.tab'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
Late to the party, but found this github issue which links to this informational page which links to this jsfiddle which works really nicely. It doesn't patch on every jQuery selector and is, I think, the nicest fix by far. Copying the code here to help future peoples:
jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
};
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);
}
Using the * selector with jQuery is not advised. This takes every DOM object on the page and puts it in the variable.
I would advice to select the elements that use a Bootstrap component specific. Solution below only uses the dropdown component:
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('.dropdown');
jQuery.each(['hide.bs.dropdown'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
Very late to the party: if you don't feel like having extra scripts running, you can add a simple CSS override to prevent it from getting hidden.
.dropdown {
display: inherit !important;
}
Generally the use of !important in CSS is advised against, but I think this counts as an acceptable use in my opinion.
see http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/.
It's quite an easy fix to validate the namespace of the element clicked.
Add a validation function to prototype.js:
and after that, validate the namespace before the element will be hidden:
hide: function(element) {
element = $(element);
if(!isBootstrapEvent)
{
element.style.display = 'none';
}
return element;
},
Replacing Magento's prototype.js file with the bootstrap friendly version suggested by MWD is throwing an error that prevents saving configurable products:
Uncaught TypeError: Object [object Array] has no method 'gsub' prototype.js:5826
(Running Magento Magento 1.7.0.2)
evgeny.myasishchev solution worked great.
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
This answer helped me to get rid of bootstrap and prototype conflict issue.
As #GeekNum88 describe the matter,
PrototypeJS adds methods to the Element prototype so when jQuery tries
to trigger the hide() method on an element it is actually firing the
PrototypeJS hide() method, which is equivalent to the jQuery
hide() method and sets the style of the element to display:none;
As you suggest in the question itself either you can use bootstrap friendly prototype or else you can simply comment out few lines in bootstrap as bellow,
inside the Tooltip.prototype.hide function
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
I realise that this is a pretty old post by now, but an answer that no-one else seems to have mentioned is simply "modify jQuery". You just need a couple of extra checks in jQuery's trigger function which can be found around line 332.
Extend this if statement:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {
... to say this:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
// Check for global Element variable (PrototypeJS) and ensure we're not triggering one of its methods.
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) &&
( !window.Element || !jQuery.isFunction( window.Element[ type ] ) ) ) {
"#6170" only seems to be mentioned in jQuery once so you can do a quick check for that string if you're working with a compiled (complete) jQuery library.
I just wonder if anyone know if it's possible to add a break point on a specific css property on a specific element in Chrome Dev Tools, i.e when #mydiv's height property has changed, break.
You can only break on all inline style (<div style="height: 20px; width: 100%">) changes using the Elements panel context menu's Break on... | Attributes modifications.
You can do it this way:
function observe(el, property) {
var MutationObserver = window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('old', mutation.oldValue, 'new', mutation.target.style.cssText, 'mutation', mutation);
if (mutation.attributeName == property) debugger;
});
}
);
var config = {
attributes: true,
attributeOldValue: true
}
observer.observe(el, config);
}
Then you can set breakpoint on style change like this: observe(element, "style")
It will break when it changes and also print in console old and new value.
I have rendered a grid that way:
myGrid = new Slick.Grid("#grid", myDataView, myColumns, myOptions);
myDataView.beginUpdate();
myDataView.setItems(myDataset);
myDataView.endUpdate();
it is ok.
Now i need to change css class name in certain column. I do:
myGrid.onSort.subscribe(function(e, args) {
args.sortCol.headerCssClass = 'newClassName';
});
What i need to do now to see changes in DOM?
I found this solution:
myGrid.onSort.subscribe(function(e, args) {
args.sortCol.headerCssClass = 'newClassName';
var columns = myGrid.getColumns();
myGrid.setColumns(columns);
});
Is this solution most elegant? Is there a proper method?
Are you trying to change the style of the "sorted-by" header column. If this is indeed the case, why don't you modify the slick-header-column-sorted CSS selector?
For instance, the following rule would bold the title of the "sorted-by" header column:
.slick-header-column-sorted
{
font-weight: bold;
}
I have been trying every possible combination of cufon.replace - Cufon.refresh and Cufon.reload but i just cant seem to get this working. when original page loads cufon does its job, but when Ajax loads new content the cufon is missing. here is my java hope this makes sense to anyone, Cufon fires first, followed by Ajax,
jQuery.noConflict();
/*
* TYPOGRAPHY
*/
Cufon.set('fontFamily', 'ColaborateLight');
Cufon.replace('h2, #main h3, h4, h5, h6, #slogan, .label', {
hover: true
});
Cufon.set('fontFamily', 'Colaborate-Medium');
Cufon.replace('#main_home h3', {
hover: true
});
jQuery(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = jQuery('#nav2 li a').each(function(){
var href = jQuery(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
jQuery('#content').load(toLoad)
}
});
jQuery('#nav2 li a').click(function(){
jQuery("#nav2 li a").addClass("current").not(this).removeClass("current");
var toLoad = jQuery(this).attr('href')+' #content';
jQuery('#content').hide('fast',loadContent);
jQuery('#load').remove();
jQuery('#wrapper').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);
function loadContent() {
jQuery('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#content').show('normal',hideLoader());
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
and this is the pages in question that im having trouble with.
Climate Page
You will see the Ajax loader at the bottom of the page with a secondary menu list.
I'm desperate guys, please help...
I had the same issue, couldn't get this to work:
$("#my_div").load('some-ajax-file.php', Cufon.refresh);
But, wrapping Cufon.refresh in a function did the trick:
$("#my_div").load('some-ajax-file.php', function() { Cufon.refresh(); });
this worked for me...
$(document).ajaxSuccess(function() {
Cufon.refresh();
});
You could try this:
function showNewContent() {
Cufon.refresh();
jQuery('#content').show('normal',hideLoader());
}
This is also discussed in the cufon api docs - https://github.com/sorccu/cufon/wiki/API
After ajax response you can simply use
Cufon.refresh();
That will reload cufon font style
Try adding this:
$(document).ajaxSuccess(function() {
Cufon('h2'); // or whatever other cufon calls, really...
});
$(document).ajaxSuccess(function() { Cufon.refresh(); });
Hope it helps :)
I had same problem, and to make faster resolution made an in-line CSS
<h5 style="font-family:xxx, Helvetica, sans-serif"></h5>
<style type="text/css">
#font-face {
font-family: SWZ721C;
src: url('../../includedfiles/xxx.TTF');
}
#font-face {
font-family: MyCustomFont;
src: url("../../includedfiles/xxx.eot") /* EOT file for IE */
}
</style>