I have a simple function that shows a div when the user clicks on a given checkbox. I'd like to have the same behaviour on another checkbox, so that's why I'd like to generalize it as a function passing the element to be shown.
But I'm not aware of the syntax on Jquery to do so. And it's triggering automatically when the page loads. Does anybody has an idea?
Code:
$(document).ready(function() {
$("#transcricao").change(
function(){
if ($('.form_transcr').css('display') === 'none') {
$('.form_transcr').fadeIn();
} else {
$('.form_transcr').fadeOut();
}
}
); //This is working fine!
$("#traducao").change( show_hide($('.form_trad')) );
//This is auto-trigerring without user action...
});
Here's my function:
function show_hide($elm){
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($($elm).css('display') === 'none') {
$($elm).fadeIn();
} else {
$($elm).fadeOut();
}
}
Its auto-triggering without user action because you are invoking it.
Use
$("#traducao").change(function () {
show_hide($('.form_trad'));
});
As you are passing jQuery object so use it directly
function show_hide($elm) {
//This is the "generalized" function that I'd like to use on both
//checkboxes, just passing the element.
if ($elm.css('display') === 'none') {
$elm.fadeIn();
} else {
$elm.fadeOut();
}
}
The argument to .change() should be a function. You're not passing a function, you're calling the function.
$("#traducao").change(function() {
show_hide($('.form_trad'));
} );
BTW, your show_hide function seems to be equivalent to jQuery's fadeToggle method, so it can be:
$("#traducao").change(function() {
$(".form_trad").fadeToggle();
});
Related
I am supposed to use Jquery to call a function that changes a div's visibility using css. This is my JQUERY
alert("Interactive on line");
function changeView(page)
{
alert("Handler for click() called. ");
if(page === 'home)
{
$('#HomeTab'.css(display=='none'));
}
}
$('#HomeTab').on('click', { page:'home'}, changeView());
I used the alert statement inside the changeView to see if changeView ever gets called and it does not. The initial alert before the changeView function does get called, so the script is linked correctly.
Thank you in advance!
Refer .on( events [, selector ] [, data ], handler )
(a) You are invoking/calling function, not assigning it as handler, Remove () after function name.
(b) data object could be accessed using event.data.KEY
(c) Also correct the typo while using .css method, it is jQueryElement.css(PROPERTY,VALUE)
function changeView(e) {
alert("Handler for click() called. ");
if (e.data.page === 'home') {
$('#HomeTab').css('display', 'none');
//OR $('#HomeTab').hide();
}
}
$('#HomeTab').on('click', {
page: 'home'
}, changeView);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='HomeTab'>Home Tab</div>
What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});
$(this).click(function() {
clicked($(this));
});
How do I minimize this code to one line?
Tried this - doesn't work:
$(this).click(clicked(this));
It will be used then like this:
function clicked(element) {
element.css('...');
// some other code
}
You can pass the clicked function directly:
$(this).click(clicked);
but you'll need to change your clicked function to wrap the element.
function clicked() {
$(this).do("whatever")
}
Regarding your updated question, you can have clicked return a function if you want.
function clicked(element) {
return function() {
element.css('...');
// some other code
}
}
So then you can do this:
$(this).click(clicked($(this)));
But I'd personally change your clicked function to work like the first version.
I need to use the $().bind method. I do not wish to use another plugin. I simply want to add both a left click and a right click function. Here is my function handler. I also must disable the context menu. Here is my $().bind function (I am attempting to extend jQuery's full calendar to allow me to bind any jsEvent to its own events, as it only exposes 3 js events.)
if (has(eventBind)) {
$.each(eventBind, function (eventString, eventFunction) {
options.eventRender = function (calEvent, element) {
element.bind(eventString, { calEvent: calEvent }, eventFunction);
}
});
}
}
If i define eventBind like this, then what happens is that function A gets called if i right click and function B gets called if I left click
eventBind: {
mouseup: function eventClick(e) {
if (e.button === 2) {
//execute function A
} else {
//execute function B
}
}
I apologize if the order of my code does not really make sense, but I just want to know what to do. I tried to define the following
eventBind: {
mouseup: function eventClick(e) {
if (e.button === 2) {
//execute function A
} else {
//execute function B
}
},
contextmenu: function() { return false; }
}
}
But this also disabled the previously defined "mouseup" from executing correctly.
Your help is greatly appreciated.
I am stuck. Searched and tried for hours.
EDIT:
I still can't make it work. Okay, I'll just put the source code to make it clear what I want to accomplish.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
var date_fmt="yyyy-mm-dd";
var time_fmt="HH:MM";
var date_field="#id_start_0, #id_end_0"; //id refering to html input type='text'
var time_field="#id_start_1, #id_end_1"; //id refereing to html input type='text'
function clearFmt(fmt_type)
{
if($(this).val() == fmt_type) {
$(this).val("");
}
}
function putFmt(fmt_type)
{
if($(this).val() == "") {
$(this).val(fmt_type);
}
}
$(document).ready(function() {
$(date_field).attr("title",date_fmt);
$(time_field).attr("title",time_fmt);
$(date_field).click(function() {
clearFmt(date_fmt);
});
$(date_field).blur(function(){
putFmt(date_fmt);
});
$(time_field).click(function(){
clearFmt(time_fmt);
});
$(time_field).blur(function(){
putFmt(time_fmt);
});
});
</script>
Help ?
Use the jquery bind method:
function myfunc(param) {
alert(param.data.key);
}
$(document).ready( function() {
$("#foo").bind('click', { key: 'value' }, myfunc);
});
Also see my jsfiddle.
=== UPDATE ===
since jquery 1.4.3 you also can use:
function myfunc(param) {
alert(param.data.key);
}
$(document).ready( function() {
$("#foo").click({ key: 'value' }, myfunc);
});
Also see my second jsfiddle.
=== UPDATE 2 ===
Each function has his own this. After calling clearFmt in this function this is no longer the clicked element. I have two similar solutions:
In your functions add a parameter called e.g. element and replace $(this) with element.
function clearFmt(element, fmt_type) {
if (element.val() == fmt_type) {
element.val("");
}
}
Calling the function you have to add the parameter $(this).
$(date_field).click(function() {
clearFmt($(this), date_fmt);
});
Also see my third jsfiddle.
-=-
An alternative:
function clearFmt(o) {
if ($(o.currentTarget).val() == o.data.fmt_type) {
$(o.currentTarget).val("");
}
}
$(date_field).click({fmt_type: date_fmt}, clearFmt);
Also see my fourth jsfiddle.
The following should work as seen in this live demo:
function myfunc(bar) {
alert(bar);
}
$(function() {
$("#foo").click( function() {
myfunc("value");
});
});
anyFunctionName = (function()
{
function yourFunctionName1()
{
//your code here
}
function yourFunctionName2(parameter1, param2)
{
//your code here
}
return
{
yourFunctionName1:yourFunctionName1,
yourFunctionName2:yourFunctionName2
}
})();
$document.ready(function()
{
anyFunctionName.yourFunctionName1();
anyFunctionName.yourFunctionName2();
});
Note: if you don't use 'anyFuctionName' to declare any function then no need return method. just write your function simply like, yourFunctionName1().
in $document.ready section parameter is not issue. you just put your function name here. if you use 'anyFuctionName' function then you have to follow above format.
function myfunc(e) {
alert(e.data.bar); //this is set to "value"
}
$("#foo").click({bar: "value"}, myfunc);
People are making this complicated, simply call directly as you would in Javascript
myfunc("value");