I am doing a CRUD and trying to use some Javascript/JQuery. I have button "Add" where if it is clicked the div will be shown, I've done this part but the div already showed before you click the add button
Question: How can I hide first the div if it is not yet clicked?
My View
<button class="btn btn-success" id="add-user">Add</button>
<div id="myDiv">
<form id="my-form">
...
</form>
</div>
My JS
$('#add-user').click(function(){
$('#myDiv').toggle();
});
Add in your css
myDiv {
display: none;
}
This will make the initial render to hide your div
Adding to what #amine-ramoul & #iagowp said, using JQuery
try
$('#add-user').on('click', function(){
$("#myDiv").show();
});
And
style="display: none"
is the correct syntax.
juste add display none like this :
<div id="myDiv" style="display:none">
<form id="my-form">
...
</form>
</div>
Related
I've got a spoiler-code on my Homepage.
The Code looks like this:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial"
id="button"
title="Click to show/hide content"
type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {
document.getElementById('spoiler')
.style.display=''
}else{
document.getElementById('spoiler')
.style.display='none'
}">
Show hidden content
</a>
What I want to do now is quite simple:
After clicking on the element "button", the hidden content shall be shown and the anchor <a> shall become invisible.
So what I am looking for is:
onclick: if element "spoiler" is on display=none AND element "button" is on display=initial THEN the element "spoiler" shall change to display=initial AND element "button" shall change to display=none
Is this possible?
This code in jquery will solve your problem. I hope this is what you wanted.
$('#button').click(function() {
$('#spoiler').css('display', 'block');
$(this).hide();
});
I have demo here as well.
A JavaScript only solution will be as follows:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
document.getElementById('button').style.display='none'">Show hidden content</a>
Try following code. JSFiddle.
<div id="spoiler" style="display:none" onclick="this.style.display='none';">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';">Show hidden content</a>
display="initial" isn't a valid attribute. Also, putting all of that code in the onclick attribute prevents you from reusing the code in other spoiler blocks. The best solution is to use a script tag for separation of concerns and reusability.
Here's the bare-bones of what you need:
<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div>
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
document.getElementById(spoilerId).style.display='block';
buttonNode.style.display='none';
}
</script>
I am having some trouble on making a button only to show one div, not all of them.
Here's my JS code:
$('.show_avatar').click(function(){
$('.avatar').toggle('slow',function() {
});
});
Here's my HTML:
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<%= image_tag d.avatar.url(:medium) %>
</div>
My HTML is in a loop, so it generates multiple buttons with multiple images. When I click in any of the buttons (.show_avatar), all the divs appear (.avatar). I know why this happens, but I don't know how to fix it.
I thank you in advance.
Demo
Without needing any changes to the given HTML, you want to target the element that is the first match of .avatar after the button that you click. You can use next().
$('.show_avatar').click(function(){
$(this).next('.avatar').toggle('slow',function() {
});
});
You could wrap each in a wrapper
<div class="wrap">
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<img src="http://placehold.it/150x150">
</div>
</div>
and change it to only call it's sibling:
$('.show_avatar').click(function(){
$(this).siblings('.avatar').toggle('slow',function() {
})
});
http://jsfiddle.net/e629orfb/
I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.
You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());
Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');
I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?
Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});
If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example
Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.
I dont knwo why the Jquery fade in is not working for my content div
HTML:
<div id="content">
<div id="logo">
<img src="images/blue.jpg" alt="logo" />
</div>
<div id="form">
<form action="controler.php" method="post" id="target">
<input id="pass" type="text" value="Password" name="pass" /></form>
</div>
</div>
Javascript:
$(document).ready(function(){
$("#content").fadeIn(2000);
$('#pass').click(function() {
this.value="";
return false;
});
});
It might be something small but I cant find it
If #content is initially visible, then fadeIn() has nothing to do because the object is already visible.
If you set the initial style to display: none, then fadeIn() can do it's job.
To make it initially hidden, you can add this CSS:
#content {display: none;}
Or, you can add an inline style tag:
<div id="content" style="display: none;">
Set the content div's initial state to display: none in the CSS.
a simple thing could be that the div isn't already hidden. So if already present, it won't fade in. When I've coded for these I have a generic class hidden to make it start invisible.
...
You have to hide then fade in.
$("#content").hide().fadeIn(2000);
Just as jfriend00 says it must be because your element with id content is not hidden since the beginning, copy-paste this code first and see if it works:
<div id="content" style="display:none">
<div id="logo">
<img src="images/blue.jpg" alt="logo" />
</div>
<div id="form">
<form action="controler.php" method="post" id="target">
<input id="pass" type="text" value="Password" name="pass" /></form>
</div>
</div>
if it works then simply remove the inline style "display:none" and add it to the styles of #content in your CSS file:
#content {
display: none;
/* the rest of your styles */
}
If this doesn't work there must be another problem, first thing to check id that you are including the JQuery library in the head of your document, make sure the path and syntax is well written, take this one for instance, I like to use google's API url:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>