I want to truncate a given string taken from MySQL database through PHP to fit within given pixels. Most of the solutions I found were based on number of characters. But I specifically want it according to pixel length.(I don't want to use monospace font)
I found out that $('#idName').width() can be used in JavaScript for fitting. And that works fine with strings written in HTML simply. But here is the deal. My string is a variable stored in PHP, I need JavaScript to get width in pixels and I need to have that string in a span (in HTML) with specific id name.
So, I have tried to make it work using all three of them- PHP, HTML and JavaScript. Below is my code.
<?php
$len=100;
?>
<span id='d' style="display:none;"><?php echo substr($details,0,$len) ?></span>
<script>
var len=370;
while($('#d').width()>len){
<?php
$len=$len-1;
echo "<span id='d' style='display:none;'>" . substr($details,0,$len) . "</span>";
?>
}
<?php echo substr($details,0,$len); ?>
</script>
So I take my string's first 100 letters and put them in a span with id d. Then in JavaScript, I get its width and check in while loop. I run while loop (keep decreasing $len) until the pixel length of the substring is within desired width and keep redifining that substring in span with same id. Then I print that substring.
Could someone please change the code to make it work or suggest a better method? I am newbie in this, so please make it as simple as you can.
As far as I understand from your question, you are trying to hide an overflow when the string is longer than container given?
I would rather suggest using overflow:hidden; white-space:nowrap; and maybe some text-overflow:ellipsis; to make "..." effect just before the end of container. But you have to remember, that fonts render differently through most browsers and operating systems, so the user experience might be different on Windows than on Mac.
That probably won't work. JS and PHP can't be mixed like that. The while loop is useless.
One solution that came to my mind is that you can first get the PHP string, through ajax, and then display it according to the width using JS.
Related
I have a bunch of small tables that are formatted as inline-block elements. In the browser they display side by side as intended, but when using mPDF to output them they break after each table. No matter how I try to format them, they always break after the table. Is there a trick with mPDF to get elements to stack side-by-side?
I am pulling the exact HTML from the page and sending it via AJAX
Below is an example of the browser and pdf view.
My mPDF generator page looks like this:
<?php
include("mpdf60/mpdf.php");
$html = $_POST['html'];
$mpdf=new mPDF('utf-8', 'A4');
$mpdf->SetDisplayMode('fullpage');
// LOAD a stylesheet
$stylesheet = file_get_contents('../../_css/main.css');
$mpdf->WriteHTML($stylesheet,1); // The parameter 1 tells that this is css/style only and no body/html/text
$mpdf->WriteHTML($html);
$mpdf->Output('myPDF.pdf','D');
exit;
?>
I try a lot of thinks too, but finally i found a solution, just use:
float: left;
Thats work for me.
I've spent a couple of hours figuring out how to make inline <div> or <p> elements with mPDF. I found some limitations, which contains the inline-block too. The display: inline or display: inline-block is ignored. You have to put everything in <span> elements if you want to see them one beside the other.
For example, I have this CSS script:
<style>
.header{
background:none:
color:#fff;
}
</style>
Then, I would like to change the header value to:
<style>
.header{
background-color:#fff:
color:#000;
}
</style>
The values are stored in database. What makes me confused is which should be the best to do that: Using PHP script or CSS or even javascript.
I want it changed based on the CSS value from my database which I can change again when I need it (by using PHP script). Perhaps this question is too general but, please give me some scripts which I can perform it well.
Thanks for any help.
first, change the extension of your file from (e.g.) style.css to style.php . Then add this to the first line of your css:
<?php
header('Content-Type: text/css');
?>
and after that you can define the value of your background as a variable and change it easily.
background: <?php echo $value; ?>
and in your php file:
<?php value = "#fff"; ?>
UPDATE:
<?php $value = "#fff"; ?>
For maintainability and flexibility reasons, I want to propose the frontend, not a backend solution (also because so far nobody proposed that).
I especially like the approach taken in the Grips library, where you can compile CSS template, passing in variables as an input (i.e. colors), and get the CSS to use. All of that can happen in the browser. And you can use Grips for HTML templating as well.
As I mentioned in the comment, this video is the best introduction to Grips.
Also note that if you want to use Grips in the backend, you can - but it's a JS library, so it wouldn't fit perfectly into your PHP solution.
I think its same for both way.
If you want to use php then you will have to use inline css or style tag and its simple to.
Like
$color = (!dbValue?"defaule value":dbValue);
<style>
.header{
background-color:<?=$color?>:
color:#000;
}
</style>
Make a php page in that write
$row = mysql_fetch_array(mysql_query('select * from table'));
<style>
.header{
background-color: <?php echo $row['bg_color_from_db']; ?> //change variable
color:<?php echo $row['color_from_db']; ?>; //change variable
}
</style>
In order to achieve this you will need to use all three together, I am assuming you are using a LAMP set up on the back end. You will use PHP to first retrieve the values and store them, here is a good post to show this.
Link to Example on Stackoverflow
Once you have your values stored you will then need to create a file to change the DOM using JavaScript. Here is a good starting point produced by Mozilla Developers:
Mozilla JavaScript and CSS
The reason I suggest using JavaScript to achieve this is the ability to listen for events and change the client side in response. Hope this helps.
Import your database here In css or include db page;
$bg_color=$_row['column name'];
background-color:$bg_color;
And something like this you will be able to change your Background color using the value stored in database
I have a form that I am validating with JS on the front-end and PHP on the server side. What I need is a way to reliably count the number of links in an HTML string. The best way that I could think of was to count the closing tags. However simply searching for this tag will not work because the user could circumvent the validation by adding spaces like so: </a >.
I am fairly new to regex and this is the pattern that I have been able to come up with so far:
<[ \n\t]*\/[ \n\t]*a[ \n\t]*>
In Javascript:
function link_count(s){
return s.match(/<[ \n\t]*\/[ \n\t]*a[ \n\t]*>/g, s).length;
}
In PHP:
function count_links($str){
return preg_match_all('<[ \n\t]*/[ \n\t]*a[ \n\t]*>', $str, $matches);
}
Is this the best approach? Will it affect the performance of my form (the html string could be very long)? I am looking for the most efficient and reliable solution.
Thanks in advance.
So, like #sgroves said, </a> are not all links. checking for href might be more interesting.
Also, why not checking the opening tag directly?
I tried searching for <a .... href>
You might use the 's' modifier to ignore newlines...
/<\s*\ba\b.*?href/gs
http://regex101.com/r/bG8lN1/3
I have a ( probably very unclean) script that I intend to convert letters put into a text field into html image tags with corresponding pathways. I know there are probably easier ways of doing this, PHP for example however I am using it as a bit of an experiment to familiarise myself further with JS/Jquery. I have overcome a few obsticles to get where I am now as most of this is new ground for me.
In some cases the letters will have multiple images associated with them that will be selected at random so there are a couple of lines included which do this. These are fine however, the issue comes with the section of code that replaces the letters from the text field with the text and variables that make up the image tag. Whilst they work fine individually, when I want to convert multiple letters the replace overwrites instances of that letter in the previously generated image tag. Any ideas can I stop this? I've tried shifting the points at which the script occurs around but it seems the whole thing is somewhat fragile and haven't been able to create a workable solution.
Code in question:
// replace all instances within variable to generate thumbs
final_result = result.replace(/a/g, str_start+chosen_folder+"a"+random_variation+str_end)
.replace(/e/g, str_start+chosen_folder+"e"+random_variation+str_end);
JS Fiddle here: http://jsfiddle.net/N77wZ/
Many thanks in advance !
Do only a single replace:
final_result = result.replace(/a|e/g, str_start+chosen_folder+"$&"+random_variation+str_end);
I need to show for every link, dynamically some text with Java-Script (jQuery). The problem is that the text is also formatted as HTML, so this causes some problems in the later view.
Now I am storing it in the ID-attribute, this works, but only without embedded HTML in it.
<?php
...
$desc = '<p style="color: red">some <span>data</span></p>';
echo '' . $key . '';
?>
Ajax-requests are not allowed. Is there a simple way to reach this goal?
The id attribute is one of the least appropriate places for this (must be unique, cannot contain all characters). Use a data- attribute (introduced in HTML5 but also works in old browsers and without using a HTML5 doctype) instead:
<a href="#" data-desc="....">
If you are using jQuery you can access it via .data('desc'), in plain JavaScript the most portable way is using .getAttribute('data-desc'). If you do not need to support older browsers, you can access the value via the .dataset.desc property.
In any case, you need to ensure that nothing breaks when inserting dynamic data in the attribute. Use htmlspecialchars() for this purpose:
$desc = '<p style="color: red">some <span>data</span></p>';
echo '' . $key . '';
The other comments are absolutely right. Don't do this. It isn't appropriate to put anything but an identifier of some kind in the id attribute.
That being said, I figured I would let you know why your code is failing. You need to use htmlspecialchars() on your data before you try to use it as you intend. That way, HTML won't be interpreted as HTML... all of the HTML entities will get converted for, so your attribute value is interpreted as text. < becomes <, > becomes > and so on. If you later pull the value out (with jQuery or whatever), you will get the text as intended.