I managed to add embedded assets to htmlText of my TextArea like described here (Sly_cardinal's post, currently the third one):
Unable to access embedded images in htmlText
But all the images appear in the top left corner (overlayed)!
Interesting is that the place where the images should be, is actually empty and the text wraps around it, like they were there. But they are all in the corner.
I'm using large p tags for the text and all html displays perfectly where it should be. My only problem are these images.
Hope somebody has at least an idea. Thanks.
P.D. sorry for not showing code, it's cluttered at the moment with other things. But I hope the description is enough to get some useful tips.
P.D. 2. I did a test now with exactly the same code but using normal path to png file instead of asset and that works!.
Related
I created this single page site (https://pixelwatch-bycliff.web.app/) using HTML, CSS and JS but I thought of going extra by adding this video clip (https://www.pexels.com/video/multi-colored-vapor-1943483/) to the text (Wear OS) so the text would be vibrant while coming to life with the video. PS: I've tried doing it myself but can't get it to work, any help right now would be greatly appreciated.
Link to the files on github: https://github.com/ManLikeCliff/pixelwatch-bycliff
click to view the text
I think there are two ways for you to achieving it.
Making the text with overlayed on the video as .gif format. That is, you are basically inserting image file.
I believe you wanted to do with CSS. Then, you might as well think of layout wisely.
First, make your video goes back to the text. In this case, video could be set as a background. Then, give z-index to the overlay text above by giving position: absolute; attribute.
If you want, you may check here
I'm using the base example of mxGraph which can be found here: graphEditor to start.
In the example above, the tooltips open to the right of the icons from the left sidebar. For example, shapes, lines, etc.
I have my graph contained in a div, smaller area on page... but the tooltips are now floating way off to the left as if this thing is full screen still. I'm not sure of how to share additional details but hoping tagging this with mxGraph those of you who have experience working with this may have run into the same issue.
I added following piece of code
graph.tooltipHandler.div.style.position="absolute";
This solved the issue
Thanks for the great answers last time, I had been working on that problem for days, and someone solved it in ten minutes. Amazing!! So now I have another question for this talented community!
I'm using Sitefinity for this project; long story short, I don't even know where to access the CSS file, and accessing it would probably break the site (as my boss tells me). So everything has to be done with inline styling.
Here's the setup: there's a bunch of text (in a ul), and an image. The text wraps around the image, which is small enough that the text is squished to the left at first, then continues in its full width underneath.
When the screen gets too small, the text starts wrapping around the image (which has been floated right) in weird ways; one long word can make the text stop and start again after the picture (I've already suggested adding word-break for this, but it's a no-go).
Here's what my boss wants: image floats to the right of the text on larger screens, then floats above and center on smaller screens. Again, no stylesheet, just inline styling.
Some attempted ideas:
Use asides: can't. That needs the stylesheet. (Unless someone who knows this knows a better way!)
Use padding on the image: tried. It messes up the formatting; what works to push everything underneath on mobile squishes everything to the side on desktop. (If someone knows a better way, let me know!)
Use JS: can't. Basically, everything has been styled somewhere deep within the code, so I've just got a tiny HTML text box to work with, no tag to work with at all.
Thank you for all suggestions! This is a talented community!!
You should us a CSS widget, add some classes to your then within the CSS widget write the appropriate media queries, if you need this to affect more than one page put the CSS widget on a template instead of an individual page.
I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}