[jQuery] Appended element is not draggable

[Mircea]

Hi
I have a container div with some spans. I had set the spans to be
dragable and I want to do a function that on click will append a new
span to my container and make it also draggable.

I manage to append the new span in #selectable container but it is not
draggable.

My code is:

script type=text/javascript
$(function() {
$(span).draggable();
});
/script

script type=text/javascript
 $(document).ready(function(){
$(#selectable).click(function(){
 $(#selectable).append(spanThe new span/span);
});

});
/script

and the markup is:
div id=selectable
div class=ui-widget-content style=width: 800px; height: 500px;
background:#ccc;
span class=text draggableItem 1/span
span class=text draggableItem 2/span
span class=text draggableItem 3/span
span class=text draggableItem 4/span
span class=text draggableItem 5/span
span class=text draggableItem 6/span
span class=cloneClone/span
p class=clonea p replaced/p
/div
/div

Thank you.

[jQuery] Append Variable to Select box

[Mircea]

I have the following function that should append or prepend a dynamic
value to a select with id #px. The dynamic value is not in the select
DOM from the start so I have to append it to make it work.

The problem is that the new created value is not shown until I click
on the select dropdown, the DOM does not generate that value until I
click and drop down the list. What should I do?

This is my code:

$(document).ready(function() {
   $(this).bind('click', function(event, ui) {

var fresizeSize = $('.cica').css(font-size);
var fresizeSizeNOPX = 
$('.cica').css(font-size).replace(/[^0-9]+/
g,'');

  var newTr = 'option class=option value=' + fresizeSize + '
label=' + fresizeSizeNOPX +'' + fresizeSizeNOPX +'/option';

  $('#px').prepend(newTr);
  $(#px).val(fresizeSizeNOPX);

});
});

Thank you.

[jQuery] Re: Append Variable to Select box

[Mircea]

Thanx for the solution MorningZ.
I had changed the this with the actual span class and it works now.

Thank you.

[jQuery] Removing percentage after dot - font-size: 30.6207px

[Mircea]

I have a slider that sets my CSS font-size to a value. The value
itself is accepted by CSS buy I would like to remove the decimals
after the dot.

For example one value is:
font-size: 30.6207px and it should be font-size: 30px
or
font-size: font-size: 44.2759px; and it should be font-size: 44px

The font-size is set my this function:
$(.ui-selected).css('font-size', maxFont * percentage);

Is there a way I could strip the after dot part?
Thank you.

[jQuery] Re: Removing percentage after dot - font-size: 30.6207px

[Mircea]

Thanx Jonathan,

That did the trick:
var total = parseInt(maxFont * percentage);

All the best.

[jQuery] Save all DOM changes

[Mircea]

I have a small JQuery script where the user can modify the DOM
according to its needs. Is there a way to save or get in a
window.alert the modified css and DOM changes?

Thank you

[jQuery] UI slider execute function on change or slide

[Mircea]

Hi,
I want to make the UI slider to set a font-size to a .cica class. The
setfontsize variable works but I can not succeed to make the slider
change the value on slide.

Here is the function

$('#sizer').slider({
   slide: function(event, ui) {
   var setfontsize = $('#sizer:selected').text();
$('.cica').css(font-size, setfontsize + px);
}

Here is the markup

form action=#
!-- Slider --
fieldset
select name=speed id=speed
option value=1010/option
option value=1515/option
option value=21 
selected=selected21/option
option value=3030/option
option value=4040/option
/select
/fieldset
/form

Thank you.

[jQuery] Re: UI slider execute function on change or slide

[Mircea]

Oh, sorry is select name=sizer id=speed

it is

fieldset
select name=sizer id=speed
option value=1010/option
option value=1515/option
option value=21
selected=selected21/option
option value=3030/option
option value=4040/option
/select
/fieldset

It was a typo, the code does not work with sizer or the speed typo.

[jQuery] Re: UI slider execute function on change or slide

[Mircea]

I've changed my markup to:

div id=ariaslider
form action=#
!-- Slider --
fieldset
select name=sizer id=speed
option value=1010/option
option value=2020/option
option value=21 
selected=selected21/option
option value=3030/option
option value=4040/option
/select
/fieldset
/form
/div

and code to:

script type=text/javascript
$(function(){
//demo 1
var abc = $('select#sizer').selectToUISlider().next();
var setfontsize = $('#sizer :selected').text();

$('#ariaslider').slider({change: function(event, ui) {
$('.cica').css(font-size, setfontsize + 
px);}
});
$('#ariaslider').bind('slidechange', function(event, 
ui) {
$('.cica').css(font-size, setfontsize + px);
});


});
/script

I am not quite sure of what it does, I am trying to get more info on
how bind works... It now change the first size and then it blocks.
Thank you for your help.

[jQuery] Re: UI slider execute function on change or slide

[Mircea]

I am using the ARIA Slider from
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
I will change the values to 10, 20, 30, 40...

When an user selects a value with the slider the font-size will
increase or decrease accordingly. I managed to get the current
selection of the slider in a variable, I want now to pass it to a CSS
function:

My variable is:
var setfontsize = $('#sizer :selected').text();

the css function is
$('.cica').css(font-size, setfontsize + px);

In the original ARIA Slider I had changed #speed with #sizer.

Thanx for your help!

[jQuery] Live function syntax

[Mircea]

Hi,
I want to add a live event on a function.
My function is:

$(#family).click(function(){
$($(#tag).val()).css(font-family, $(#family).val());
});

I've tryed to add it like this:

$(#family).live(click, function(){
$($(#tag).val()).css(font-family, $(#family).val());
});

but I get a $(#family).live is not a function FireBug error. How
should I use it right?

Thank you.

[jQuery] Re: Live function syntax

[Mircea]

Thanx Rick and Morning Z. I've change it and it works now.
Thanx again

[jQuery] Bindind keydown function to a form - submit on keydown (value change)

[Mircea]

Hi,
I am trying to make a form to run a function on keyup, keydown.
The markup is:

select id=family
option value=Georgia label=GeorgiaGeorgia/option
option value=Times New Roman label=Times New RomanTimes New
Roman/option
option value=HelveticaNeue-Light label=Helvetica Neue
LightHelvetica Neue Light/option
/select

I made a function that change the font-family on click:

script type=text/javascript
$(document).ready(function(){

$('#family').click(function() {
 value = $(this).val();
 $('.cica').css('font-family', value)
 });
});

//capture the down key
$(#family).bind(keydown, function(e) {
if (e.keyCode == 40) {
value = $(this).val();
$('#family').css('font-family', value)
return false; //prevent default behavior
}
});

/script


I am trying to bind a keydown to this form so when I press Down key
the form change its value and execute the function - change the font-
family.
It looks that my bind keydown does nothing. What should I change here?

Thank you.

[jQuery] Re: Bindind keydown function to a form - submit on keydown (value change)

[Mircea]

Thanx Nathan,
It works. It does change the class to the #family form. Is it possible
to make it change the class to the Option element?

option class=option value=Georgia label=GeorgiaGeorgia/
option
option class=option value=Times New Roman label=Times New
RomanTimes New Roman/option
option class=option value=HelveticaNeue-Light label=Helvetica
Neue LightHelvetica Neue Light/option

I've tryed with the following and it does not work:

 $(.option).bind(change keypress, setFamily);
 $(option).bind(change keypress, setFamily);

[jQuery] Re: Bindind keydown function to a form - submit on keydown (value change)

[Mircea]

Thanx a lot Nathan!
It works like a charm.

All the best

[jQuery] Setting Attributes and filter them

[Mircea]

Hi,
I want to make something that will do the following:
Have 5 elements, each element with its own Attributes - font-size,
color, font-style, markup (span, li, b,...)
When an element is selected to have an if statement that will open a
new panel.

I am thinking at something like this:

Set element1, the following Attributes:span, font-size 20px...

If ellement1 selected Attributes = li
execute function li

If ellement1 selected Attributes = span
execute function span

I am not quite sure how to do this (well, in fact I am clueless.. ).
If anyone can give me some pointers on where to start or some
tutorials I would be greatfull.

Thank you!

[jQuery] Multiple elements slider

[Mircea]

Hi,
I have one slider that have to resize font-size on 4 different
elements. At this time it works on all 4 of them (span) but I would
like to make it work for any individual element that is selected. If I
select one element the slider should resize only that one.

My slider code is:

// Font Size Slider
$().ready(function() {
document.onselectstart = new Function('return false');

/* simple slider[default skin] */
var maxFont = 60;
var mf = $('span).css('font-size', 20);
//   var mf = $('span').attr('title');

$.fn.jSlider({
renderTo: '#slidercontainer1',
size: { barWidth: 400, sliderWidth: 5 },
onChanging: function(percentage, e) {
mf.css('font-size', maxFont * percentage);
window.console  console.log('percentage: %s',
percentage);
}

});
});

Thank you for your help!

[jQuery] Re: Multiple elements slider

[Mircea]

Thanx Nathan,
I've set a class on the selected element and tell the slider to resize
text on that class. Firebug tells me that the class is set but does
nothing to the respective class...

[jQuery] Re: Multiple elements slider

[Mircea]

This is strange,
The element is selected after I had click and drag it, change its
position. It have the class 'selected' dynamically added to it. If I
create another static element div class=selectedSome text/div -
the text resize work on that new element.

[jQuery] Re: Multiple elements slider

[Mircea]

Nathan,
It does work this way!
Thank you!

[jQuery] Select part of text and add a CSS class

[Mircea]

Hi,
I am trying to create my first jQuery script. I want to have a text in
a p, select it with the cursor and add a class to it. I know that I
can use the .select and .addClass functions.

$(p).live(mouseup,
function() {
selection = getSelectedText();
if(selection.length = 3) {
$(this).html($(this).html().addClass(selected);
}
}
);

//Grab selected text
function getSelectedText(){
if(window.getSelection){
return window.getSelection().toString();
}
else if(document.getSelection){
return document.getSelection();
}
else if(document.selection){

return document.selection.createRange().text;
}
}

I can not get this to work.
Thank you.

[jQuery] Re: Select part of text and add a CSS class

[Mircea]

Yes, I want to be able to select a part of the text and add a span to
it. Can this be done?
Thank you.

[jQuery] Re: Select part of text and add a CSS class

[Mircea]

Thanx for the code.
It does not work to me. I am a newbye is JQuery, please excuse the
dumb questions...

This is my code and markup:

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
  script src=http://code.jquery.com/jquery-latest.js;/script
  script type=text/javascript src=http://jqueryui.com/latest/ui/
ui.core.js/script
  script type=text/javascript src=http://jqueryui.com/latest/ui/
ui.draggable.js/script



script type=text/javascript

$(document).ready(function(){

$(p).live(mouseup,
function() {
selection = getSelectedText();
if(selection.length = 3) {
var $spn = $(span/span).html(selection).addClass
(selected);
  // append/set this '$spn' inside another DOM object
}
}
);



//Grab selected text
function getSelectedText(){
if(window.getSelection){
return window.getSelection().toString();
}
else if(document.getSelection){
return document.getSelection();
}
else if(document.selection){

return document.selection.createRange().text;
}
}

});

/script

  style
  p { color:blue; }
  div { color:red; }
  span.hl { background: yellow; }
  #selected {background: yellow;}
  .selected {background: yellow;}
  /style
/head
body
div id=#container
pthis is the text to be selected - a part of it/div
/body
/html

[jQuery] Re: Select part of text and add a CSS class

[Mircea]

I've added

$(p).append(spn)

It ads only the text spn at the bottom of the text. I probably did not
used the append function right to pass the variable to p.
Thanx

[jQuery] Re: Select part of text and add a CSS class

[Mircea]

Thanx a lot Morning.
It does work this way

All the best!