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.
Related
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+.
I'm not talking about floating, nor z-index (which is used to put one above the other). I'm talking about changing the order that a DIV is displayed through Javascript.
For example, I have:
<div id='bottom'></div>
<div id='header'></div>
I want to change the order so the 'header' will be displayed above the 'bottom', but not "overlaying" it, neither "floating". Just:
<div id='header'></div>
<div id='bottom'></div>
It is a simple question that haven't been asked before, I guess.
You could work with this Remove element by id where you remove the first one (save it to some variable first) and then append it using appendChild() in JS or append() in jQuery if you're using the framework. That should effectively swap places of the two.
EDIT: Take a look at this it basically is the same question you asked for, with an answer containing code and everything else you might need. Seems like you didn't search good enough.
Perhaps this previous answer: Reordering of Divs, which shows a pure-Javascript way and a jQuery way to re-arrange the divs. Googling "rearrange div" also proves fruitful.
It depends on the javascript library you use but if you use jquery, this can easily be done. Just type the following:
var header = $('#header');
$('#bottom').next().remove;
$('#bottom').before(header);
You can do this with CSS only using flexbox depending on the browsers you want to support. Otherwise you can go for the javascript solution like mentioned by others already.
Anyone know a good alternative to the flowplayer tooltip? I need same functionality of HTML content with Tip remaining active when mouseenter inside of tooltip as the below demo shows. Also need tooltip to close onclick
http://flowplayer.org/tools/demos/tooltip/any-html.html
I prefer qTip2. It does everything you'd ever need a Tooltip plugin to do. It comes preloaded with several CSS themes and the best part is that the developer answers questions in his forum on a daily basis.
http://qtip2.com/demos
http://qtip2.com/guides
EDIT 8/28/13
Now I prefer a jQuery plugin called Tooltipster. Mainly because it's much easier to configure, and I don't have to do anything to the CSS because I already like how it looks.
http://calebjacob.com/tooltipster/
I use tooltipsy, this is an EXCELLENT tooltip program. You can set it to do pretty much anything you want. If you want custom CSS, okay, if you want to set your own show and hide events, okay, you can change what the tooltip aligns to, the delay until it shows, you can do whatever you want. Tootipsy is the best one I ever used. (I had to make a little modification to it to get it to use HTML in the tooltips though, but it's a very simple change)
What about Prototip?
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...
I would like to have a link on my site that when you click it a site segment that hovers above the content appears and displays some information until it is closed in some way, and I would like to be able to insert anything I want to in there- text, images, CSS formatting, etc.
What language should I use for this? Do you know any sites that do this? Also a link to relevant libraries would be appreciated.
javascript is used for such client side tasks such as this. The library jquery will be imensensly helpful. Basically what happens is when you hover your mouse over an image (or whatever you like) a div gets its display property switched and is positioned at the appropriate coordinates. Since this is a div, you can insert into it anything you would have in a webpage, images, CSS, flash, or whatever you like.
If I understand well the requirements, you need to use JavaScript, <div>s and the CSS property "display".
Check out Prototype Window Xilinus. They have exactly you're looking for.