Not completely sure how to explain what's going on. I'm trying to do a transformation on my search bar after it's submitted. The CSS and HTML are pretty large so I'm linking to CodePen to see in action, but I'll post the JS/CSS here as well.
I'd like to do something 'fancy' with the search bar, while the results pop up on the same screen so I thought 'transitions'.
CSS
.postSearch{
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
HTML Form
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
JS
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
There is a lot more to this page in production which is why some of the IDs etc don't make sure. I feel like using 'toggleClass' is a better idea for the myForm/postponed swap also. (I do this so hitting 'Go' again doesn't re-submit the form.
The codepen is located here - If you notice when you hit 'go' you'll see a scroll bar periodically pop up. On smaller resolutions it happens, on 4K it happens. On the website it actually is causing the background image to 'shake' and snap around.
I'm not too familiar with transitions, but I followed the documents pretty specifically. I'll end up inverting it to get the search bar to go back since it kind of 'snaps' back right now. Would appreciate any advice.
Thanks.
It is because of the component is going out from document. Try by adding overflow: hidden to it's parent container. Please try this and let me know if this is helpful for you.
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
html,
body {
position: relative;
height: 100%;
margin: 0;
/* temporary class */
}
.overflow-hidden {
overflow: hidden;
position: relative;
min-height: 100%;
}
.postSearch {
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden">
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
</div>
Scroll occurs because while form is spinning it goes out parent.
One possible solution is to add overflow: hidden for the time of animation.
body.transitionActive{
overflow: hidden;
}
js
[...]
$('#myForm').addClass('postponed');
$('body').addClass('transitionActive');
setTimeout(function(){
$('body').removeClass('transitionActive');
}, 3000);
$('#myForm').removeClass('myForm');
[...]
See how it works here: http://codepen.io/anon/pen/ALNLak
Related
What I am trying to do is, that when the user clicks on the search button, the search bar displays. But for some reason, it's just not working and I have no idea, why? I double-checked on
https://www.w3schools.com/jsref/event_onclick.asp just to make sure I am doing it right but to no avail. I tried the add.eventlistner that does not work, because it sees the button as null where the onclick="showBar()" should see the button, in JS.
HTML
<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
CSS
.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none !important;
}
JS
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.display = "block";
}
Your problem is you're using !important on display: none of .me-2.
You should not use !important in your style unless you want to hide it permanently.
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.display = "block";
}
.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none; /*Removed !important*/
}
<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>
If you cannot get rid of !important for some reason. You can try to add !important to .me-2 in Javascript that would override !important in your CSS.
let slideSearch = document.querySelector(".me-2");
function showBar() {
slideSearch.style.setProperty('display','block','important');
}
.form-control, .me-2 {
animation: slide 1s 1;
}
.me-2 {
display: none !important;
}
<button onclick="showBar()" class="btn btn-outline-success" type="submit">
Search
<img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>
<input class="me-2"/>
I want to setup a animation for the backdrop-filter property. When I use plain CSS it works but when I toggle the class in JS it doesn't work anymore.
I have tried to isolate the problem but I don't understand how to solve it.
MENU HTML
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
CONTACT HTML
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
CSS
#contact-wrapper{
display: block;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 1.5s;
}
#contact-wrapper.hide{
display: none;
backdrop-filter: blur(0px);
transition: backdrop-filter 1.5s;
}
JS
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
I want the backdrop transition working.
Can anyone help me? Thanks!
Answer:
You can't animate the Display property.
You can simulate this by using other properties like opacity, visibility, and adjusting height and/or width. Often used is setting the opacity and height to 0. This causes a similar effect to display: none since it causes the element to effectively remove the space it takes up in the DOM while rendering it invisible. Note You may also need to set padding, width, and margin to 0 if you truly want it to be as minimally existent in the DOM as possible.
You also can't transition just one property like backdrop-filter when some other altered property causes the element to be invisible. why? because it's interpreted by the Browser as "immediately make this element invisible while transitioning the other properties*." Basically it makes the whole operation pointless.
The syntax in your case to add multiple properties to transition is something like this:
transition: prop time, prop time, prop time;
If all altered properties are to be transitioned you can also just use:
transition: all 1.5s;
Example:
NOTE I updated with your menu code. I don't know where the menu is located, but to get it work with the demo code I had to alter the z-index depending on if hide was applied. This is because of the fixed top-left nature of the contact-wrapper. Depending on your markup you may not need to alter this or may need to alter it differently.
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
#contact-wrapper{
display: block;
opacity: 1;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 1.5s, margin 1.5s, padding 1.5s, height 1.5s, backdrop-filter 1.5s;
}
#contact-wrapper.hide{
opacity: 0;
height: 0;
padding: 0;
margin: 0;
z-index: -1;
backdrop-filter: blur(0px);
}
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
I wanted to make a div, and on hover on that div the contnet in the div must be scrolled to bottom, i have done the following code but its not working as desired, at the first hover it directly goes to bottom of the div height and on second hover the trasition works properly
.komal {
overflow: hidden;
height: 212px;
position: relative;
}
.imgpos {
position: absolute;
transition: all 1s ease-out 0s;
}
<div class="col-12 col-lg-4" id="outgov" style="height: auto;">
<div class="card card-shadowed card-hover-shadow komal dhiraj">
<div class="card-block text-center imgpos">
<img src="assets/home_solutions/outsourcing-governance.png" width="30%" style="margin-bottom: 20px;">
<h2 class="card-title text-center">Outsourcing Governance</h2>
<hr class="hr">
<div class="row" id="outgov_hidden" style="background-color: white; z-index: 9; margin-left:-20px; padding-bottom: 20px;">
<div class="text-center"><br>
<h4 class="modal-title" style="color: #000">Outsourcing Governance Practice Made Easy</h4>
<a style="margin-bottom:5px;" class="btn btn-info" href="#">Learn More</a>
<br><br>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
var xH
$('.dhiraj').hover(
function () {
xH = $(this).children(".imgpos").css("height");
xH = parseInt(xH);
xH = xH - 280;
xH = "-" + xH + "px";
$(this).children(".imgpos").css("top", xH);
}, function () {
$(this).children(".imgpos").css("top", "0px");
});
});
I want it to be working properly so please help that what can be done to make it work properly and look good
You can check the live demo on following link: http://sequentia.xyz/demo/demo
I want to make it (desired)like: http://domo.com (A solution for every role section on homepage of given desired link)
Please help me working it as desired like domo with my current color scheme
You would have to specify the top value. Otherwise, CSS Transition would not know from what value to transition.
In short, edit your code with this:
.imgpos {
top: 0px;
position: absolute;
transition: all 1s ease-out 0s;
}
If more explanation required, please do mention.
I created a show and hide for div in JavaScript but the code is displayed and hidden very quickly. I don't know if my code is wrong.
<script type='text/javascript'>
function sendpost(){
var u = $('#myform').serialize();
$.post('post.php',u,function(outpot){
$('#alert').html(outpot).show().fadeOut(4000);
$('#myform').fadeOut(1000).delay(2000).fadeIn(2000);
});
}
</script>
HTML
<div class="formone">
<div id="alert"></div>
<form id="myform">
Past your link here and Click "Short Now"
<input type='text' id='mytext' name='link' size='70' />
<input type='submit' onclick="sendpost();" value="Short Now" />
</form>
</div>
$('#myform').submit(function(e){
// this will prevent the form from being sent - reloading the page
e.preventDefault();
var u = $(this).serialize();
$.post('post.php',u,function(outpot){
$('#alert').html(outpot).show().fadeOut(4000);
$('#myform').fadeOut(1000).delay(2000).fadeIn(2000);
});
});
HTML:
<form id="myform">
<!-- ... -->
<input type='submit' value="Short Now" />
</form>
Try using css3 transition also this is better for perfomance ! ;-)
var dom = {
$input: $('.input'),
$alertContainer: $('.alert')
};
dom.$input.on('click', function() {
/* $.post('post.php',u,function(outpot){
* ...
* your magic
*/
dom.$alertContainer.addClass('show');
});
.alert {
opacity: 0;
width: 200px;
height: 0;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.show {
opacity: 1;
height: 100px;
background: #99cc00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formone">
<div class="alert">Lorem ipsum tu lis ma nore, Lorem ipsum a lot of lorem isum</div>
<form id="myform">
Past your link here and Click "Short Now"
<input type='text' id='mytext' name='link' size='70' />
<input type='submit' class="input" value="Short Now" />
</form>
</div>
About the title: I really could not think of a beter way to describe this.
I have this webpage here, and this is the jQuery code I use:
$('a[class]').click(function(){
var clas = $(this).attr('class');
$('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
$('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
$('.ans:visible').toggle('slow');
$('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
$('p:not(#'+clas.substring(0,2)+')').addClass('faded') //the class gets added
});
$('p:not(p.faded)').click(function(){ //right after it fires this
$('p.faded').fadeTo('fast',1).removeClass('faded');
$('.ans:visible').toggle('slow');
});
HTML
<p id="q1">1. <a class="q1">Nem látom a kedvenc karakterem, hozzá tudod adni?</a>
<br>
<span id="q1a" style="display:none;" class="ans">
Persze. Írj egy e-mail-t a djdavid98#gmail.com címre a karakter nevével.
<br>
<span style="color:red">OC-kat és fillyket NEM adok hozzá.</span>
</span>
</p>
<p id="q2">2. <a class="q2">Hogyan tudok karaktert választani?</a>
<br>
<span id="q2a" style="display:none;" class="ans">
Látogass el a Karakterválasztás oldalra, ahol.
<br>
Haználhatod továbbá a "<i>Véletlenszerű karakter</i>" linket is.
</span>
</p>
<p id="q3">3. <a class="q3">Mi ennek az oldalnak a célja/alapötlete?</a>
<br>
<span id="q3a" style="display:none;" class="ans">
Eredetileg a milyennapvanma.hu weboldal pónisított változataként indult,
<br>
de azóta már nagy mértékben továbbfejlődött az oldal.
</span>
</p>
As you can see on the page, clicking on any of the numbered links will instantly show & hide, indicating that both of the above code runs, but the second only should run when the user clicks the text/link again.
Add stopPropagation() this link here is fiddle http://jsfiddle.net/GSwDN/
$('a[class]').click(function(e){
e.stopPropagation();
var clas = $(this).attr('class');
$('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
$('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
$('.ans:visible').toggle('slow');
$('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
$('p:not(#'+clas.substring(0,2)+')').addClass('faded') //the class gets added
});
$('p:not(p.faded)').click(function(){ //right after it fires this
$('p.faded').fadeTo('fast',1).removeClass('faded');
$('.ans:visible').toggle('slow');
});
your code can be better/cleaned up but when you click the anchor, it bubbles up to the parent p which activates the click on the p and that's why you see both events firing
For the blinking effect I would suggest using CSS3 functionality.
#-webkit-keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
.animate {
-webkit-animation-direction: normal;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
}
I would then add this class to the button inside onclick event:
$('a[class]').click(function(e){
$(this).addClass('animate')
}
This saves you time but also makes your JS look cleaner.