I am trying to use the 'Requestly' extension on google chrome to remove the description text and uploaders' profile on Pinterest. I used inspect elements to identify the class they belong to and wrote the following script to remove them.
const boxes = document.getElementsByClassName('zI7 iyn Hsu');
for (const box of boxes) {
// ️ Remove element
box.style.display = 'none';
// ️ hide element (still takes up space on page)
// box.style.visibility = 'hidden';
}
However, after saving the rule and reloading the page, nothing happens. I'm pretty new to programming and have no idea how to begin troubleshooting this being the first problem I'm trying to solve.
requestly editor screenshot
class name screenshot
How about trying:
box.style.display = 'none !important';
Does it change anything?
Related
The intention is for the extension to grab the selected text and pop it into a card search engine, then return the resulting webpage as a hyperlink attached to the selected text. The first half of that works fine however the printing seems to select the entirety of the paragraph instead of just the intended selected area. Is there a fix to this?
function websiteCall() {
const hostText = getSelectedText();
const linkage = searchFunction(cleanName(hostText));
if (linkage) {
Logger.log(linkage);
DocumentApp.getActiveDocument().getSelection().getRangeElements()[0].getElement().asText().editAsText().setLinkUrl(linkage);
}
}
I initially asked on stackOverflow a similar question which resulted in the final DocumentApp... line. However, it has the described problem and I wasn't able to catch it at the time due to how I use the script in my work.
I believe your goal is as follows.
You want to set the hyperlink to the selected text. The text is part of a paragraph.
In your script, a whole paragraph is used. And, in your script, when a text is not selected, an error occurs. In this case, how about the following modification?
Modified script:
function websiteCall() {
const hostText = getSelectedText();
const linkage = searchFunction(cleanName(hostText));
if (linkage) {
Logger.log(linkage);
const select = DocumentApp.getActiveDocument().getSelection();
if (select) {
const ele = select.getRangeElements()[0];
ele.getElement().asText().editAsText().setLinkUrl(ele.getStartOffset(), ele.getEndOffsetInclusive(), linkage);
}
}
}
When you select a text of a part of a paragraph and run the script, the hyperlink of linkage is set to the selected text.
References:
Class RangeElement
setLinkUrl(startOffset, endOffsetInclusive, url)
I was wondering if there is an easy way to list all available css classes loaded withing a single html page in javascript or through the developer console in chrome or firefox.
Thank you
A bit late but ...
for (let link of document.querySelectorAll("link, style")) {
try {
if (!link.sheet) {
console.warn("Warning:", "Property 'sheet' is not set on element", link)
} else
for (let rule of link.sheet.rules) {
console.log(rule.selectorText)
};
} catch (e) {
console.warn("Warning:", e.message, ". Try set crossorigin='anonymous' on element", link)
}
};
or in the Chrome DevTool window (F12), find the "Elements", then "Styles", tab. On the right side of the "filter" text-box there is a ".cls" option. Click it and an "add new class" input should appear. Focus that input and hit Ctrl + Space. A pick list of all class styles in the current opened document should appear.
It looks something like this:
Yes, basically you would fire up the console and type:
document.querySelectorAll("*[class]");
The querySelectorAll method works just like CSS attribute selectors in this case. Read more about it in MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Sort of, you can do it per element easily, inside of Chrome Dev tools use the elements tab to select elements, and then go to the "Computed" tab which shows everything attached to each element.
If it was a big page with lots of elements and you needed to look at all of the CSS, I would just go to the elements and look into the head or header html element and go directly to the files. Depending on the architecture of the page some devs put it in the footer element as well as some inline.
You can also CTRL+F in chrome dev tools and write "stylesheet" which should pull up all of the pages attached sheets of CSS.
Here is how Im currently doing this:
function getAllClasses() {
const classSet = new Set();
const allElements = document.getElementsByTagName("*");
for (let i = 0, n = allElements.length; i < n; i++) {
allElements[i].classList.forEach(cls => classSet.add(cls))
}
return Array.from(classSet);
}
console.log(getAllClasses())
Using TamperMonkey to streamline page view on my side, and wish to hide part of the externally-sourced Twitter card(s) from printing. The image in the EmbeddedTweet does not print anyway, and leaves a large empty rectangle that wastes valuable space.
The DOM looks like the image below - how would I target the DIV with class SummaryCard-image (green arrow)? It doesn't matter to me if the DIV is removed from the DOM, or just hidden with CSS.
I have tried the below methods, which do not work:
(1) Injecting CSS with .SummaryCard-image{display:none !important;}
(2) jQuery: $('.SummaryCard-image').remove();
$('.SummaryCard-image').length returns 0
(Note the #shadow-root (open), 2nd element from the top)
You need to select the shadow root first inorder to traverse to that element. You need something like this
var twitterWidget= document.querySelector('twitterwidget').shadowRoot;
twitterWidget.querySelector('.SummaryCard-image').style.display = "none";
For multiple twitter widgets
var twitterWidgets = document.querySelectorAll('twitterwidget');
twitterWidgets.forEach(function(item){
var root = item.shadowRoot; root.querySelector('.SummaryCard-image').style.display = 'none';
})
Example
https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html
var tabs= document.querySelector('fancy-tabs').shadowRoot
tabs.querySelector('#tabs').style.display = none
I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.
Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.
I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}
How to disable the hyperlink based on the condition
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerHTML = "link text";
mydiv.innerHTML="";
mydiv.innerHTML=aTag;
say i need to disable my aTag here.
Based on logged on user i need to disable or enable..
This should work
if(condition)
disableLink();
else
showLink();
function disableLink()
{
document.getElementById('Link1').disabled=true;
document.getElementById('Link1').removeAttribute('href');
document.getElementById('Link1').style.textDecoration = 'none';
document.getElementById('Link1').style.cursor = 'default';
}
function showLink()
{
document.getElementById('Link1').disabled=false;
//assign href dynamically
document.getElementById('Link1').href = "somepage.html";
document.getElementById("Link1").style.textDecoration = "underline";
document.getElementById("Link1").style.cursor = "hand";
}
You can disable the link by setting the disabled attribute (not valid on anchor elements, though it works in some cases).
Test setup for disabled attribute on anchors: http://jsfiddle.net/TgjnM/
Preferably, you can remove the link altogether and replace it with the text it contains. To replace the link with plain text, you would set the innerHTML of mydiv to the text (thus removing the hyperlink).
If the link can be toggled on/off, consider a form element (not a hyperlink) as #Oleg V. Volkov suggested in the comments. If it is a one-time decision (i.e. it won't be happening multiple times per page), I would replace the link with text.
Based on logged on user i need to disable or enable..
In that case, I would render the page differently on the server, not in the web browser.