By default all text area are given a fixed height in main css file.I have created a jHTMLArea control and when user provide a huge value, we need to display the entire content by resizing the JHTML iframe.Currently the below code gives user the option to resize and view the data but I want the entire jHTMLtext area to auto resize based on content height. Kindly help.
$(document).ready(function () {
$(".txtContentDesc").htmlarea({
loaded: function () {
this.iframe[0].contentWindow.focus();
var elemId = $(this.textarea).attr("id");
$(this.editor).blur(function (event) {
return captureJHtmlContentTextareaonchange(elemId);
});
}
}).parent().resizable({ alsoResize: $('.jHtmlArea ').find('iframe') });
});
Here, I am taking the height of contents inside iframe and updating it on loading the jHTMLArea.
$(".txtContentDesc").htmlarea({
loaded: function () {
var elemId = $(this.textarea).attr("id");
var height = $("#" + elemId + "").prev().find('iframe').contents().height();
$("#" + elemId + "").prev().css("height", height + "px");
$("#" + elemId + "").prev().find('iframe').css("height", height + "px");
$("#" + elemId + "").prev().find('iframe').height(height);
$(this.editor).mouseleave(function (event) {
return captureJHtmlContentTextareaonchange(elemId);
})
}
});
Related
I want to add new html in page asynchronously like
$.each(programListAll, function (j, innerItem)
{
programHtml = '<div class="row"><ul>';
$("#programList").append(programHtml);
});
It should show user that html is adding asynchronously.
How can I achieve this?
You could have a little delay in adding the items, the code would look like this:
var $programHtml = $('<ul class="row"></ul>');
$('#programList').append($programHtml);
var delay = 1000;
$.each(programListAll, function (j, innerItem)
{
$programHtml.delay(j * delay).append('<li'> + innerItem + '</li>');
});
I am trying to align right side of absolute div with right side of another div using angularjs directive. Code is almost working but children divs are a bit wider than parent and I am getting a wrong value of offsetWidth.
jsfiddle
My directive:
app.directive('alignElementRight', function ($document) {
return {
restrict: 'A',
scope: {
alignElementRight: '#'
},
link: function (scope, element, attrs) {
scope.$watch('alignElementRight', function (value) {
console.log(value);
var relEleme = $document.find('#' + value);
var myEl = angular.element(document.querySelector('#' + value));
var elOffsetLeft = myEl[0].offsetLeft;
var elOffsetTop = myEl[0].offsetTop;
var elOffsetWidth = myEl[0].offsetWidth;
console.log('main width:' + elOffsetWidth);
var absElemOffsetWidth = element[0].offsetWidth;
console.log('menu: ' + absElemOffsetWidth);
var newOffsetLeft = Math.abs(elOffsetLeft + elOffsetWidth - absElemOffsetWidth);
element.css({
left: newOffsetLeft + 'px'
});
});
}
};
});
The simplest fix would be to reset the bootstrap's negative margin settings for .row elements because that's what's causing all the mess (your calculations are good otherwise):
.row {
margin: 0;
}
See it here: http://jsfiddle.net/9d8gq8r2/4/
The max- and min-width attributes on an <img> tag are very useful, particularly the max width which can prevent an img from streching larger than its original size.
Now this is easy when you are using a specific image, so you can set it to be the same as the size of the image. But what if you want to apply this to a general image, for example one which is uploaded by a user? (so you don't know what the dimensions are) In other words, set the max/min width to the exact dimension of the image, for an arbitrary image.
this should do it...
<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
...
<div id="img-container"></div>
...
</html>
<script>
function loadImage(imgSrc) {
var newImg = new Image();
newImg.onload = function() {
var height = newImg.height;
var width = newImg.width;
$(newImg).css({
'max-width':width,
'max-height':height
});
$("#img-container").append(newImg);
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
loadImage('youimage.jpg');
</script>
you could also use server side code to get the image size.
try like this
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
alert(this.width + " " + this.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
});
Working demo:
http://jsfiddle.net/4N6D9/1/
$(document).ready(function(){
$('#container').load('contents/home.html');
$('#nav ul#navigation li a').click(function(){
var page = $(this).attr('href');
$('#container').fadeOut('slow').load('contents/' + page + '.html').fadeIn('slow');
return false;
});
});
This works good when loading pages within a div container.
home.html containing nivoSlider, when the whole page is refreshing it works good but loading home.html again onto #container after loading pages using function
$('#container').load('contents/' + page + '.html') then the nivoSlider isn't not working.
I have to refresh the whole page just to refresh the div. So I need a code to refresh the div every time it load the pages onto the div #container.
Make sure to encapsulate unique knowledge in a single place in your code. If you need to refresh something, make sure to put this in a single place and then call it as required. Your code could look something like this:
$(document).ready(function() {
var container = $('#container');
function loadContent(url, callback) {
return container.load(url, {}, function () {
// Add code here to refresh nivoSlider
// Run a callback if exists
if (callback) {
callback();
}
});
}
loadContent('contents/home.html');
$('#nav ul#navigation li a').click(function (event) {
var page = $(this).attr('href');
container.fadeOut('slow').loadContent('contents/' + page + '.html').fadeIn('slow');
event.preventDefault();
});
});
i have small question.
how is it possible to set the heights of 2 divs so that they dont collapse but rather scale dynamically if i minimize the window? i did this in js:
$(document).ready(function(){
var footer = document.getElementById('footer').offsetHeight;
var sidebar = document.getElementById('sidebar').offsetHeight;
document.getElementById('sidebar').style.height = sidebar - footer + 'px';
});
this is working but not when i minimize, do i have to do it in a function and call it during window.load or so? the problem now is that when i minimize the browser, the divs are going over each other again..
thanks
I think you need to bind to the resize event
$(document).ready(function(){
var sidebar = document.getElementById('sidebar').offsetHeight;
$(window).resize(function(){
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = sidebar - footer + 'px';
});
});
Here is the solution also for those who once search for this kind of setup...
<script type="text/javascript">
$(document).ready(function(){
var winh = document.body.clientHeight;
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
document.getElementById('sidebar').style.marginBottom = footer + 'px';
$(window).resize(function(){
var winh = document.body.clientHeight;
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
document.getElementById('sidebar').style.marginBottom = footer + 'px';
});
});
</script>
this code sets the height of sidebar dynamically, both during document.ready and also during resize. special thanks to Bart for help!