How to increase Googles polyfill dialog height dynamically - javascript

I use Googles polyfill dialog and want to increase it's height dynamically depending if a user clicks a dialog button to add more elements (rows) in it.
This is part the javascript which is called when the user cklicks that button :
var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);
but height is simple empty, no value - nothing
While mc_dialog.style.height = "500px" works perfect.
Why do I not get the value of mc_dialog.style.height ?
EDIT :
Ok after the answer of Evil Penguin I set the height initially in the javascript function, which opens the dialog, like this :
mc_dialog.style.height = "500px"
and later when the user clicks to add content to the dialog I can retrieve the height now, so it look like this now :
var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";
and it works perfect.
But now I have the question why do I have to set the style.height initially ? Isn't it a permanent attribute of that element ? And if not, why ?

Here is similar question.
.style.height only works if you have set the property in the first place.
EDIT:
Here is reference of HTMLElement.style property. It says:
The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute.
So as i understand it, if there is no style="smth" in the element's inline declaration, HTMLElement.style.smth doesn't work.

Related

JavaScript retrieving element's CSS values

I'm currently making a basic drag and drop system and need to retrieve the top and left properties of the element being moved. If I do this:
var mover = document.getElementById('mover');
alert(mover.style.top);
Will alert nothing ( ' ' )
Is there any way of retrieving CSS values (in JS) without having to define them with JS first?
You will need to use getComputedStyle if you wish to retrieve properties that are computed rather than defined.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
FROM the MDN link...
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
You can get the position of the element as position().top, The css values can be retrieved as .css("margin-top") or .css("top")
alert($('#mover').position().top);
alert($('#mover').css("margin-top"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>
Since you dislike jQuery, here is the solution in pure JS
Update :
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
<div id='mover'>dasdasD</div>
There are three possible tops to worry about:
The actual top position. Every element has a top resulting from the page layout, whether or not it has a computed value for the top property. Get this with getBoundingClientRect.
The computed value of the CSS property top. Get this with getComputedStyle, as mentioned in other answers
The current style value set on the element for top. Get this with elt.style.top as you attempted.
var mover = document.getElementById('mover');
alert(mover.offsetTop);
alert(mover.offsetLeft);

Change height of panel form javascript

Using JS Can get the height of an asp.net panel
var test1 = $$('ViewFeatureProperties')[0].offsetHeight;
if (test1<500)
{
//change height of panel to 275
$$('ViewFeatureProperties')[0].offsetHeight = 275px;
}
could get the value in test1, but wouldnt update to 275 if test1<500, any advice? ta
The offsetHeight property is read only, use height instead.
Your first line of code and if statement are, at least syntactically, correct examples of how to use it. To set it change your code to read:
$$('ViewFeatureProperties')[0].style.height= '275px';
Notice I've also wrapped my value with ' so that I'm assigning it a string.
Alternative:
Since you're using jQuery it seems, you can use jQuery to set the height:
$('ViewFeatureProperties').eq(0).height(275);
No massive difference, it's just that you now still have your jQuery object if you want to chain more functions.

Displaying and highlighting a particular line in HTML

I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.
You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.
There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.

Call custom attributes in jQuery

I am using a jQuery content slider that gives the current visible slide a class of .swipeview-active, and each slide has its own data-page-index number. I have some variables where I get the window height etc, but how do I set a retrieve the value for the data-page-index of the current active slide for use in a variable, for example:
var h = $(window).height(),
w = $(window).width(),
active = $('.swipeview-active'),
dpi = $('active').data("date-page-index"),
so every time I call dpi it should put in the value of the active slides data-page-index, but that doesn't work. Where am I going wrong? Thanks.
When accessing a data-* attribute via data() you don't need the data- prefix. Try this:
dpi = $('active').data("page-index")
You can also access a data attribute which was present on an element on page load via attr() - although it is not the preferred method. This method will require the data prefix.
dpi = $('active').attr("data-page-index")

visibility:collapse in javascript

I'm using Ultrawebgrid for my applcation:
I'm using a textarea for listing the errors in my application in the row template when the user clicks that particular row...
So I need to have
texarea when there are any errors..... otherwise when there are no errors i dont even
want the row_template to pop up..... I'm using IE6.
I'm checking if there are any errors using javascript.so I had to use the javascript event handler:: UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId)
where in I write the statements given below:
document.getElementById("TextArea2").style.visibility="collapse"
inside the above event function
1) it's showing javascript error as
"Couldnot get the visibility property:Invalid Argument"
but the row template does not pop up....... only the error's coming....
2) Is there any code to block the row template when there are no errors.??
i mean no pop_up for no errors
What's the solution for this???
DISPLAY
Use display instead of visibility. This occupies no space in your document.
document.getElementById("TextArea2").style.display = 'none'; // Turn off
document.getElementById("TextArea2").style.display = 'inline'; // Turn on
VISIBILITY
document.getElementById("TextArea2").style.visibility="hidden"; // Turn off
document.getElementById("TextArea2").style.visibility="visible"; // Turn on
By using the above code textarea won't be visible, but there will be blank space in your document having the height and width of the textarea.
Also 'collapse' value is supported only in Internet Explorer 8
Try using:
document.getElementById("TextArea2").style.display = 'none';
and (to turn it back on again)
document.getElementById("TextArea2").style.display = 'block'; // or 'inline'
You want:
document.getElementById("TextArea2").style.visibility = "hidden";
"collapse" is not a valid value for the visibility property in IE6, as your error message indicates.
Alternatively as suggested by #tvanoffsen you could set the display property to "none". This has a slightly different effect - it will not take up any space if set to "display: none", whereas setting "visibility: hidden" still takes up space.
use visible and hidden for .style.visibility attribute not block and hidden.
it works.

Categories