Question:
I need to add the internal style below to a Telerik Report. Please note a0 and a1 are classes.
The style sheet is given below: How do I convert this into an XML style sheet that a telerik report accepts.
Refer to : http://www.telerik.com/help/reporting/style-understanding-style-selectors.html
But the link does not give you detail on how to add a hyperlink selector into an XML style sheet.
CSS below:
a.a0:hover {
text-decoration: underline;
}
a.a1:link {
text-decoration: underline;
}
Below is how I worked around the above issue:
ReportViewer.prototype.OnReportLoadedOld = ReportViewer.OnReportLoaded;
ReportViewer.prototype.OnReportLoaded = function() {
this.OnReportLoadedOld();
var reportFrame = document.getElementById(this.reportFrameID);
var reportDocument = reportFrame.contentWindow.document;
var body = reportDocument.getElementsByTagName("body")[0];
$(".a1", body).css("text-decoration", "underline");
$(".a0", body).css("text-decoration", "underline");
You can achive the hover like this:
$(".a1", body).hover(function() {
$(".a1", body).css("text-decoration", "underline");
}, function () {
$(".a1", body).css("text-decoration", "underline");
});
Related
I have a custom cursor with some hover effects on a page (wordpress). This custom cursor shall hide, when hovering a certain div, due to some text. Please take a look here: https://florianwmueller.com/work-test/
I tried a lot, including some javascript, but nothing works. Any idea?
I gave the pictures a special class: .no-cursor
Thankful for any help...
Add this script on your website.
<script>
var elements = document.getElementsByClassName("no-cursor");
var style;
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("mouseover", function() {
style = document.createElement("style");
style.innerHTML = "body.cursor-element-shape a { cursor: default !important; } .wpcc-active > .wpcc-cursor { display: none !important; }";
document.head.appendChild(style);
});
elements[i].addEventListener("mouseleave", function() {
document.head.removeChild(style);
});
}
</script>
Is not the first time that I have this "problem". Other times, I did solve it avoiding the problem, but now I want to face it.
The idea is to load some file "myBeautifulStyles.css" with a simple css code like this:
#charset "UTF-8";
/* CSS Document */
h1, h2, h3, p, a {
font-family:Arial, Helvetica, sans-serif;
}
h1 {
font-size:16px;
font-weight:bold;
}
h2 {
font-size:14px;
font-weight:bold;
}
h3 {
font-size:12px;
font-weight:bold;
}
p {
font-size:12px;
font-weight:normal;
}
If I just loaded it as a text and try a StyleSheet.parseCSS() the result is null, the .styleNames returns an empty Array. I'm wondering if is about the text (break-line marks, initial codes...) or something else is missing. The examples around the web are always single line code. It's easy to clean this text and put it in a single line, but will work?
And most important, what's the best approach of this task?
Edit: as required, this code loads de css file trough a php (for avoiding caches):
var ur:URLRequest = new URLRequest(httpBase+"admin_arqs.php");
ur.method = URLRequestMethod.POST;
var Vars:URLVariables = new URLVariables();
Vars.op = "ler";
Vars.url = httpBase+"conteudos_estilos.css";
ur.data = Vars;
var ul:URLLoader = new URLLoader();
ul.dataFormat = URLLoaderDataFormat.TEXT;
ul.addEventListener(Event.COMPLETE, estilos);
ul.addEventListener(IOErrorEvent.IO_ERROR, ioerror);
ul.load(ur);
function estilos(e){
e.currentTarget.removeEventListener(e.type, arguments.callee);
e.target.removeEventListener(IOErrorEvent.IO_ERROR, ioerror);
var Res = JSON.decode(clearRes(String(e.target.data)));
if(Res.erro!="OK"){
msg("Erro: "+Res.msg);
} else {
ini_edit(Res.dados);
}
}
function ioerror(e){
e.currentTarget.removeEventListener(e.type, arguments.callee);
e.target.removeEventListener(Event.COMPLETE, estilos);
msg("Erro de IO!");
}
This part set the stylesheet:
trace("Estilos em string: "+css);
var estilos:StyleSheet = new StyleSheet();
estilos.parseCSS(css);
texto.styleSheet = estilos;
trace("Estilos definidos: "+estilos.styleNames);
The first trace generate the css text is displayed above. The second should display an Array with names. I also try tracing estilos.styleName.length and is zero.
texto is the TextField and css came from the Res.dados.
Seems like this line #charset "UTF-8"; at the head of css file causes the problem. Try to remove it and see if it solving the issue.
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 was browsing other user questions a few minutes ago.. and it led me to trying to change the hover color of the hyperlink on mouse over of my image map.
Any idea how I might accomplish this for the 1 hyperlink I have up?
http://www.urlgone.com/d7ccf8/
You're using jquery as i can see.
So do something like that:
<script>
$(document).ready(function() {
$("area[shape='poly']").mouseover(function() {
var id = $(this).attr('id');
$('a.staffs').removeClass('active'); //make other link not ative
$('a.staff-' + id).addClass('active');
}).mouseout(function() {
$('a.staffs').removeClass('active');
});
});
</script>
And CSS (you have to change it to your style):
<style>
.active {
color:red;
text-decoration:underline;
}
</style>
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