I'm getting familiar with AngularJS. I'm trying to be as 'pure' as I can. For that reason, I'm trying to avoid including jQuery. However, I'm having a challenge getting an HTML element's height. Currently, I'm trying the following:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
console.log(element.css('height'));
}
};
})
;
However, when this code gets executed, an empty line gets written to the console. I'm trying to display the height of the element. Is there a way to do this in AngularJS without using jQuery?
Thank you!
It appears this is working correctly and gives the same result if you use:
element.style.height
Since no inline style or CSS height is set on the element a blank line is shown. Instead of relying on the style you can get the HTML elements height directly.
console.log(element[0].offsetHeight);
http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview
How do I retrieve an HTML element's actual width and height?
The small wrapper around element provided by angular allows you to ask for properties, so:
element.prop('offsetHeight');
Will just work fine, see: http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview
Related
I have a table with clickable rows using this js:
jQuery(document).ready(function ($) {
$(".clickableRow").click(function () {
window.document.location = $(this).attr("href");
});
but, I have ajax search for data in table and when is table displayed by ajax, js doesn't work any more. So I wrap every content of every with in that ajax table. So it is looks like: http://jsfiddle.net/fo1tvdyf/4/
Width works fine, but height isn't 100% :( Any one have some idea? Sorry for my english.
You need to give your a display:inline-block so it can correctly assume any given dimensions
Assuming your a has the class clickableRow:
.clickableRow{
display:inline-block;
}
Though note that percentage values are calculated relative to the parent container- as such, you may also need to give the encapsulating element a height value.
Is there anyway to change the position style of an element dynamically from 'absolute' to 'fixed' dynamically in IE 9 and before?
In other words we want an element to move vertically on the page till a point when it would reach at the top of the window and then at that point make it fixed so it wont just go up anymore? Makes sense?
It just works in my copy of IE 9.
document.getElementById('foo').style.position = 'fixed';
What you're looking for is a way to change this value based on another in-page condition.
I'd suggest what you need is something akin to this (using jQuery):
var targetElement = $('#your-fixed-absolute-element');
var togglePixelY = 100; // change to suit your needs
$(window).bind('scroll resize',function(){
if($(this).css('scrollTop') <= togglePixelY && !targetElement.hasClass('absolute')) {
targetElement.addClass('absolute').removeClass('fixed');
} else if($(this).css('scrollTop') > togglePixelY && !targetElement.hasClass('fixed')) {
targetElement.addClass('fixed').removeClass('absolute');
}
});
Here is another useful question you can read up on:
Get current scroll position and pass it as a variable with a link?
or Position of a div relative to the window?
and there are plugins for this (look for 'sticky sidebar' for example) and a nice tutorial for it here: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/
Using jQuery?
http://api.jquery.com/css/
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}
I am using mootools 1.2 in a simple page. There's a div that displays a form (call it formdiv) that gets submitted via JS/ajax. The ajax request returns some data "confirmation message".
However, the formdiv div starts out maybe 500px high to accomodate the form elements. When the ajax request returns a variable-length return data ("confirmed for submission!") the div stays 500px high, leaving a lot of extra space.
My question is, is there a way to snap the div back to fit the new content after updating the content using innerHTML?
Thanks
EDITED: to add that the data returned by the Ajax call could be variable length-- so I can't assume it'll be a certain height and then reset the div to that height.
If your div starts off with predefined height using CSS then all you should do is set its height to auto or clearing styles altogether when they were set inline.
Check this JSFiddle (it works with jQuery here, but that doesn't matter when it comes to browser rendering div in question)
Okay I realize that this is like a year late but I came across this question while attempting to find a script to do just this. This was a great starting point but I felt like I should share the method I choose to use:
Get the current actual height of $('element').
h.before = $('element').getSize().y;
Fx.Morph can't handle setting the height to 'auto' so first you must set height: 'auto' on $('element') (in case it hasn't been already) and then set the html to the new content. This will allow you to get the new content's height.
$('element').setStyle('height', 'auto');
$('element').set('html', "Some other content.<br/>Very short.");
h.after = $('element').getSize().y;
Reset the height and then start the Fx.Morph with h.after.
$('element').setStyle('height', h.before);
var myEffect = new Fx.Morph('element', {
onComplete: function() {
$('test').setStyle('height', 'auto');
}
});
myEffect.start({'height': h.after});
You can check out the full code here: http://jsfiddle.net/cd4R9/
Please understand this is method is very basic and a lot would have to be done to make this site-ready. For example if your $('element') has padding, you will have to account for it or use the CSS property box-sizing: border-box;. Hope this helps.
I have two grids on a page that seem to always be position:fixed.
I want them to scroll with the page when an overflow scrollbar appears on the body. The grids however ALWAYS stay in the same place and don't scroll with the rest of the page content.
Is there any way to get an UltraWebGrid to be relative and scroll up the page with the rest of the page's content?
This seems to work in IE6 but not in IE8. All jQuery/CSS hacks haven't been successful.
Very similar issue(s) and related reference links that may be helpful for any who also land here:
This one cracked it for me, changed my head to runat=server and magically the overflow and scrolling are working again. This is not a good practice, but a work-around. This is because
“…. The page’s controls collection is created differently if the page has inline expressions. In a page without inline expressions, the first element in the controls collection is a Literal control that has all of the html between the top of the page and the first server control. When there’s an inline expression, the first element in the controls collection is the first server control on the page (usually the element or the ).
The grid needs the literal with all that markup to figure out what doctype the grid has because it needs to render slightly differently depending if the page is in quirks mode or standards mode. One of the big differences is it adds a “position:relative” style to the scrolling area to prevent the problem with the rows spilling out of the grid.
The way to fix it is to move the inline code to the code behind. Use the Page.ClientScript.RegisterClientScriptBlock method to generate the javascript based on the Request.Params["expired"] value. ……”
http://wagnerblog.com/2007/09/creative-terminology-and-an-infragistics-ultrawebgrid-bug/
This one didn't seem to help me, but ymmv
http://blogs.infragistics.com/forums/p/21880/79596.aspx :
The grid uses relative positioning. Its containers should have
position:relative as well so the grid does not stick out.
Just in case it could be useful for anyone. I found that, for some reason, every single object in the table created by the component has the attribute "position: relative". When you remove it, the table behaves as it should.
Thus I've written this code to remove this attribute. I copied and paste the name of the table created by Infragistics, so change it (or find a better way to get it ^^)
function removeRelativePosition(item) {
var elt;
if(item == '') {
elt = document.getElementById('ctl00xmasterContentPlaceHolderxwPanReportsxuwGridReport_main');
}
else {
elt = item;
}
//Call this function recursively on every child
if(elt.childNodes !== undefined) {
for(var i=0;i< elt.childNodes.length; i++) {
removeRelativePosition(elt.childNodes[i]);
}
}
//Then remove the attribute
if(elt.style !== undefined) {
elt.style.position = '';
}
}
//Run this function when your page is ready
$(document).ready(function() {
removeRelativePosition('');
});