this is my script coding for left side menu slide left and right. I want to convert it into angularJS, I copied it from other website and unable to understand.
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeftPush = document.getElementById('showLeftPush'),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
function disableOther(button) {
if (button !== 'showLeftPush') {
classie.toggle(showLeftPush, 'disabled');
}
}
</script>
I can see that this code is some sort of toggle functionality. So let me try to explain how we can convert this!
The code starts at the onclick, so in angular that will be ng-click, also in angular you can write this in the HTML like so
<button id="showLeftPush" ng-click="test=!test;" ng-init="test=false;" ng-class="{'active': test, 'disabled': test}"></button>
In the above line, I will initialize test variable to false. then ng-click will toggle this variable. Then you are toggling the active class for the button. So the angular equivalent for that will be ng-class where the test will be a boolean, if test is true, then the class will be added. I do the same thing for disabled class also.
Similarly I add the other classes to the other element like.
Body HTML:
<body ng-class="{'cbp-spmenu-push-toright': test}" ng-controller='MyController' ng-app="myApp">
Div with ID - cbp-spmenu-s1:
<div id="cbp-spmenu-s1" ng-class="{'cbp-spmenu-open': test}">left</div>
Please use this as a starting point and continue building you angular App.
I have included a demo for your reference.
JSFiddle Demo
Related
I've been following a guide to collapse a sidebar. I realised that I cannot use the $ because it's reserved in Svelte. Can someone guide me on how to make this work? Thanks :)
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
You should really read through/follow along with the Svelte tutorial, it might help you better understand how to overcome small challenges like this.
Toggling a class is as easy as toggling a variable and using Svelte's shorthand class directive
<script>
let active = false;
</script>
<button on:click={()=> active = !active}>
Some menu text or an icon here
</button>
<aside class:active>
I'm a sidebar
</aside>
Then you just make the styles equal to whatever tutorial you're following along with since the active class would be conditionally applied at that point.
Here's a simple REPL example.
The equivalent vanilla js code would be:
const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebar = document.getElementById('sidebar');
sidebarCollapse.onclick = () => sidebar.classList.toggle('active');
I am using ng-include to pull in a Bootstrap button w/dropdown menu. When I write an inline ng-if, the toggle doesn't work. I understand that I need to use ng-click. My question is how to convert the inline ng-if into a function.
I've converted this:
Image preview on/off
to
<li> Image preview on/off</li>
The function I wrote is poor, and not working.
$scope.previewPanel = function() {
isPreviewPanelOpen = !isPreviewPanelOpen;
};
Here's the piece it controls (shows/hides). It works if I don't use and ng-include
<div class="leftblock" ng-class="{'col-xs-12': isPreviewPanelOpen, 'col-xs-8': !isPreviewPanelOpen}">
You need to be modifying the scope of the view (via $scope) in your function.
$scope.previewPanel = function() {
$scope.isPreviewPanelOpen = !$scope.isPreviewPanelOpen;
};
Your current function is changing the value of some random variable (likely global).
I am working on complicated animation, I am trying to add effects by adding another class based on the val I am getting.
I have different css classes, and I wanna know how to dynamically add them this way.
.. Class="box bottom right"
when I add new class (eg: red).
It should be in my code this way:
.. Class="box bottom right red"
I am trying to change the css based on value I am calculating.
var els=2;
function changeColor(els) {
if (els>0) {
$("box bottom right").addClass("red");
} else{
$("box bottom right").addClass("green");
};
}
Here is code:
http://jsfiddle.net/BB6ED/1/
You need to use . to target elements by class as well as calling your function on page load:
var els=2;
function changeColor(els) {
if (els>0) {
$(".box.bottom.right").addClass("red");
} else{
$(".box.bottom.right").addClass("green");
};
}
changeColor(els);
Updated Fiddle
I'm pretty new to javascript/jquery and I just built a simple slide menu.
It has 3 menus and each menu has a submenu...everything is working fine, I just want to know if there's a better way to accomplish the same task.
Here's my js code:
function menuOpen(menu){
if(menu=='menu1'){
$("#sub2").slideUp(400);
$("#sub3").slideUp(400);
$("#sub1").slideToggle(400);
}else if(menu=='menu2'){
$("#sub1").slideUp(400);
$("#sub3").slideUp(400);
$("#sub2").slideToggle(400);
}else if(menu=='menu3'){
$("#sub1").slideUp(400);
$("#sub2").slideUp(400);
$("#sub3").slideToggle(300);
}
}
without seeing your HTML:
LIVE DEMO
function menuOpen(menu){
var num = menu.match( /\d+/ ); // Regex expression to retrieve the Number
$('[id^=sub]').slideUp(); // slide UP all ID starting with sub
$('#sub'+num).slideToggle(); // get the desired ID :)
}
Use of jQuery means that we want to easily manipulate DOM elements , which means that without seeing a HTML sample of your DOM nodes and structure you're about to target it's hard to make the above even simpler.
I am working on a listview which has auto dividers based on date it is a very long list & data-autodividers='true' works fine but I want to further improve it by making the listview collapsible on date.
This can be done from back-end using c# (I am working on an asp.net webform mobile website) where I group my list based on Month-Year and make each group collapsible.
But I would love to do it with jQuery as I do for autodivider. I have set up same on jsFiddle.
http://jsfiddle.net/5PnBT/10/
How can I make these auto-divider collapsible using jQuery without doing it from code-behind file (c#)?
I did not see where jquerymobile has this as a build in option.
$(document).on("pageinit", "#page-wrapper", function () {
$("#hp-latest-articles").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.attr('date');
return out;
}
}).listview('refresh');
});
If I have understood your problem, I think you just have to use the $.mobile.listview.prototype.options.autodividersSelector option. I had a similar problem, so if you need to list them according to the date attribute on the single element, do:
$( document ).on( "mobileinit", function() {
$.mobile.listview.prototype.options.autodividersSelector = function( element ) {
return (element.attr('date'))
};
});
I prepared a jsbin for that: http://jsbin.com/enuwoj/1/edit
There are two solutions to your problem.
Either you use the collapsible list sets on the jQuery Mobile side, then you will be able to reach exactly what you are looking for. You might nee to edit the looks of the element using CSS to make it look like a listview.
http://jsfiddle.net/rc9Gk/
<div data-role="collapsible">
<h3>Title</h3>
<ul><li>Item1</li><li>Item2</li></ul>
</div>
Second solution would be to apply custom event handlers on click event of the listview control. Whenever a click event occurs on a list divider you can hide the following list elements till the next auto-divider. This solution needs a bit of coding. If this solution fits you, I can write that code for you do let me know.
I believe your problem is solved by adding the following to the bottom of your original fiddle
$('.ui-li-divider').click( function(ev ){
var li = $(ev.target).next(':not(.ui-li-divider)');
while ( li.length > 0 ) {
li.toggle();
li = li.next(':not(.ui-li-divider)');
}
});
Here is the updated jsFiddle
Basically, everytime you click a divider, it looks for all following LIs until the next divider and toggles their visibility.
You'll need either <div data-role="collapsible"> or <div data-role="collapsible-set">, depending on if you wanted to group them or not.
If you want them pre-collapsed by default, include the data-collapsed="true" attribute as well.