<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<textarea id="one" class="inner">
Goodbye
</textarea>
</div>
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
LIVE: http://jsfiddle.net/tGFmq/
how can i make automatically scroll to down in this textarea?
Add this bit to your code (preferably at the end of whatever inserts you have):
var psconsole = $('#one');
if(psconsole.length)
psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());
See this Live Demo: here
To calculate the bottom scrollTop, you can simply subtract the height from the scrollHeight:
var oneDiv = $("#one");
bottom = oneDiv.prop('scrollHeight') - oneDiv.height()
Then you can set its scrollTop to bottom, or use amazing jQuery's animate() for cool animation.
Live Demo: here
I realised my problem was that I had the code in the incorrect place. -> Placed under the element and got the problem to solve (rookie mistake....) -- Just a reminder to all.
Related
I am simply trying to put custom text in the center of this countdown circle but I can't figure out how to replace the number and text currently in the center.
Codepen link:
http://codepen.io/anon/pen/zqjdRg
Example Code:
<div class="progress-pie-chart" data-start-time="30" data-percent="30">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>Changing this does nothing</span>
</div>
</div>
</div>
I thought if I change the span text it would work but no dice :(
Make your change in line number 40.
$('.ppc-percents span').html('Your text');
Codepen
The trick lies in line no. 40 of JS : $('.ppc-percents span').html(percent+' sec');.
Using this line, the span inside is set with the text 'n' seconds remaining. If you want to remove that text, just remove line 40 in JS.
I have 3 elements that show/hide their contents when clicked on.
What I am aiming for: Click on element 1, brings the entire div into view. If I then click on element 2, the second div is brought into view.
What happens currently: Click on element 1, brings the entire div into view. Scroll down a bit and click on element 2, it scrolls back up to display the entire first div instead of the second div.
I believe the issue is that I have .content as the parameter in the scrollTop function but I haven't been able to figure out what I should put in there to address the issue.
My jquery/javascript is here:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle(); //toggles the content
setTimeout(function(){
$('body').animate({scrollTop:$('.content').offset().top},200)
}, 200); //delay of 200 ms to let the entire slidetoggle animation finish, then scrolls to the top of the div
});
});
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Experience</h2>
</div>
<div class="content">
content goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Dogs</h2>
</div>
<div class="content">
contents goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Cats</h2>
</div>
<div class="content">
more content
</div>
</div>
</div>
</div>
The solution for me has been to use $("html,body") when animating scrollTop property. Some browsers do not play nicely with $("body") alone, although I have no proper explanation for this.
Second problem is you're referencing $(".content") in your timeout function. This animates scrollTop to the first occurrence of .content, not necessarily the clicked occurrence. But, we can do one better:
Third, and not a problem but a better way to handle, is to use the callback function of slideToggle: this function is code that gets executed only after slideToggle finishes. Do this rather than set a timeout. Timeout length is arbitrary, for example in a very old, very slow browser, 200ms may not be long enough duration to wait.
See the updates below:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle( function(){
$('body,html').animate({scrollTop: $(this).offset().top},200);
});
});
});
If you want to scroll to the top including the headline, simply grab the parent again and use its offset instead.
This line:
$('body,html').animate({scrollTop: $(this).offset().top},200);
becomes:
$('body,html').animate({scrollTop: $(this).parent().offset().top},200);
Example here: https://jsfiddle.net/nb0fvu3u/
Parent example here: https://jsfiddle.net/nb0fvu3u/1/
I have a contenteditable div that acts as a textarea:
<div class="post" placeholder="Write a comment..." contenteditable="true"></div>
How can I empty the div through JS/JQuery so that it's clear of all values?
I've tried $(".post").html(""); but it doesn't work properly.
Please help.
$(".post").empty();
demo
jquery empty
In pure javascript a simple elm.innerHTML=''; should work just fine:
<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
document.getElementsByClassName('post')[0].innerHTML='';
">clear</button>
Note that a div doesn't have an placeholder-attribute, you'd have to substitute a simple function for that, containing just one line:
for( var elms=document.getElementsByClassName('post'), L=elms.length
; L--
; elms[L].innerHTML=elms[L].getAttribute('placeholder')
);
Here is a working jsfiddle of the above.
Hope this helps!
EDIT:
Not all browsers will have a flashing type cursor! Instead they often just clear the div and since the height shrinks back to 0 px you'd have nothing to hold on to, so to fix this, naturally you'd need something to select and reset your placeholder text:
<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
var elm = document.getElementsByClassName('post')[0];
elm.innerHTML=elm.getAttribute('placeholder');
">clear</button>
Working jsfiddle here.
So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks
Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});
Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});
I have a div that has CSS as following,
<div style="overflow-y:scroll; height:100px;"> long Text....</div>
The issue is long text is shown and vertical scroll bars shown but when browsing the page div is scrolled to bottom and end of the of the long text is shown instead from beginning portion of long text.
Any way to fix this ?
Thanks
Do something like this :
<div style="overflow-y:scroll; height:100px;">
<div style=" height:500px;">
long Text....
</div>
</div>