I have angular project in which I have included custom js in index.html . I have following code in custom.js file for navigation menu open and close for mobile devices. active class not getting applied in mobile view. I searched but did not found reason/solution of it.
$(document).ready(function () {
// Navigation Toggle
$("#nav-icon").click(function () {
$(this).toggleClass("active");
$(".close_overlay").toggleClass("active");
$(".navigation").toggleClass("active");
});
$(".close_overlay").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
$("header .singleMenu").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
});
If above code is included in header component ts file. It works. But that's not correct way of doing this.
How can add active class in mobile view when click events as above?
please guide and help. thanks.
Related
In my index.html, I have the following code:
<head>
...
<script type="text/javascript"
src="https://mysrc.com/something.js&collectorId=f8n0soi9"
</script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
'f8n0soi9': {
"triggerFunction": function (showCollectorDialog) {
document.getElementById("button1").addEventListener("click", function (e) {
e.preventDefault();
showCollectorDialog();
});
}
}
};</script>
</head>
and then in my myComponent.tsx file, I have a button somewhere on the page that looks like this:
function myComponent() {
return (
...
<button id="button1">
Button Text
</button>
...
);
}
export default myComponent;
It's probably also important to note that I'm using react-routing to navigate between various components, and the button above is just in one of those components
So the issue seems to be that if you load in to a site on any other webpage and later navigate to the page with the button on it, the button won't work unless you refresh that specific page, since presumably it wasn't on the first page loaded and perhaps no element with id "button1" was found to bind the event listener to. React-routing doesn't refresh the page by default when navigating through the site.
Putting the code I have in the index.html file into the myComponent.tsx file also does not work, since (I think) the index.html file allows for any raw html but the tsx file isn't truly html? Is there perhaps a way to define this as a function in the index.html file and then assign an onClick event to the button? Thank you all in advance!
Yes, it should be possible to bind the function that shows the dialog for later use and then use the recommended React event on the button.
In this example bound globally to the window object for simplicity:
"triggerFunction": function (showCollectorDialog) {
window.showCollectorDialog = showCollectorDialog;
}
// ...
<button id="button1" onClick={e => {e.preventDefault(); window.showCollectorDialog();}}>
If you run into Type errors with that, try (on the button):
=> {...; (window as any).showCollectorDialog();}
Or declare only the property (possible be more specific than any here if the signature is known):
declare global {
interface Window { showCollectorDialog: any; }
}
It should be fine to have this just somewhere in your TS source, your index.html without TS should just assign it.
I am working on fullcalendar-angular component where in I have a custom button called filter, on click of it the modal/dialog/menu-items should open just like dropdown. So how do we implement this under customButton click function? is there a way to add HTML and how? as shown in image.
calendarOptions:CalendarOptions = {
initialView:'dayGridMonth',
themeSystem:'bootstrap',
nowIndicator:true,
//showNonCurrentDates:false,
fixedWeekCount:false,
customButtons:{
myCustomBtton: {
bootstrapFontAwesome:'fas fa-sliders-h',
click: function(click,element){
//how do i add the code here`enter code here`
},
},
},
headerToolbar:{
left:'prev,next today',
center:'title',
right:'dayGridMonth,dayGridWeek,dayGridDay,listMonth myCustomBtton'
},
fullcalendar-angualr custombutton image
I'm a novice at Angular, but I was able to create a dropdown by just injecting some HTML for a dropdown via a function called after the eventDidMount hook.
https://fullcalendar.io/docs/event-render-hooks
I'm happy to give you some sample CSS/JS to show hide the dropdown, too if it's useful to you.
I am installing this modal dialog on a client's website, with practically no modifications.
However, I could not find how to make the modal dialog display on page load in the documentation.
Right now it just says:
<!-- Link to open the modal -->
<p>Open Modal</p>
But I am sure there is a way to make it just open on load.
I am using a hosted version of jQuery (jquery.min.js, jquery.modal.min.js) so I'm not trying to add/edit code in the JS file.
http://github.com/kylefox/jquery-modal Method 2: Manually:
$(function() {
$('#login-form').modal();
});
You need to create on your html a div like this:
<div ng-include="'/Somepast/busyModal.html'" ng-show="isLoading"></div>
<div> after load</div>
Then in your javascript you create:
function init() {
$scope.isLoading = true;
SomeFunction().then(function (data) {
$scope.isLoading = false;
}, onError);
};
that's it.
I have downloaded ace admin http://www.bootstraptemplates.net/ace-responsive-admin-template
Now I try to use it in my AngularJS project. The problem comes when I use parts of the template and separate it into custom directives. I have tried to reduce the code as much as possible and isolate the problem I am trying to describe and I have made a https://plnkr.co/edit/4Xdk9dSlTWl4rWap7zav?p=info plunker.
If you open page-content.html there is a
<sidebar></sidebar>
directive.
This directive causes the
<div class="main-content-inner">
to fall under it.
But when you copy the code from sidebar.html and replace the
<sidebar></sidebar>
directive with it you get the desired layout.
I have no idea how to deal with this behaviour.
Give this a Try
app.js
angular.module('myApp', [])
.directive("pageContent", function () {
return {
templateUrl: "page-content.html",
};
})
.directive("sidebar", function () {
return {
templateUrl: "sidebar.html",
replace:true,
};
});
I have created a plunker here with my code, which includes these routes.
'use strict';
var app = angular.module('app', ['ngResource', 'ui.router','ngAnimate', 'ui.bootstrap'])
.controller('Ctrl',function($scope,$log){
// controller code....
})
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home', {
url:'/home',
templateUrl: '/views/home_page.html',
resolve: {
loggedin: checkLoggedin
}
})
.state('admin', {
url:'/admin',
templateUrl: 'views/admin.html',
resolve: {
loggedin: checkLoggedin
}
})
.state('login', {
url:'/login',
templateUrl: 'views/login.html',
});
}]) // end of config()
I am facing problem in routing. I have created login.html file , I am successfully logging in , after login it is redirecting to home_page.html , in this page I have created nav bar and few things. But if I click link admin from home page , it is showing only the admin page content , it is not showing nav bar in admin page. In index.html page I am using ui-view, but still it is not displaying home page's nav bar in other pages.
If I go to other pages other than home_page.html it is not showing nav bar.
If I write nav bar code in index.html then on the login screen also it will display nav bar. On login screen it should not display nav bar. please help me in solving this issue.
If you want to have the nav bar on every page after login, you must use nested views.
Mean, you define a "master" view where you have your nav-bar and define there a container, content (admin, main page) have to go in.
When I look at your source above, you not defined any nested view.
Good description and examples how to do this can be found here.
Cause the explanation would be to long for here, I provide the link.