Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...
I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.
What I want, basically is that buttonA shows formA, but when I click buttonB, I want to hide formA and show formB. Now what's happening is that it's overlaying formA and formB.
Here's my current code..
function runEffect() {
$( "#effect" ).show( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
};
//callback function to bring a hidden box back
function hideEffect() {
$( "#effect:visible" ).hide( "drop");
};
// set effect from select menu value
$( "#button" ).each(function(index) {
$(this).click(function(){
runEffect();
});
});
$( "#button2" ).each(function(index) {
$(this).click(function(){
runEffect2();
});
});
$( "#effect" ).hide();
$( "#effect2" ).hide();
I know this is easy, but I can't seem to find the answer to it.
Thanks!
try this
function runEffect() {
$( "#effect" ).show( "drop");
$( "#effect2" ).hide( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
$( "#effect" ).hide( "drop");
};
$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});
something like this?
I haven't tested it, but maybe you want to a more dynamic function.
Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..
(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"
$(".formButton").click(function(e) {
e.preventDefault(); //prevent default action
var id = $(this).attr('id');
var formId = id.replace('Button', '');
$('#' + formId).show();
$('form').not(document.getElementById(formId)).hide();
});
When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.
Related
I have several tables with ajax loaded content. Sometimes I have to change the content of a td manually before exporting it to PDF, so I thought best way would be to create a trigger for each td on double-click using jQuery's .dblclick(). The trigger would open a modal with an input field and change the text of the double-clicked td when submitting the modal.
This works, but when I change the content of a second, third, etc td, each previously clicked td gets the new value too.
Check my fiddle: https://jsfiddle.net/fvoufq07/
My code so far:
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
It's because you re-use the same button for the modal. So everytime the modal is opened, you add a new listener on the button, but you don't kill the previous one.
You can kill a previous listener with off :
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).off('click').click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
The problem you're seeing is that the click function you add to the button
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
is not removed. Because of this, every time you open the model anew, you change the text of any previously clicked .sitename as well as the newly clicked one.
In order to avoid this, you should remove the click event, or better yet use jQuery's .one() function which will only fire the callback on the first instance of an trigger event:
$( "#msgBox button.btn" ).one('click', function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
Updated fiddle: https://jsfiddle.net/fvoufq07/6/
Update: The above solution doesn't catch the problem of opening the modal then closing without clicking the "close" save button.
There are a couple of ways to fix this: either use .off() before adding the new .one() callback, or again use .off(), but conditionally upon the modal closing using bootstap's hidden.bs.modal trigger.
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click');
});
You might also want to assign the 'click' listener to a variable so that you can remove that listener specifically, which will be useful if you have other 'click' listeners on the same element.
var updateText = $( "#msgBox button.btn" ).one('click', function() {
...
});
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click', updateText);
});
Updated fiddle at https://jsfiddle.net/fvoufq07/7/ has an example.
Try this
var sitename;
$( ".sitename" ).dblclick( function() {
sitename = $(this);
$( "#msgBox .modal-title" ).html("Change sitename ");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
});
$( "#msgBox button.btn" ).click( function() {
$(sitename).text( $( "#new_sitename" ).val().trim() );
});
here is updated jsfiddle
try this
$( ".sitename" ).dblclick( function() {
sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
Krupesh Kotecha beat me too it ;)
I want to change the ID of an element (a <div>) using jQuery. Below is an example of my JavaScript, CSS and HTML. Right now, when I click the <div>, nothing happens.
$( ".pre_div" ).click(function() {
$( ".pre_div" ).attr('id','after_div');
});
$( ".after_div" ).click(function() {
$( ".after_div" ).attr('id','pre_div');
});
#pre_div {width:20px;height:20px;background-color:red;cursor:pointer;}
#after_div{width:20px;height:20px;background-color:blue;cursor:pointer;}
<div id="pre_div">:-)</div>
. is for classes and # is for ids, plus you have to use the .on() function, otherwise it will not work
$(document).on('click','#pre_div',function() {
$(this).attr('id','after_div');
});
$(document).on('click','#after_div',function() {
$(this).attr('id','pre_div');
});
JSFIDDLE DEMO
You should use # – id selector – instead of . – class selector (also, you can use this to access element within it's event listener):
$( "#pre_div" ).click(function() {
$(this).attr('id','after_div');
});
$( "#after_div" ).click(function() {
$(this).attr('id','pre_div');
});
JSFiddle
Please use $(this) to refer to the clicked item otherwise you may give many item the same id. However, with this approach, you are still assiging the same id to each clicked div, which is not good. How about adding the index of the clicked div to make it a unique id:
$(".pre_div").click(function() { //any div with pre_div class
$(this).attr('id'+ $(this).index(),'after_div');
});
$(".after_div").click(function() { //any div with after_div class
$(this).attr('id'+ $(this).index(),'pre_div');
});
"pre_div" and "after_div" are not classes, they are id's of your div
Should access it like this way.
$( "#pre_div" ).click(function() {
$( "#pre_div" ).attr('id','after_div');
});
$( "#after_div" ).click(function() {
$( "#after_div" ).attr('id','pre_div');
});
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?
If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?
var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});
I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.
You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});
$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});