I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.
Any help out there?
To currently apply anything I am doing the following:
$('#content a').css('color','#ffcc00');
I need to do something similar for a:hover. ie:
$('#content a:hover').css('color','#000');
If you want to make the change using javascript you can attach it to jQuery.hover().
Here's a full working example
$('a.link').hover(
function(){
$(this).css('color',$('input').val());
}
);
I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.
you can use css like assert your element´s id is
"element1"
css :
#element1:hover {
background-color:pink;
}
Related
I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.
If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.
Is this doable? CSS and JavaScript are acceptable
(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)
You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.
For example:
If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:
#dosomething:before {
content: "Click Me";
}
I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.
I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.
If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
with the following CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.
To expand on nullability's answer: You can also store the text in a data attribute like that:
.css-text [data-content]:before {
content: attr(data-content);
}
<div class="css-text">
Hello, <span data-content="World"></span>!
</div>
Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access
My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.
I have a JavaScript color picker linked to a text input. I would like several colored elements on my to change their color on the update of that color input. I could create several classes, one for each color (blue, red, green, etc), but i would like to have the whole 24 bits coloe palette, not just a few of them.
Is it possible to modify the value of the properties associated to a given CSS class ? If yes, will modifying these values apply new values on the rendered page in real time ?
Thanks in advance :)
Totally possible, and yes it will be updated in real time.
Here is a function to do the class property update, tied to a mouseover event (requires jQuery 1.0+). Mousing over div with id myDiv will update the CSS background color to white for all div's with class myColorDivs:
$('#myDiv').mouseover(function() {
$('.myColorDivs').css('background', '#fff');
});
Sorry, i'm late ...
Had the same question some days before and didn't find a practical answer.
Here's how I solved it for me (requires jquery):
Add an inline-stylesheet after all other stylesheets your page may need with the class you want to change.
Assign a TITLE Attribute to this stylesheet!
<style title="tomrulez" type="text/css">
/*the stylesheet to change - Note the TITLE*/
.shaded{
color:green;
}
</style>
Add this function:
function modCSS (stylesheet, rule, attrib, newval){
$.each( document.styleSheets, function( skey, svalue ) {
if(svalue.title==stylesheet){
$.each(svalue.cssRules,function (rkey,rvalue){
if (rvalue.selectorText==rule){
rvalue.style[attrib]=newval;
}
});
}
});
}
call it like this:
<div onclick="modCSS('tomrulez','.shaded','color','red')"> click here</div>
Parameters are:
stylesheet -> the TITLE of the last stylesheet on your page
rule -> The CSS-rule you want to change
attrib -> The attribute of the rule you want the change
newval -> The new value you want to assign to that attribute
I've tested this with Firefox, Chrome and IE10.
IE may not work in older Versions. But I develop mainly backends for a small group of users that do not use IE if i tell them (Yep, i'm a lucky about that!)
Btw. Here is a Plunker that works for me: http://plnkr.co/edit/EMDpjU06U2p83Df8Lolq?p=preview
What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:
text <span class="fg red">colored text</span> text
and
text <span class="bg blue">colored background</span> text
Clicking into colors have to change color of a span with fg class (and background colors - bg class)
How can I achieve this?
First of all you have to add your own buttons. Check source of any plugin that does this - e.g. basicstyles/plugin.js. You've got to create command for each button and then register all buttons. Simple.
Then I propose to use our styles implementation. It allows to apply/remove defined style from the given selection/range. In the style definition you can specify that it will apply span element with given classes. Check this style definition.
And the last step - join these things together. Command associated with button should apply/remove this style. There's ready to use one - check CKEDITOR.styleCommand usage here.
Everything you need is in basicstyles plugin, so just refer there.
Pozdrawiam :)
If you're flexible about the interface, you could just add your styles to the "Styles" selector.
It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.
You're welcome to use the plugin from the answer where you asked me to look at this question.
It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
You would have multiple calls to the addButtonCommand method.
addButtonCommand( 'Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue );
The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.
Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx
Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage