I'm using the yui editor. I want to know if it possible to limit the editable height area.
ex: height:300px, so over 300px, the carret stop writting.
thanks
html:
<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>js:
$(document).ready(function(){
var lines = 10;
var linesUsed = $('#linesUsed');
$('#countMe').keydown(function(e) {
newLines = $(this).val().split("\n").length;
linesUsed.text(newLines);
if(e.keyCode == 13 && newLines >= lines) {
linesUsed.css('color', 'red');
return false;
}
else {
linesUsed.css('color', '');
}
});
});
You can do some code on your editor panel when user enter characters & calculate length and return false if limit exceeds.
This is a simple jQuery that can work on iExplorer, Firefox and Crome:
$('#my_frame').load(function () {
$(this).height($(this).contents().find("html").height()+20);
});
I add 20 pixels just to avoid any scroll bar, but you may try a lower bound.
Related
I am using Telerik Grid for Blazor WASM.
When data has changed on the server. I get notified via a SignalR connection.
I would like the affected rows to change background color and then return to the normal background color.
Could be a transition to red and fade back to the white or gray color.
I have seen many examples using hover and transitions. But this should be shown without user interaction and preferably delayed on items not in the current view. So when you scroll the grid and the items become visible, the animation starts.
Can AOS https://github.com/michalsnik/aos be used? Or will it only trigger on scroll?
The easiest way for me would be to set a class on the row in the row render event. But it’s a razor page so I can code a custom template.
Whatever can be done using :hover can be done if you add a class (then remove it after the transition). As for the appear only after scroll, you can check for the element is in view using the provided function.
function isScrolledIntoView(el) {
// from https://stackoverflow.com/a/22480938/3807365
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
// isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
var el = document.querySelector(".row")
window.addEventListener("scroll", function() {
if (isScrolledIntoView(el)) {
if (el.getAttribute("data-did-it")) {
return;
}
el.setAttribute("data-did-it", "true")
el.classList.add("active")
setTimeout(function() {
el.classList.remove("active")
}, 500)
}
})
.row {
transition: 500ms;
background: white;
}
.active {
background: yellow;
}
<div style="height: 400px">
scroll down
</div>
<div class="row">
this is a row
</div>
<div style="height: 400px">
scroll up
</div>
i am having a hard time finding any information on the ordering of directives and their updating of css properties.
for example, i have two directives, one to set an element to full screen height, and one to align content vertically.
app.directive('fullscreenElement', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
$(element).each(function(){
$(this).css('height', $(window).height());
});
}
};
});
app.directive('alignVertical', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
var height = $(element).height();
var parentHeight = $(element).parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
$(element).css('padding-top', padAmount);
}
};
});
They both work independantly, the trouble is when they are nested, the align-vertical directive doesnt work, im assuming this is because the css height hasn't been set yet? how do i make sure it is set before the alignVertical directive runs? any tips for writing these two directives in a more angular way would be appreciated.
this works:
<header style="height:800px">
<div align-vertical>
this content is centered vertically as expected
</div>
</header>
this doesn't work (content doesnt center vertically, even though header height is now fullscreen):
<header fullscreen-element>
<div align-vertical>
the header element is now fullscreen height but this content is *not* centered vertically
</div>
</header>
thanks
Figured out a solution, posting it here in case anyone finds it helpful.
The trick is to use scope.watch and scope.evalAsync to monitor changes of height to the parent container and run them after rendering is complete.
app.directive('alignVertical', function() {
return {
link: function($scope, element, attrs) {
// Trigger when parent element height changes changes
var watch = $scope.$watch(function() {
return element.parent().height;
}, function() {
// wait for templates to render
$scope.$evalAsync(function() {
// directive runs here after render.
var that = $(element);
var height = that.height();
var parentHeight = that.parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
that.css('padding-top', padAmount);
});
});
},
};
});
My present code doesn't work and i have a unexpected token error :
<script type="text/javascript">
var myWidth = (window.screen.availWidth - 100);
document.write("
#test {
width:" + myWidth +"px;
}
");
</script>
what's wrong ?
And, i would like to know if this is a correct way : i made a menu like http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ , displayed starting at the left ro the right, and i don't want to hide a button who has 100px width, (% width can't be appropriate). so, i do this for calculate width. It's a good way ? (i use html5/angularjs for android application).
Proper way
<p id="demo">Click the button to return the available width of your screen.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = "Available Width: " + screen.availWidth + "px";
document.getElementById("demo").innerHTML=x;
}
</script>
I have a div with applied property position: fixed;. I need to stop this property on some height of screen scroll. Any ideas?
I just need the css code only.
You can do it with jQuery pretty easily:
$(window).scroll(function(){
if ($(window).scrollTop() >= target) { // change target to number
$("#el").css('position', 'relative');
}
});
or pure JavaScript:
window.onscroll = function(){
if(window.scrollY >= target) { // change target to number
document.getElementById('el').style.position = 'relative';
}
};
I have a bootstrap progress bar that changes the current progress when the width attribute is changed. I want to change this width attribute and add 10% when the user toggles it on and decrease 10% when the user toggles it off.
Here is my code:
<div class="progress progress-danger progress-striped active">
<div class="bar" style="width:30%"></div>
</div>
<a id="updateit">Click to change the progress</a>
$(function(){
$("#updateit").toggle(function(){
$('.bar').css("width", + '10%');
});
});
Thanks in advance! :)
Here's a working fiddle
You can't add percentages (I believe), so I converted it using the width of.progress.
0.1 = 10%
$(function(){
$("#updateit").toggle(
function(){
$('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
return false;
},
function(){
$('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
return false;
});
});
The example on the other answer is ok but .bar will finally have a fixed value in pixels. You can try this if you still want to set the value in % (if, in case the parent changed its width, .bar would also change for % values):
$(function(){
var $bar = $(".bar");
$("#updateit").toggle(function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
},
function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
});
});
I noticed a couple things with your code.
First, make sure you have an href on your anchor. It's proper HTML even if it isn't used (add return false; to your JavaScript to make it not follow the link). My browser didn't recognize the link at all because it didn't have an href.
Next, you want users to click the link and then it toggles the width, right? You'll need the click() event then.
After that, here's what I came up with:
jQuery
var isOn = true;
$(function(){
$("#updateit").click(function(){
console.log(isOn);
if ( isOn ){
isOn = false;
$('.bar').css("width", '10%');
} else {
isOn = true;
$('.bar').css("width", '20%');
}
return false;
});
});
HTML
<div class="progress progress-danger progress-striped active">
<div class="bar"></div>
</div>
Click to change the progress
CSS (used to show the .bar for testing and to set the initial width)
.bar{
width:20%;
height:20px;
background:#600;
}
The jsFiddle