I'm trying to figure out what would be the shortest and simplest way to lazily load tooltips with PHP-generated contents inside. I've found a pretty solid library called PowerTip which I've been trying to appropriate however there are some difficulties there.
So I'm going to have a block of text and positioning a cursor over any word longer than three characters in that text should invoke a PHP script passing that word as a parameter, reading the response which is plain html and passing it inside the tooltip contents. When a user hovers over some word they'd get a nicely formatted tooltip which is specifically related to that word.
I'm looking to have a clean and easily maintainable HTML code that allows me to have as little javascript in different places as possible and preferably without duplicating the text's contents elsewhere and the tooltip should look good (not just a regular kind of a tooltip) and follow cursor. What would be the best way to approach this problem?
PHP script is already done, I'm looking to solve the javascript/interaction problem.
Related
So, I am creating a program that will take an uploaded text file, read its text and highlight certain things (through injecting <span> with specific classes) into the file and display on a webpage. What I am having trouble with is how I can show these results.
I was initially using <textarea>, but I found that apparently, it does not recognize those <span> tags I have injected, so it just displayed as plain text. I tried using other approaches like <p> or <span> or <article> but it seems that all of those other ones will either
remove spaces accordingly (the text file uses a ton of spaces to format the text too and that needs to be retained), or
it will not recognize multi-line strings
So, some may suggest that perhaps I can simply inject a <br/> tag at all line breaks, which is a viable option for sure. The problem with the spaces that are truncated still remains if I do that. Not to mention that the tags will mess up a lot of my <span> formatting injection that I was trying to do, which relies on regex currently but that's at least doable.
What would be the best way to overcome this problem? Is there an obscure tag that will work best for the purpose here? Or what you be my best course moving forward?
Just use a <div> and convert all the space characters to if you really want to retain them (although it kind of goes against the way HTML is intended to work, but it's up to you).
And and all the newline characters need to be converted to <br/> - again the way HTML does layout is completely different to how a text file does it.
I need to create a word cloud that looks like the following,
The bordered element is a button, and the elements around are supposed to be a wordcloud.
I have been able to use a react-wordcloud library for the just the word cloud but putting an element in between has left me in a fix.
One method I can think of is using an div as overlay, but the clear downside I can think is that I will have no control over the what will lie beneath the button.
I am out of ideas as in how to achieve this, and any help will be appreciable
I'm searching for a way to cut out any shape from an image and save it somewhere on the server.
I'm looking for solutions in PHP and/or JavaScript but haven't found anything yet.
I'm not sure but as far as I know the gd-library in PHP is only capable of cutting out or copying rectangular shapes from source images.
In JavaScript this probably can be achieved somehow through the canvas-object but I haven't found any libraries that provide such a function (rafael.js or paper.js don't seem to do the job) ...
Example:
Let's say i got the following image:
Now I would like to mark a certain part of that image (by x/y-coordinates):
And finally i want to extract that part as a single image (with the rest of the background beeing filled black):
Thank you for any help
Using PHP only, imagecopy lets you easily copy a part of an image by coordinates and do with it as you wish.
Edit: Using Imagick it's possible to crop images to specific shapes among other functions.
Using Javascript, I need to allow a user to double click a word on a page and retrieve the sentence that it appears in. Not just any sentence, but that specific one. I've toyed with retrieving all sentences that that word appears in and somehow choosing the correct sentence, so maybe that's an option.
I've scoured the web looking for this beast, and I've thought a lot about it. Some have recommended using Rangy but I haven't been able to find the functionality I'm looking for, or even functionality that would help me get where I need to be.
Any ideas?
You could turn your page into one or multiple read-only textareas, use clever CSS styling to mask it, then use the onselect event as described here: Detect selected text in a text area with javascript
Depends of course, how your page looks like and where it's used.
My first question here. Correct me if I've done anything wrong.
I've found a source here demonstrate how to paginate html using CSS multi-column.
http://groups.google.com/group/leaves-developers/browse_thread/thread/27e4bf5ff3c53113/f137dc01b6d853b7
My question is:
How to calculate the range / location of text in different column (page)?
For example, when changing the font size,
the text in current page will jump to another page.
To solve this, the program should save the current text location,
and move to the correct page (column) after reformatting the web page.
It is also useful for implementing bookmark function.
I think it should be done by javascript, but I'm new to javascript.
Any suggestions and tips are welcomed.
This is a bit of a general question, and very hard to answer, so I'll just try to point you in a direction I might try.
I have no idea how the layout of your page might look or function, but one way you could theoretically do this is by checking the text node of your 'column' whenever you change the font-size (presuming this font size change is implimented by a button click). So, for instance, say you have a div w/ the id #column_1, whenever someone clicks the button ui element you could evaluate the first several characters of #column_1, then search your string to find that text, and load whatever no. of characters you have defined as a 'page' around that text and call your render method to 'turn' to that page. So the flow of your function might look something like this:
zoomControl.click(click event){ //do something when you click the zoom control
var text = findTextofCurrentPage() //get the first bit of text of your current 'page'
renderLargerTextSize() //re-render your 'page' w/ larger text (for user feedback purposes)
renderPageWith(text) //render/navigate to the 'new' page wherein your the text in the variable 'text' can be found
}
Obviously this is a super generic 'idea' of what functions/methods you might use to make this happen, but I think if you dug into JS and say something like JQuery this sort of thing could be done relatively easily.