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');
}
})
});
Related
I have a link and a css hidden div:
Click me
<div class="bio">Your bio</div>
When I click the link, it shows the div. Refresh the page, and it's hidden again. I want the 'bio' div to stay open even when refreshing the page if the link was clicked and the div shown. I also want the opposite, that if I clicked the link again and the 'bio' div get hidden, to stay hidden on page refresh.
Basically, I am trying to "persist" the toggle state of the div in Laravel, and not sure how to do it.
I am using jquery for the show/hide functionality.
$('.bio-toggler').click(function(){
$('.bio').toggle();
});
Any ideas on how to do this?
Just do an AJAX POST to an endpoint within your application which sets the variable. When you're showing you're HTML, just check for that.
jQuery:
$.ajax({
type: "POST",
url: 'http://localhost:8000/api/profile/toggle',
success: function() {}
});
Controller:
public function toggle()
{
Session::set('toggled', true);
}
View:
#if (Session::get('toggled'))
Click me
<div class="bio">Your bio</div>
#endif
This is just boilerplate. You would probably have to tune it, like check if there is an older value to toggle in PHP, etc.
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 am new to JQM and I'm using Phongeap with JQM for a new project.
My javascript is in one single js file and I'm loading the views from multiple html files.
As the transitions of the siede panel are poor, when I change pages via <a href="page2.html"> I tried to to use event listeners for the Menuitems.
function setPanelListeners(){
$('#menu_search').click(function() {
switchPageTo('search.html');
});
$('#menu_schedule').click(function() {
switchPageTo('program.html');
});
$('#menu_news').click(function() {
switchPageTo('news.html');
});
}
I call this function on the pagebeforeshoe event of each page. To fix the transitions to the way I need it, I use this function
// Close Panel then change page
function switchPageTo(url){
$('#menupanel').panel('close');
setTimeout(function() {
$.mobile.changePage( url, { transition: 'fade'} );
},200);
}
So here is the Problem. It actually works fine on the first page. But on the second page the Menuitems won't work, I guess the event listers are not listening for the new panel, because in the html the panel is loaded twice! And the Event listeners only listen for the first panel (from the first page) which is not displayed on the second page.
Any help is appreciated!
Are you adding panel dynamically on the second page? In JQM 1.3 you have to add panel separately to each page, although this restriction will be removed in future versions.
Use event delegation for dynamic panels:
$(document).on('click' ,'#menu_search' function() {
switchPageTo('search.html')
});
I have a page with links of class 'dialog' that generate in JQueryUI dialog when clicked. Those dialogs are created from other elements present on the page, and can contain links of class 'add_tab', that should create a new JQueryUI [tab] (http://jqueryui.com/demos/dialog/) when clicked. Those tabs load their content via Ajax and consist identical structures. This means that an 'add_tab' link in a dialog creates a new tab, which contains 'dialog' links that generate dialogs containing further 'add_tab' links, and so on.
This is the basic HTML structure:
<div id="tabs">
<ul>
<li>tab 1</li>
</ul>
<div id="tabs-1">
<p>This tab contains a popup and a direct link to a new tab.</p>
<div id="popup1" style="display:nonee;">This popup contains a link to a new tab.</div>
</div>
Using JQuery 1.7's .on() method, I have troubles with properly registering the click handler for 'add_tab' links that appear in dialogs on added tabs. I manage to register the click handlers for the 'dialog' links in newly generated tabs (so that they generate a dialog), but fail to register click handlers for 'add_tab' links that appear inside those dialogs. I've put a simplified test version online at http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm. Take, for example following scenario:
on http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm , click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will generate a new JQueryUI tab
in the the newly added tab labeled 'tabs2.htm', click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will NOT generate a new JQueryUI tab, but instead open the target in a new window
==> this illustrates how this event handler is apparently NOT registered correctly for 'add_tab' links that occur inside dialogs that are generated in newly added tabs
in the tab labeled 'tabs2.htm', click 'new tab': this will generate a new JQueryUI tab
==> this illustrates how this event handler is registered correctly for 'add_tab' links that occur directly inside newly added tabs
This is my javascript code:
// these event registrations register clicks on $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
// note: this event registration works for all such links on the original page
$('a.dialog').on('click', function(){
$($(this).attr('href')).dialog();
return false;
});
$('a.add_tab').on('click', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function(){$(this).dialog('close')})
return false;
});
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
$tabs.tabs($tabs.tabs('option', 'selected'))
.on('click', 'a.dialog', function(){
$($(this).attr('href')).dialog();
return false;
})
// this registration doesn't seem to work for <a class="add_tab"> links occurring inside generated JQueryUI dialogs inside added JQueryUI tabs
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
return false;
});
}
});
I'm nearly there! Could anyone help me out with the last event handler in the code above? Any help is much appreciated!
The idea with event delegation is to bind the event on a parent that is fixed on the page (not created dynamically). Using the selector parameter of the .on() method allows telling for which elements the event handler should be fired for.
In your code you are using event binding in two ways, event if you use .on():
first you do direct binding on the existing elements a.dialog and a.add_tab - this will only work for the links on tab1 as they are the only the ones existing at the time the code is executed, no event delegation here.
when adding a tab, you are doing event delegation on the tab container $tabs:
for the links to open a dialog with $tabs.on('click', 'a.dialog', function(){ ... }) - this works as expected because the link a.dialog are indeed within the tab container.
for the links in the dialog with $tabs.on('click', 'a.add_tab', function(){ ... }) - this won't work because when the dialog is created, the plugin moves the <div id="popup2"> at the end of the body (before </body>). So when you click the a.add_tab inside the dialog, it is not a descendant of the tab container anymore and event delegation does not happen.
Here's what I would do:
to avoid repeating the same code, declare your event handlers as variables
use event delegation on the tab container for links a.dialog and a.add_tab
when creating a new dialog, use event delegation on the dialog for the a.add_tab links it will contain
Here's the code:
var addTabClickHandler = function(e) {
$tabs.tabs("add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function() {
$(this).dialog('close')
})
return false;
};
var dialogOpenClickHandler = function(e) {
$($(this).attr('href'))
.dialog()
.on('click', 'a.add_tab', addTabClickHandler);
return false;
}
var $tabs = $("#tabs").tabs({
add: function(event, ui) {
$tabs
.tabs('select', '#' + ui.panel.id)
.tabs($tabs.tabs('option', 'selected'));
}
});
$tabs
.on('click', 'a.dialog', dialogOpenClickHandler)
.on('click', 'a.add_tab', addTabClickHandler);
Meanwhile I've come up with a workaround that just registers the event handlers once on the 'tabs' container and appends the dialog to the 'tabs' container upon creation. My initial code could thus be trimmed down to:
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
create: function(event, ui) {
$(this)
.on('click', 'a.dialog', function(){
// dialog: upon creation, move the dialog to the tab to ensure delegated event registration
$($(this).attr('href')).dialog().parent('.ui-dialog').appendTo($tabs);
return false;
})
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), $(this).attr('href'));
$('.ui-dialog-content').dialog('close');
return false;
})
}
});
Here's what I've made so far:
// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />
I have created a jQuery script:
// in the head section of the page...
<script type="text/javascript">
$('#uploadContactImage').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
Finally, I have a javascript file with the empty function:
function uploadImage() {
}
The use case should be: User clicks the image, the dialog pops up. Based on the button the user has clicked, certain functions should be called.
Please note that my image tag is generated through AJAX, i.e. the jQuery script is not connected to it. That's the first problem.
The second problem is that I don't know how to call the jQuery script to actually display the dialog.
The third and the last problem is that I don't know how to handle the choice the user makes.
As you must have concluded by now, I am a complete newbie when it comes to jQuery. Can you help me out to get started? Thanks.
Boris,
This is quite simple to do. Firstly, I would not use an onClick event as jQuery has much better ways to manage this. Instead, it should look as follows:
HTML:
<img alt="" src="images/frame.png" id="imageUpload" />
jQuery:
$('img#imageUpload').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
First you'll need some hook, or path, to select the image element. Second, since it's added to the page after the document load you'll need to attach the event listener after the response.
select the element
So if you have control of the html returned via ajax add an id to it and select it trivially with jquery:
<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />
...and someplace in the ajax callback...
$("#pickME").click(...
If you can't add the id you'll have to drill down to it by starting from the wrapping element and looking for the img descendant.
attach the event
you can't attach the click event when the document is "ready" because the ajax hasn't inserted it into the document yet. So the thing here is to add the event handler after the img is inserted into the document. So you need to catch that event so you know when its time to add your click event.
ajax(...
success: function(data){
...stuff data into document...
$("#pickME").click(function(){
...attach the dialog to the element...
you might be out of your depth ;-)