Develop Reference

How can I hide a div until a button is clicked?

I'm trying to create 3 divs that are hidden when the page load, so that when I click their respective buttons they show up, however, no matter what I do, I cannot get them to show up with the button click.
Here is the relevant part of the code:
My div and button:
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
And the JS used to show it:
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "none";}
I can successfully hide the div when I load the page, however after I click the button it doesn't show up again.
I tried
window.onload = function(){
document.getElementById('TestsDiv').style.display = 'none';
}
Instead of style="display:none" on the div to see if the way I hid it was the problem, but the div still wouldn't show up.
I'm a beginner and I'm not good with JS, HTML or PHP, if possible can someone both help and explain my mistake? Do I need something else in my code? I tried reading similar threads but the solutions were all too complicated for my understanding and I ended up not being able to fix my problem. Thank you!

You need to set display to block (or something else) but not hide when button is clicked!
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "block"; // <-- Set it to block
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

try
function TestsFunction() { TestsDiv.style.display = 'block' }
function TestsFunction() { TestsDiv.style.display = 'block' }
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

You need to adapt your function to toggle the display of the div. Currently it is only hiding it - but if its already hidden, remove the display = "none" to show it again. You remove it by setting the display style to an empty string (which makes it default).
function TestsFunction() {
var T = document.getElementById("TestsDiv"),
displayValue = "";
if (T.style.display == "")
displayValue = "none";
T.style.display = displayValue;
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
If you only want it to be shown, and not to be able toggle display on and off, just set it to the empty string right away.
function TestsFunction() {
document.getElementById("TestsDiv").style.display = "";
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

You should look into jQuery's hide() and show() methods. They take care of setting the styles for you.
https://www.w3schools.com/jquery/jquery_hide_show.asp

do like this =>
function TestsFunction(){
$("#TestsDiv").css("display","block")
}
before that you should include jquery cdn.
thank you.

jquery div hide not working on first load

I am using remote javascripts to populate two divs on my site.
<div id="flix-inpage"></div>
<div id="ccs-inline-content"></div>
i am using the following code to display only one div if content is available on both divs. I have added this code to the bottom of the page:
$(document).ready(function(){
setTimeout(function() {
if ($("#flix-inpage #inpage_responsive").length > 0) {
$("#ccs-inline-content").hide();
} else {
$("#ccs-inline-content").show();
return false;
}
}, 2000);
});
I have specified a css class:
#ccs-inline-content{
display: none;
}
If Both DIV have same content
The problem I am having is that #ccs-inline-content is not hiding on first load. If I reload the page couple of times then #ccs-inline-content - hide() kicks in otherwise the content is visible.
I have tried different browser but same result.

i test this code , but good working . just i add .text() function in this code
$(document).ready(function(){
setTimeout(function() {
if ($("#flix-inpage").text().length <= 0 ) {
$("#ccs-inline-content").show();
} else {
$("#ccs-inline-content").hide();
}
}, 2000);
});
#ccs-inline-content{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flix-inpage">12</div>
<div id="ccs-inline-content">ok</div>

If I understand correctly, you want #flix-inpage to be shown and #ccs-inline-content to be hidden unless #flix-inpage is empty. This would do the job:
$(document).ready(function() {
if ($("#flix-inpage").children().length) {
$("#ccs-inline-content").hide();
} else {
$("#ccs-inline-content").show();
}
});
You need to make sure the other scripts you mentioned finish before this runs, So put this somewhere after you execute the other two, at the bottom of the <body> tag.

How to show hide divs INSIDE divs easily?

My website is a blog where I have a page with all the posts on a single HTML page. The "posts" are just images inside divs and I need some information to be able to show and hide in side the parent div of the images. Heres how its set up:
HTML
<div class="posts">
<h3>mm/dd/yy<p class="preview">click to show more</p><p class="expand">click to show less</p></h3>
<h4>Title</h4><br>
<p class="expand">caption caption caption caption caption caption caption caption caption</p>
<div class="centertext">
<img class="post" src="path/to/image">
</div>
<br>
</div>
lil CSS
.expand{display: none;}
JS
$(document).ready(function(){
$(".posts").click(function(){
$('.expand').toggle();
$('.preview').toggle();
});
What ends up happening that I don't want to happen is that all images and their captions are hiding and showing when I just click one. Shown here or fullscreen here Someone please help me! Additional info: I am using JQuery and Bootstrap too

Change your JS to:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
Or more simple:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand, .preview').toggle();
});
});
To toggle means, that you don't know the state. The best way is, to change a css-class or a data-attribute.

You can use event.target/this to refer the current object clicked and find child(expand/preview) of the object you clicked with find()
or
check for the children if it is .expand/.preview with function is() //not a better approach
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
or
$(document).ready(function () {
$(".posts").click(function (event) {
$(event.target).find('.expand').toggle();
//check if target is .expand or its child then first go to its parent with .parents().eq() then apply find()
$(event.target).find('.preview').toggle();
//check if target is .preview or its child then first go to its parent with .parents().eq() then apply find()
});
});

Create a custom popup that is responsive and can post to database

I am currently working on an intranet solution for my company written in PHP using the Laravel framework, this requires me to do a lot of new things I have never done before, 1 of these is creating a popup that has dynamic html depending on a drop down list such as this:
I have a calendar (http://fullcalendar.io/)
When I click on a day in this calendar a popup should show that looks something like this:
After selecting a value from that dropdown list a different set of fields should be shown depending on the value selected for example:
OR
So I really need a lot of control over the popup, I have no previous experience with working with popups (unless a simple alert of a variable in javascript counts) and I need a whole deal of functionality, it also needs to be able to post to a database so I think it might even have to be a form element. I also need to be able to fire the popup from the onclick event from the fields in my calendar so that makes it extra hard for someone who has always written back end code up until now.
SO WHAT IS YOUR QUESTION?
Could anyone tell me what the easiest/fastest way to achieve this is without losing any functionality necessities, can I do this from php, does a feature like this exist in the Laravel framework?(if it does I coudldn't find it) or do I have to start using something like jquery?
I found a bunch of libraries such as Fancybox that claim to be able to do this but I can't make head nor tail out of their usage guide.
For everyone who thinks this doesn't belong here: my only question is not "Is it Possible?" I am also asking how do I do it, what do I write in my html, javascript, php to make it work?
EDIT: I just read something about jquery dialogs that seems interesting, seems like you can use jquery dialogs to create a popup from a form you have in your html (form is hidden) but I can't seem to get the code to fire off the popup (dialog) to work so far I have this:
$(document).ready(function() {
$('#calendar').fullCalendar({
//calendar options here
dayClick: function(date, jsEvent, view) {
//to get date use date.format());
//POPUPCODE START
$("#logform").dialog({ //Shows dialog
height: 250,
width: 450,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Save": function() {
$.ajax({
url: "/url/to/submit", //
timeout: 30000,
type: "POST",
data: $('#modalform').serialize(),
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
},
success: function(data){
//Do stuff here on success such as modal info
$( this ).dialog( "close" );
}
}
}
}
}),
//POPUPCODE END
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
var myEvent = {
title:"Work 7.6h",
allDay: true,
start: date,
end: date
};
myCalendar.fullCalendar( 'renderEvent', myEvent,true );
},
eventClick: function(calEvent, jsEvent, view) {
var myCalendar = $('#calendar');
myCalendar.fullCalendar('removeEvents',calEvent._id);
}
})
});
And for my html I have:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Calendar</div>
<div class="panel-body">
<div id='calendar'></div>
<a class='iframe' href='home.blade.php'>Click me</a>
</div>
<form id="logform" style="display:none">
<input type="text" name="something">
<input type="text" name="somethingelse">
</form>
</div>
</div>
</div>
</div>
The trouble started only after adding the code between //popupcode start and //popupcode end now my calendar won't even show and I get
SyntaxError: missing ) after argument list
The place it is pointing at is the 3rd line above my //popupcode end here:
}
}
} //this one
}
}),
//POPUPCODE END
But no matter what I add or remove there I keep getting the same error

I figured it out myself, instead of making things harder by learning all kinds of new things I got it to work by removing all the code I added previously and adding 1 line of code to create the popup by using jquery.
I removed all the code that I was using to create the popup and replaced it by this: $("#somediv").load().dialog({modal:true});
I created a div called 'somediv' around my form and now it's doing what I need it to do, seeing as my entire form is in the popup now I'm pretty sure I can add a button to it that can submit the form so I can catch that with php and then I'll be able to do whatever I want with the data in php (post to database or return error messages etc...)

Ok, first of all, i recommend to use Javascript.
It's possible with only PHP, HTML and CSS but you will have to refresh the page all the time for the next popup to appear.
You can just make divs that are positioned fixed or absolute and they will overlay the underlaying content. The overlaying div(popup) will be a normal div where you can make forms and whatever you want.
Here is a quick jsfiddle I threw toghether:
http://jsfiddle.net/0zvqm5nr/17/
Here is the code:
HTML
<div class="calendar">
<h1>Your calendar would be here</h1>
<button id="popupButton">13.05.2015</button>
</div>
<div class="popup">
<h2>13.05.2015</h2>
Activity:
<form action="site.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
</form>
</div>
<div class="popup">
<h3>Work 13.05.2015</h3>
this will be the work popup
</div>
<div class="popup">
<h3>Youth leave 13.05.2015</h3>
this will be the youth leave popup
</div>
CSS
.calendar {
width: 500px;
height: 500px;
background: green;
}
.popup {
width: 500px;
height: 500px;
background: grey;
display: none;
position: fixed;
top: 0;
left: 0;
}
Javascript
document.getElementById("popupButton").onclick = function() {
document.getElementsByClassName("popup")[0].style.display = "block"
}
document.getElementById("activity").onchange = function() {
document.getElementsByClassName("popup")[0].style.display = "none"
var selectedValue = this.options[this.selectedIndex].innerHTML;
if (selectedValue == "work") {
document.getElementsByClassName("popup")[1].style.display = "block";
}
if (selectedValue == "youth leave") {
document.getElementsByClassName("popup")[2].style.display = "block";
}
}
I hope this helped.

IF ELSE Hover statement only works on second hover

I have a menu, that when you roll over the image the image changes, unless the image has an active class attached. My problem is that the image only changes on the SECOND ROLL OVER not the FIRST. Any ideas why this is.
$("#contact").hover(function () {
if ($("#contact").is(".active")) {
$("#contact img").attr("src","Images/Menu/contact_hover.png" )
}
else {
$("#contact").hover(function () {
$("#contact img").attr("src","Images/Menu/contact_hover.png" )
},
function() {
$("#contact img").attr("src","Images/Menu/contact.png" )
});
}
});

You shouldn't be doing this with jQuery, there really is no need. Please read up on CSS Image sprites and use the css hover selector like this:
#contact {
background: url(/url/of/img) no-repeat;
}
#contact:hover {
background-position: ; // Change to desired image
}
Do this to change the background position of the image sprite you use, if you're lazy you could change the image altogther instead of bothering with sprites. You will find this method much lighter page size, as well as compatibility.

It's because you aren't making the second call to hover until the else-block runs the first time. Set all of you event handlers up in $(document).ready, and you should be good to go.

you should simplify your code - try this
$("#contact").hover(function () {
if (!$("#contact").hasClass("active")) {
$("#contact img").attr("src","Images/Menu/contact_hover.png" )
}
},
function() {
if (!$("#contact").hasClass("active")) {
$("#contact img").attr("src","Images/Menu/contact.png" )
}
});

Working example at: http://jsfiddle.net/HNGMT/
**The example uses two divs to demonstrate the difference between one with the class of active and one without. The HTML of cours is solely for demonstration purposes as well. And the jQuery selector for the contact class would be modified to reflect the id selector.
HTML:
<div class="contact"><img src="/contact.png" alt="contact inactive" /></div>
<div class="contact active"><img src="/contact.png" alt="contact active" /></div>
JavaScript:
$(".contact").hover(function () {
$(this).find("img").attr({src:"contact_hover.png", alt:"contact hover"});
}, function(){
var ele = $(this);
if(!ele.hasClass("active")){
ele.find("img").attr({ src:"contact.png", alt:"contact inactive"});
}
});