I want to implement a special highlighting to by buttons. The one, I found on the iBooks app for iPhone/iPad suites my needs. I think it is very complex due to the fact that all the strokes are looking different. I could use some CSS-Sprites-Voodoo but I don’t think I will be able to assign these styles so easily. Has anyone done something similar? I would be happy to hear some ideas.
Thanks, Floyd
http://i.stack.imgur.com/SlfHx.png
I tried this out: http://jsfiddle.net/brianflanagan/XUpFc/ Basically, the gist is to grab any selected text and wrap it in a span to give it a class with a background image. Not sure how useful this is, but it might get you started...
Related
I've googled and searched around here on SO, but haven't found an answer to this question.
I know that this can be done using user-select:none with CSS, but as you can see, this is not a standard property, and I'm trying to find an alternative.
NOTE: I don't care if the users can get the text. It's for the design of the site, not to keep users from copy/paste.
I know that this CAN be done with JS. I do not know it it's difficult, or how to do it, but if you type HTML or JS code into the HTMLObfuscator, there is an option on the left that can disable text selection. Is this easy to implement into certain parts of my site? Or is it rather complicated (like in the obfuscator)?
Thank you for all your help . . .
CSS way:
element:before {
content:'whatever';
};
before and after make it part of the element.
Use the CSS property pointer-events: none;. It will keep the mouse from having any effect on the text at all, so don't use this for a button or anything like that.
Calling CKEditor gurus to this question. I have a need to make only certain areas within my textbox readonly. These areas will be text and image URLS that will be enclosed by a span tag with a predefined class type. I have checked the documentation but cant seem to find anything that will help me accomplish this. They all make the entire textbox go read only.
I have heard that there are hacks that can make this work, but Im not sure which way to go about doing it. I am fairly new to this, so please bear with me if my question seems absurd.
Thanks for any help..
Use widgets.
Take a look on some samples first and then focus on Placeholder plugin (based on widgets), which does pretty much what you'd like to have. You can either customize it or create something new, referring to existing code and official guides.
Note: You need CKEditor 4.3+.
For an Augmented Reality CMS I'm working on I'm looking for a special type of WYSIWYG editor.
I need to be able to position images over a background image, resize/organize them and be able to read out their relative positions.
No text/html editing at all.
Flash solutions are a last resort for I'm sure this can be done with HTML and Javascript
Does anyone know about such a solution?
Thanks a lot in advance,
Menno
...afraid you'll have to roll up your sleeves and roll your own for the most part, but something like this http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ might get you going. It's jQuery based if you don't mind that, but in principle it's a start (or something similar).
I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
I have a little website where I would like to obfuscate some text to protected spoiling of users that accidentally read it untimely.
Much like the keywords on imdb were, where you have to rollover to reveal them.
I thought it would be a nice and interactive way to reveal the text if its marked.
Example:
How does a programmer express
h(is)|(er) love? Zl srryvatf sbe lbh
ner uneqpbqrq.
Now you would drag mark the obfuscated text much like you would get ready to copy it to your clipboard, and it should reveal.
Is there a way to do this? My current problem is a way to determine the current selection in javascript.
There is one tricky way I can think of with only CSS:
Use the same color text as the background color! Then when users highlight, the text is revealed. You would need to outline or draw attention to the part that they need to highlight to make it obvious.
Another way:
Stuff the rot13 into a readonly text input, and attach a select event with an AJAX call that decodes it. Will only work for smaller bits of spoiler text that fit in the input. You could try this with a textarea but it doesn't accept the readonly attribute (maybe doesn't matter).
There are many many other ways to do this (hide/show divs for example), but these are the closest/simplest ways I could think that match your requirement of selecting text to trigger the spoiler.
EDIT: With the background color solution, you would not want to encode the text, just make it "invisible" until it's highlighted. It's actually a pretty cheesy solution, and there are many others that are better, but the good part is that it is css only. Honestly I think forcing a complete highlight will be a pain for your users, just store the rot13 value in one place, the real value in another (hidden span maybe), and use js to swap them out on click or something. No need to actually process the decoding separately. You could probably do this with CSS alone and some smart :hover or :focus selectors.
EDIT2: For some reason it didn't occur to me that you can do rot13 decoding with javascript alone, I'm coming from the php world so now I feel pretty foolish. Sorry I didn't answer your question better, but hopefully some of this is useful. GL!
jCarat (jQuery Caret Plugin) should cover your needs.