I have problems to animate a value of a certain element when selecting it with the class, instead it will animate all elements of that class.
$('.class').parent().hover(
function() {
$({ value: $(this).val() }).animate( .... );
...
}, function() {
$({ value: $(this).val() }).animate( .... );
...
});
Unfortunately due to a plugin i use for creating a slider i have to use the .parent() selector, so i can not use ..
$('.parent') -> $('.class', this)
.. what i think it would solve it.
I have three elements with the ".class"-class and they are all three animated whenever i hover one of them.
further explanation:
The html is only one thing:
<input type="text" value="0" class="class" />
The Plugin creates a canvas above the input and the input is used as the value for the animated bar. It also creates a div wrapping around this two elements. Like so :
<div>
<canvas>
<input ... >
</div>
I'm sure i can find a easy solution by using id's and writing it multiple times in the code with the id's as selector, but i hope for a more elegant way to solve this.
Here the JSFiddle
As long as you know that the <canvas> tag will always be created, why not just use the <canvas> tag as the selector to provide context?
$('canvas').hover(
function() {
var that = $(this);
$({ value: $(this).next() }).animate(
...
progress: function() {
that.next().val(Math.round(this.value)).trigger('change');
}
);
}, function() {
var that = $(this);
$({ value: $(this).next().val() }).animate(
...
progress: function() {
that.next().val(Math.round(this.value)).trigger('change');
}
);
});
NEW Working Fiddle
Maybe try wrapping it in an event listener instead:
$(function(){
$('.class').on('hover',function(){
$({value:$(this).parent().val()}).animate( ...)
})
});
Related
I found here on Stackoverflow similar topics but not the same.
I am using jquery Minicolors on my project: https://github.com/claviska/jquery-miniColors/
Everything work fine, but I need to do easy thing - I need to get actual color value and write it to the HTML document. So for example I need to do this:
<p><script>document.write(actualColor);</script></p>
Simply just write the actual color code anywhere in static HTML. I am very bad in JS and I didnt find some working solution.
My minicolors code look like this:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
});
});
});
</script>
And I use just this input for picking color:
<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">
What can I do? I guess solution is very easy.
On change of the color, re-assign the value to the input element so that it contains new value. Then you can use that value. If you want, you can create another hidden input element to store the color values as well.
'change' event gets triggered when color value is changed. This is where all DOM manipulation should go into.
$("#inline").minicolors({
change: function(hex, opacity) {
$("#inline").val(hex);
}
});
On your code:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
change: function(hex, opacity) {
$(this).val(hex);
}
});
});
});
</script>
I am working on a Table with div inside the cell, and I want that div to be droppable.
And when I drop something in a div it generate a new div under the first one.
But the dynamically generated div must be droppable to and now it's not...
Here is the creation of a div:
// in a loop with i
divCreate = $("<div>", { id: "divCreate" + i, class: "droppable" });
$(divCreate).css("text-align", "center");
$(divCreate).css("width", "125px");
$(divCreate).css("height", "30px");
$(Cell).append($(divCreate));
JS droppable :
$(".droppable").droppable( function() {
// a lots of line with several function
})
So I try to add that $(divCreate).droppable(); to the creation of the div. Now the div is droppable but not with the JS function that I affect to the class ".droppable".
Do I need to make $(divCreate).live("droppable"); ? Or is it impossible and I need to put all the code from the JS function to the div creation? I really want to avoid that if it is possible.
Move the droppable code into a named function:
function my_droppable() {
// a lots of line with several function
}
And change your general binding to:
$(".droppable").droppable(my_droppable);
Then you can do:
divCreate.droppable(my_droppable);
after appending new elements dynamically.
Try to use:
$(divCreate).appendTo($(Cell)).droppable();
Here is the sample I have created.
$( "<div/>", {
"class": "test",
id:"myDiv",
text: "Drag me!",
width:"125",
height:"30",
'text-align':"center"
}).appendTo( "#droppable" );
$("#myDiv").css("text-align", "center");
$("#droppable" ).draggable();
I think this question ultimately boils down to where I should place the JQuery code, and I am unsure for backbone.js.
I have a nested div :
<div>Parent
<div class='pull-right remove-measure-btn'>Child</div>
</div>
and I want the child to only show when the parent is being hovered.
So I can use this code (top lines within the func() in the render() of the parent Backbone.View.extend:
render: function():
....
$(this.el).hover(
function() {
$('.remove-measure-btn').show();
// $('.remove-measure-btn').css('visibility' : 'visible');
},
function() {
$('.remove-measure-btn').hide();
// $('.remove-measure-btn').css('visibility' : 'hidden');
}
);
....
return this;
},
But this only toggles the display, and since I am using Bootstrap and taking advantage of .pull-right, I need to toggle CSS' :visibility, and not display: to keep the height of the child div in place when it is not visible. So if I use the second line from within the above code block, I get an undefined error, since the compiled template has been returned yet (i think....).
So where do I place the JQuery to change the CSS visibilty, or how do I change the rendering to accomodate the code where it is?
Notes:
There are many of these "parent" and "child" divs.
I am assuming it is best to use the selector with this.el to tie the interaction directly as opposed to using several global document.ready()s, but maybe I am not aware of a "safe/good" way to accomplish it using this method
As chcrist notes, the "Backbone" way of doing this is to use the events hash:
var MyView = Backbone.View.extend({
events: {
'mouseenter': 'showChild',
'mouseleave': 'hideChild'
},
render: function () {
//...
},
showChild: function () {
$('.remove-measure-btn').css({'visibility' : 'visible'});
},
hideChild: function () {
$('.remove-measure-btn').css({'visibility' : 'hidden'});
}
});
Also, I'm assuming this is a typo, but this code is wrong:
$('.remove-measure-btn').css('visibility' : 'hidden');
You can either pass an object (one or more style properties):
$('.remove-measure-btn').css({'visibility' : 'hidden'});
Or pass one property/value pair:
$('.remove-measure-btn').css('visibility', 'hidden');
This can be done with straight CSS. Javascript (backbone or otherwise) is not required.
Adding the following CSS to your page will get you exactly what you need without the use of javascript:
.remove-measure-btn {
visibility:hidden;
}
div:hover > .remove-measure-btn {
visibility:visible;
}
A fiddle showing this in action is here: http://jsfiddle.net/35TXY/
try $('remove-measure-button').addClass('hidden') and removeClass('hidden'). Define hidden:
.hidden {visibility: hidden;}
Note: Changed code so that images and texts are links.
Basically, I have 3 pictures all with the same class, different ID. I have a javascript code which I want to apply to all three pictures, except, the code needs to be SLIGHTLY different depending on the picture. Here is the html:
<div class=column1of4>
<img src="images/actual.jpg" id="first">
<div id="firsttext" class="spanlink"><p>lots of text</p></div>
</div>
<div class=column1of4>
<img src="images/fake.jpg" id="second">
<div id="moretext" class="spanlink"><p>more text</p></div>
</div>
<div class=column1of4>
<img src="images/real.jpg" id="eighth">
<div id="evenmoretext" class="spanlink"><p>even more text</p></div>
</div>
Here is the Javascript for the id="firsttext":
$('#firstextt').hide();
$('#first, #firsttext').hover(function(){
//in
$('#firsttext').show();
},function(){
//out
$('#firsttext').hide();
});
So when a user hovers over #first, #firsttext will appear. Then, I want it so that when a user hovers over #second, #moretext should appear, etc.
I've done programming in Python, I created a sudo code and basically it is this.
text = [#firsttext, #moretext, #evenmoretext]
picture = [#first, #second, #eighth]
for number in range.len(text) //over here, basically find out how many elements are in text
$('text[number]').hide();
$('text[number], picture[number]').hover(function(){
//in
$('text[number]').show();
},function(){
//out
$('text[number]').hide();
});
The syntax is probably way off, but that's just the sudo code. Can anyone help me make the actual Javascript code for it?
try this
$(".column1of4").hover(function(){
$(".spanlink").hide();
$(this).find(".spanlink").show();
});
Why not
$('.spanlink').hide();
$('.column1of4').hover(
function() {
// in
$(this).children('.spanlink').show();
},
function() {
// out
$(this).children('.spanlink').hide();
}
);
It doesn't even need the ids.
You can do it :
$('.column1of4').click(function(){
$(this); // the current object
$(this).children('img'); // img in the current object
});
or a loop :
$('.column1of4').each(function(){
...
});
Dont use Id as $('#id') for multiple events, use a .class or an [attribute] do this.
If you're using jQuery, this is quite easy to accomplish:
$('.column1of4 .spanlink').hide();
$('.column1of4 img').mouseenter(function(e){
e.stopPropagation();
$(this).parent().find('.spanlink').show();
});
$('.column1of4 img').mouseleave(function(e){
e.stopPropagation();
$(this).parent().find('.spanlink').hide();
});
Depending on your markup structure, you could use DOM traversing functions like .filter(), .find(), .next() to get to your selected node.
$(".column1of4").hover(function(){
$(".spanlink").hide();
$(this).find(".spanlink, img").show();
});
So, the way you would do this, given your html would look like:
$('.column1of4').on('mouseenter mouseleave', 'img, .spanlink', function(ev) {
$(ev.delegateTarget).find('.spanlink').toggle(ev.type === 'mouseenter');
}).find('.spanlink').hide();
But building on what you have:
var text = ['#firsttext', '#moretext', '#evenmoretext'];
var picture = ['#first', '#second', '#third'];
This is a traditional loop using a closure (it's better to define the function outside of the loop, but I'm going to leave it there for this):
// You could also do var length = text.length and replace the "3"
for ( var i = 0; i < 3; ++i ) {
// create a closure so that i isn't incremented when the event happens.
(function(i) {
$(text[i]).hide();
$([text[i], picture[i]].join(',')).hover(function() {
$(text[i]).show();
}, function() {
$(text[i]).hide();
});
})(i);
}
And the following is using $.each to iterate over the group.
$.each(text, function(i) {
$(text[i]).hide();
$([text[i], picture[i]].join(', ')).hover(function() {
$(text[i]).show();
}, function() {
$(text[i]).hide();
});
});
Here's a fiddle with all three versions. Just uncomment the one you want to test and give it a go.
I moved the image inside the div and used this code, a working example:
$('.column1of4').each(function(){
$('div', $(this)).each(function(){
$(this).hover(
function(){
//in
$('img', $(this)).show();
},
function(){
//out
$('img', $(this)).hide();
});
});
});
The general idea is 1) use a selector that isn't an ID so I can iterate over several elements without worrying if future elements will be added later 2) locate the div to hide/show based on location relational to $(this) (will only work if you repeat this structure in your markup) 3) move the image tag inside the div (if you don't, then the hover gets a little spazzy because the positioned is changed when the image is shown, therefore affecting whether the cursor is inside the div or not.
EDIT
Updated fiddle for additional requirements (see comments).
I want to append .item element before .content element but it just simply removes .item from previous location and append before .content.
What i want is to use some animation that slowly remove .item element from its original position and appear slowly on its new position.. how can i do this?
$Item = $('.item');
$('.content').before($Item);
Regards.
How about something like this:
$Item = $('.item');
$Item.fadeOut(1000, function() {
$('.content').before($Item);
$Item.fadeIn(1000);
}
The .fadeOut() method fades the element over the specified time (in milliseconds), and on completion calls the function which then moves the element and fades it back in.
Demo: http://jsfiddle.net/9gGAT/5/
You can also use the hide and show -methods of jquery to achieve a sliding effect. I'd also package the transition within it's own method so it can be reused, so you don't have to write the same code multiple times.
var smoothLikeSilk = function(mover, before) {
$item = $(mover);
$content = $(before);
$item.hide('slow', function() {
$content.before($item);
$item.show('slow');
});
}
$(function(){
$('#btnMove').on('click',function(){
smoothLikeSilk('.item', '.content');
});
});
http://jsfiddle.net/9gGAT/6/
Do you mean something like this:
jsFiddl Link
Try this,
$(function() {
$('#btnMove').on('click', function() {
$Item = $('.item').fadeOut('slow', function() {
$('.content').before($Item);
$Item.fadeIn('slow');
})
});
});
Demo