i would like to know how can i make my title in divs automatically substracted to a certain number to stay fitting the div when resizing window or zooming website as youtube.com do ?
im substracting words like that
$string = (strlen($title) > 13) ? substr($title,0,26).'..' : $title;
echo "<div>";
echo $string;
echo "</div>;
But i dont know how to do this automatically so it can substract more letters to fit the div.
now what i have is when page resized or zoomed the title stay long and will out of the div.
how can i fix this with php or javascript thanks. i tried looking how youtube doing it but no luck.
You can use CSS3 text-overflow: ellipsis like this:
<div style="text-overflow: ellipsis;width:5%;overflow: hidden">
Some text
</div>
Try with the fiddle: http://jsfiddle.net/bBTaU/
Resize the window and see
EDIT
Not all browsers support CSS3, you can use a plugin like this http://dotdotdot.frebsite.nl/ to extend the support in old browser
Related
So I'm stuck! I'm looking for any solution that is simple enough for a novice coder.
Currently I have the following code which adds an ellipsis to an echo
<?php echo ucwords($query->name = (strlen($query->name) > 15) ? substr($query->name,0,13).'...' : $query->name); ?>
This works just fine but I have it set on an iPhone 5 screen size to keep the text clean and not disrupt the screen layout. However, on a larger device this looks odd because there is extra space. So is there another way to make the ellipsis show depending on the screen size?
Thanks!
Just style the element that contains that output (without server-side truncation) with
overflow: hidden;
text-overflow: ellipsis;
I'd like to know [if there is] a simple way to find out how many times an animated gif loops, using PHP.
As far as I can tell this information is encoded into the header of the gif binary (after a string which is something like "NETSCAPE2.0", for what it's worth), but I've no idea how to read that (in either PHP or any text editor, Sublime gives me what looks like hex codes and TextEdit gives me nonsense).
I'd assume I'd need to read the file look for the above string and hopefully the text after it would be an integer defining the number of loops. Maybe?
Any suggestions? I'm happy to play around with any wild ideas!
Thanks.
There's some information on the gif format here. It seems to include the information about animation:
http://giflib.sourceforge.net/whatsinagif/bits_and_bytes.html
and this is more specific about what you asked about
http://giflib.sourceforge.net/whatsinagif/animation_and_transparency.html
I found this class GifFrameExtractor From How to extract frames of an animated GIF with PHP
You can get separately an array of images and an array of durations:
$frameImages = $gfe->getFrameImages();
$frameDurations = $gfe->getFrameDurations();
Combining those two method $frameImages*$frameDurations will give you the time for one iteration.
Compare it with the time from the beginning of animation to now.
you can't achieve this without writing some js code...
but you must know/calculate gif's time length for 1 loop.
in your form add
<input id='looper' type='hidden' name='loopingTime' value='0'/>
add function
function loaded(){
$('#looper').val($('#looper').val()+1);
//assuming that calculating time with precision 1second is enough to determine number of loops
setInterval(loaded,1000);
}
add call to this method when gif starts animating
<img id="photo"
onload='loaded(this.id)'
src="a_gif_animation.gif"
alt="this is some alt text"
title="this is some title text" />
in your action method you'll have a parameter loopingTime containig number of seconds played by gif, but youll have to calculate gif loop time somehow.
I have an HTML document which is pretty long. It has a table that may vary between 1000 and 1200 pixels wide (it changes each day). Lots of text, tables and sometimes embedded PDFs.
I want to display on another page a short preview (like on online newspaper, where you can find title, a few sentences, maybe an image and then a link to the complete article).
First problem: the page where I want the preview is only 800 pixel wide.
My first idea was (in order to display only 10 sentences):
$lineswritten=0;
$stream=fopen($document,"r");
while ((($line = fgets($stream)) !== false)&&($lineswritten<10))
{
if($lineswritten>=10)
{
echo "$line";
$line=trim($line);
if($line!="") // if line is blank don't count it as text
{
$lineswritten=$lineswritten+1;
}
}
}
fclose($stream);
But I have some problems.
First of all: tags. Both the main and the preview pages are built with tables. If in the first 10 rows of the preview, they open a table but they doesn't close it, all the layout of the preview page is messed up.
I tought of checking for table tags ( and ) with regex but I have not yet studied these expressions.
Is it possible to check for these tags and write only them after row 10?
Second problem.
Images. I may have an image which is really big. Is it possible to retrieve just the image path from a tag? If that could be possible I can check the image dimensions and eventually scale it down.
Third problem
I have pdfs embedded with codes like:
<iframe src="http://docs.google.com/gview? url=http://www.mywebsite.ch/pdffolder/8121202.pdf&embedded=true" style="width:990px; height:700px;" frameborder="0"></iframe>
Obviously width and height are not so easy: they may vary too. Is it possible to recognize strings like this and write them on the preview page with height:200px and fixed width of 700px ?
Thank you very much!
Don't use a regex for manipulating HTML, use php's DOM tools instead.
for instance, the second problem (getting image paths from images) can be solved by using the DOMDocument::getElementByTageName method like so:
$dom = new DOMDocument;
$dom->loadHTML($table);
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
$src = $image->getAttribute('src');
//do whatever with the image sorce
}
The intent of this code is clearer, and you don't have to write a very long, complex and hard to manage regex to accomplish it.
Below is a preview of what I am dealing with:
The heading, the text, and the image is all dynamically created based on the user. They can choose if they want to add a picture, and they can choose what text to put in the heading and the main content.
There cannot be any scrolling, so it has to be visible and cannot go past the bottom of that white.
My question is... how can I limit the text of the body?
If the heading is large and goes down to two lines, and there is a picture, then in order to stay in the lines and not go past the white it has to be limited to a certain amount of characters.
But another user could decide to not have a picture and keep the heading in one line, so that user will have more text to write so the limit should be different.
I guess the confusing part for me is like.. what if a user has no picture and has a short heading, and creates some really long text to fit the size, but then later on decides to add an image.. then that long text will now no longer fit. So now.. I can't limit the text because it's already there.
I hope that makes sense. If anyone could help me through this and give me some ideas I would really appreciate it.
Use this for whatever the user input is for adding text. It could limit the characters they use just change the 250 value.
<script>
function countChar(val){
var len = val.value.length;
if (len >= 250) {
val.value = val.value.substring(0, 250);
}else {
$('#charNum').text(250 - len);
}
};
</script
<textarea id="field" name="description" onKeyUp="countChar(this)"></textarea>
its not only the text you need to limit but also the image thumbnail so that affect the style of your webpage
To limit the number of string .. i would you use a script form here php trim a string
function trim_word($str, $length, $suffix = '...')
{
$len = strlen($str);
if ($len < $length) return $str;
$pattern = sprintf('/^(.{%d,}?)\b.*$/', $length);
$str = preg_replace($pattern, '$1', $str);
$str = trim($str);
$str .= $suffix;
return $str;
}
it trim the text and makes sure it always ends with a word ...
You can use http://phpthumb.sourceforge.net/ to generate thumbnail of fixed size all you need to do it set your desired height and width
There are a few different options to consider. You may want to limit the amount of text the user can enter for starters, to ensure it doesn't overflow.
One thing I would probably do is find the maximum amount of characters you're comfortable with on the page, and use substr on the output from the database to ensure that it never displays more.
http://php.net/manual/en/function.substr.php
You could have a "more" link that way the visitor could read more if they want, but it doesn't break the layout. I would use basic if statements for the logic (if picture exists, trim text to this, if not etc).
Hope that helps.
Surround the entire thing with a container div of the fixed height which you desire with no padding, and inside that place another inner div with no margin and no fixed height, then as the user changes the content create a javascript function to check if the inner div is < the container div; and if not then do not allow the user to make that change - this way you are attacking the problem directly.
<script>
function checkDivs() {
if(inner.style.height >= container.style.height) {
//prevent change
}
}
</script>
<div id='container'>
<div id='inner'>
//User-defined content
</div>
</div>
This function would be attached to whatever GUI the user would edit the content through, as for how to prevent the change, I'd have to know more about your program.
I have three div's which are being filled with dynamic text from a database. The div #container is a fixed height and width where the text inside wraps. The three divs are different font sizes. Any of the three div's could have enough text to exceed the container size. I need to determine if the text exceeds the container size and at which letter in which div it occurs. The extraneous text will then be wrapped in something like <span class=hide">text here</span>
<div id="container">
<div id="first"><?php echo $arr['first'] ?></div>
<div id="mid"><?php echo $arr['mid'] ?></div>
<div id="last"><?php echo $arr['last'] ?></div>
</div>
I'm thinking this is impossible to do in PHP as the styling is done client side. Maybe there is a way to fake it? Though that could get ugly really fast.
I'm trying really hard not to do it in javascript because this calculation will be done about 10 times per page viewed. Please don't tell me it's impossible to do in PHP, there's always a way.
Any ideas?
Just in case you decide that client-side makes more sense for you I put together a fiddle. I realize you want to avoid client-side, but you mentioned this would be happening ten times which honestly is very little these days with how much js speed has increased in browsers. It is also a much simpler problem client side.
http://jsfiddle.net/JSRtk/
Basically you detect if the container is overflown. If so you display a 'read more' button. When clicked it will expand the container to show all text and go away.
$('#container > div').each( function() {
if (checkOverflow(this)) {
console.log('overflow detected in ' + $(this).attr('id'));
$(this).after('<p>Read more...</p>');
}
});
$('p').live('click', function() {
$(this).prev('div').css('height', 'auto');
$(this).hide();
});
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;
}
Do you have to wrap it in a span for a purpose (i.e. crawlers/seo)? If not you could either set the CSS on the div with a fixed width to have overflow hidden, alternatively, you could figure out how many characters roughly fit in that width (count them) then use strlen() and substr() like so
<?php
$string = "This is a string thats too long to fit";
if(strlen($string) > 20)
echo substr($string,0,20);
else
echo $string;
?>
There is no way for you to calculate the size of a display element in PHP since it is run on the server and not on the client, and it's the client that renders the HTML.
If you have the same container size every time and the same font and font size and styles and everything, you could probably estimate a number of character and cut it off in PHP at that number of characters using substr. But even then, unless you build a table of character sizes or use a monospaced font, there is no way to reliably do what you want.