I have a function which works very well with safari und chrome , but not with firefox. By clicking the button , it appears three inputfields with the name hid. So user can fill in. And clicking again, the fields disappears.
Firefox Problem: When i click, nothings happens. What is wrong with the function?
thanks
<script type="text/javascript">
{literal}
$( "#muendbtn" ).click(function () {
event.preventDefault();
if ( $( "tr[name=hid]" ).is( ":hidden" ) ) {
$( "tr[name=hid]" ).fadeIn( "slow" );
} else {
$( "tr[name=hid]" ).fadeOut();
}
});
{/literal}
</script>
try to put event as a parameter.. Like this
<script type="text/javascript">
{literal}
$( "#muendbtn" ).click(function (event) {
event.preventDefault();
if ( $( "tr[name=hid]" ).is( ":hidden" ) ) {
$( "tr[name=hid]" ).fadeIn( "slow" );
} else {
$( "tr[name=hid]" ).fadeOut();
}
});
{/literal}
</script>
Related
I make a webapp with PhoneGap.
The problem is that the sideswipe gesture only works on the first page and when I go to another page I have to refresh that page before it works again.
<script type="text/javascript">
$(document).on('swipeleft', "#page1", function() {
$( "body" ).pagecontainer( "change", "#page2" );
});
$(document).on('swiperight', "#page2", function() {
$( "body" ).pagecontainer( "change", "#page1" );
});
$(document).on('swipeleft', "#page2", function() {
$( "body" ).pagecontainer( "change", "#page3" );
});
$(document).on('swiperight', "#page3", function() {
$( "body" ).pagecontainer( "change", "#page2" );
});
$(document).on('swipeleft', "#page3", function() {
$( "body" ).pagecontainer( "change", "pippo.html" );
});
</script>
When i load pippo.html, the swipe didn't work. Idea?
Thanks!
I have a few canvas elements and their appropriate jQuery:
$( "#myCanvas" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#stdDevCanvas" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
Basically you can just toggle between a time chart and a histogram. When I click however, it sends me to the top of the page. I tried:
$( "#myCanvas" ).click(function(e) {
e.preventDefault();
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
And had no success. What is causing the page jump? I've never dealt with this before.
Here's a live page:
http://lavancier.com/brockCharts/aa-research-data.php
Thanks!
EDIT: Upon further inspection, this problem only happens when both times are set to zero. If I change them to 1, it doesn't scroll to the top automatically.
I solved it by getting rid of the ( 0 ).
This works:
$( "#myCanvas" ).click(function() {
$("#myCanvas").hide( );
$( "#myHistogram" ).show( );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).hide( );
$("#myCanvas").show( );
});
$( "#stdDevCanvas" ).click(function() {
$("#stdDevCanvas").hide( );
$( "#stdDevHistogram" ).show( );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevHistogram" ).hide( );
$("#stdDevCanvas").show( );
});
The reason this happens is because of fading order. The moment you click on a canvas, it fades out leaving a gap then the next canvas is faded in, however the browser sees this gap and scrolls the document to the top because there is no more content below. Of course this happens extremely fast and it's only programatically noticeable.
You can fix this by changing the order
$("#myCanvas").click(function () {
$("#myHistogram").fadeToggle(0);
$("#myCanvas").fadeToggle(0);
});
$("#myHistogram").click(function () {
$("#myCanvas").fadeToggle(0);
$("#myHistogram").fadeToggle(0);
});
$("#stdDevCanvas").click(function (e) {
$("#stdDevHistogram").fadeToggle(0);
$("#stdDevCanvas").fadeToggle(0);
});
$("#stdDevHistogram").click(function (e) {
$("#stdDevCanvas").fadeToggle(0);
$("#stdDevHistogram").fadeToggle(0);
});
Note how the next canvas fades in first then the clicked on fades out, this prevents from the element of leaving a 0 height in the body.
I want to show or hide specific divs based on if &Internal=True or &Internal=False how would I go about that?
Here is the URL: http://www.url.com/sub/page-name/?code=1234-1234-1234-1234&Internal=True
Something like?
<script type="text/javascript">
$(function() {
if ( document.location.href.indexOf('&Internal=True')) {
$( "#internal" ).show();
$( "#external" ).hide();
} else if ( document.location.href.indexOf('&Internal=False')) {
$( "#internal" ).hide();
$( "#external" ).show();
}
});
</script>
This did the trick, the $ var had a conflict:
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function() {
if ( document.location.href.indexOf('&Internal=True')) {
$( "#internal" ).show();
$( "#external" ).hide();
} else if ( document.location.href.indexOf('&Internal=False')) {
$( "#internal" ).hide();
$( "#external" ).show();
}
});
</script>
I have a comment section that is initially hidden, and would be revealed by a link on the comment count and/or a link to add comments.
I would like for the comment section to open by either link, but not close if its already opened.
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
See the jsfiddle
http://jsfiddle.net/pQ2np/
Thanks
EDIT: The '#commentsToggle' should be able to toggle (hide) the comments if open, the '.comment-add a' should only show, not hide as it opens an ajax comment form.
This is the code solves my need:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
http://jsfiddle.net/pQ2np/6/
If you want them to remain open. use show() instead of toggle().
$( "#commentsToggle").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
You can put both selectors into one function and pass true as the first parameter to showOrhide as referenced in the docs.
$( "#commentsToggle, .comment-add a").click(function() {
$( "#comments" ).toggle( true );
return false;
});
http://jsfiddle.net/pQ2np/3/
Try to use the code in the following link (I have updated your own).
I am not sure why to use toggle and not show. But generally you can check the css display attribute because this is what is used by jquery events.
$( "#commentsToggle").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
jsfiddle
Is that you are looking for?
You could use .show() instead of .toggle(), or you could add "true" as one of the parameters:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
Using false instead of true will hide the elements, so using a variable in there could come in useful later.
Here's an updated Fiddle plus enhancements. Below is the gist of it:
$( "#commentsToggle, .comment-add a").click(function (e) {
e.preventDefault();
var $comments = $("#comments");
if ($comments.is(":visible")) {
return;
}
$comments.show("fast");
});
UPDATE: I missed the fact that if you "show" the links again but want to prevent them from being toggled, you only need to use the .show() method. No need for toggle if your intention is for the comments section to appear once and remain open.
I made this code to validate a checkout form. But there is one field which not need to be required. All the other fields are required. How can I modify my code to exclude this field, and only add the class 'valid' if this field is filled in and not empty.
Has anyone tips for me to do this?
// Validate checkout fields
$( '#checkout-data input' ).each( function() {
$( this ).change( function() {
if( $( this ).val().length < 1 ) {
$( this ).removeClass( 'valid' ).addClass( 'invalid' );
} else {
$( this ).removeClass( 'invalid' ).addClass( 'valid' );
}
});
});
Add a required class to the required input fields and then change your code like,
$( '#checkout-data input.required' ).each( function() {
$( this ).change( function() {
if( this.value.length < 1 ) {
$( this ).removeClass( 'valid' ).addClass( 'invalid' );
} else {
$( this ).removeClass( 'invalid' ).addClass( 'valid' );
}
});
});
Also, there is no need of $.each() like,
$('#checkout-data input.required').change( function() {
if( this.value.length < 1 ) {
$( this ).removeClass( 'valid' ).addClass( 'invalid' );
} else {
$( this ).removeClass( 'invalid' ).addClass( 'valid' );
}
});
Live Demo
Use not() method or :not selector:
$( '#checkout-data input' ).not('.exclude')each( function() {