I want to get translateX of swiper-wrapper real-time. I will use the real-time translateX to do some works.
swiper.on('sliderMove', function onSliderMove() {
console.log(this.getTranslate(), this.translate); //-64 -64, or maybe other value, but not -320
});
I listen to sliderMove event, but the result is not correct.
I inspect the swiper-wrapper element, the style is
transition-duration: 0ms;
transform: translate3d(-320px, 0px, 0px);
I expect the value of this.getTranslate() should be -320, not -64
listen on setTranslate event will work.
swiper.on('setTranslate', function onSliderMove() {
console.log(this.translate);
});
Related
Working with Vue.js, I do use a simple way to set dynamically the height of a text area that resizes when typing. But I am not able to do it when the component mounts or the value updates.
I have already try http://www.jacklmoore.com/autosize/, but it has the same problem.
I have created a sandbox that shows the problem, when typing the box it updates, but not when the value changes dynamically
Live example: https://codesandbox.io/s/53nmll917l
You need a triggerInput() method:
triggerInput() {
this.$nextTick(() => {
this.$refs.resize.$el.dispatchEvent(new Event("input"));
});
}
to use whenever you're changing the value programatically, triggering the resize logic used on <textarea> on "real" input events.
Updated codesandbox.
Note: Without the $nextTick() wrapper, the recently changed value will not have been applied yet and, even though the input is triggered, the element has not yet been updated and the resize happens before value has changed, resulting in the old height and looking like it didn't happen.
Not really feeling the answers posted here. Here is my simple solution:
<textarea
rows="1"
ref="messageInput"
v-model="message"
/>
watch: {
message: function(newItem, oldItem) {
let { messageInput } = this.$refs;
const lineHeightInPixels = 16;
// Reset messageInput Height
messageInput.setAttribute(
`style`,
`height:${lineHeightInPixels}px;overflow-y:hidden;`
);
// Calculate number of lines (soft and hard)
const height = messageInput.style.height;
const scrollHeight = messageInput.scrollHeight;
messageInput.style.height = height;
const count = Math.floor(scrollHeight / lineHeightInPixels);
this.$nextTick(() => {
messageInput.setAttribute(
`style`,
`height:${count*lineHeightInPixels}px;overflow-y:hidden;`
);
});
},
}
<style scoped>
textarea {
height: auto;
line-height: 16px;
}
</style>
I have a website that I have added some basic Mootools animation to. Here is the page of the website i have a question on:
http://www.humsdrums.com/portfolio/webdesign.html
You will notice that when you mouse over the large images, they fade and a magnifying glass tweens down. Here is the Mootools class called "Magnify" I made for this:
var Magnify = new Class({
Implements : [Options, Events],
options : {
},
initialize : function (item, image, options)
{
this.setOptions(options);
this.div = document.id(item);
this.img = $$(image);
this.tweenBackground = new Fx.Tween(this.div,{
duration:'250',
property:'background-position'
});
this.div.addEvent('mouseenter', this.reveal.bind(this));
this.div.addEvent('mouseleave', this.hide.bind(this));
},
reveal : function()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px -78px', '175px 90px');
this.img.tween('opacity', .15);
console.log('mouse over');
},
hide :function ()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px 90px', '175px -78px');
this.img.tween('opacity', 1);
}
});
I then need to initialize an instance of the class for each element i want to do this by grabbing the css id.
window.addEvent('domready', function()
{
var magnify1 = new Magnify('p1', '#p1 img');
var magnify2 = new Magnify('p2', '#p2 img');
var magnify3 = new Magnify('p3', '#p3 img');
var magnify4 = new Magnify('p4', '#p4 img');
});
What I want to be able to do is simple give each element I want to have this functionality a CSS class of "magnify so I don't have to use individual ID's and add another instance of the Mootools class every time.
If I the element a CSS class and put it into my Mootools class, it breaks. Even if it didn't break, it seems like Mootools would simply make all elements with that CSS class animate at the same time when only one is moused over.
How would I detect which instance of the "magnify CSS class is being moused over? My only thoughts were to find a way to grab all the elements with the "magnify" CSS class, put them into an array and then check to see if the item being hovered over equals one of the items in the array. I don't know how to do that or if that is the best way.
Any help or suggestions would be great! Let me know if you want to see more code or if I can explain something better.
you need to code to patterns more. first of all - you have a relationship of 2 elements - a containing div and an image.
your event is actually on the parent el but you also need to reference and animate the inner element (the image).
your selector is simply div.item-port > img if you want to grab all images. div.item-port > img ! div.item-port will grab the parent divs instead of those that have an image as direct child only. etc.
then you need to decide what element to attach the event to. you have many choices in your markup.
before you even get there, you have a a href which wraps BOTH your elements. that allows you to use a cross-browser :hover pseudo.
you can very easily do in pure css:
div.port-item {
/* defaults you already have and then ... */
background-position: 175px -78px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.portfolio-item a:hover div.port-item {
background-position: 175px 90px;
}
.portfolio-item a:hover img {
opacity: .15; // etc for cross-browser
}
only if you want to recover when the browser does not support transitions, you should instantiate your js class. http://jsfiddle.net/wMnzb/4/
var Magnify = new Class({
Implements: [Options],
options: {
parent: 'div'
},
initialize: function (images, options) {
this.setOptions(options);
this.elements = document.getElements(images);
this.attachEvents();
},
attachEvents: function () {
var selector = this.options.parent;
this.elements.each(function (el) {
var parent = el.getParent(selector);
parent.set('tween', {
duration: '250',
link: 'cancel'
});
parent.addEvents({
mouseenter: function () {
this.tween('background-position', '175px 90px');
el.fade(0.15);
},
mouseleave: function () {
this.tween('background-position', '175px -78px');
el.fade(1);
}
});
});
}
});
new Magnify('div.port-item > img');
simplified as much as is feasible, but you get the idea - completely ambiguous from ids and any such repetitive specificity.
I'm using the Strobe media player (with OSMF). I need to re-size the player when someone clicks a re-size button (built into the player). How can i do this? I've searched high and low but found no results.
Set scaleMode to "letterbox", then the player automatically adjusts its size depending on its parent div. You can then change its size, for example using jquery:
function getHeight() { return $(window).height(); };
function getWidth() { return $(window).width(); };
$(window).resize(function () {
$("#strobemediaplayback").css({ height: getHeight(), width: getWidth() });
});
Just like the title says. Because buildin widgets do not really fit, what I want to do, I need to make my own tooltipdialog implementation:
To start simple:
dojo.query(".small-avatar").connect("onmouseenter", function () {
var pos = dojo.position(this, true);
dojo.query("#user-tooltip").style({ left: pos.x, top: pos.y, visibility:"visible" });
});
I've come with this. Well I guess the problem is with pos. I've tried to digg with documentation, but honestly there is no word, on how access x and y position so I assumed it's with ".".
UPDATE:
After more checking, I figured out that problem lie in position it self, or style.
For some reason Dojo do not add coordinates to targeted node "#user-tooltip". It just change visibility.
You have the pos.x and pos.y correctly referenced since dojo.position() returns an object literal. From the Dojo docs, The return object looks like:
{ w: 300: h: 150, x: 700, y: 900, }
You may need to set position: absolute or position: relative on #user-tooltip.
I finally got it working:
dojo.query(".small-avatar").connect("onmouseenter", function (e) {
var pos = dojo.position(this, true);
dojo.style(dojo.byId('user-tooltip'), { visibility: "visible", "left": pos.x+pos.w+'px', "top": pos.y+pos.h+'px' });
});
I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.
Please advice on the best way to do this. I would like to avoid using plug-ins.
using jquery 1.4.2 or up, you can achieve this by using:
$(".smallCircle").hover(
function () {
$(this).animate({
width: '200px',
height: '200px'
}, 200, function() {
// Animation complete.
//do whatever
});
},
function () {
$(this).animate({
width: '100px',
height: '100px'
}, 200, function() {
// Animation complete.
//do whatever
});
});
put the class "smallCircle" in the small circle.
P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.