I am trying to animate an image(id is register1) in ui5. I have tried using using the animate feature of jQuery. But it does not seem to work.
var a = this.getView().byId("register1");
a.animate.css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
a.animate.css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0});
a.animate({visible:'true'},"slow");
a.animate({visible:'false'},"slow");
a.animate({visible:'true'},"slow");
the function 'byId' does not give you a jQuery-object, which is required to use 'animate'
try to use
var $a = $(this.getView().byId("register1").getDomRef());
$a.animate.css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
$a.animate.css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0});
$a.animate({visible:'true'},"slow");
$a.animate({visible:'false'},"slow");
$a.animate({visible:'true'},"slow");
As herrlock wrote, but instead of getDomRef() and then getting the jQuery object of it, you can also use the $() function, which is available on all UI5 controls.
And assuming the code is inside a Controller (the this.getView() hints at this), you can also use this.byId().
So instead of
$(this.getView().byId("register1").getDomRef());
it is:
this.byId("register1").$()
Not much different, but a bit less cryptic. :-)
If this does not work, make sure that the HTML element does exist at the time when this code is executed!
Related
I would like to change the style of the clear input icon, but can not change it.
<a-input placeholder="Basic usage" allowClear />
In my css, I use the classname ant-input-suffix and write
.ant-input-suffix{
background-color: #ffa;
}
Classname ant-input-clear-icon doesn't work either.
What can I do to change it?
What you are running to is probably a specificity (what is specificity in css) problem.
To fix your problem (if it is specificity) you can do:
span.ant-input-suffix {
background-color: #ffa;
}
To better target your elements we would need to see more HTML before giving a concrete answer
I am using GSAP v3 with ScrollMagic v2.0.7.
The problem I face is that after the animations are finished and I scroll up (reverse: false), it correctly registers that I don't want to execute the animations again on reverse, but it creates a padding-top equal to the duration of the scene:
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: "#responsive-divider",
duration: "100%",
triggerHook: 0,
reverse: false
})
.setTween(action)
.setPin("#responsive-divider")
.addTo(controller);
In this case, the height of the element with the id of "responsive-divider" is 311px, so the class "scrollmagic-pin-spacer" gets a padding-top: 311px;
If I inspect element and remove padding-top then everything is OK.
Why is this happening? Is there a way to prevent this?
PS1: if I do not disable "reverse" then it works just fine. But in this case I don't want to get the reverse animation.
PS2: I found a way around this but I don't know if its a hack or the solution. On my timeline I used the "onComplete: removePadding", and I did the following:
function removePadding() {
document.querySelector(".scrollmagic-pin-spacer").style.paddingTop = null;
}
Feels a little bit hacky to me.
Thanks in advance!
Adding triggerHook: 0 resolved the problem for me!
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I'm using the supersized jquery plugin in order to display a fullscreen background slideshow.
Look at this website (it's not my own but I'm using the same structure):
http://mysampleconcept.com/situs4/
As you can see (for example if you give the header some opacity) the images begin at the top of the body.
But I want them to begin below the header (so that the header doesn't cover the top of the image).
If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer.
So that's not the solution I want.
So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.
How can I do this?
Sorry, my English is not the best...
I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981
You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function.
Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:
var portfolioSize = function() {
var headerOffset = 100;
$('#supersized').css({
height: $(window).height() - headerOffset,
top: headerOffset + 'px'
});
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });
I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.
Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).
I tried to do a layout using dijit in dojo (1.7.2), but the result did not looks like the way I intended.
My first attempted is trying a declarative style from some example (here http://pastebin.com/Uy0pFmn3), which worked fine. Then I tried to convert it to programatic style (here http://pastebin.com/qRWUQsQN ), but it only showed the layout that created last.
Did I do misunderstanding how the dijit's layout works or just some minimal overlook here ?
thanks
You must add CSS styles:
html, body {
height: 100%;
width: 100%;
}
and for BorderContainer:
style="height:100%; width:100%"
EDIT: ok I got it. I guess I cannot use new ContentPane but instead, new dijit.layout.ContentPane (So here the finalize version http://pastebin.com/eYfeQUd8). The weird, "show only last layout" cause by my weird CSS stuff.
One thing that puzzled me is that why new ContentPane did not work ? As far as I recall, some example did like this
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer) {new BorderContainer //STUFF//}
I see the problem here..
In your pastebin code you are missing do declare the function paramter like the below example...
Your modified code:
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"], function(BorderContainer, TabContainer, ContentPane ) {
var appLayout = new BorderContainer({"design": "headline"}, 'appLayout');
Also the order of the require paramters should match inside the function parameters also ..
Waseem Ahmed V