I am using SwiftSoup library to parse a dynamically created HTML string in swift...
let doc = try SwiftSoup.parse(htmlString)
And let's say I have this result
<html>
<head>
<style>
myClass {
font-size: 14px;
color: #000;
}
</style>
</head>
<body>
<span class="myClass">Hello World</span>
</body>
</html>
Now I can get the class value of my span like this
let span = try doc.select("body span")
let myClass = try span.attr("class")
Please is there a way I can iterate through the CSS attributes of myClass and get the attributes and their values.
Something like this:
var cssStyle = ""
let myClassAttrs = // a dictionary containing all myClass attributes(as dictionary keys) and values
for attr, value in myClassAttrs {
cssStyle += "\(attr): \(value);"
}
Related
Is there a way to add styles in css or sass based on the post content?
Im using
https://github.com/jessegavin/jQuery-Chord-Transposer
Something is preventing the code I just added from running.
var textProp = 'textContent' in document ? 'textContent' : 'innerText';
// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('span.c'), 0).forEach(function(aEl) {
// if the text of the aEl Node contains the text 'link1':
if (aEl[textProp].indexOf('Am') > -1) {
// we update its style:
aEl.style.fontSize = '2em';
aEl.className = 'c foo';
}
});
I would recommend using a thin layer of JS to add a CSS class to a parent element, which the css can check for.
For example, here is some code that makes the text color red if a post has a .category element with 'memes' in it
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
.post.memes {
color: 'red'
}
</style>
</head>
<body>
<article class="post">
<p class="category">memes</p>
<p class="content">Lorem ipsum</p>
</article>
<script>
const postElement = document.querySelector('.post');
if (postElement) {
const category = postElement.querySelector('.category');
if (category && category.innerHTML == 'memes') {
postElement.classList.add('memes');
}
}
</script>
</body>
</html>
Having enough people writing in upper case, I inserted the syntax text-transform: lowercase; or the text to be written in lower case and syntax ::first-letter for a capital is created after the beginning of each sentence after the point.
text-transform: lowercase; works fine but for ::first-letter he created me a capital letter at the beginning of the sentence but not after!
Is it possible to create CSS capitalized after a point?
Keep all data into a variable and split it with the point you want. Then display all array inside paragraph. This might be working.
var str = "What ever you want to do. Please do it here.";
var res = str.split(".");
then use for loop and getElementbyId to replace the content
Try this:
str = 'ABC. DEF. XYZ';
str2 = str.toLowerCase();
str3 = str2.replace(/\. /g, '.</span> <span class = caps>')
$('#output').html('<span class = caps>' + str3)
.caps {
display: inline-block;
}
.caps::first-letter {
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Convert the entire string to lower case; then replace the . with span elements; apply CSS rules to the span elements so that they are block level, inline and first letter capitalised); and just to tidy up, add an opening <span> before the replacement string to match the closing tag at the end of the first sentence.
<html>
<head>
<style>
p::first-letter {
font-weight: bold;
color: red;
}
</style>
<script>
function myFunction() {
var str = document.getElementById('data').innerHTML;
var res = str.split(".");
var data = "";
for(i=0; i<(res.length-1); i++){
var data = data + "<p>"+res[i]+".</p>";
}
document.getElementById("data").innerHTML = data;
}
</script>
</head>
<body onload="myFunction()">
<div id="data">What ever you want to do. Please do it here.</div>
</body>
</html>
This will automatically change the data onload.
Have more questions leave me a message in grandamour
I am styling grid row based on a value in the column.
On initial load it looks ok, however, when I click on the header to sort, the styling follows the original style and does not reflect the value in the sorted list.
In the onStyleRow event that does the styling override, I can get the row object of the grid, But... how do I get the column data from the row so that I can style it properly.
I have gone through the two questions below and a few others in StackOverflow, Googled, checked Dojo API docs and reference, etc. So far no outcome...
dojox DataGrid onStyleRow works first time, then not again
dojo datagrid custom sorting server side
I attach working code below, you can cut and paste to a html file to run and see the problem I am facing (The //// comment in the code below is a key place to note).
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/tundraGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="async:true,isDebug:true,parseOnLoad:true"></script>
<script>
var grid_report;
require([ 'dojo/parser', 'dojox/grid/DataGrid', 'dojox/data/CsvStore', 'dojo/domReady!' ], function(){
dojo.ready(function(){
var csvData = "id,val\n";
csvData += "1,10\n" + "2,20\n" + "3,30\n" + "4,40\n" + "5,50\n" + "6,60\n";
var csv_store = new dojox.data.CsvStore({identifier: "id", data: csvData});
grid_report = new dojox.grid.DataGrid({
style:'height:400px',
store: csv_store,
structure: [ { field: 'id', width: '80px', name: 'ID' }, { field: 'val', width: '80px', name: 'Value' }, ],
}, document.createElement('div'));
dojo.byId("gridDiv").appendChild(grid_report.domNode);
dojo.connect(grid_report, 'onStyleRow', function (row) {
var idx = row.index;
//// Below is not correct as index is the row index on the grid, but the data store is in a different order after sorting order change via clicking cell header
var _item = grid_report.getItem(idx);
if (!_item) return;
var val = parseInt( _item._csvStore._dataArray[ idx ][1] );
if (val <= 20) row.customStyles += 'background-color:#88f;';
else if (val > 40) row.customStyles += 'background-color:#f88;';
else row.customStyles += 'background-color:#ff8;';
dojox.grid.DataGrid.prototype.onStyleRow.apply(this, arguments);
});
grid_report.startup();
}); // end ready
}); // end require
</script>
</head>
<body class="tundra">
<div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#88f;">Value 0-20</div>
<div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#ff8;">Value 21-40 </div>
<div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#f88;">Value 41 or more</div>
<div id="gridDiv" style="width:'800px';height:'600px';"></div>
</body>
</html>
I found a work around. It is not ideal as it may not work for all situations.
Change line with:
var idx = row.index;
to:
var idx = -1;
After the newly edit line above, add the following:
var _item = null;
grid_report.store.fetch({onComplete: function(items) {
dojo.forEach(items, function(item, index) {
// KLUDGE FOR finding item after sort
// use merged csv data AND row.node.textContent
var merged_csv_text = item._csvStore._dataArray[index].join('');
if (merged_csv_text == row.node.textContent) {
idx = index; // I finally get the correct index here!!!
return;
}
});
} });
if (idx == -1) return;
This works only if each data formed by merged_csv_text is unique.
I'm trying to add some css to an internal stylesheet with javascript. This is the code I've used:
function googleJS(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('style');
newScript.setAttribute('.skiptranslate { display: none; }');
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}
However this results in:
<style .skiptranslate {display: none};></style>
What is the proper method to use javascript to insert a style tag with the necessary CSS inside the DOM?
Thanks
As the name implies (and documentation says) Element.setAttribute:
Adds a new attribute or changes the value of an existing attribute on the specified element.
which is exactly what's happening on the <style> element. To fix this, use .textContent/.innerText or a text element instead of .setAttribute().
function googleJS(){
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentWindow.document;
var newScript = doc.createElement('style');
var content = doc.createTextNode('.skiptranslate { display: none; }');
newScript.appendChild(content);
var bodyClass = doc.getElementsByTagName('head')[0];
bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}
If you can use JQuery:
$().css('Property-Name', 'Value');
I need to get the id attribute of a class and apply a style based on that id.
So for instance, 3 list items each with the class "typo", one id is "application", another id is "application_osx", and the final id is "application_osx_terminal"
The class "typo" is handled by CSS, but I would need to assign a background image based on the ID name.
So if the id happens to be "application_osx" or "someotherid", it would automatically have this CSS applied to it
#application_osx { background: url(/path/to/image/application_osx.png) }
#someotherid { background: url(/path/to/image/someotherid.png) }
I'm trying to use MooTools 1.1 for this.
I guess it would look like this barebones
<html>
<head>
<title>Blah</title>
<script src="path/to/mootools.js"></script>
<script>
A SCRIPT THAT PRINTS OUT:
#application_osx { background: url(/path/to/image/application_osx.png) }
#someotherid { background: url(/path/to/image/someotherid.png) }
BASED ON THE CLASS "TYPO"
</script>
</head>
<body>
<ul>
<li id="application_osx" class="typo">Application OSX</li>
<li id="someotherid" class="typo">Someotherid</li>
</ul>
</body>
</html>
$$('.typo').each(function(el){
el.setStyle('background-image', 'url(/path/to/'+el.id+'.png)')
});
Should do the trick, if I understand well…
why can't you define the rules in your css file? if you need to dynamically produce rules and append to the document head then you need something like this
for mootools 1.2.x
http://www.jsfiddle.net/dimitar/G5ywF/1/
var StyleWriter = new Class({
// css classes on the fly, based on by Aaaron Newton's version
createStyle: function(css, id) {
try {
if (document.id(id) && id) return;
var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElement('head'));
if (Browser.Engine.trident)
style.styleSheet.cssText = css;
else
style.set('text', css);
} catch(e) {
console.log("failed:", e);
}
}
});
use:
new StyleWriter().createStyle("#rule { blah; }\n#rule2 { blah... }\n", "mystyles");
edit it was just brought to my attention you are on mootools 1.11 so
http://www.jsfiddle.net/G5ywF/4/
class version for 1.11 with slight changes:
var StyleWriter = new Class({
// css classes on the fly, based on by Aaaron Newton's version
createStyle: function(css, id) {
try {
if ($(id) && id) return;
var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElement('head'));
if (window.ie)
style.styleSheet.cssText = css;
else
style.setHTML(css);
} catch(e) {
console.log("failed:", e.message);
}
}
});
tested the 1.11 class in FF 3.6x, Chromium 5 and IE7