I have a problem with animation in jquery. I want to make an element smaller after time (1second) and then move this to the bottom (20px).
What am i doing wrong?
$(function(){
var box = $('box');
box.delay(1000).animate({
width: 100,
height: 100,
}, 3000, function(){
box.animate({
top: "+=20",
}, 3000);
});
})
Your code works: https://jsfiddle.net/b4qjagwt/
However, I think you meant to select #box not box, is that right? There is no <box> element.
For the element to move down, you have two options:
Make the box element have position: relative
Use a top margin: "margin-top": "+= 20"
Using relative positioning will mean the element may overflow onto something else. I don't know what your page looks like, but you can try both and see which works best.
Related
I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n
This is what the popup looks like now:
I want to make the actual popup bigger as well as all of the text boxes inside.
Apparently, this changes the size of the actual popup and then centers it on the screen, the problem now is that I don't know how to resize the text boxes inside. It is executed on the EDIT event of the grid:
window.setTimeout(function () {
$(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center();
}, 100);
Does anyone know how to do this?
Can you just use regular CSS? Like:
.k-edit-form-container .k-textbox,
.k-edit-form-container .k-widget
{
width: 600px;
}
You just have to make the selectors be a bit more specific that Kendo's built-in ones.
You can just delete the "parent"
window.setTimeout(function () {
$(".k-edit-form-container")
.width(800)
.height(400)
.data("kendoWindow")
.center();
}, 100);
I have a main view, then on that view I have, as children, two labels and an image. I want the labels to flow one after another from the top of the screen and I want the image at the bottom. I get the labels to flow properly by setting layout:'vertical' in the main window. But once that is done, I can't seem to force the image to the bottom. Here is a snippet of my code:
var self = Ti.UI.createView({
backgroundColor:'#fff',
layout:'vertical'
});
var l1 = Titanium.UI.createLabel({
text:quote,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontFamily:'Marker Felt',fontSize:24},
top:20,
left:15,
right:15,
height:'auto'
});
self.add(l1);
var l2 = Titanium.UI.createLabel({
text:author,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontSize:16},
top:10,
left:15,
right:15,
height:'auto',
textAlign:'right'
});
self.add(l2);
var imgView = Titanium.UI.createImageView({
image:myimage,
setBottom:10,
height:100
});
self.add(imgView);
I have tried setting the image layout and that doesn't work. If I change the 'self' window layout to 'absolute' then I can't seem to get the labels to flow cleanly after one another. The first label is of variable height so I need them to follow each other.
I am using Titanium 1.82.
Thanks. In advance.
You might need to add another view. The 'base' view would have what you are calling 'self' added at top:0 and height: 'auto'
Then add imgView to 'base' with bottom: 10 (not setBottom like you have).
Just set the bottom:0; position: fixed; i think this will help u to set the image bottom of the screen.. If it still not working means try with Html,Css and Javascript for design it will be very easy.
i have a page that shows a div on mouseover i want the page to move to the div on focus....i got help here to do that...
Now i want the onfocus to the div to move with the easing plugin and move it. i dont want to use the 'slow' in the animate e.g
$('html, body').animate({ scrollTop: $('#box0').offset().top }, 1000);
how can i apply easing to the above code
Secondly i want the div that is showing to slide out from left to right on mouseenter and slide right to left before hiding.
this is what i am using for now. I know there is a better or best way to achieve what i am doing right now.
$("#app0").mouseenter(function () {
$("#lSection2").show('slide').delay(3000); //container for div of four
$("#boxContent0").slideDown(2000);$('html, body').animate({ scrollTop: $('#app0').offset().top }, 1000);// one of the divs within #lSection2
});
$('#boxContent0').mouseleave(function() {
$("#boxContent0").fadeOut(1000);
$("#lSection2").fadeOut(1000);
});
Thanks for your help
The easing can be added as follow, see http://api.jquery.com/animate/
.animate( properties [, duration] [, easing] [, complete] )
You can use hover for mouseover and mouseout.
$("#app0").hover(function () {
// Mouseover
$("#lSection2").stop(true, false).width(0).animate({ width: 200}, 1000);
},function(){
// Mouseout
$("#lSection2").stop(true, false).width(0).animate({ width: 0}, 1000);
});
The stop is needed otherwise mouseover, mouseout, will complete the first animation and then the next and the next and the next, this way you can stop the animation and continue with the next.
i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements.
i mean the row i want to show tooltip on its mouseover is loaded into page by ajax.
here's the code:
$("[id^=pane]").delegate("[id^=comm]","mouseover",function() {
$(this).tooltip({
// each trashcan image works as a trigger
tip: "#tooltip",
// custom positioning
position: "center right",
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } });
});
the tooltip is shown when mouseover but firebug report this error:
"$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function"
is it because of using $(this) ???
The problem is that you haven't loaded the dynamic function. From the jQuery tools documentation:
the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.
Furthermore, you don't need your delegate call. You are redoing the tooltip creation on every mouseover. You only need to do it once; the plugin will handle the events internally.
$("[id^=pane] [id^=comm]").tooltip({/*...*/})
.dynamic({/*...*/});
This selects all elements with ids beginning comm that are children of elements with ids beginning pane. Note that adding appropriate classes to all these elements would speed up your selection significantly.
it is solved now,i searched more in google and found the solution.
here it is:
$("[id^=pane]").delegate("[id^=comm]:not(.hastooltip)","mouseover",function() {
$(this).addClass("hastooltip").tooltip({
tip: "#tooltip",
position: "bottom center",
offset: [-10, 0],
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } }).mouseover();
});