Helo,
I have a button that displays a div after clicking this button.
But after trying many combinations of jQuery, I can not ensure that once the button clicked, the page will automatically scroll the div available while that appears.
My code
$(document).ready(function() {
var job = $("#job");
var open = $("#open");
job.hide();
open.click(function() {
job.slideDown();
$(this).fadeOut();
return false;
});
});
Thank you in advance for your answers
$("#job").hide();
$('#urBtn').on('click', function(){
if (!$("#job").is(':visible')){
$("#job").fadeOut();
}
});
Related
I am trying to get an image to move over to a separate box upon clicking and then to be removed with a remove button I have in my html. I figured out how to add the image upon clicking it then removing it upon clicking the remove button.
The issue I am having is: when I click the image itself, it should copy over to the right but it should only copy one time and then I must .remove() the image using the button before I can click it again so it appears once more. Right now the image appears over and over upon clicking. I tried using .stop() but that stops the function entirely, I need it to work interchangeably. How do I do this using jQuery?
JQUERY CODE:
$(document).ready(function(){
$("#john").click(function(){
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red'});
$("#johnbox").prepend(johnImage);
});
Check out the below code. You should be setting clicked to false again in your remove handler.
Here is the full code after I got your remove code.
$(document).ready(function () {
var clicked = false;
$("#john").click(function () {
if (!clicked) {
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red' });
$("#johnbox").prepend(johnImage);
clicked = true;
}
});
$("#removejohn").click(function () {
clicked = false;
$("#john").remove();
$("h2").html("Click John to put him in the Box");
$("h2").css({ 'color': 'black' });
});
});
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:
http://jsfiddle.net/rgt03mu4/24/
The problem is that I can have both notification containers open up if I click on both.
If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:
As you can see:
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.
What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.
Set the global variable for your container:
var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
nContainer2.hide(); //hide the second container
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
And you can do same with other function.
DEMO
There is no need to give the popup containers different classnames.
I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.
<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
... secondpopup
</div>
The click handler first hides all the popups before opening a new one.
$(".notification-link").click(function () {
$(".notification-popup-container").hide();
var targetId = $(this).attr('href');
$(targetId).fadeIn(300);
return false;
})
working example: http://jsfiddle.net/qyLekdwk/
The problem here is how the event propgation is handled
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
});
//page click to hide the popup
$(document).click(function (e) {
if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
nContainer.hide();
}
});
});
$(function test() {
var nContainer2 = $(".notification2-popup-container");
//notification popup
$("#notification2-link").click(function test() {
nContainer2.fadeToggle(300);
});
$(document).click(function (e) {
if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
nContainer2.hide();
}
});
});
Demo: Fiddle
I want my navigation to fade-in when a special button is clicked, and to fade away when the user is clicking somewhere else - doesn't matter where.
My Script looks like this:
function showText() {
var spoiler = document.getElementById('spoiler');
var button = document.getElementById('navicon');
if (spoiler.style.display == 'block') {
spoiler.style.display='none';
button.value = 'Text einblenden';
} else {
spoiler.style.display='block';
button.value = 'Text ausblenden';
}
return false;
}
My workaround was to give every navigation element the following code snippet.
onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"
Can anybody help me?
Use bubbling to attach a single click handler to a common parent element (for example, body).
Here's a simple example:
$(function () {
$("#myButton").click(function (e) {
$("#hidden").fadeIn();
return false;
});
$("#parent").click(function() {
$("#hidden").fadeOut();
});
});
Clicking the button will fade in the element with id hidden. Clicking anywhere in parent will fade it out again.
I am not a JS expert hence I am asking for some guidance. I have following scenario
page loads and commondiv is hidden
if user clicks button showeditform, I load editform in commondiv and show the commondiv
if user clicks button showeditform and editform is visible, remove it and hide commondiv
if user clicks button showpasswordform and if the editform is visible and I remove editform and show passwordform
if user clicks button showpasswordform and if the passwordform is visible, remove it and hide the common div
if user clicks button showeditform and if the passwordform is visible and I remove passwordform and show editform
As of now, I have set up flags and if elses but its not very good way to do it. How can I achieve this using minimum of jQuery code?
Update: Following is my attempt
$('a.editpo, a.resetpass').click(function(event){
event.preventDefault();
var urlToCall = $(this).attr('href');
var hyperlinkid = '#'+$(this).attr('id');
var targetId = $(this).attr('id').match(/\d+/);
var targetTrDiv = '#poformloadertr_'+targetId;
var targetTdDiv = '#poformloadertd_'+targetId;
var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ;
console.log(toToggle);
if(toToggle == true || $(targetTdDiv).html()==''){
$.ajax({
url:urlToCall,
success: function(html){
$(targetTdDiv).html(html);
$(targetTrDiv).show();
}
});
}else{
$(targetTrDiv).hide();
$(targetTdDiv).html('');
}
});
The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit personal info and reset pass, clicking these load up the form in a tr>td.
Try this
$(function(){
var $commonDiv = $("#commondiv");
//Add the edit and password forms into common div and hide them initially
$("#editform").hide().appendTo($commonDiv);
$("#passwordform").hide().appendTo($commonDiv);
//Editing answer based on your comments.
$(".showeditform").live('click', function(){
if($("#editform").hasClass("loading")){//If form is already loading just return
returnl
}
if(!$("#editform").is(":visible")){
$("#editform").addClass("loading").load("EditFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#editform").hide();
}
//Always hide the passwordform
$("#passwordform").hide();
});
$(".showpasswordform").live('click', function(){
if(!$("#passwordform").is(":visible")){
$("#passwordform").addClass("loading").load("PasswordFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#passwordform").hide();
}
//Always hide the editform
$("#editform").hide();
});
});
I have done this like a week ago, but the code is at home, where I am not at right now. But basically, you give your forms names in a array, and hide the ones that are not selected and if the one that is selected is clicked again use .toggle(); function to hide it.
You can give this a try. This is assuming you are storing your form HTML in JS. If you are storing it in a hidden container I can show you how to move that into the new parent or just copy the html into it.. hope this helps!
$("#commondiv").hide();
$("#showeditform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(editformHTML).show();
}
});
$("#showpasswordform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(passwordformHTML).show();
}
});
You would do something like this:
$('#showeditform').click(function()
{
if($('#commondiv').is(':visible'))
$('#commondiv').hide();
else
$('#commondiv').html('The text you want to set').show();
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#editform').show();
}
});
$('#showpasswordform').click(function()
{
if($('#editform').is(':visible'))
{
$('#editform').hide();
$('#passwordform').show();
}
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#commondiv').hide();
}
});
Honestly, it sounds like your page is doing far too much on a single page. The rules shown above give me a kind of a headache.