I want to cut off text based on a fixed height.When the text is cut off, a "more" link is used to expand to text. When the text is expanded, a "less" link is used to collapse the text. I wrote the js as this:
$(document).ready(function () {
// line height in 'px'
var maxheight=218;
var showText = "More";
var hideText = "Less";
$('.textContainer_Truncate').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('' + showText + '');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
});
The html code is:
<div class="textContainer_Truncate">
<p>content</p>
</div>
My problem is that the "more" link works but the "less" doesn't. That is, when more is clicked, the text is expanded but it won't go back when the less is clicked.What's wrong here?
Thanks
It's just a small error, this:
if (text.css('height') == 'auto') {
should be this:
if (text.height() > maxheight) {
FIDDLE
I believe you are looking this one
http://jsfiddle.net/rbUst/
$(".act").click(function() {
var val = $(this).text();
if (val == "More") {
$("div").css('height', '200px');
$(this).text("less");
} else {
$("div").css('height', '20');
$(this).text("More");
}
return false;
});
div {
background-color: #CCA;
height: 20px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
More
<div>This fskdljfl sflsdajfsadf
<br />fsdafsdfsadfsdf dfjsadf slfkjsf</div>
above is the live example..
Related
I need to truncate the text(with ... at the end) and on mouseover the entire text should get expanded.
I have tried to truncate by the below code. Problem with this code is, it expands the content on click of the ... but I need it to get opened when user mouse over anywhere on p tag
var len = 100;
var p = document.getElementById('truncateMe');
if (p) {
var trunc = p.innerHTML;
if (trunc.length > len) {
trunc = trunc.substring(0, len);
trunc = trunc.replace(/\w+$/, '');
trunc += '<a href="#" ' +
'onmouseover="this.parentNode.innerHTML=' +
'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
'...<\/a>';
p.innerHTML = trunc;
}
}
DEMO
I am looking for an easy way to do it.
Thanks in advance.
PS: No CSS solution please, as it is not compatible with all browsers (IE7).
You can use Jquery Like this :
HTML :
<p>Some Text</p>
JS :
var lengthText = 30;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('p').text(shortText);
$('p').hover(function(){
$(this).text(text);
}, function(){
$(this).text(shortText);
});
DEMO : http://jsfiddle.net/1yzzbv4b/2/
Or you can also achieve this with css3 property text-overflow:ellipsis;
CSS :
p{
text-overflow:ellipsis;
width: 250px;
white-space: nowrap;
overflow: hidden;
}
p:hover{
text-overflow:clip;
width:auto;
white-space: normal;
}
DEMO : http://jsfiddle.net/1yzzbv4b/
Assuming that you set the class of your p-elements to be of escape-text, the following jQuery-code should work.
$(document).ready(function() {
$ps = $('.escape-text');
$ps.each(function(i, el) {
$(el).data('full-text', el.innerHTML);
strip(el);
});
$ps.on('mouseover', function() {
$(this).text($(this).data('full-text'));
}).on('mouseout', function() {
$(this).text(strip(this));
})
});
var length = 100;
var strip = function(el) {
el.innerHTML = el.innerHTML.substr(0, length) + '...';
}
For my website at work I am trying to get the webbrowser to scroll to the tope of the page when in a small screen mode. According to some answers it should already being doing this anyway. I have enclosed a copy of the website here:
http://www.synergy-clinics.com/
I believe the code to control navigation is here:
var $currentclass = 'currentpanel';
var $currentlinkclass = 'currentlink';
var $class = 'panel';
var $dotclass = '.panel';
//var $body = 'body';
var $body = '#content'
var $downkey = '38';
var $upkey = '40';
//$(function () {
// $($body).mousewheel(function (event, delta) {
// var $current = $('div.currentpanel');
// $next = (delta > 0)? $current.prev($dotclass) :$next = $current.next($dotclass);
// if ($next.length) { ChangeCSSClass($current, $next); }
// event.preventDefault();
// });
//});
$(function () {
$($body).keydown(function (event, delta) {
var $current = $('div.currentpanel');
if (event.keyCode == $downkey)
{
$next = $current.prev($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
else if (event.keyCode == $upkey)
{
$next = $current.next($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
});
});
function MenuItemClick(SectionName)
{
var $current = $('div.currentpanel');
var $next = $('#' + SectionName);
if ($next != null) { ChangeCSSClass($current, $next); }
//event.preventDefault();
}
function ChangeCSSClass(Current, New)
{
$($body).scrollTo(New, 100, { offset: -115 });
$('#' + Current[0].id + 'Link').removeClass($currentlinkclass);
$('#' + New[0].id + 'Link').addClass($currentlinkclass);
Current.removeClass($currentclass);
Current.addClass($class);
New.addClass($currentclass);
}
I have Identified the scrollto line so it must be around here somewhere, any help would be much appreciated.
I was looking for that a few hours , and finally i did.
can you try that :
http://jsfiddle.net/b4M66/
jQuery:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
CSS:
#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }
HTML:
<div id="toTop">Back to Top</div>
The KeyCode functions arent supported on touch screen devices. You have your code based on that. Just try to move that to the touchstart or click function of an element.
I'm adding 50px on every click on my div header, and i want to make my div main has the same height of header when header is bigger than it.
I don't know why its not working.
I have this script
$(function () {
var alturaHeader = $('header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('header').height(function(index, height){
return (height + 50);
});
console.log(alturaHeader);
if (alturaMain < alturaHeader) {
alert("test");
$('.main').css({'min-height': alturaHeader });
}
});
});
any suggestions ?
JS Fiddle: http://jsfiddle.net/JWf7u/
Thanks.
There is you fiddle code You should update the height of div everytime it changes.
var alturaHeader = $('header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('header').height(function(index, height){
return (height + 50);
});
alturaHeader = $('header').height()
if (alturaMain < alturaHeader) {
$('.main').css({'min-height': alturaHeader });
}
});
why dont u use the css property height:100% for main (child) div..
check the below
$(function () {
var alturaHeader = $('.header').height();
var alturaMain = $('.main').height();
$('button').click(function(){
$('.header').height(function(index, height){
return (height + 50);
});
// below is not required we are using css to handle this
/*
console.log(alturaHeader);
if (alturaMain < alturaHeader) {
alert("test");
$('.main').css({'min-height': alturaHeader });
}
*/
});
});
--CSS--
.header
{
border:1px solid black;
}
.main
{
border:1px solid red;
height:100%;
}
heigth:100% it will do what u want check the below fiddle
http://jsfiddle.net/7fkp9/
remember as we have border right now so they dont have the same height.. it will very by 2 pixel.. for exact same height dont use the border property or set the border-size to zero(0) pixel
I am using .js to create a russian doll effect. This works however it seems that dragging from the top will sometimes show an error where the heading becomes detached from the base. I'm not sure why or how to fix.
Fiddle
HTML:
<div class='emails-container'>
<div class='column-header'>
<b>
Still Testing
</b>
<hr>
</div>These should lie on top of each other like a russian doll effect</div>
<div class='emails-container'>
<div class='column-header'>
<b>
Test Me
</b>
<hr>
</div>These should lie on top of each other like a russian doll effect</div>
CSS:
html{font-size:20px;font-family:Helvetica;color:red}.bookmarks-container{width:88%;margin-left:auto;margin-right:auto}.emails-container{padding-top:5px;width:140px;float:left;background-color:white;margin-right:10px;padding-left:10px;border-bottom-left-radius:10px;border-top-right-radius:30px;border:8px solid black; position:absolute; top:50%;left:50%; width:500px; height:500px}.emails-container:hover{border:8px solid red}.links{padding-top:10px;margin-bottom:10px}.links:hover{background-color:#B0E2FF;margin-right:10px}.footer{clear:both;padding-top:30px}.footer-container{margin-left:auto;margin-right:auto;width:50%}hr{color:red;border:4px solid black}a{color:#F87431;font-size:16px}.column-header{margin-top:7px}.header-login{text-align:right;padding-right:20px;float:right}.true-footer{width:40px;height:40px;background-color:white;position:absolute;bottom:20px;border-radius:40px;border:8px solid #1589FF}.true-footer:hover{border:8px solid #F87431}
javascript:
(function($) {
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$('div').drags();
On this page I find effect that I like and try to put it on my site but after six hour googling still nothing
http://terranea.demos.sabrehospitality.com/
So when you clik on "guide" in navigation footer slide up.
#IndexGuide{
position:relative;
width:100%;
z-index:98;
background:#fff;
}
is my div CSS and with this function I get result but with no animation like on that page
function GuideSlide(){
$('#IndexGuide').css({
'position': 'absolute',
'top': '80px',
'z-index': '100'
});
};
I look in their page source and they do something like this
$('#guide-toggle').click(function () {
$(this).toggleClass('active');
$('#guide-close').toggleClass('visible');
$('#work-cont').slideToggle();
$('#myModal2 .close').click();
if ($(this).hasClass('active')) {
currentOffset = $(document).scrollTop();
scrollPageTo(0);
} else {
scrollPageTo(currentOffset);
}
if($('#masthead,#myCarousel').length>0) {
$('#masthead,#myCarousel').slideToggle();
}
return false;
});
I try to modify but with no result.
Here is script that worked in all browsers for me!
$(document).ready(function() {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
if(flag == 'up'){
$("#IndexGuide").animate({"top": "80px"}, 1000);
flag = 'down';
}
else {
var windowHeight = $(window).height();
var lineHeight = $('#IndexGuide').height();
var newPosition = windowHeight + (lineHeight - 35);
$("#IndexGuide").animate({top:newPosition}, 1000, function(){});
flag = 'up';
}
};
try this check fiddle
<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>
js
var flag = "up";
$(".open-modal").click(function(){
if(flag == "up"){
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {
});
flag = 'down';
} else {
$("#IndexGuide").css({
"position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {
});
flag = 'up';
}
})
reference https://stackoverflow.com/a/15626812/1699833
Do it with animate(). Something like this
$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
// after animation stuff
});
You could also do it without edit the position to absolute and set a negative margin-top.
Refer this link http://api.jquery.com/toggle/
I hope The following simple example will give you the solution as you expected. The following example is got from the link http://api.jquery.com/toggle/. I've copied the code so that you no need to search through the website.
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p { background: #dad; font-weight: bold; font-size: 16px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function()
{
$( "p" ).toggle( "slow" );
});
</script>
</body>
</html>