I´m trying to make an animation that when I click on a search icon, it fadeIn the search input and add a class to make it wider. The problem is that I don´t know how to make it fadeOut in the second click after the search input it´s already displayed:
this is my code:
$('#menu_search').click(function(){
$('.search_input').fadeIn().toggleClass('full');
});
<li id="menu_search">
<div class="search_input_container">
<input type="text" class="search_input" value="Buscar">
</div>
</li>
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
.search_input_container{
width: 500px;
height: 30px;
position: absolute;
z-index: 20;
left: -466px;
.search_input{
float: right;
width: 100px;
background: #ffffff;
height: 30px;
border: none;
.round_corners();
.animate();
display: none;
&.full{
width: 772px;
display: block;
}
}
}
}
There's also a fadeToggle in jQuery. Try this:
$('#menu_search').click(function(){
$('.search_input').fadeToggle().toggleClass('full');
});
If it's always the second click, you should use fadeToggle() instead.
Related
I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.
The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.
In my JS Fiddle demo you can see a live example; but here is my code so far:
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
<p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>
JS Fiddle demo
PS: I cannot use jQuery.
Thanks.
Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code
var mouse = false;
function mouseStatus(n) {
mouse = n;
}
function parent() {
if (mouse == false) {
console.log('parent');
window.open('www.google.com');
}
}
function child() {
console.log('child');
}
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<a class="parent" onclick="parent()">
<p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>
call a function instead :
onEvent(event) {
event.stopPropagation();
return false;
}
calling the function with
(click) ="onEvent($event)"
So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great!
Here is the HTML:
<div class="appdesign">
<img class="appmockup" src="img.jpg"/>
<div class="apptext" style="display:none">
<p class="apptexttitle">Name</p>
<p class="apptextinfo">Mobile App Design<br><br>Insert info</p>
<button>
View Project
</button>
</div>
</div>
Here is the CSS
.appdesign{
display: inline-flex;
img{
height: 450px;
width: 650px;
margin-bottom: 30px;
}
.appdesign img:hover .apptext{
opacity: 0.5;
}
.apptext{
display: block;
opacity: 0.8;
position: absolute;
background-color: $customgrey;
height: 450px;
width: 650px;
margin-bottom: 30px;
z-index: 100;
.apptexttitle{
color: $white;
font-size: 30px;
border-bottom: 2px solid $white;
border-top: 2px solid $white;
width: 15vw;
padding: 10px;
text-align: center;
}
}
.apptextinfo{
width: 40vw;
font-size: 18px;
font-family: Merriweather;
}
}
Here is the JS
<script>
$('.appdesign').hover(function(){
$(this).find('.apptext').fadeIn('slow');
},
function(){
$(this).find('.apptext').stop().fadeOut('slow');
});
</script>
I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});
I am trying to achieve toggle option using jQuery. I have two styles (sub-menu-icon and sub-menu-mobile). On clicking on "sub-menu-icon" class div, i want to toggle "sub-menu-mobile" class div to toggle from left to right and right to left.
$(document).ready(function() {
$('.sub-menu-icon').toggle(function() {
$(".sub-menu-mobile").css("width", "200px");
});
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
Icon
</div>
<div class="sub-menu-mobile">
Rights side Menu
</div>
You want to use a click handler on the menu, then toggle a class that toggles the width. You also need to re-arrange the HTML elements and add position: relative; to the menu so the menu will show up above the sidebar.
$('.sub-menu-icon').on('click',function() {
$(".sub-menu-mobile").toggleClass('width');
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
position: relative;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
.width {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
Rights side Menu
</div>
<div class="sub-menu-icon">
icon
</div>
there seems to be a thread with a case very similar to yours. Check this out!
Toggle Between two Divs
So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>
Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx
The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.