I have to elements #addimage and #addimage_imgtab that both need to be handled by the same function when clicked. I thought the following code should work, but it isn't, what am I doing wrong?
$('#addimage #addimage_imgtab').click(function(e){ .... });
You forget a comma:
$('#addimage, #addimage_imgtab').click(function(e){ .... });
Related
I have the following code snippet (just to illustrate the question, it is not full production code) for the CkEditor plugin:
onOk: function() {
var dialog = this,
element = dialog.element;
.........
element.setStyle('width', width+'%');
element.setStyle('text-align', align)
dialog.commitContent(element);
}
In this small code snippet a modification of one dialog element occurs using setStyle() method, after which commitContent is triggered.
So, the questions are:
Do I understand correctly, that each setStyle call here triggers
element rerender (repaint) since this element already exists in
DOM?
What is the purpose of commitContent() ckEditor method? Just an event for dialog elements to store some data?
setStyle
I belive that setStyle repaints the components already existing in the DOM, have a look at this example (that I have taken from the official documentation):
var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );
It first gets the element from the doc and Then sets the style, so basically it is repaiting it triggering events.
commitContent
From the official documentation:
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each
of the UI elements, with the arguments passed through it. It is
usually being called when the user confirms the dialog, to process the
values.
Hope this helped you!
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();
Seems like an easy solution but I can't wrap my head around it. I have four divs like the one below
<div ontouchstart="touchStart(event)" ontouchmove="touchMove (event)" ontouchend="touchEnd (event)" class="c1" id="c1">copy1</div>
The code for touchStart is very simple at the moment:
function touchStart (e) {
e.preventDefault();
e.target.style.color="#ff0000";
return false;
}
The issue is how can the touch functions target a different div (not the target that was touched) and change it's opacity from 0 to 1 in touchStart, then from 1 to 0 in touchEnd.
Thanks
I'm no expert but here's my two cents and hopefully will help you find a solution
With jquery, clicking one element can trigger a different one and change the target's css opacity attribute like:
$("#div_thats_touched").click(function(){
$("#target_div").css("opacity","1");
})
in javascript it would be something like
this.onClick(function(){
target=document.getElementById('target');
target.style.opacity("1");
});
or if you want to trigger the event of another element:
$("#div_thats_touched").click(function(){
$("#target_div").trigger("click");
})
And instead of having touchstart and touchend, you could use jquery's toggle method to combine them into one method (maybe)
http://api.jquery.com/toggle/
http://api.jquery.com/trigger/
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.
When using Sortable.create I can't seem to get the element that is being dragged. Does Sciptaculous not fully implement all Draggable and Droppable features when you use sortable?
Given:
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(){
console.log(this.draggables.each(function(e){if(e.dragging==true){return e};}));
}
My console always shows all the array of draggables. How do I only grab the one that is being dragged?
The onChange function actually gets a handle to the element passed in.
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(elementBeingDragged){
console.log(elementBeingDragged);
}