I've already found many vlogs to align them vertically or horizontally, but what I am looking for is shown below in this image.
I wanted to take a magnifying glass and add different alphabets in it according to case.
https://i.stack.imgur.com/jEcMM.png
I think you just need to set the position propertie of the magnifying glass as relative and the alphabets inside as absolute and then handle the logic of showing each alphabet according to your case scenario
for example:
**html**
<div class="container">
<div class="glass">
<div class="alphabet">A</div>
</div>
</div>
**css**
.glass {
width: 100px;
height: 100px;
position: relative;
}
.alphabet {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
**javascript**
const alpahbetEl = document.querySelector('.alphabet')
let arrAlphabet = [A,B,C,D,E]
let CurrentIndex = Math.floor(Math.random() * arrAlphabet.length)
alpahbetEl.innerHTML= `<p>${arrAlphabet[CurrentIndex]}</p>`
https://playcode.io/970686
Create a div and give it a position relative.
Add the image of magnifying glass inside the div.
Add another element (eg, div) for the letter and give it a position of absolute. Then use top, left params to set them correctly inside magnifying glass.
When you set absolute position to an object it lets you position an object absolute to the last parent with relative position.
Please refer the playground link mentioned on top.
Solution: You Need to use position relative to parent element and position absolute to child element.
Index.html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stackoverflow Answer By Swapnil</title>
<link rel="stylesheet" href="style.css" />
<link
href="../fontawesome-free-6.2.0-web/css/fontawesome.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/brands.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/solid.css"
rel="stylesheet"
/>
</head>
<body>
<i class="fa-solid fa-magnifying-glass icon"></i>
<p class="character">A</p>
</body>
</html>
Style.css:
.icon {
position: relative;
font-size: 200px;
}
.character {
position: absolute;
font-size: 50px;
font-weight: bold;
text-align: center;
top: 5px;
left: 70px;
}
Related
I asked this question to answer it because there is no clear info or question about this. I found the solution in a comment, not in an answer. so I hope this will help others.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
btn
<div class="box" id="box"></div>
</body>
</html>
CSS
.btn{
width: 150px;
height: 50px;
cursor: pointer;
margin: 10px;
background: black;
color: white;
}
.box{
width: 200px;
height: 200px;
background: orange;
margin: 5px;
}
javascript
var box = document.getElementById("box");
function clickBtn() {
if (box.style.background = "orange"){
box.style.background = "blue";
} else {
box.style.background = "green";
}
}
use href="javascript:void(0)" in a tag. The javascript:void(0) can be used when we don't want to refresh or load a new page in the browser on clicking a hyperlink.
1- If you use <a> as a button, it will refresh the page as long as it has href="". so remove href and it will work without refreshing the page.
2- if you want to keep the href, then change the <a> to button. it worked for me.
I'm incredibly new to JavaScript, and honestly thought I had a solid plan-of-attack to make my logo smaller after scrolling from the top by 10px. The goal is to make the logo (normally 400px in width) get smaller (to 100px) upon scrolling down from the top.
Can anyone help me understand why this code isn't returning any visual response?
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="normalize.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--<div id="header">Header</div>-->
<div id="header">
<img id="header-image" src="logo-mockup.png">
</div>
<p>THIS IS ALL JUST FILLER TEXT RIGHT NOW.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The CSS:
#header {
background-color: #f1f1f1; /* Grey background */
padding: 30px 0px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
height:90px;
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
#header-image {
padding: 0px 10px; /* Some padding */
text-align: center;
top: 0;
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
p {
margin:300px;
}
And the JS:
function scrollFunction() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById("header-image").style.width = "100";
} else {
document.getElementById("header-image").style.width = "400";
}
}
You need to set up an eventListener that calls scrollFunction whenever the user scrolls the wheel.
A shortcut would be to just change <body> to <body onscroll="scrollFunction()">.
You could also set up an event listener in the javascript:
window.addEventListener("scroll", function(e) {
scrollFunction();
}
Your scrollFunction() in never called. You should add event listener for window scroll and remember to add the unit at the end for setting the width- in your case 'px'.
window.onscroll = function() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById("header").style.width = "100px";
} else {
document.getElementById("header").style.width = "400px";
}
}
i just wanna know how i can zoom in and out in the div zoom with an Javascript Code.
So i have an DIV. In the DIV is another DIV which ist much larger than the div which is superordinated. Just like an MAP.
I wanna Scroll in and out in this div however i want.
I don't need the full code i just wanna know where i have to search for.
HERE are the IMAGES what i wanna do:ZOOM ZOOMIN ZOOMOUT
You can emulate a "zoom" into a div with CSS transform: scale() property. Here's some JS code that toggles between a zoomed in/out state on click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Testing</title>
<style>
#zoom {
height: 50px;
width: 50px;
margin: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="zoom"><p>Test</p></div>
</div>
<script>
// On click, scale up or down
document.getElementById("zoom").addEventListener("click", function() {
this.style.transform === "scale(2)"
? (this.style.transform = "scale(1)")
: (this.style.transform = "scale(2)");
});
</script>
</body>
</html>
You can add transition CSS for smooth zoom in/out.
transition: transform 2s;
-webkit-transition: transform 2s;
I have this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
border: 1px solid red;
}
.container {
height: 500px;
width: 500px;
border: 1px solid green;
transform: scale(1.6);
position: relative;
left: 300px;
top: 150px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</div>
</body>
</html>
It works perfect without transform: scale(1.6);. However, the #draggable moves faster than the mouse with the transform property. How can I make it draggable and scale the container to a value like 1.65? Is there any draggable option I'm supposed to use?
This can be solved by adjusting for the transform: scale(1.6). When the item is dragged, it uses it's position to adjust the top and left of the dragged item. With the scale(), these values are off and you will see the items movement move that same factor faster then the mouse.
x1 = x * 1.6;
y1 = y * 1.6;
To move with the mouse, we need to adjust this back to the same 1:1 (instead of 1:1.6) ratio. This can be done like so:
jQuery > Draggable > Drag Option
drag: function(e, ui) {
// Adjust for Scale
var myScale = parseFloat($('.container').css('transform').split(',')[3]);
var myTop = Math.round(ui.position.top / myScale);
var myLeft = Math.round(ui.position.left / myScale);
ui.position = {
top: myTop,
left: myLeft
};
}
FYI, $('.container').css('transform') will return: matrix(1.6, 0, 0, 1.6, 0, 0). See more: Get CSS transform property with jQuery
You could hard code 1.6 into your script, but I like to keep things portable. So if you change the CSS, you don't have to change this script. See more about setting position: http://api.jqueryui.com/draggable/#event-drag
Working Example: https://jsfiddle.net/Twisty/1gnehyum/
When i followed another example I found that it doesn't work in my case. I use a Font Awesome icon and it somehow interferes with my CSS.
What steps should I take to make the paragraph of text equally indented (in pixels) from the left border and the icon?
The proposed solution that doesn't work in this case:
#left {
float:left;
width:7px;
}
#right {
width: 100%;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
You can use a positive margin-left on the containing div element, and a negative margin-left on the child img to move it to the left of the text, like this:
div {
width: 200px;
text-align: justify;
margin-left: 20px;
}
div .fa {
float: left;
width: 10px;
margin: 3px 0 0 -15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div>
<i class="fa fa-caret-up"></i>
A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>
There are a couple of ways to achieve this and Rory has shown you one. Another method would be to add a position property value of relative to main(parent element) as shown below, then a position property value of absolute to .fa. that way you can use left with negative value to position it as you desire.
Note: To have the text wrap around the icon, just float .fa to left and then use margins to adjust the spaces between the icon and text.
.main {
width: 200px;
margin-left: 50px;
position: relative;
}
.fa {
position: absolute;
left: -25px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>