I will expect <div class ="fromLibrary> to be created from a library's js file.
So I want to add a behavior on my client so that it watches the div with "fromLibrary" being created and add a styling to it dynamically?
I can go on node_module and change the specific .js file but library will get constantly updated and will overwrite what I modified.
Does that technique exist or am I being funny.
Thank you for help in advance.
Related
I've a problem with a Vue-js application (Vue 2.6.6).
I need to create a new page in this application that must not be affected by vuetify and other styles placed in the head of index.html file. I wanna now if it is possible to inject a view (navigating to it with routing) without applying styles or if it is possible to create another entry point for the app, making it as a multi-page application.
I've found a documentation for doing it, but the structure of files and folders they talk about is different from mine (I did not create the project) and I don't understand what I gotta do to set multiple pages.
https://cli.vuejs.org/config/#pages
I have a "main-priv.js" file inside src, not a "main.js", don't know if it is same.
I'm really bad with configurations and stuff like that, I've probabily taken the wrong life choice with this work, but nevermind, can you help me?
I have a header on every page thats generally static — besides the button that needs to update based on the page. Ideally I would like to have a variable called link in static/content/xxx
and then to call it from layouts/default. However it does not seem that I have access to any of the variables in my static content. Being new to vue and nuxt I was hoping for some guidance. I tried using asyncData however, it doesn't seem to get called at all in my layout.
a layout is a static wrapper that will wrap your main content. the main idea behind using layout is to not write the same content again and again. If you work with Vue only project than this type of functionality can be accessed by the using the child routes.
just add the common layout as the parent Component and the changed or different content as the child components.
back to the point, if you have different button content depending upon the pages than don't place it in the layout instead pass through the components individually.
whereas the static folder in the nuxt application holds the data that should not be changed such as the css files or external script files just take and example of bootstrap and jquery these are the libraries that are embeded in the application, instead of changing their internals we just use them. this type of content is placed in static directory (folder)
I hope it helps
For whatever reason, whenever I build my project, any changes I've made to a view that are not html do not get displayed. Instead it pulls all the info from the partial view (which in our application doesn't get updated when I make a change in the view). So every time I build my project, the application serves me the partial view and I have to go into each view that I made changes in and make some sort of html change in order for the changes I made prior to the build display. Eventually, this functionality will change, but right now my boss doesn't want to mess with it just yet. I've tried disabling cache in chrome's dom (f12) as well as downloading an extension to force the page to not display any chached versions of pages but that doesn't seem to help. What else can I do until we get the partial views removed properly?
UPDATE:
I kinda goofed on the title. Whats happening is the generated files are what are being served to me from my localhost rather than any changes I made to a view (html or otherwise), if I made those changes prior to a build.
so in the view I'd have this:
<body>
<div>Hello World!</div
<div><h2>Sample Text</h2></div>
</body>
<script>
$(document).ready(function () {
//Some Javascript code
});
Which is the way the page was originally created by someone else. They also manually made a partial generated file and that file doesn't rre-generate when I make changes to the view.
So if I made these changes:
<body>
<div>Hello World again!</div
<div><h2>Sample Text</h2></div>
</body>
<script>
$(document).ready(function () {
//Some Javascript code
});
and then built the project, it would not serve me these changes, it would grab the generated file (which didn't get updated with my changes) and serve that to me unless AFTER I do the build, I go into that specific view and make an HTML Change (for some reason making a change with Javascript doesn't help). Then I can see my changes. AND it will stay that way until I do another build at which point, everything reverts back to the partial generated views until I make an HTML change in the view.
Deleting the Generated files is the only way I can see to fix the problem I just wasn't sure if it would break the application and it doesn't.
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx
I'm developing a custom Dojo widget which in fact acts as a wrapper for Timeline JS library (http://www.simile-widgets.org/timeline/).
Is there a possibility to include the required JS code for Timeline in the custom dojo widget or must I include manually in my "index.html"??
Thanks in advance.
Do you have control over the Timeline source code, that is, are you hosting it yourself?
If this is the case you could turn the dependency into a dojo module by inserting an appropriate dojo.provide call on the top or you could just straight up copy-and-paste everything inside your MyWidget.js source file.
If this is all ends up too compicated for you to consider it worth it, adding the script tag by hand on the index.html is not that bad (given how base Javascript actually doesn't have a real module system you could use instead)