I'm developing an angular project but I ran into a problem, I want to achieve the following. 1. click a button and open a new window. 2. I don't want the css rules applied to the whole application to have any effect on the pop up new window.
Here's what I have tried.
.ts file
goToLink(url: string){
window.open(url,'', 'scrollbars=yes,width=300, height=300');
}
.html file
<a (click)="goToLink('filter');" >Filter</a>
I want a new look/css in the filter without entire page of the website css
Make a filter component and write its own css. Try not to use any class in the HTML that you have defined globally. This is called ShadowDom
Related
At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)
In my current project I am working with a self-developed module system, where the individual modules should also have the possibility to extend e.g.the navbar by simply writing some HTML inside a <navbar:extend> tag.
It would be cool if there was a way to get it done with as little writing as the <svelte:head> tag.
What about creating a store to which you will write (update with) your HTML extensions from your Components and at the same time subscribe to that store within your NavComponent then within NavComponets append the new HTML using {#html variable}
like that you can append HTML from different components to your Navbar, this should achieve the functionality you desire.
here is a quick example of the implementation
Child1.svelte and Child2.svelte are two random components which are going to update you navbar.
Store.svelte is the file where you will create your global store to share HTML.
Nav.svelte is the navbar you want to populate with HTML from other components
try writing some HTML within Child1 and Child2 input fields then submit it, it will be rendered within the NavComponent
I am using vue-js-modal plugin, And inside this plugin, there is a style.css file. In this file, I need to change some setting to customize the changes in the modal style. But when I access this file and change whatever I want and then save my changes and run the application, the modal page look like the previous style and setting! And when I opened the console and checked the elements and select the modal page, the style setting in the browser it's the same previous setting! How can I solve this problem? Do I need to build the file contains the style.css? If yes, how can I build it? If no, how to solve it?
Try using Deep Selector in you vue app to rewrite modal css
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
for me syntax is following
/deep/ p {
margin-top: 0;
}
Why not override the CSS rules you want to change, either in your own CSS file or in the style tag if you're using single-file components?
A quick fix would be to change the version of the css file by adding to the path of the file.
Old: "/mycssfile.css"
New: "/mycssfile.css?1"
I am using ionic to build hybrid app for mobile phones. I have a card type layout in div tag and want to change the functionality of a div to be clickable just like accordion in bootstrap. Where can I put the JS code? Do I need a separate file for the code or need to add it to existing file? (like app.js or controller.js or services.js)
I have tried to put it in app.js but not working.
you can use in html page also using script tag, or you can keep that code into related controller.js. best way is controller.
I am attempting to write a small script which will look at page URL and, based on what URL it sees, add a new class to an HTML element. More specifically, on this page:
http://pamaphilly.wpengine.com/volunteer/
I'm going to add a class for the active URL which will add an arrow marker to the appropriate left hand nav marker. I have tried this strategy: jQuery add class based on page URL and, when I used the script on a dummy page, it works fine. But when I try adding it to the Wordpress Template, nothing happens. I've tried adding the script at the bottom of the template file and just (as a test) embedding it in the php template. I'm guessing my failure relates to a Wordpress issues (probably a failure of knowledge on how to do this) but I would appreciate any guidance.
Thanks.
You need to include .slick before you can use it. (before script.js + in the same way you include your script.js file)
Why not do this with CSS and WordPress directly, and skip JavaScript?
You can use WordPress's body_class() function to dynamically add a class to the <body> of your page. Using CSS, you can then target your appropriate .volunteer .sidebar-member li via CSS.