I have a dynamic table where i have hide after displaying first few words from a big text, if the user want to read the complete data he use to click view more button to read the complete data it works fine but the problem is how to show view more only for the rows which has overflowed text in it.
Php solution
simply in php we can use strlen() and can give condition like
if(strlen($data) > 100 ){
make visible
}
but cant assume how many chars exactly fit in the div because users may use enter so that the text count may vary so it wont works.
JavaScript solution
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
here i can find which div is overflowing, but since table was dynamic i don't know the exact ids i tried something like
<tr>
<td>
<div id="hidden_field_{$row['his_id']}">{$row['his_data']}</div>
</td>
<td>
<br/>
<?php
$check_overflow=echo "<script>checkOverflow(document.getElementById('hidden_field_".{$row['his_id']}."'));</script>";
if($check_overflow=="true"){
?>
<a id="get_view_more_{$row['his_id']}" onclick="view_more({$row['his_id'];});">View More</a>
<?php } ?>
</td>
</tr>
this function works fine outside php on the bottom of the page
<script>
alert(checkOverflow(document.getElementById('hidden_field_1')));</script>
you can use ellipsis.
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
#div2:hover {
width: auto;
overflow: visible;
border: 1px solid #000000;
}
<p>This div uses "text-overflow:ellipsis": when you hover this it's visible</p>
<div id="div2">This is some long text that will not fit in the box</div>
just like this way.
Related
Currently, I have a button class which lets me place a clickable button inside a sentence, and a div class which lets me add content to the button which I placed at the end of the paragraph containing the sentence.
This is an example of how I use them
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
When this text is displayed on the page, the two sentences are placed inside two different paragraphs, so the div object is placed between them.
Here is a snippet with the css classes and the javascript.
( function() {
coll = document.getElementsByClassName("col");
conn = document.getElementsByClassName("con");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute('data-id', 'con' + i);
conn[i].setAttribute('id', 'con' + i);
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = document.getElementById(this.getAttribute('data-id'));
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
} )();
.col {
cursor: help;
border-radius: 0;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: red;
}
.con {
padding: 0 1em;
max-height: 0;
overflow: hidden;
transition: .3s ease;
background-color: yellow;
}
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
I wonder if it is possible to implement a shortcut to place the two objects with one command, that is to obtain the previous example by using something like this
Try to click [[THIS|nice!]] and see what happens.
Did you try?
What I mean is that the command [[THIS|nice!]] should place the object <button class="col">THIS</button> in the same position and the object <div class="con">nice!</div> at the end of the paragraph containing the command.
Is it possible to implement such a command (or a similar one)?
EDIT
I forgot to say that the content of the button, ie what is written inside the div, should also be possible to be a wordpress shortcode, which is a shortcut/macro for a longer piece of code or text.
Using jQuery, closest() find the nearest <p> element and add <div class="con">nice!</div> after <p> element. To toggle you can use class active and add or remove .con element.
$('.col').click(function(){
let traget = $(this).closest('p');
if(traget.hasClass('active')) {
traget.removeClass('active');
traget.next('.con').remove();
} else {
traget.addClass('active');
traget.after(`<div class="con">${$(this).data('message')}</div>`);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>
You usually dont use div to type text. you use it to define areas or group items. you could obtain what youre asking for in a 1 sentence like this:
html
<h1> some random text <a class="btnID">button</> some more text<h1>
css
.btnID {
color: red;
}
I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"
The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"
I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.
Here is the code for my JavaScript function:
<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>
<center><input id="numb"></center>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<p id="demo"></p>
<div class="jsFunction">
<script>
function myFunction()
{
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than five or greater than five
if (isNaN(x) || x < 5 || x > 5)
{
text = "Try again!";
}
else
{
text = "You are correct!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
Here is the CSS code for the function:
.jsFunction
{
margin-left: auto;
margin-right: auto;
}
This specific CSS code is only one of many, many attempts I have made at centering the text in the function.
Here is a link to a picture that will show you the problem I am having:
http://i.stack.imgur.com/Hb01j.png
Please help!
Try setting a class on the p tag that contains text-align: center;
Edit
Nesting your script in a div is meaningless as script tags don't get rendered
You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.
I would recommend the latter as the becomes more reusable, whereas you can't reuse an id on the same page
The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.
You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.
As Ryuu's answer mentions, text-align: center will do the job for (you guessed it) text and other inline-level content.
You should not use the deprecated center tag.
Your attempt to use margins will center something if you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.
In other words, margin can be used to align the box, not the stuff within the box.
Example 1: centers the element, but the text is still left-aligned.
Example 2: centers the element and its inline-level contents.
.margin-example1 {
width: 200px;
background-color: #ddd;
/* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */
margin: 0 auto;
}
.margin-example2 {
width: 200px;
background-color: #aaccee;
margin: 0 auto;
/* we still need this to get the desired behavior */
text-align: center;
}
<div class="margin-example1">Example 1</div>
<div class="margin-example2">Example 2</div>
So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block (Example 3) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also.
.example1 {
width: 100%;
text-align: center;
}
.example2 {
width: 200px;
text-align: center;
}
.example3 {
display: block;
width: 200px;
text-align: center;
margin: 0 auto;
}
.example4 {
width: 200px;
text-align: center;
}
.example4-parent {
text-align: center;
}
<div>
<input type="text" value="Example 1" class="example1">
</div>
<div>
<input type="text" value="Example 2" class="example2">
</div>
<div>
<input type="text" value="Example 3" class="example3">
</div>
<div class="example4-parent">
<input type="text" value="Example 4" class="example4">
</div>
Layout in CSS can be complicated, but the basics aren't hard.
Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting model when you are ready).
I'm trying to implement CSS nth-child on every number of elements. If a certain number is reached I want to hide the first element and make it reappear if the number reduces again.
The problem is that somehow the nth-child still counts the hidden element and thus wrongly implements the styling. Is this a bug or am I doing it wrong?
NOTE: The same thing also happens if I use jQuery
http://jsfiddle.net/bedex78/uZ5wn/23/
The View:
<div ng-app>
<div ng-controller="TheCtrl">
<p>Amount to add: <input type="text" ng-model="amount" ng-init="amount=1"></p>
<div class='holder'>
<div ng-class='elements.length < 6 ? "inside" : ""'
ng-hide="elements.length >= 6">
<button class='button' ng-click="add(amount)">Add more</button>
</div>
<div class='inside' ng-repeat="(k,v) in elements">
{{ $index }} Remove
</div>
</div>
</div>
</div>
The JS (AngularJS):
function TheCtrl($scope) {
$scope.elements = [{id:1},{id:2}]
$scope.add = function(amount) {
for (i=0; i < amount; i++){
$scope.elements.push({id:$scope.elements.length+1});
}
};
$scope.remove = function(index) {
$scope.elements.splice(index, 1);
};
}
The CSS:
.holder {
width: 300px;
height: 400px;
border: 1px solid black;
}
.inside {
height: 30px;
border: 1px solid black;
}
.inside:nth-child(3n+1) {
background-color: yellow;
}
.inside a {
float: right;
}
It happens because hidden element is still in DOM. So it is count as a child and styles applied accordingly.
You can try to use ng-if instead of ng-hide. It will make div disappear from DOM and styles will work fine.
Example
In Qualtrics, I am trying to create something like this:
https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png
The only way to have text boxes both next to and on top of each other is by using a matrix table with text entry. However, this only gives you the text boxes, without a space above the text entry box to insert an image. So I'm now trying to append these images using javascript. The ID of the text boxes is in the format of QR~QID17~3~2~TEXT (for the box on row 3, column 2).
Here is a sample I made of the text boxes in a 3x3 matrix.
https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1
Does anyone know how you can append an image on top of these boxes? Thanks.
I will start with a working example:
Working Example
This uses numbers, in place of images, but is still a valid example.
First, you will select the "Position text above" option, and in the rows of text you will place the following code:
<td class="c4">1</td><td class="c5">2</td><td class="c6 last">3</td>
replacing 1,2,and 3 with the images for that row(you will have to use an image tag to get this to work in a friendly way).
Once you have setup all three of your rows, add the following to the question javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
$$('.c1').each(
function (e) {
e.remove();
}
);
});
This hides a placeholder inserted by qualtrics and allows your rows to line up nicely!
Enjoy! Note though that this will likely require the images to be sized properly(I havent tested images)
How about using DIV container?
HTML
<div class="container">
<div class="box">
<div class="box-image">
<img src="http://lorempixel.com/output/city-h-c-150-230-4.jpg" />
</div>
<div class="box-input">
<input type="text" />
</div>
</div>
</div>
CSS
.box {
float: left;
width: 200px;
margin: 5px;
}
.container {
max-width:420px;
background:#CCCCCC;
overflow: hidden;
}
.box-image, .box-input {
text-align: center;
width: 100%;
}
.box-image {
background: #FFFFFF;
}
.box-input input{
margin-top: 2px;
width: 200px;
border: 1px solid #AAAAAA;
}
FIDDLE
Hi there my code is quite simple but Id like for the design purposes to keep everything neat , at the moment Im pulling all the description which is like Some could be huge others can be quite small , anyway to make it fair I decided to make a read more button and once I click it just expand on the text like , SO somehow to make it show the first 160 characters after that ... then ReadMore link button that when you click it expands and shows the whole text
Heres my script that I use for now :
<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">
So I would like to know how this is done and if possible only using javascript, thanks !
While you could of course use PHP, another way is to use the text-overflow property of css correctly.
This method will put less strain on the server, especially when there are a bunch of descriptions on the page. Using PHP to concatenate every single one is not efficient and is not the correct way to do this.
Removing a class is much simpler. And you can add it back when you want to show less.
<style>
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 14px;
}
.description {
width: 300px;
background: #ccc;
padding: 3px;
margin-top: 30px;
margin-bottom: 0;
}
</style>
<!-- It is likely you would use a PHP loop for this but for illustration
purposes I've listed them out -->
<p class="description ellipsis"><?=$movie[0]['description']?></p>
Read More
<p class="description ellipsis"><?=$movie[1]['description']?></p>
Read More
<p class="description ellipsis"><?=$movie[2]['description']?></p>
Read More
<!-- use as many as you want with no additional strain on server. -->
WITH JQUERY... http://jsfiddle.net/kx2nbv3z/
<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document)
.on('click','.read-more',function() {
$(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis');
})
.on('click','.show-less',function() {
$(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis');
})
;
</script>
WITH PURE JAVASCRIPT... http://jsfiddle.net/8wsbw0u8/
<script>
if (document.body.addEventListener) {
document.body.addEventListener('click',yourHandler,false);
}
else {
document.body.attachEvent('onclick',yourHandler);//for IE
}
function yourHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
prev = target.previousSibling.previousSibling;
if (target.className.match(/read-more/)) {
target.className="show-less";
target.innerHTML = "Show Less";
prev.setAttribute("class","description");
console.log(prev);
}
else if (target.className.match(/show-less/)) {
target.className="read-more";
target.innerHTML = "Read More";
prev.setAttribute("class","description ellipsis");
}
}
</script>
for PHP way:
$firstdesc=substr($thismovie['description'], 0, 160);
and when read-more pressed.
$totaldesc=substr($thismovie['description'], 160);
Ofcourse you can do it with Javascript too.
use the css style `text-overflow: ellipsis; and jquery for the full feature.
$('#read-more').click(function() {
$('#description').css('width','100%');
});
#description {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>