Trying to select CSS that appears to change frequently? - javascript

I'm trying to write a Greasemonkey script for a google product (https://www.google.com/flights/)
Basically, I'm trying to modify the CSS so that the map can be displayed larger. I created a very basic greasemonkey script that can do this very easily if I can identify the CSS class. In my script it is ".GN1QYMKH3B" which worked for a week but then this week it appears that all of the classes have changed. Is google generating these classes to prevent manipulation and if so, is there a way to navigate the DOM to select the correct CSS?

Related

How to add a popup with css to an existing website (such as google.com) in JavaScript?

I am new to JavaScript. I have a task to write a js script that will be injected to google.com using Chrome DevTools and run on top of it. The script needs to add certain popups on mouseover action - so if I hover over certain elements of the page (such as the Google logo), a certain popup will be shown. The popups all have css stylings.
So far, I have managed to create alerts on mouseover action using EventListener (on google.com). And I have managed to create custom popups with css on my own website. However, I'm having serious trouble combining both.
The problem is essentially: in my own custom website, I put the css bit under "style" tag, and the js script itself under "script" tag. The script than uses the css properties of the popup to create it. However, in Chrome DevTools I'm only able to inject the actual js script (by copy-pasting it the console), and not the css bit.
How should I get around that? Is there a way to add the css within the js, so running the script will lead to the css being added to the "style" section? Is there a different way to inject the script in the DevTools, and separately inject the css and js? Or is there another way to solve this?
Thanks a lot :)
You can do this by creating and running a snippet, to create a snippet:
Open chrome-devtools
Create new snippet (Ctrl+Shift+P, type show snippets, and hit Enter)
document.head.insertAdjacentHTML("beforeend",`<style>
/*Write your css here, sample below*/
body{
color:red !important;
}
</style>`);
// your main script can go here, note, the below code is just a sample
document.body.addEventListener("mouseover", function(){
console.log("logged..")
})
Run the snippet (Ctrl+Enter)
You can also save and use the snippet later, to run the snippet later:
Ctrl+p type ! and the name of your snippet.

How to inherit CSS of parent site and apply it on HTML rendered using Javascript?

I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.

how to change css to change liferay basic view

I want to change some css like i want to hide Powered By Life ray in life ray portal 6.2-ce-ga2. And want to make some changes that i want to make iframes resposive in portal web page. I have short time so i am unable to develop custom theme. i have to meke another css with small change that i have to be imported or can i change existing css. I want to hide following text. Is this can be possible with JavaScript then how can i add this because i also tried to add JavaScript but it also did not worked for me. i have tried to get element by alert(document.getElementsByClassName('powered-by').innerHTML+"ss"); but not worked.
For that modify portal_normal.vm you have to create new theme and relate it to
parent theme.

Changing CSS stylesheet on button click

I folks, I've had a good look through but nothing seems similar to mine.
I've just finished creating a custom CMS and now want to implement customization capabilities, like templates.
I believe it uses Javascript but, I have a variety of of stylesheets on a server. css.css, css1.css etc with css.css being the main.
Is it possible that on a button click, I could choose a different sheet meaning that in essence, the sheet I would choose became the main style sheet, css.css?
Thanks for any help you can offer.
Yes, you can insert a link element in the head of your page. You can do this using document.createElement, or using JQuery if you use that. If you actually want to toggle the style sheets, you can remove the previous link element, or just replace its href attribute.

Selectively display different parts of a HTML file without SSI/Server side scripting

Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page.
(The length of each section is unknown and expected to vary greatly).
Communicating with the server is unfortunately not an option.
And as you might expect i am new to CSS,PHP and JS
you will want to wrap each section with an ID tag, and control the visibility with javascript. There are several methods of controlling visibility in JavaScript.
The CSS elements that control visibility are visibility and display.
Visibility shows or hides text using the attributes in the above reply, and display allows you to actually remove that block from the DOM by using "block" and "none" as the attributes. You'll want to choose whichever element works best for your application.
Javascript libraries such as Prototype/script.aculo.us or J-Query, MooTools, etc are fantastic for this kind of control.
If you want to learn this kind of scripting from scratch, the book "DOM Scripting" by Jeremy Keith is a fantastic book that can be completed in a couple of days.
Sounds like CSS property visibility set to hidden | visible | collapse.
You should use display none to hide things and display block to show them again (or display inline)

Categories