How do I get text to appear over a div - javascript

Good morning. I am currently working on a final project for my Unix class and it trying to implement some of the stuff learnt through building a web game. One feature that I want to incorporate is the ability to add text over a div as shown in the picture. How would I go about that?

Try including some of your own source code next time, just so we get an idea of what you're having issues with.
But to put text over, try using position: relative, inside a div with a background image of what you want.
Eg.
.parent {
background-image:url("https://picsum.photos/200/300");
width: 800px;
height: 800px;
}
.text {
position: relative;
top: 20px;
left: 40px; /*edit top, left, right, and bottom to change position*/
font-weight: bold;
}
<body>
<div class="parent">
<p class="text">TEXT!</p>
</div>
</body>
If you can't use a background image, try using absolute positioning.
Here's a great tutorial for that: https://www.youtube.com/watch?v=P6UgYq3J3Qs

Related

Handle editable element behind another element

I am working on a project where it implements an email editor, something like Gmail editor. It has "Recipients and Subject" always on top and the scrollable editor area below it. So, what I want to achieve is:
Let the top part always stay on top at fixed position, even we are scrolling the editor content below
If the content in the editor is too long, scrolling the page down should move the top content behind the top part. At this point, if we keep pressing "Up" key, it should bring the top hidden content back, instead of moving the cursor up.
I have the gif below to explain it better hopefully:
I am able to achieve the first one by using sticky property, but I cannot do the 2nd one. If I type long content inside the editor area, make it partially hidden by the top part, then if I keep pressing "up", it will eventually move the cursor into the top area, thus hiding the cursor, and I am unable to bring the top hidden content back using "Up" key.
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<html>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<div contenteditable="true">
</div>
</html>
Utilizing the sticky div as a container for text might help, I also wrote a small helper function for breaks to test the scrolling feature:
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<input placeholder="Recipients">
<br>
<input placeholder="Subject">
</div>
<div contenteditable="true">
<script>
for(var x=0;x<=100;x++){
document.write("<br>") }
</script>
<h1>test</h1>
</html>

How to bring frosty-glass effect for div over another div that contain texts

I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.
However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example
HTML
<div class = 'parent'>
<div class = 'top'>
</div>
<div class = 'bottom'>
Some div...
</div>
</div>
CSS
.parent {
height: 200px;
width: 100%;
}
.top {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background-color: rgba(0,0,0,.2);
}
.bottom {
height: 150;
width: 100%;
margin-top: 10px;
}
I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.
The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd
Is there any way to have that effect using CSS?
Thanks for any pointer
Use the css filter property, eg. filter: blur(3px);.
Find a demo based on yours here.

Emulating `position: fixed;` with javascript, but without it being jumpy, laggy, or having "hickups"

I'm trying to emulate position: fixed; using javascript, the reason being that the element has to be inside a scrollable div (overflow-scroll-y), and position: fixed; only works relative to the window scroll, not an elements scroll, though normally in a case like this I could fix it by using position: absolute; and everything would just work, but the scollable div / container element needs to have perspective: 1px; which brakes the position: absolute; adjustment, so back to just js emulation.
Now it works, with javascript, but all too often the element in question lags a bit behind the scroll, creating a kind of "jumpy" feeling (it's especially bad on Firefox), that is say it's fixed at the top of the element, if the user scrolls it's suppose to be exactly at the top always, but in reality it sometimes goes a bit (or allot) too high or low, depending on the scrolling direction, and then snaps in place again, this snapping or jumpy effect is undesirable, and is not present in cases where you can fix the element using either position: fixed; or position: absolute;.
I've made a jsFiddle Example, if you don't notice the undesirable effect in your browser you can try uncommenting the increaseLag function, on my computer the lag is clearly visible on Firefox but not as noticeable on Chrome unless I enable the increaseLag function (I'm running Ubuntu).
How could one tackle this? Is there perhaps a pure css solution I'm missing or an alternative js route?
My current buggy solution uses a scroll event on the container element which updates the top css property of the "fixed" element relative to the updated scroll position.
$("#container_element").scroll(function() {
//increaseLag(this);
var scrollTop = $(this).scrollTop();
$(".fixed_emulation").css("top", scrollTop+"px");
});
#container_element {
width: 100%;
height: 100%;
overflow-y: scroll;
perspective: 1px;
}
.fixed_emulation {
background-color: #000;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
}
<div id="container_element">
<div class="fixed_emulation"> :) </div>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
...
</div>

featherlight.js - possible to use it together with img-zoom WITHIN the lightbox?

I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!

How to select specific image from source file when multiple images are in the source file?

I've noticed that google's image source files for their pages may contain lots of images in one source, but then only one will be displayed in a specific position.
for example, this: "https://www.google.co.uk/images/nav_logo242.png"
is one image source file for google's results page but then they will somehow choose a specific part of this source to display in a part of their webpage.
I would like to replicate this somehow but don't know how this is accomplished?
I only know how to use an image source when you use one image at a time and display all of it.
Thanks in advance to anyone who can help me!
These are known as CSS sprites.
These are called sprites, you can check out this link to find out how to use them: http://www.w3schools.com/css/css_image_sprites.asp
These are CSS-Sprites.
Basic detail on CSS-Sprite, Here 1 image will consists many images.
On using sprites unnecessary bandwidth use will be reduced.
To access individual images background-position CSS property plays main role.
That type of image is called a sprite. You would put the image as a background of an element and then use css to position that background to show only what you want to see.
Here's an example of how to use it. In the first example I am using a div. In the second example I am using a pseudo element to place it in a larger element so there will be no bleed of other parts of the image.
.google, .camera::before {
background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
width: 120px;
height: 40px;
background-position: -22px 2px;
border: 1px solid red;
}
.camera {
position: relative;
padding-left: 30px;
font-size: 1.5rem;
}
.camera::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
background-position: -40px -131px;
}
.camera:hover::before {
background-position: -60px -131px;
}
<div class="google"></div>
<p class="camera">
Hover over me.
</p>

Categories

Resources