.
. .
.
.
(
*
) .
(
*) .
(
*
) .
(
*
)
.
(
*
) .
.
.
.
.
.
.
.
.
.
.
.
.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .(* ) . Asked(* ) . today .
. 19 times .
I am making a straightforward Apple iphone iphone job in which there will certainly be an Apple iphone framework as well as individual will certainly have the ability to utilize it as a phone as well as some fundamental attributes in it like cam, schedule, time and so on … so I was believing to use drag up motion in it similar to typical phones have yet the drag feature in not functioning I am a newbie so I do not have a lot of understanding in html css as well as js so please assist me resolve the problem. I was making the ios apple iphone reproduction job as well as attempting to use drag up motion unlock attribute in it so I composed some html css as well as js for it const apple iphone= document.querySelector(‘.
apple iphone ‘); const mainScreen= document.querySelector(‘.
main-screen’); const controlBar= document.querySelector(‘. control’);
const lockScreen = document.querySelector (‘.
lockscreen’ ).
allow isLocked = real;
allow startY =0; allow currentY= 0; feature opened () {
allow isLocked= incorrect; mainScreen.style.display=’flex’;
lockScreen.style.display=’none’;
}
// Hover result to reveal control bar.
iphone.addEventListener(‘ mouseenter’, () => > {
if (isLocked) {
controlBar.style.opacity = 1;
iphone.style.cursor=” reminder”;
}
} );
iphone.addEventListener(‘ mouseleave’, () => > {
if (isLocked) {
controlBar.style.opacity = 0;
}
} );
// Drag motion to unlock.
iphone.addEventListener(‘ mousedown’, (e) => > {
if (isLocked) {
startY = e.clientY;
currentY = startY;
iphone.addEventListener(‘ mousemove’, drag);
}
} );
window.addEventListener(‘ mouseup’, () => > {
if (isLocked) {
iphone.removeEventListener(‘ mousemove’, drag);
if (currentY – startY < < -100) {
unlockScreen();
}
}
} );
feature drag( e) {
currentY = e.clientY;
}
feature unlockScreen() {
isLocked = incorrect;
mainScreen.style.transform='translateY( 0 )';
controlBar.style.opacity = 1;
iphone.style.cursor=" default";
}
/ * Update the placing for the details areas */
. info-left,
. info-right {
font-size: 12px;
/ * Readjust the dimension as required */.
}
/ * Update the placing for the details areas */
. info-left {
setting: outright;
top: 5px;
/ * Readjust the upright setting as required */.
left: 10px;
}
. info-right {
setting: outright;
top: 5px;
right: 10px;
display screen: flex;
align-items: facility;
shade: white;
}
. info-right. signal {
margin-right: 5px;
/ * Readjust the margin as required */.
}
. info-right. network-type {
margin-right: 5px;
/ * Readjust the margin as required */.
}
. apple iphone {
background-image: link( ios-wallpaper. jpg);
background-repeat: no-repeat;
background-size: cover;
size: 23vw;
elevation: 95vh;
margin: vehicle;
shade: white;
boundary: 10px strong black;
border-radius: 30px;
setting: family member;
}
. notch {
background-color: black;
display screen: flex;
elevation: 4vh;
size: 9vw;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
align-items: facility;
justify-content: facility;
setting: family member;
left: 80px;
}
. audio speaker {
background-color: rgba( 48, 47, 47, 0.6);
box-shadow: 2px strong rgb( 88, 88, 88);
elevation: 3px;
size: 20px;
border-radius: 4px;
margin-left: 5px;
}
. front-cam {
margin-left: 5px;
setting: outright;
left: 5px;
.
top: 6px;
.
elevation: 14px;. size: 14px;. box-shadow: inset 0 0 1px rgba( 26, 25, 25, 0.2);
.}
.
lens {elevation: 6px;
. size: 6px;. border-radius: 50%;
.
background-color: rgba
( 216, 216, 216, 0.7);. display screen: flex;
. align-items: facility;. justify-content: facility
;.
box-shadow: inset 0 0 1px rgba( 0, 0, 0, 0.5);.
}
.
lens img {elevation: 12px;.
size: 13px;
.}
.
DateAndTime
{
text-align: facility;.
setting: family member;.
top: 15vh;.}
. lower {
setting: family member;.
base: -350 px;.
}
. flashlight {
setting: family member
;. background-color: black;.
elevation: 6vh;.
size: 3vw;.
left: 10px;.
display screen: flex;.
justify-content
: facility;.
align-items: facility;.
border-radius: 500px;.
}
. cam {
setting: family member;. background-color:
black;. elevation: 6vh;.
size: 3vw;.
right: -210 px;.
display screen: flex;.
justify-content: facility;.
align-items: facility;.
border-radius: 500px;.
base: 6vh;.
}.
control {size: 10vw;.
elevation: 3px;.
border-radius: 20px;.
background-color: white;
. display screen: flex;.
justify-content: facility;. align-items: facility;. setting: family member;. left: 30 %;. base: -40 px;.
opacity: 0;.
change: opacity 0.3
s;.}.
main-screen {setting: outright;. top: 0;. left: 0;.
size: 100 %;.
elevation: 100 %;. background-color: white;./ * Personalize the history shade */.
display screen: none;.
/ * Conceal by default */.
<< div course=" container">
<> < div course=" apple iphone">
<> < div course=" notch">
<> < div course=" audio speaker"><> < div course=" front-cam">
<> < div course=" lens"><> < img src=" lens.png" alt=""><> .
<.
<< div course=" lockscreen">
<> < div course=" DateAndTime">
<> < h1 course=" lock-time">> 11:57< < p course=" day">> Saturday, 26 August<.
<.
<< div course=" info-left">
<> < div course=" driver">
> Airtel.
<.
<.
<< div course=" info-right">
<> < div course=" signal">
<> < i course=" fas fa-signal"><> .
<.
<< div course=" network-type">
> 5G.
<.
<< ion-icon name=" battery-half-outline"><> .
<< div course=" base">
<> < div course=" control"><> < div course=" flashlight">
<> < ion-icon name=" flashlight"><> .
<< div course=" cam">
<> < i course=" fas fa-camera"><> .
<.
<.
<.
<< div course=" main-screen"><> .
<.
<.
<< manuscript kind=" component" src=" https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"><> < manuscript nomodule src=" https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"><> < manuscript src=" script.js"><>
Please inspect the code as well as a person assist me in this trouble I desire that the major display (which is presently vacant) ought to show up when a person drags up on the display or the control bar as well as the lock display ought to go away yet it is not occurring . asked 41 minutes earlier
.
(
*
)
default(
*
)
.
.
.
.
.
.
.
.
.
.
.
(* )
.
.
.
.
.
.(* )
.
.(* ) .
. Your personal privacy
.
. By clicking "Approve all cookies", you concur Heap Exchange can keep cookies on your tool as well as reveal details based on our Cookie Plan.
.(* )
.
Approve all cookies
.
.
.
.
Required cookies just
.
.
.
.
Personalize setups
.
