How can I draw arc like this image below? - javascript

I won't make some of this arcs on my website and I don know how to do it I tried to do it but I can't !
Referance Image

You could use a before/after pseudo element on one of the blocks. Then on that element you'd give it the same background color and use transform: skew(-2deg); to give it the tilted affect.
See the example below, it's fairly simple enough once you understand how you can use pseudo elements to your advantage.
section {
position: relative;
float: left;
width: 100%;
background: black;
height: 300px;
}
.skewedSection {
background: red;
}
.normalSection:before {
content: "";
background: red;
height: 100px;
-webkit-transform: skewY(-2deg);
transform: skewY(-2deg);
position: absolute;
left: 0;
right: 0;
bottom: -50px;
z-index: 2;
}
<section class='normalSection'>
</section>
<section class='skewedSection'>
</section>

Related

How to make an image change when pressed on a div?

My goal is to make the "down-arrow.svg" change to "up-arrow.svg" if the image was "down-arrow.svg" when clicked on the upper div which contains this image and versa via.
I have looked up the past questions and answers, found something but they couldn't solve my problem, these index.html and index.js files grows from one of the answers written here. What am I doing wrong? Thank you in advance.
index.html:
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
...
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="svg/down-arrow.svg" >
</div>
</div>
...
</body>
index.js:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "svg/down-arrow.svg") {
document.getElementById("up-down-arrow").src = "svg/up-arrow.svg";
}
else {
document.getElementById("up-down-arrow").src = "svg/down-arrow.svg";
}
}
stylesheet.css:
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
I think you just need to change your image source and not the ID of it.
So with your HTML structure i can guide you with changing just the ID of the img tag.
The Solution is as below:
function changeArrow() {
//First grabing the current Source in below varaiable.
var img = document.getElementById('arrowSvg').src;
/*
** Now checking if it does match with path that we have in variable.
** And updating src based on the current src of image.
*/
if (img.indexOf('svg/down-arrow.svg') != -1) {
document.getElementById('arrowSvg').src = 'svg/up-arrow.svg';
} else {
document.getElementById('arrowSvg').src = 'svg/down-arrow.svg';
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<div id="open-menu" onClick=changeArrow()>
<div id="open-menu-inner">
<p id="open-menu-text"> Menü </p>
<img id="arrowSvg" src="svg/down-arrow.svg">
</div>
</div>
Hope this helps you.
Thanks!
The issue should be in your paths, with images from Google it works fine:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png") {
document.getElementById("up-down-arrow").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Octicons-arrow-small-up.svg/1000px-Octicons-arrow-small-up.svg.png";
}
else {
document.getElementById("up-down-arrow").src = "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png";
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png" >
</div>
</div>
</body>
As an alternative, you may use classList.toggle instead. The idea of toggle is it will add the class if it's not present on the element, and remove it if it's present. It will be more optimize as well. Put the images into the class and toggle that class onClick so as the example below; see arrow-up on css and how it is used in toggle in javascript section. Initially the <div id="arrow".. has already an arrow class that's why you will see an arrow down icon, when the toggle is triggered, the element will become like this <div id="arrow" class="arrow arrow-up"></div> and this <div id="arrow" class="arrow"></div> alternatively. The toggling of arrow-up class gives the effect of changing arrow icons.
function changeArrow() {
var element = document.getElementById("arrow");
element.classList.toggle("arrow-up");
}
.open-menu {
padding: 20px;
position: absolute;
cursor: pointer;
background-color: #000000;
}
.arrow {
width: 16px;
height: 16px;
background: url('http://www.entypo.com/images/chevron-down.svg') no-repeat;
}
.arrow-up {
background: url('http://www.entypo.com/images/chevron-up.svg') no-repeat !important;
}
<div class="open-menu" onClick="changeArrow()" >
<div id="arrow" class="arrow"></div>
</div>
image's used on sample copyright to www.entypo.com
Replace
document.getElementById("up-down-arrow").src
with
document.getElementById("up-down-arrow").getAttribute('src')
src returns the full URL of the image
getAttribute('src') returns exactly what was in the HTML, i.e. the way that you wrote it
ps. I would also like to suggest a few potential improvements to your current HTML page:
I would recommend moving the JS import from the head to the bottom of the body tag just before closing it. This will make sure that the body of your webpage will render before downloading the JS file which will make the page render faster to your end users.
(This is because the way that the browser renders html is it executes
it line by line which means that it will stop to download the javascript file before executing anything else that comes after it, i.e. displaying the body of the webpage to the user.)
I would also recommend replacing the inline onClick function with an eventListener inside of your JS file that way you will have separation between your HTML and JS files which will make your website more maintainable as it grows in size
Depending on the size of your DOM it MIGHT also be faster to store, i.e. cache, the "up-down-arrow" node inside of a variable to avoid the performance cost of querying for that node inside of the DOM each time the user clicks on it, i.e.
$up_down_arrow = document.getElementById("up-down-arrow");
if ($up_down_arrow.getAttribute('src') === "bin2-lighter.svg") {
$up_down_arrow.setAttribute('src', 'bin2-darker.svg')
} else {
$up_down_arrow.setAttribute('src', 'bin2-lighter.svg');
}

div with a large z-index is under the div with a smaller z-index

I had a problem:
Element overlapped element because it has a higher z-index (10 vs 5). Element has the child elements #sub-block-1 & #sub-block-2, and #sub-block-1 had child text #text1 with z-index = 20. But #text1 with z-index = 20 still under with z-index = 10. Why?
Tell me, how can I solve this problem?
The must have a predefined z-index (number, not 'auto', and less than z-index , for example, 5 vs 10).
My example:
https://jsfiddle.net/nynsjv3L/1/
P.S.
The above example is not displayed correctly in jsfiddle - the position of the elements (#sub-block-1 & #sub-block-2) does not work.
body {
background: #00ff00;
}
.screen {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background: #ffffff;
opacity: 0.75;
z-index: 10;
}
#main-block {
position: absolute;
left: 500px;
top: 200px;
width: 700px;
height: 400px;
border: 2px solid #bb0000;
background: #ff0000;
z-index: 5;
}
.sub-block {
position: absolute;
width: 300px;
height: 150px;
background: #ffffff;
border: 4px solid #000000;
}
#sub-block-1 {
left: 100;
top: 100;
z-index: auto;
}
#sub-block-2 {
left: 275;
top: 175;
z-index: 11;
}
#text1 {
position: absolute;
left: 65px;
top: 55px;
color: #000000;
background: #ffff00;
font-size: 30px;
font-weight: 700;
z-index: 20;
}
#text2 {
position: absolute;
left: 65px;
top: 55px;
color: #00bbbb;
font-size: 30px;
font-weight: 700;
}
<div id='main-block'>
<div class='sub-block' id='sub-block-1'>
<div id='text1'>TEST TEXT</div>
</div>
<div class='sub-block' id='sub-block-2'>
<div id='text2'>NEW TEXT</div>
</div>
</div>
<div class='screen'></div>
The #text is still inside your block, that has a lower index than its sibling. The #text part is still in the same context block of its parent. You could check out the inner workings of z-indexes in this page.
You need to create a new stacking context for the text to appear above the other block. One of the possible ways is to change the opacity of the text to .99, or using the transform attribute. I do not recommend you to do it, though, as it will cause more troubles in the future.
Z-indexes should not be used very often. It is better to organize this inside the HTML itself. You should rethink your work.
#main-block is on the same level as .screen and has a lower z-index. So child elements of #main-block will always be overlapped by .screen and its children.
Whenever you set an element to be position: relative or position: absolute you open up a new z-index-stack for all of its children.
You either have to move the child elements of #main-block some levels up to make them independent or give the #main-block a higher z-index which will also result in overlapping .screen.
Hint: Negative z-index is also possible. And clean up your markup (keyword: single quotes). ;-)

How to prevent get over other divs?

I have a problem...In the following example i don't want that the div who is fixed get over the div with the background red.
Here is the example:
http://jsfiddle.net/HFjU6/3645/
#fixedContainer
{
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
Alright, I think I get what the OP wants. He wanted a container that stays fixed on the top of the viewport, but remains confined by a parent. This behaviour is known as a conditional sticky behaviour, and is actually implemented in both Firefox (without vendor prefix) and macOS/iOS Safari (with -webkit- prefix): see position: sticky.
Therefore the easiest (but also the least cross-browser compatible) way is simply to modify your markup, such that the sticky element stays within a parent, and you declare position: sticky on it:
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: -webkit-sticky;
position: sticky;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
transform: translate(-50%, 0); /* Negative left margins do not work with sticky */
}
#div1 {
height: 200px;
background-color: #bbb;
}
#div1 .content {
position: relative;
top: -100px; /* Top offset must be manually calculated */
}
#div2 {
height: 500px;
background-color: red;
}
<div id="div1">
<div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
<div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>
An alternative would be to use a JS-based solution. In this case, you do not actually have to modify your markup. I have changed the IDs for easier identification of the elements, however.
The gist of the logic is this:
When the scroll position does not exceed the bottom of the parent minus the outer height of the sticky content, then we do not do anything.
When the scroll position exceeds the bottom of the parent minus the outer height of the sticky content, we dynamically calculate the top position of the sticky content so that it remains visually in the parent.
$(function() {
$(window).scroll(function() {
var $c = $('#sticky-container'),
$s = $('#sticky-content'),
$t = $(this); // Short reference to window object
if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
$s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
} else {
$s.css('top', 0);
}
});
});
* {
margin: 0;
padding: 0;
}
div {
height: 500px;
background-color: red;
}
#sticky-container {
background-color: #bbb;
height: 200px;
}
#sticky-content {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
margin-left: -100px;
left: 50%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>
Old answer before OP clarified the question appropriately:
Just give them the appropriate z-index values. In this case, you want to:
Do not use static positioning. This can be done by using position: relative for the large elements, in conjunction with the originally position: fixed element.
Assign the appropriate stacking order. The grey <div> element to have the lowest z-index, followed by the position fixed element, and then by the red element.
There are some catchalls to stacking though: the stacking context is reset when you traverse up or down the node tree. For example, the example will not work if the elements are not siblings.
Here is a proof-of-concept example, modified from your fiddle so that inline CSS is removed.
* {
margin: 0;
padding: 0;
}
#fixedContainer {
background-color: #ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px;
z-index: 2;
}
#div1 {
height: 200px;
background-color: #bbb;
position: relative;
z-index: 1;
}
#div2 {
height: 500px;
background-color: red;
position: relative;
z-index: 3;
}
<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>
Just give the z-index.
Hope it helps...
http://jsfiddle.net/HFjU6/1/#run
#fixedContainer {
background-color:#ddd;
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
z-index: 2;
}
.div-red {
position: relative;
z-index: 5;
}
<div id="fixedContainer"></div>
<div style="height:200px;background-color:#bbb;"></div>
<div style="height:500px;background-color:red;" class="div-red"></div>

How can I use toggle("slide") to show a phrase one letter at a time

I am using a `.toggle("slide") function to try and get a piece of text I have to appear as if each letter is sliding in. Unfortunately, it looks as if the text is flying in instead. I tried to squeeze the margins in tight, so that it would start at a closer place, but it still looks as if it is flying in from the left side.
Is there a better way to do this, so it looks as if the letters are sliding in without "flying in"?
$("#home-learn").toggle("slide");
#blue {
background-color: #0085A1;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
display: none;
text-align: center;
position: relative;
margin: 0 40%;
top: 50%;
font-size: 2.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue">
<div id="home-learn">Learn more...</div>
</div>
For the effect you want, put a div inside your container. Make the div position absolute, make it 100% the height and width of the container, and make it the same background color as the main background. Make the div's z index higher than the container so the div sits over the text like a curtain. Then use toggle() to slide the curtain to the right exposing the text underneath.
Note that this uses jQuery UI, without it, you can't make toggle() slide to the right like this needs.(at least to my knowledge you cant). If you dont want to use jquery UI, you could use .animate() instead of toggle()
$("#curtain-div").toggle("slide", {
direction: "right"
}, 3000);
#blue {
background-color: #0085A1;
position: relative;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
text-align: center;
position: relative;
top: 50%;
font-size: 2.3em;
}
#curtain-div {
width: 100%;
height: 100%;
position: absolute;
background-color: #0085A1;
top: 0;
left: 0;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="blue">
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>

jQuery mouse enter/leave not correctly detecting hovering area

I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?
Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE

Categories

Resources