I can't figure out what is the best way to do this, or just how to do this, so anything can help.
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});});
I have this code and JSFiddle and i would like to remove the :hover effect, when the box is scaled to big and the text appears. So when .logo-active is activated, :hover should be disabled. Thank you in advance.
Add transform: scale(1.0); to .logo-active
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});
});
.logo {
background: blue;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.8);
transition: all 0.5s ease;
}
.logo:hover {
transform: scale(1.0);
cursor: pointer;
}
.logo-active {
background-color: blue;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
position: absolute;
left: 50%;
top: 50%;
transform: scale(1.0);
}
.text {
opacity: 0;
transition: all 0.5s ease;
}
.text-active {
margin-top: -50px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" class="logo">
<p class="text">Hello / Hi</p>
</div>
Your logo has an initial scale of 0.8 so adding this to the bottom of the css code will work (tested on your jsfiddle).
.logo-active:hover {
transform: scale(.8);
}
You can create an extra class and toggle it
$(document).ready(function() {
$("#button").click(function() {
$('.logo').toggleClass('logo-active');
$('.logo').toggleClass('logo_hover')
});
$("#button").click(function() {
$('.text').toggleClass('text-active');
});
});
.logo_hover:hover {
transform: scale(1.0);
cursor: pointer;
}
<div id="button" class="logo logo_hover">
<p class="text">Hello / Hi</p>
</div>
See jsFiddle:https://jsfiddle.net/1xsx4pjk/3/
Related
I've set up a menu as pictured in the snippet below. I want the user to be able to hover over the central icon and then be able to select one of the buttons on the side. I've had some success by placing another, larger element in front of the icon when the icon is hovered on and then chaining some hovers together but then as soon as they hovered over a button all the other ones disappeared. I've also tried expanding the padding of the #navCont element but the buttons disappear when hovering over any of them (it also pushes all my content up if I expand the bottom area)
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
animation-play-state: paused;
}
#navCont .btn {
opacity: .75;
height: 1.5em;
display: none;
position: absolute;
}
#navCont:hover img.btn {
display: block;
}
#navCont .btn:hover {
opacity: 1;
}
#navCont #btnWork {
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
https://i.stack.imgur.com/qZDam.jpg
Ideally, I'd like the buttons to remain active while the cursor is in this area (see link above) after they have appeared via the icon, however, a rectangular area of that size would also be ok.
You could create an on hover event on your squid icon using javascript that when triggered keeps the menu content visible until a mouseout event on some larger parent area is triggered
Something like this:
document.getElementById("sqlogo").onmouseover = function(){
// show the buttons
getElementsByClassName("btn").style.display = "block"
};
document.getElementById("navCont").onmouseout = function(){
// hide the buttons
getElementsByClassName("btn").style.display = "none"
};
You might have to undo some of your CSS so that JS controls the visibility instead of CSS :hover
I found a workaround using JQuery. I just toggled the button visibility if the mouse didn't move to them fast enough after leaving the main icon
$("#sqlogo").mouseenter(function() {
$("#sqlogo").addClass("freeze");
$(".btn").addClass("vis");
});
let t;
$("#sqlogo").mouseleave(function() {
t = setTimeout(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
}, 500);
});
$(".btn").mouseenter(function() {
clearTimeout(t);
});
$(".btn").mouseleave(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
});
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
}
#sqlogo.freeze {
animation-play-state: paused;
}
#navCont>.btn {
opacity: .75;
visibility: hidden;
height: 1.5em;
position: absolute;
}
#navCont>.vis {
visibility: visible;
}
#navCont>.btn:hover {
opacity: 1;
}
#navCont > #btnWork{
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).
Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>
let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");
Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});
I want to hover over an image (music album) and then a record rolls out, so I want it to move to the right and to rotate a bit, and when its offhover i like it to return to normal also with an animation. It can already move to the right but I can't get it to rotate with it. I like to keep it as simple as possible as I am not a pro in coding. I am using javascript for the movement part as below,
$(document).ready(function (){
$("#cover1").hover( function() {
$("#coverrecord1").stop().animate({ left: '5%' });
}, function() {
$("#coverrecord1").stop().animate({ left: '0' });
} );
})
can you test this jsfiddle and let me know this is what you are looking for
$("#albumContainer>img").hover(function(){
$("#albumContainer>img").each(function(){
$(this).addClass("animate");
});
$(this).removeClass("animate");
});
$("#albumContainer>img").mouseout(function(){
$("#albumContainer>img").each(function(){
$(this).removeClass("animate");
});
});
Okay, what you're looking for is the CSS3 transform property.
BUT - it does not work with regular jQuery animation.
So you have a couple of options:
write your own function with step (good example: Animate element transform rotate)
use CSS3 animation with a class
something like this:
$("#cover1").hover( function() {
$("#coverrecord1").addClass('rollOut');
}, function() {
$("#coverrecord1").removeClass('rollOut');
} );
<style>
#coverrecord1{ transition:all 1s;}
.rollOut{
left: 5%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
</style>
for more on CSS3 animation: http://www.w3schools.com/css/css3_animations.asp and a whole lot of google results
Instead of doing the animation with JavaScript I'd recommend it to do it with CSS. You could simply achieve your desired effect with the following code.
The example is just to give you an idea of how it could look like. Of course from this point you can even fine tune your animation .
HTML
<div class="album">
<img class="cover" src="path" alt="" />
<img class="record" src="path" alt="" />
</div>
CSS
.album {
position: relative;
width: 200px;
height: 200px;
background: #eee;
cursor: pointer;
}
.cover {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.record {
position: absolute;
top: 50%;
left: 0;
height: 100%;
transform: translateY(-50%) rotate(0deg);
transition: 0.3s;
}
.album:hover .record {
left: 50%;
transform: translateY(-50%) rotate(45deg);
}
.album {
position: relative;
width: 200px;
height: 200px;
background: #eee;
cursor: pointer;
}
.cover {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.record {
position: absolute;
top: 50%;
left: 0;
height: 100%;
transform: translateY(-50%) rotate(0deg);
transition: 0.3s;
}
.album:hover .record {
left: 50%;
transform: translateY(-50%) rotate(45deg);
}
<div class="album">
<img class="cover" src="http://www.fuse.tv/image/56fe73a1e05e186b2000009b/768/512/the-boxer-rebellion-ocean-by-ocean-album-cover-full-size.jpg" alt="" />
<img class="record" src="http://www.clipartkid.com/images/853/vinyl-record-1-1024-768-descibel-radio-1TJlqv-clipart.png" alt="" />
</div>
Try with below tag
<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />
and add below css
img{
border-radius:50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover{
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
I have this spinning div and I want it to stop when I click on a button by using the .stop() method, but for some reason it doesn't work. I hope you can shed some light on this issue for me.
Here is a snippet which performs the animation and demonstrates that the Stop animation button does not stop the animation.
$('button').bind('click', function(){
$('.player-disc').stop(true, false);
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Stop animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
I've also tried any other combinations of .stop(false, false) etc.
a jsFiddle
It's a CSS animation, not a jQuery animation so you just need to set the css animation property to "none":
$('.player-disc').css('animation', 'none');
As others pointed out, it's CSS animation.
To stop it and reset disc to its original position use (this also resets animation):
$('.player-disc').css('animation', 'none');
To pause it and not reset disc to its original position use:
$('.player-disc').css('animation-play-state', 'paused');
You can then resume animation using:
$('.player-disc').css('animation-play-state', 'running');
$('#btn1').bind('click', function(){
$('.player-disc').css('animation', 'none');
});
$('#btn2').bind('click', function(){
$('.player-disc').css('animation-play-state', 'paused');
});
$('#btn3').bind('click', function(){
$('.player-disc').css('animation-play-state', 'running');
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" type="button">Set animation to none</button>
<button id="btn2" type="button">Pause animation</button>
<button id="btn3" type="button">Play animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
Your animation is being initialised in the CSS. Therefore you must stop it by CSS. $(".player-disc").css("animation-play-state", "paused");
Try this code...
$("button").click(function(){
$('.player-disc').css('animation', 'none');
});
Fiddle
I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?
https://atmospherejs.com/
You can do that with CSS only and here is one way.
In this sample I used 2 radio inputs to keep track of whether to show the search box or not.
html, body {
margin: 0;
height: 100%;
}
#shide, #sshow {
display: none;
}
.container {
width: 100%;
height: 100%;
background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
background-size:cover;
transition: transform .6s ease-out, opacity .6s ease-out;
z-index: 1;
}
.showsearch{
position: absolute;
top: 25px;
right: 25px;
background-color: rgba(255,255,255,0.9);
color: #F00;
font-size: 20px;
border-radius: 5px;
padding: 10px 25px;
cursor: pointer;
}
.searchbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255,255,255,0.9);
transition: opacity .5s ease-in;
}
.searchbox .close{
position: absolute;
top: 25px;
right: 25px;
width: 60px;
height: 60px;
cursor: pointer;
}
.searchbox .close:before,
.searchbox .close:after {
content: ' ';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: rotate(45deg);
background: #000;
}
.searchbox .close:after {
transform: rotate(-45deg);
}
.searchbox > div {
position: relative;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.searchbox > div > div {
font-size: 24px;
}
#sshow:checked ~ .searchbox {
opacity: 1;
z-index: 2;
}
#sshow:checked ~ .container {
opacity: 0.4;
transform: scale(0.9, 0.9);
}
<input type="radio" name="search" id="sshow">
<input type="radio" name="search" id="shide">
<div class="searchbox">
<label class="close" for="shide"></label>
<div>
<div>Search box</div>
<input type="text" class="field">
</div>
</div>
<div class="container">
<label class="showsearch" for="sshow">Search</label>
</div>
Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:
Here is a fiddle demo Fiddle
Css:
.search-overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
background:rgba(255,255,255,0.9);
z-index: -1;
transition: all 250ms ease-in-out;
}
.body-wrapper{
transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
width:100%;
height:100%;
}
.search-open .search-overlay{
opacity:1;
z-index: 5;
}
.search-open .body-wrapper{
position:fixed;
top:0;
left:0;
opacity:0.5;
transform: scale3d(0.85, 0.85, 1);
}
Html:
<div class="search-overlay">
Search Content...
</div>
<div class="body-wrapper">
Body Content...
</div>
Then jquery to toggle the class use a button or something in the body content and the overlay to close it:
$('.search-button, .search-close').on("click", function(){
$('body').toggleClass("search-open");
});