I have a form page that I'm working on and the basic AngularJS structure is working. When the user selects a particular font, I want all page elements to change to that font. In my stylesheet, I am using the "*" selector but I can't figure out how to update that via Angular. I have attached the basic page structure code below (note that the page has more elements than this but I removed all but the H1 for this question). Any ideas?
<!doctype html>
<html ng-app="theapp">
<head>
<title>App</title>
<style type="text/css">
* {
font-family: sans-serif;
font-size: 12pt;
}
</style>
</head>
<body ng-controller="FormController as form">
<h1>Hello</h1>
<form name="theForm">
<select ng-model="font" ng-options="font.face for font in fonts"></select>
</form>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
(function () {
angular.module("theapp", [])
.controller("FormController", ["$scope", function ($scope) {
$scope.fonts = [
{ face: "sans-serif" },
{ face: "Arial" },
{ face: "Tahoma" },
{ face: "Trebuchet MS" },
{ face: "Verdana" },
{ face: "serif" },
{ face: "Times" },
{ face: "Georgia" },
{ face: "monospace" },
{ face: "Courier" }
];
$scope.font = $scope.fonts[0];
}]);
})();
</script>
</body>
</html>
You can use ng-style in your markup and link it to the scope.font variable.
Have a look at the docs: https://docs.angularjs.org/api/ng/directive/ngStyle
I haven't tried it, but you could add a div under the body such that <div ng-style="style"> and in your controller you do $scope.style = {"font-family": $scope.font}.
Add style="font-family:{{font.face}}" to the body tag.
I made a plunkr to demonstrate
Thank you [orange] and [nilsK] for your suggestions.
Both are good ideas but still don't do quite what I need.
In the end, I decided to just use jQuery to update the $("*").css() attribute.
(We're already using jQuery anyway so I'm not bringing in another JS library unnecessarily.)
This does exactly what I need and doesn't complicate the code.
Thanks again! :)
Related
I have a component that uses teleport to , the test html doesn't seem to be working as expected. I can't find any documentation on this particular use. Here's my test:
describe('MetaHead', () => {
it('dynamic metadata tags contain custom text', () => {
let title = 'My Page';
let description = 'Some description about my page';
// This component uses Vue3's teleport to tag <head>
// we must modify wrapper to contain such tag
document.body.innerHTML = `
<head>
<div id="app"></div>
</head>
`
const wrapper = mount(MetaHead, {
attachTo: document.getElementById('app'),
props: {
title,
description
},
global:{
mocks: {
$route:{fullPath: 'full/path'}
}
}
})
expect(wrapper.html()).toContain(title)
expect(wrapper.html()).toContain(description)
})
})
and the minimal component looks like this:
<template>
<teleport to="head">
<title>{{title}}</title>
<meta property="og:site_name" :content="title">
<meta name="description" :content="description">
</teleport>
</template>
Am I missing something?
the problem here is wrapper.html() only returns HTML in your component - since you are teleporting outside your component, that markup won't show up when you call wrapper.html().
You have a few options. One would be making an assertion against document.body.outerHTML. Another would be using a neat trick with findComponent, I wrote about it here and posted a video about it here.
Another thing you could try that I just thought of (but have not tested) would be:
mount({
template: `
<div id="app" />
<MetaHead />
`,
components: { MetaHead }
})
I don't know if that will work, but worth a try.
I have one requirement. Can you anybody suggest the possible ways to achieve it.
I want to change the theme of my application based on the URL passed in every routes.I am using the below technologies.
- Frontend : Angular JS
- Backend : Node.js
eg: localhost/x/about
localhost/y/about
I achieved these via cookies by passing the param using localtion.search at the time of login. But I need that theme param in all the routes.Based on that theme need to change.Can anyone suggest the possible ways.
app.js
app = angular.module('themeApp', ['ngRoute'])
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/:id/about',{
templateUrl: 'about.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('themeController', function ($scope, $routeParams) {
console.log($routeParams.id);
// set the default theme
$scope.css = $routeParams.id;
});
menu.html (it is not complete, confuse here. please correct, how to call)
<li>
About
</li>
<li>
Home
</li>
index.html
<html ng-app="themeApp" ng-controller="themeController">
<head>
<!-- pull in css based on angular -->
<link rel="stylesheet" ng-href="css/{{css}}.css">
</head>
<body>
<div ng-view></div>
<!-- bring in JS and angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.js"> </script>
<script rc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular-route.js"></script>
<script src="app.js"> </script>
</body>
</html>
css/
it contains the three files,
- red.css
body{
background-color: red;
color: #333;
font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 15px;
}
green.css
body{
background-color: green;
color: #333;
font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 15px;
}
blue.css
body{
background-color: blue;
color: #333;
font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 15px;
}
The quick and simple answer would be to use $rootScope. $rootScope is available to all controllers, but like all global variables should be used sparingly.
Here's a good post explaining $rootScope. http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html
Basically if you're using it on your two controllers for pages x and y
app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
$rootScope.foo='bar';
}]);
app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
$scope.lorem=$rootScope.foo;
console.log($scope.lorem); //bar
}]);
app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
$scope.ipsum=$rootScope.foo;
console.log($scope.ipsum); //bar
}]);
Can then use them in your HTML markup as normal.
Using $rootScope is much simpler, but if you wanted to use the router to pull down the id each time, it is also possible.
app.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'indexController',
templateUrl: 'view/index.html'
})
.when('/:id/about',{
controller: 'xCtrl',
templateUrl: 'view/x.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
$scope.foo=$routeParams.id;
}]);
If you have a lot more pages than just /about I could imagine this getting a bit tricky with the routing.
You could even couple it with root scope then pass it around to your other controllers.
app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
$rootScope.foo=$routeParams.id;
$scope.lorem=$rootScope.foo;
}]);
--EDIT based on comment--
I might need some code to be sure of what you're after, but perhaps this clarifies?
URL: mysite.com/blue/about
app.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'indexController',
templateUrl: 'view/index.html'
})
.when('/:id/about',{
controller: 'xCtrl',
templateUrl: 'view/x.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
$scope.theme=$routeParams.id;
}]);
HTML
<div ng-controller="xCtrl">
<div ng-class="{{theme}}">
My theme is {{theme}}.
</div>
</div>
CSS
.blue
{
background-color: blue;
}
.green
{
background-color: green;
}
I have a problem with a wordpress plugin that uses Google Translate to translate pages. It appears a h1 tag with the text "Original text" and I don't know how can I remove it.
I would like to remove the h1 tag, so I am not interested in CSS changes.
Thanks in advance to everyone.
Puts this javascript code in the footer.php, that remove the text in h1 "Original text"
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'es' }, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Hi I am trying to add styles to my MathJax output. In particular I would like to set a global color for my equations (so that it matches the styles on the rest of my page). Currently I have the following configuration.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
styles: {".MathJax" {color: "#CCCCCC";}}
}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
However if I include the styles tag in my configuration the math on my page just refuses to display at all. On the other hand if I remove it, it displays fine.
Edit: I should also note that I have tried adding the styles directly to my CSS as suggested in other questions but this resulted in the same thing, no math being displayed at all.
UPDATE: I have added the : as Davide suggests below, now my equations display but the styling information is ignored. The styling seems to be inherited from the body of the page but wrapping the math in a div with different styling doesn't seem to affect it either.
UPDATE2: I have solved my the issue of the mathjax ignoring style commands. The color for text was globally set by a line in my CSS * { colour: #292929 }. This meant that the style from MathJax was being ignored. Simply changing * to body, a, p, h1, h2 fixed the issue.
You are missing the colon after ".MathJax". Your code should be
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
styles: {".MathJax": {color: "#CCCCCC"}}
}
});
</script>
and then it should work for you.
For MathJax 3.x, use:
.MJX-TEX{
color: red !important;
}
I use active column to generate dynaicly icons like this:
{xtype:'actioncolumn',
width:25,
align: 'center',
items: [{
icon: g_settings.iconUrl + 'view-icon.png' ,
tdCls : 'someClass',
handler: function()
{
alert('HI');
}]
now to add the property which I want (in this case cursor:pointer) in ExtJS forum is written to add
.someClass
{
cursor:pointer;
}
But I'm not sure where this should be written.
Thanks
Leron
Put it in your CSS file that you have included on your page (you have a CSS file, right?).
For example like this:
<link rel="stylesheet" type="text/css" href="styles.css" />
And then put the style definitions you want in the styles.css file. That's all there is to it.