I have this code:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').height('auto');
});
});
Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.
Does anyone have any idea what may be going on here?
Try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').css('height','auto');
});
});
See how changing the height of an element works:
.test{
margin:10px;
border-style:solid;
border-width:1px;
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="height:10px" onclick="$('.test').css('height','10px');">
<input type="button" value="height:auto" onclick="$('.test').css('height','auto');">
<input type="button" value="height:0px" onclick="$('.test').css('height','0px');">
<input type="button" value="hide" onclick="$('.test').hide();">
<input type="button" value="show" onclick="$('.test').show();">
<div class="test">test</br>test test</br>test</br>test</br></div>
you can also try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').attr('style','height:auto');
});
});
Please put your script code below the jQuery library and run again as shown below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});
Related
I'm currently trying to display a hidden button which only displays when a link is clicked, but i'm unsure on how to display it if the link doesn't exist.
(function ($) {
$(document).ready(function()
{
$('.wp-block-file.aligncenter a').click(function(e)
{
$('.learndash_mark_complete_button').removeClass('hidden');
});
});
})(jQuery);
<div class="wp-block-file aligncenter">Open PDF</div>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">
You can check the length of the link element to add the class to the element:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
Demo:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
.hidden{
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">
I'm trying to make an Ajax-loader work, but it's not firing. Here is what I do:
HTML:
<div class="ajax-loader">
<img src="ajax-loader.gif">
</div>
Jquery:
function myFunction() {
$('.ajax-loader').css("visibility", "visible");
//Function doing it's work
$('.ajax-loader').css("visibility", "hidden");
}
CSS:
.ajax-loader {
visibility: hidden;
}
When I enter $('.ajax-loader').css("visibility", "visible"); in the console my loader loads, it's just not working when I put it at the beginning of the function. What am I doing wrong?
Thank you,
EDIT: My page kind of freeze when the function is fired, maybe it's because of that. Is there a workaround?
Maybe like this:
function loader_hide() {
$('.ajax-loader').hide();
}
function loader_show() {
$('.ajax-loader').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="show" onclick="loader_show();"/>
<input type="button" value="hide" onclick="loader_hide();"/>
<div class="ajax-loader">
<img src="https://cdn.dribbble.com/users/91700/screenshots/3038974/loader.gif">
</div>
I solved my problem by creating a function load() that load the loader and call it onclick, then I used a set setTimeout of 10ms, giving the time to the gif to load.
function load() {
$('.ajax-loader').css("visibility", "visible");
}
HTML:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
Thank you all.
I am just learning Jquery, I wanted to know if anyone can tell me what is wrong with my script. When a user hits submit on the form, I want 2 two div tags to open and the one containing the form to close.
Thanks!
This is the script
<script>
$('#form_container').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
These are the div and form
<div id="mydivhide1" style="visibility:hidden">1111</div>
<div id="mydivhide2" style="visibility:hidden">2222</div>
<div id="form_container">
<form id="form_710370" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
Submit your form not div like,
$('#form_710370').submit(function(){
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
And hide your div's by using display:none not by visibility:hidden like,
<div id="mydivhide1" style="display:none">1111</div>
<div id="mydivhide2" style="display:none">2222</div>
Updated if your script is written before your DOM elements then use $(function(){...}) like,
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
Here's a fiddle: http://jsfiddle.net/cdJU9/1/
I've added CSS to hide the top divs, I think your inline style of visibility hidden was overriding the JS.
CSS
#mydivhide1, #mydivhide2{ display: none; }
HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
The fiddle throws an error for some reason but you get the idea ?
You can do like this, please focus your syntax with semicolon at the end.
<script>
$('#saveForm').click(function(){
$(this).parent().hide();
$('#mydivhide1, #mydivhide2').show();
});
</script>
it should be
<script>
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
it should be:
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
})
You've got a typo in there:
<form id="form_710370" method="post" convert.php">
should be
<form id="form_710370" method="post" action="convert.php">
And for the JS:
$('#form_710370').submit(function() {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
})
edit: http://jsfiddle.net/GZEmw/
I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code
<style>
div.delModal
{
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
width:160px;
text-align:right
}
</style>
<script>
function showModal(id) {
document.getElementById(id).style.display = 'block';
//$(this).fadeIn('slow');
}
function hideModal(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
By using, $("#" + id) you can select an element by its id, that's "#" + id.
See it here.
Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.
I wasn't satisfied with your first two comments so I made a new fiddle:
http://jsfiddle.net/dkmkX/
$(document).ready(function () {
$('.deleteButton').each(function (i) {
var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
var deleteModal = $(this).parent().find('.deleteModal');
$(this).click(function (e) {
deleteModal.fadeIn('slow');
});
$(this).parent().find('.modalDelete').click(function (e) {
deleteModal.fadeOut('slow');
});
$(this).parent().find('.modalCancel').click(function (e) {
deleteModal.fadeOut('slow');
});
});
}); //ready
This will let you add multiple delete buttons each with their own modals.
There's a comment in the JS about how to find out which modal has been pressed, since this solution is ID independent.
Use fadeIn() on the right selector('#'+id), this in the current context would be the global object.
function showModal(id) {
$('#'+id).fadeIn();
//$(this).fadeIn('slow');
}
function hideModal(id) {
$('#'+id).fadeOut();
}
DEMO
Why do not use id for each button like this
<input type ="button" value="show" id="show">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" id="delete"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
And the jquery like this
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});
http://www.frostjedi.com/terra/scripts/demo/jquery01.html
Clicking the button on that page should unhide the "hello, world!" div tag shouldn't it? When I click it I get a $("#demo").style is undefined error.
$("#button").click(function () {
$("#div").hide();
});
$("#button").click(function () {
$("#div").show(2000);
});
Try this , the simplest one ..
<input type="button" onclick="$('#demo').toggle()" value="clicking me should unhide a div tag">
You should use
$('#demo').show(); // to display
or
$('#demo').hide(); // to hide the div
try .show()
$("#demo").show()
You cannot access properties of jQuery objects by . (dot) (They are not javascript objects)
You this,
$('#demo').css({'display':'none'})
Or you can use $('#demo').hide(); (Its a shortcut)
jQuery.hide() is very slow.
Use the following instead:
document.getElementById('demo').style.display = 'none'
This is where you heard of the style property. This property works on DOM objects. jQuery objects are not DOM objects.
Use the hide() method
$("#demo").hide()
or
$("#demo").hide()
or even the toggle() method to toggle visibility:
$("#demo").toggle()
Integrated in your example:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div>
<input type="button" onclick="javascript:$('#demo').show();" value="clicking me should unhide a div tag">
</div>
<div id="demo" style="display: none">hello, world!</div>
</body>
</html>
Example from jQuery documentation:
<h1 class="firstHeading" style="display: block;">Tutorials:Basic Show and Hide</h1>
<div class="examples">
<input id="hideh1" type="submit" value="Hide site tile" name="hideh1">
<input id="showh1" type="submit" value="Show site title" name="showh1">
<input id="toggleh1" type="submit" value="Toggle site title" name="toggleh1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.showhide,h1').hide();
});
$('#showh1').click(function () {
$('div.showhide,h1').show();
});
$('#toggleh1').click(function () {
$('div.showhide,h1').toggle();
});
});
});
</script>
$("#demo").style is not a jQuery function
You should either use $("#demo").css("display","block") property or use show() or toggle() functions
Do
$(document).ready(function() {
$("input[type='button']").click(function() {
$("#demo").show();
});
});
or
document.getElementById("demo").style.display = "block";