here's what I came up with. This probably won't help in scenarios
where you need actual html wrapped around the element vs. css, but
arguably even if you're doing a CMS or something, you could easily
just pull the whole thing with .html and it's a heck of a lot nicer
than your average myspace editor / frontpage / etc....
for things like bold and italic, simple toggles work fine, that was
never my issue, so...
--------------------------------
<STYLE>isBold{font-weight:bold;}</STYLE>
<INPUT TYPE="button" CLASS="button" ID="isBold" VALUE="B">
<DIV ID="display">
<DIV ID="element1" CLASS="elementSelected">make me bold!</DIV>
<DIV ID="element2" CLASS="elementSelected">and me!</DIV>
</DIV>
<SCRIPT>
$(".button").click(function() {
var setName = $(this).attr("ID");
$(".elementSelected").each(function() {
$(this).toggleClass(setName);
});
});
</SCRIPT>
--------------------------------
The problem came in when I wanted to set properties that have a range
of values other than on/off, such as font-family, font-size, etc,
which I solved like this:
--------------------------------
<SCRIPT>
function setRangedProperty(rProperty,rValue) {
alert(rProperty+rValue);
$(".elementSelected").each(function() {
$(this).css(rProperty,"");
$(this).css(rProperty,rValue);
});
}
</SCRIPT>
--------------------------------
I'm frustrated I can't explain why the function isn't recognized if
inside a $(document).ready(function(){ });, even if you wait for the
page to fully load. This will probably cause some issues for overly
eager users that I haven't been able to replicate yet.
anyway, relevant html:
--------------------------------
<SELECT name="font-size" onchange="setRangedProperty('font-
size',this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="9">9</option>
etc
</SELECT>
--------------------------------
oddly we don't need to declare px in the value, as it's appended by
default. Only if you want em, etc
we can of course also do:
<SELECT name="font-family" onchange="setRangedProperty('font-
size',this.value)">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Helvetica">Helvetica</option>
etc
</SELECT>
and on and on. User hits Save, we do
var saveHTMLContents = $("#display").html();
// upload to db, write to flat file, etc.
and bob's yer uncle.
On Apr 3, 5:08 pm, hedgomatic <[EMAIL PROTECTED]> wrote:
> I'm trying to do the following:
>
> <SCRIPT>
> $(document).ready(function(){
> $.fn.toggleCSS = function(property,value) {
> return this.each(function(){
> var p = $(this).css(property);
> if(p) { $(this).css(property,""); } else { $
> (this).css(property,value); }
> });
> }
> $("#testme").click(function() { //let's test out our function...
> $(this).toggleCSS("font-weight","bold");
> });});
>
> </SCRIPT>
> <input type="button" ID="testme" value="click me!">
>
> in this case, p returns as '400'.
>
> .css() seems to always return default values, even if I don't declare
> them explicitly. Even if the button in question is a span. Originally
> I thought this _wasn't_ the case, as I've run into problems with
> jQuery trying to set values for properties that haven't been
> previously declared.
>
> I'm guessing my approach to this function is probably not going to
> work. Any suggestions?
>
> -adam
