I would like to give users the ability to hide the filters sidebar so that it appears and disappears at the push of a button. Is this possible?
Thanks.
By default, this feature is not included in the PrestaShop, but you can create it.
Add the new button for example to the themes/classic/templates/catalog/_partials/category-header.tpl
<button class="btn" id="show_hide_filter">Show/hide filters</button>
and with manipulate the DOM with jQuery
document.addEventListener("DOMContentLoaded", function() {
$('#show_hide_filter').click(function () {
if($("#left-column").is(":visible")){
$("#left-column").hide();
$('#content-wrapper').addClass('col-lg-12');
}else{
$("#left-column").show();
$('#content-wrapper').removeClass('col-lg-12');
}
})
});
I'm trying to create a window with a custom action using Angular-Kendo, and have reached a problem.
When using Kendo (minus angular) i would add functionality like explained here:
window.data("kendoWindow").wrapper.find(".k-i-custom").click(function(e){
alert("Custom action button clicked");
e.preventDefault();
});
However, in Angular-Kendo, access to the window object is by $scope.windowname and is only available after the kendo-window="windowname" directive.
I am currently bypassing this by binding the actions at the k-on-open like...
var firstLoad = true;
this.onOpenCallback = function () {
if (firstLoad) {
$scope.messageBodyWindow.wrapper.find(".k-i-custom").click(function (e) {
alert("OMG");
});
firstLoad = false;
}
This solution, however, feels like a cheap hack. is there a "proper" way to achieve this?
You could wrap the Angular-Kendo directive in a custom directive and put the desired functionality into the link function. This will register your custom binding once without any of this 'first time opening the window boolean' hackery.
<div custom-kendo-window>
</div>
The custom directive contains the kendo directive in its template...
.directive('customKendoWindow', function(){
return {
template: '<div kendo-window="win" k-title="\'Window\'" k-width="600" k-height="200" k-visible="false"> <div id="customAction" style="cursor: pointer;">custom click action</div></div>',
link: function(scope, element, attrs){
$('#customAction').bind('click', function(){
alert('Custom action fired!');
})
}
}
})
Here is a code pen showing the simple wrapper as shown above and then a configurable wrapper with the click binding being set up in the link functions of each of the directives.
I'm working on an iPad app using Kendo and the DropDownList is throwing an ActionSheet. I'd like to force it to use the Web UI list style. How can I do this?
For anyone interested I was able to hack together a solution. Here's a function that accepts a kendoMobileView as the argument and applies the fix.
//Hack to force dropdowns to act like comboboxes in mobile!
utils.fix.dropdownlists = function(view) {
var dropdowns = view.element.find("[data-role='dropdownlist']");
//Iterate through dropdown elements
_.each(dropdowns, function(item){
var comp = $(item).data("kendoDropDownList");
if(comp && comp.popup) {
comp.popup.bind("open", function(event){
event.sender.element.parent().removeClass("km-popup km-widget");
if(event.sender.element.parent().hasClass("km-popup")) {
//Prevent default open animation.
//Then remove classes and open the popup programitcally
//Easy peasy, Lemon squeezy
event.preventDefault();
event.sender.element.parent().removeClass("km-popup km-widget");
setTimeout(function(){
event.sender.open();
},0);
}
});
}
});
}
I have a page where I have multiple editors with the class ".ckeditor".
I'm trying to update the values on blur, but blur does not trigger.
$(".ckeditor").on("blur", function() {
console.log("blur");
for (var i in CKEDITOR.instances) {
console.log(i);
CKEDITOR.instances[i].updateElement();// to update the textarea
}
});
Anyone know if they've totally changed its behaviour in ckeditor 4?
Try adding the event in a way like so
CKEDITOR.instances.editor1.on('blur', function(e) {
console.log('onblur fired');
});
I am using Asp.Net MVC3, for a project.
In one of the page, I am using MS Charts. In View I have a Image which shows the chart as follows:
<img src="#Url.Action("RenderCharts", "Home", new
{
XAxisColor = ViewBag.XAxisColor,
YAxisColor = ViewBag.YAxisColor,
})" alt="Charts" runat="server" />
I have 2 CheckBoxes, which is used to change Chart Axes Colors. When the checkbox is clicked, page is submitted and checkbox status is stored and based on that Chart is rendered:
bool XAxisColor = (#ViewBag.XAxisColor) ?? true;
bool YAxisColor = #ViewBag.YAxisColor ?? false;
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor",
onClick = "this.form.submit();" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter",
onClick = "this.form.submit();" })
Y Axis Color
When first time the page is loaded, RenderCharts() Action gets called and Chart is rendered.
But when i Click any of the CheckBox, RenderCharts() Action gets called twice.
I could not understand this issue. I have created a sample Application which can be downloaded from here https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip
Any help would be appreciated. Thanks in advance.
This appears to be something to do with Internet Explorer. Using your sample application, everything works fine in both Google Chrome and Firefox, but when using IE9, there are two Action requests on a postback.
Using the F12 developer tools on the network tab, it shows an initial request to RenderCharts which appeared to be aborted:
The (aborted) line in the middle is, I suspect, the additional request you're seeing. Why this happens, I don't know!
Finally got the answer. The problem was
runat="server"
in the Img tag.
Removing runat fixed the issue.
I can eliminate the IE issue in the following manner by simply using a bit of JQuery instead. A few possible advantages...
It eliminates the cross-browser issue.
It is an unobtrusive approach (not mixing javascript and HTML in the view).
You can update the image via ajax.
Create a new file in the scripts folder (e.g. "chart.js") which will simply attach an anonymous function to the the click events of your checkboxes from the document ready function. You would obviously need to include the script reference in your page as well:
$(document).ready(function () {
// Attach a function to the click event of both checkboxes
$("#chkXAxisColor,#chkScatter").click(function () {
// Make an ajax request and send the current checkbox values.
$.ajax({
url: "/Home/RenderCharts",
type: "GET",
cache: false,
data: {
XAxisColor: $("#chkXAxisColor").attr("checked"),
YAxisColor: $("#chkScatter").attr("checked")
},
success: function (result) {
alert(result);
$("#chart").attr("src", result);
}
});
});
});
Best of all, you get to eliminate the javascript from your view :)
...
<div style="margin: 2px 0 2px 0">
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter" })
Y Axis Color
</div>
...
This is of course a very basic example which does eliminate the IE issue but you could get fancier from there in terms of how you update the image + show a loading gif, etc with only a few more lines.
Hopefully it is a workable solution for you!