I am trying to make a button that, when I click the button, set position to left=0px; of a element and when further clicked set position to right=0px; and continue toggling when clicking.
But it failed because it write ass inline CSS. without toggleClaas and adding CSS property How can I do this with JQuery?
My Code:
$(".something").click(function(){
$(".name").animate({left: "0px"},1000);
//when again clicked do this event
//$(".name").animate({right: "0px"},1000);
});
Instead of
$(".something").click(function(){
$(".name").toggleClass("active");
});
CSS:
.name{left: 0px;}
.active{right: 0px;}
Try this
let isLeft = true;
$(".something").click(function(){
const move = isLeft ? { left: '0px' } : { right: '0px' };
$(".name").css('left','unset').css('right', 'unset');
$(".name").animate(move,1000);
isLeft = !isLeft;
});
You can do it by initializing the button by right:0px then whenever you click the position will change as follows :
$("#something").click(function(){
$(this).toggleClass("right");
$(this).toggleClass("left");
});
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.a button {
position: absolute;
}
.left{left: 0px;}
.right{right: 0px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">
<button type="button" id='something' class='right' onclick="console.log('Hello world!')">Click Me!</button>
</div>
Related
i have sidebar if i click on button and then side bar appears from left, and when i click on body side bar hides, but why it is happening only for once.
FIDDLE
HTML
<body>
<div class="site-overlay"></div>
button ☰
<nav id="menu" class="panel" role="navigation">
<ul>
<li>Home</li>
<li>The Ballad of El Goodo</li>
<li>Thirteen</li>
<li>September Gurls</li>
<li>What's Going Ahn</li>
</ul>
</nav>
</body>
JS:
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
$('body').addClass('menu-open');
});
});
CSS:
a.menu-link {
float: right;
padding: 20px
}
nav#menu {
background: lightblue;
z-index: 100000000000000
}
.site-overlay {
display: none;
}
.menu-open .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
-webkit-animation: fade 500ms;
animation: fade 500ms;
}
HOW CAN I MAKE IT WORK IT MANY TIMES, instead of only one time.
After the click, you're showing your overlay, but because it has z-index: 9998, the overlay is being placed on top of the button, so when you try to click the button, you're actually clicking on the overlay, not on the button.
You should make an event when the overlay is clicked to remove that class, like this:
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })
This is because the added class is not removed.
You can control it by adding a toggle value for that button.
Instead of addClass put toggle.
On the way you put you will add "menu-open" once and it will never be removed.
you have more information about this here: https://www.w3schools.com/howto/howto_js_toggle_class.asp
You can do it by this JS code.
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
event.stopPropagation();
$('body').addClass('menu-open');
});
$('body').click(function(){
$('body').removeClass('menu-open');
})
});
I am trying to implement a new behavior when the user click on the button .employers-button I am going to scroll down to the form #contactin JS.
I implemented a function with window.scrool and the current top is top: 200 (as it as to be a value).
It is working but how can I replace the top: 2000 by top: contact? I tried to put contact instead of 2000 but it is not going down at all since it was to be an int
const goToContact = () => {
const button = document.getElementsByClassName("employers-button")[0];
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
event.preventDefault();
window.scroll({
top: 2000,
behavior: 'smooth'
});
});
}
Use element.scrollIntoView() with behavior:smooth to scroll to specific element and to avoid any hacks.
codepen:https://codepen.io/murliprajapati/pen/RwwLYyR
function scrollToElement() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView({behavior:'smooth', block:'start'});
}
#myDIV {
height: 250px;
width: 100%;
overflow: auto;
background: green;
}
#content {
margin-top:500px;
height: 800px;
width: 100%;
background-color: coral;
}
<html>
<head>
</head>
<body>
<div id="myDIV">
<button onclick="scrollToElement()">Scroll</button>
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>
You can use anchor tags
.big-space{
height:2000px;
}
Button that scroll
<div class="big-space">
</div>
<form id="myForm">
<label>form here</label>
<input type="text" />
</form>
For the smooth transition, I made the following fiddle. The property you were looking for is offsetTop. Hope this help!
const button = document.getElementById("employers-button");
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
window.scroll({
top: contact.offsetTop,
behavior: 'smooth'
});
});
html,
body {
height: 3000px;
background-image: linear-gradient(red, yellow);
}
#contact {
margin-top: 1800px;
height: 200px;
background-color: green;
}
<button id="employers-button">Let's scroll!</button>
<div id="contact">Contact</div>
Did you try something like:
VANILLA
top: contact.offsetTop;
Or JQUERY
top: contact.offset().top;
// but if you want it positioned relative to the closest positioned parent:
top: contact.position().top
Contact, in this case, is a DOM element, and as you rightly mentioned the top property of window.scroll expects a number.
Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/
In my web page I have an image that has a button positioned over it. I want to show and hide the button as mouse enter and leave the image:
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseout(function()
{
$('#ButtonChange').hide();
})
It is working but as the button is contained inside the image when the mouse enters the button it is considered to leave the image so the button is hidden then at tha same moment as the button is hidden the mouseenter event is triggered again and the button is shown causing a flickering effect
any suggestion to solve this?
Edit:
$('#UserImage').mouseenter(function() {
$('#ButtonChange').show();
}).mouseout(function() {
$('#ButtonChange').hide();
})
.imageUser {
width: 150px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:relative;width=150px">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" style="position: absolute;top: 180px;height:25px;left:0px;width:100px;display:none">
</div>
The whole thing is also possible with pure CSS ! for such simple thing, you don't really need Jquery !
.imageUser {
width: 150px;
height: 200px;
}
.img-wrapper {
position: relative;
width: 150px
}
.img-btn {
position: absolute;
top: 180px;
height: 25px;
left: 0px;
right:0; /* gave right, to align the button in center */
margin:0 auto; /* as button as fixed width, margin aligns in center */
width: 100px;
display: none
}
.img-wrapper:hover .img-btn {display:block} /* whenever mouse hovers the image wrapper, the button is shown, other time, its hidden */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-wrapper">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" class="img-btn">
</div>
Try hover?
$("#UserImage").hover(function () {
$('#ButtonChange').show();
}, function () {
$('#ButtonChange').hide();
});
I don't have an image so I make a div instead. See Fiddle below.
Fiddle: https://jsfiddle.net/9koswww1/1
Change mouseenter to mouseover.
https://api.jquery.com/mouseenter/
Check the bottom of the page for an example.
try this
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseleave(function()
{
$('#ButtonChange').hide();
})