$(window).resize(function(){
$('.container').css('height', $(window).height());
});
Can i get the resized(changed) height of .container?
It doesnt work.
.css('height', $(".container").height());
Try this:
.css('height',$('.container').height($(window).height()));
Related
How do I dynamically set a height of an element?
I have a v-carousel but it takes way too much space on the screen.
So I need something like:
v-bind:height="{ '300' : $vuetify.breakpoint.mdAndDown}"
But it doesn't work.
I also though 'well maybe it's a string, so let's try a number'
:height="{ 300 : $vuetify.breakpoint.mdAndDown }"
And it didn't work either. tried also 300px and '300px' and none of it works.
The right syntax is to bind the height to a computed property like :
<v-carousel v-model="model" :height="customHeight">
and :
computed:{
customHeight(){
return this.$vuetify.breakpoint.mdAndDown?300:500;
}
}
FULL EXAMPLE
I've binded the same function to all elements that I want(let's say View and Label).
In this onClick handler function I want to get the element which was clicked and increase its 'top' by 1.
Please tell me if you know how to do that, I can't find an answer yet.
My global click handler function:
function increaseElementTop(e) {
// Here we should increase element's top position.
Ti.API.info(JSON.stringify(e));
}
Thanks, any help is appreciated.
Get the e.source attribute from the Event e. Then use the setTop() method.
if (e.source == $.yourLabel) {
$.yourLabel.setTop($.yourLabel.getTop() + 1)
}
UPDATE: Regarding your comment: I thought it would only be used for two elements. A universal approach would be something like this:
e.source.setTop(e.source.getTop() + 1);
Unfortunately I have no machine available to test the code but I will do so later (Tuesday I guess). Just try it and let your programm print the e.source variable. If this does not work you can also try to use e.source.getId().
function increaseElementTop(e) {
var theUIElement = e.source;
theUIElement.top = theUIElement.top + 1;
}
Add the event listener to each of your UIElements, and this will get the element you click on & modify the top.
My textfield name is searchtextfeild.
When I type anything, it autosuggests as in the given picture.
Now, I simply do not want to show this autosuggest. I want to disable it.
I tried,
searchtextfeild.autoautocorrectionType = FALSE;
Strange thing is though searchtextfeild is textfield, it does not have property autoautocorrectionType.
Anyway, how can I disable this autosuggest?
autocorrectionType property has type UITextAutocorrectionType which is enum:
typedef NS_ENUM(NSInteger, UITextAutocorrectionType) {
UITextAutocorrectionTypeDefault,
UITextAutocorrectionTypeNo,
UITextAutocorrectionTypeYes,
};
So you just need to do
searchtextfeild.autocorrectionType = UITextAutocorrectionTypeNo;
Check this please:
searchtextfeild.autocorrectionType = TRUE;
For some strange reason it works for me.
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
can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?
I can get it to work but I can't control the height of the scroll for the new content.
I'm new to all this and have no clue were to start.
here's what I'm working on:
http://homepage.mac.com/jjco/test/index7.html
when the page is loaded you see the scroll bar where there's no content...
clicking on print/damm (shows the height I originally set for this content)
clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should.
obviously, I don't want the scroll to be there when it's not necessary.
any help would be greatly appreciated.
It's better to use the refresh() method in iScroll, which will recalculate the height.
myScroll.refresh();
I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =
here is code sample:
var myScroll;
function createIScroll(){
myScroll = new iScroll('wrapper');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 500);
}
$ajax(){
//receiving data
}
function someFunction(){
//dynamic content is created
iScrollRefresh();
}
My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.
try this, when you insert your new data into iScroll do these steps
//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer
To watch height changes:
setInterval(function () {
var newScrollerHeight = $scroller.innerHeight();
if (newScrollerHeight !== prevScrollerHeight) {
prevScrollerHeight = newScrollerHeight;
myScroll.refresh();
}
}, 500);
Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental You can enable and use it.