In google docs, when we paste lot of data it automatically splits it into pages which are printer friendly, How can I build this basic google docs type functionality. The source of data will be fetched from database instead of paste.
You could gradually fill a div with text using JavaScript. Check the height after each word and after reaching a certain height (e.g. ~25cm for DIN A 4) insert a new paragraph tag with page-break-before: always to break the page in the print.
Related
Am using nicEdit to post content into my database. But I found out that when I post the content, it creates a bunch of tags such as div, p, tags per every paragraph created. This is causing my website to distort when I load the content onto the site.
Why is nicEdit creating all these unwanted div, p tags and is there anyway I can prevent that from happening???
EG.
When I input data eg. "This is a very good website" nicEdit adds tags like <div><p>This is a very good website</p></div> to the text! Which shouldn't be the case.
You're using nicEdit for all the wrong reasons if the end result isn't supposed to be HTML.
I have made a small div box, just enough to contain 2 and a half line of sentence. But actually what I want to do is, I am just showing the preview (few lines of sentence ). And I want to add "read more..." at the end of the sentence, which when clicked by the user would lead to another page showing the whole article.
I am extracting these article from the database. My problem is, how to extract just a few line from the database and preview it in the small div box...?
what is the best way to do it? how should I control the amount of the text as a preview to be shown in a div box.
can it be controlled with Javascript, PhpMysql extraction code, CSS ? what is the best way ?
note:
(I am extracting article from database. As a test bed I am using the wamp server along with its mysql database)
What you can do is extract the whole text from the database, and run the following javascript on your text nodes:
Cutter.js
From their documentation:
Cutter.run( oApplyTo, oTarget, nWords, oTexts, oClasses )
You can do something like excerpt column in your database and show it in your div box and when user clicks on read more you can load full text from db. Or you can write simple js script which will be cut everything you don't need. Or you can give your div box an size via css and set overflow property to hidden:
.excerpt {
width: xx px;
height: xx px;
overflow: hidden;
}
Not the ANSWER, but some hints:
You may try ajax, to fetch the entire article & clip it using js.
Alternately, provide a server side support to provide clipped article & fetch that using ajax.
After you have got the clipped part of the article, it should be fairly easy to display it in the div, using innerHTML.
To fix the location of the div box, you can either use js or css.
I've developed a website for my rugby club. We currently have one page with news articles on it (each with there own unique id's per story).
What I'd like to do is have a separate page for each story, then show a snap-shot of that story (say headline and first paragraph) on a Headlines page.
How could I do this? Via javascript or php? (forgive a neewbie)
Use a headline field and a text field in your Article table.
To extract the first paragraph of the text, use the explode function.
$paragraph = explode("\n", $text);
echo $paragraph[0];
If your text contains <p></p> :
$paragraph = explode("</p>", $text);
echo $paragraph[0];
You can use Links With URL Preview from Easiest Tooltip and Image Preview Using jQuery.
See the Example 3:
Example 3: Links With URL Preview
This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you’ll need here is a small size screenshot of the target url. You’ll put screenshot image location in in REL attribute of the A tag and script will do the rest.
One way could be to use jQuery's load() feature to grab the article page, and trim out stuff you don't need. I wouldn't necessarily recommend this though as the loaded file counts as a page visit, and could screw up your analytics.
Are you using a CMS? This is a fairly standard feature of systems such as Wordpress, Joomla, Perch, etc.
I use Simple HTML DOM library in my Drupal custom module to do a task in my project.
The task simply is imitating the Facebook action, when we paste an article url, FB scrap the url and return back with part of the article as a description and an image.
My question is, what is the used algorithm to pick the first part of the article between a lot of <p> tags and also pick the right picture between all the pics in the page!
I know that FB use a :OG tag, but I need to develop an algorithm which pick these info if the OG tag is not there.
Thank you guys for support and have a nice day.
Regards.
I think with the image it is the dimensions of the image. Th takes the first image with more than say 100x100 pixels or so.
With the text it might be something similar. Strip the inline HTML tags, get the first block element text (or maybe just paragraphs) and there you go.
How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.
If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.
You have to options to accomplish this:
Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.
Add a normal image and a normal hyperlink. You can use a regular img tag or use set the background image of the container. Then use absolute positioning to move the hyperlink to the desired position on top of the picture. With that solution you don't need Javascript to create a hover effect.
Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm
If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.
Edit- From your comments I see you're looking for php: Adding text to images with PHP
You could use this tool:
http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html
and here on github:
https://github.com/blauharley/LoremImageCryptonator
With help of this JS-Object you can embed any text you want. It offers two methods (getCryptoImage, getTextFromCryptoImage) that can be used for inserting and extracting any text into and out of an image.
For your use-case you can insert an URL and extract it as soon as the image is clicked.
But first of all you need to create a "Crypto-Image" that a URL has been inserted into before then saves the image. The saved "Crypto-Image" can then be shown on a page.
Hope this helps.