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/
Related
I'm trying to set the background-color of a Select element to the background-color of it's selected Option like so:
YUI().use('selector-css3', 'node', function(Y) {
function set_color( e ) {
this.setStyle('backgroundColor',this.one('option:checked').getStyle('backgroundColor'));
};
Y.on(['available','change'], set_color, '#id_linkcolor');
});
Strangely this works perfectly in Chrome. In FF however it seems to always revert to a specific color. Even more weirdly, this:
this.setStyle('backgroundColor',this.get('options').item(3).getStyle('backgroundColor');
does seem to work. But when I use the selectedIndex to retrieve the selected option it doesn't work anymore.
Check it out here: http://jsfiddle.net/9sy02756/4/
Thanks!
UPDATE
I decided to approach this differently like this:
function set_color( e ) {
this.set('className','');
this.addClass( 'linkcolor_'+this.one('option:checked').get('value') );
};
This way the parent SELECT element just gets assigned the same class as the selected child OPTION and css takes care of the rest. Probably a cleaner solution anyway.
http://jsfiddle.net/9sy02756/6/
In your code, when you do this.one('option:checked').getStyle('backgroundColor'), YUI uses the window.getComputedStyle method.
In Firefox, getting the background color on an <option> returns the hover color, which turns out to be a very nice blue. And it will remains that way until you open the select again.
The only way around this is to store the color during <option>'s mouseenter event, and apply it during change. But mouseenter on <option> are only triggered in firefox, not chrome nor IE.
In the end you will need a mix of both approaches to get it right. So the question is answered, the mystery solved, but the alternative approach you proposed in the edit is way simpler.
YUI().use('node', 'selector-css3', function(Y) {
var lastColor;
function set_color(e) {
this.setStyle('backgroundColor', lastColor || this.one('option:checked').getStyle('backgroundColor'));
};
Y.on(['available', 'change'], set_color, '#id_linkcolor');
// For firefox, store computed color before default select blue is applied
Y.on("mouseover", function(e) {
lastColor = e.target.getStyle('backgroundColor');
}, '#id_linkcolor option');
});
http://jsfiddle.net/fxaeberhard/hy3okdph/
I have a slickgrid that, in the 'onMouseEnter' event, I do the following:
change the underlying css for the row in question
call grid.invalidateRow()
call grid.render()
These latter two calls are necessary for the new css classes to be reflected. However, I then need to capture the onMouseLeave event, and it is not fired when I move my mouse away from the cell (or row), presumably because the call to invalidate/render has placed a new DOM element under my mouse, and it's no longer the one I initially "entered."
So I have two questions:
Is there another way to have the new css classes for a given cell be rendered without calling invalidateRow/render?
If not, is there another way to do this and still have the onMouseLeave event fired?
One option is to use the setCellCssStyles function.
grid.onMouseEnter.subscribe(function(e, args){
var cell = grid.getCellFromEvent(e),
param = {},
columnCss = {};
for(index in columns){
var id = columns[index].id;
columnCss[id] = 'my_highlighter_style'
}
param[cell.row] = columnCss
args.grid.setCellCssStyles("row_highlighter", param);
})
So the above changes the background-color of every cell of the row that has been moused into. In my fiddle, the mouseLeave subscription performs a simple console.log to ensure it is still firing.
Edit: fixed the external resource usages in the fiddle for cross-browser support
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){ .... });
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);
}