I apologize in advance if this is a rookie question. I am just learning to program/create a website and I can't find the solution to my problem.
I have a form on my website that appears/disappears after clicking on a button. I want the form to be hidden upon the page loading. As of now, the form is visible on the page once it loads, then when someone clicks the button the form hides/unhides. My current code is shown below. Could someone please help? Thanks!
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'slow', easing, callback);
};
</script>
You can modify the custom function to accept a timing parameter as follows:
$.fn.slideFadeToggle = function(easing, timing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};
and call it in ready() handler with 0 timing to hide the form on page load.
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.pop').slideFadeToggle("linear",0)
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, timing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};
form{
background:dodgerblue;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="pop">
<input type="text" /><br/>
<input type="text" /><br/>
</form>
<input type="button" id="contact" value="toggle"/>
Related
I'm having trouble figuring out a way to get this toggle function to close.
It will open happily, but closing is a different story.
Console Error: property 'toggle' of undefined at focusMobileSearch
Code:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('200').queue(function (next) {
$(this).css('visibility', 'visible');
next();
});
}
reveal().toggle();
}
This was my Previous Code (it had a weird issue where the first click did nothing:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' }).toggle();
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
}).toggle();
}
reveal();
}
Thanks!
Use a class for the toggle.
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').toggle('visible');
$('.input-group').delay('240').queue(function(next) {
$(this).toggle('visible');
next();
});
}
reveal();
}
.visible {
visibility: visible;
}
.search-dropdown.visible {
height: 64px;
}
This fixed it:
function focusMobileSearch() {
$('.ef-header-alt__search').removeClass('is-focused');
function reveal() {
if ($('.search-dropdown').css('visibility') == 'hidden') {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
})
} else {
$('.search-dropdown').css({'visibility': 'hidden', 'height': '0px'});
$('.input-group').css('visibility', 'hidden');
}
}
reveal();
}
Big thanks to: #Taplar for letting me know toggle doesn't effect visibility, but rather just display property.
Just for first click the img class rotate to 180deg and post class show, but i want for second click if rotate 180deg change to 0deg again and post class show.
Post class show is working but rotate just for first click work.
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').css('transform', 'rotate(0deg)')) {
$('.img').css('transform', 'rotate(180deg)');
} else if ($('.img').css('transform', 'rotate(180deg)')) {
$('.img').css('transform', 'rotate(0deg)');
}
});
});
});
$('.img').css('transform', 'rotate(0deg)') will always resolve to true because it returns the jQuery chaining for $(".img"). It sets the transform property and does not evaluate. See http://api.jquery.com/css/ for reference.
To fix this you could add a class to check if it is already rotated:
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').hasClass('rotated')) {
$('.img').css('transform', 'rotate(0)');
$('.img').removeClass('rotated')
} else {
$('.img').css('transform', 'rotate(180deg)');
$('.img').addClass('rotated');
}
});
});
});
IMO better to use toggle when you want to toggle between two values :
$(document).ready(function(){
$(".op-cl").click(function() {
$('.img').toggle(function () {
$("#user_button").css({transform: "rotate(0deg)"});
}, function () {
$("#user_button").css({transform: "rotate(180deg)"});
});
});
});
img{
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='op-cl'>op-cl</button>
<br>
<img class='img' src='https://pbs.twimg.com/profile_images/604644048/sign051.gif' style='transform:rotate(0deg)'/>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
var click=1;
$(".post").toggle("slow", function() {
if (click % 2 !=0) {
$('.img').css('transform', 'rotate(180deg)');
} else if (click % 2 ==0) {
$('.img').css('transform', 'rotate(0deg)');
}
click++;
});
});
});
I am using popup plugin presented by some user of stackoverflow.
It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc
First one:
...
<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
<div class="messagepop pop">
<p>popup message1</p>
</div>
...
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
Secone one:
...
<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
<div class='messagepop2 pop2'>
<p>popup message 2</p>
</div>
...
<script>
function deselect(e) {
$('.pop2').slideFadeToggle(function() {
e.removeClass('selected2');
});
}
$(function() {
$('#menuButtonBilety').on('click', function() {
if($(this).hasClass('selected2')) {
deselect($(this));
} else {
$(this).addClass('selected2');
$('.pop2').slideFadeToggle();
}
return false;
});
$('.close2').on('click', function() {
deselect($('#menuButtonBilety'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
EDIT: The script comes from the best answer HERE
In your case probably you are overriding the deselect function.
But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:
function deselect(e) {
e.next('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.menuButton').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).next('.pop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
height: 'toggle'
}, 'fast', easing, callback);
};
Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/
I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});
You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>
You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });
Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>
Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click