I have this code in .php that retrieves a contact form:
echo '<div class="hsk-column4 hsk-agency-inquiry-form">';
echo hsk_agency_enquiry_form();
echo '</div>';
How can I make a popup appear with the contact form when pressing a button with id="btn-contact"?
Thanks.
Maybe you are talking about Modals? Should help...
https://getbootstrap.com/docs/4.0/components/modal/
You can do it with jQuery
PHP:
<button id="btn-contact">Open Contact</button>
<?php
echo '<div class="hsk-column4 hsk-agency-inquiry-form">';
echo hsk_agency_enquiry_form();
echo '</div>';
?>
jQuery:
jQuery(document).ready(function( $ ) {
$("body").on("click", function(){
$(".hsk-column4.hsk-agency-inquiry-form").removeClass("active-form");
});
$("#btn-contact").on("click", function(event){
$(".hsk-column4.hsk-agency-inquiry-form").addClass("active-form");
event.stopPropagation();
});
});
CSS:
.hsk-column4.hsk-agency-inquiry-form {
display: none;
}
.active-form {
display: block;
}
Related
I have one index.php page, whose content changes whether you activated a session or are logged out.
When users are logged in, a click on the link "showhide" should show the class "users".
When users are logged out the link "showhide" is hidden and instead the link "showhide2" is visible, which should show the class "users2" when its pressed.
I found a jQuery-snippet online that does exactly this and works fine for the link "showhide"
Unfortunately it doesn't work for the link "showhide2" - the class is always visible...
Here's my code:
<div id="content" style="margin-top:10px;height:100%;">
<?php
/*echo "Der Nutzername ist ".$_SESSION['user'];
echo "<br>Die Session lautet ".$_SESSION['sessionname'];
echo "<br>".session_id();*/
$sArray = explode(".",$_SESSION['sessionname']);
$session1 = $sArray[0];
$session2 = $sArray[1];
$sessionausblenden = $_SESSION['sessionname'];
if (!isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide{
visibility:hidden !important;
}
.users{
visibility:hidden !important;
}
#logout {
visibility:hidden !important;
}
</style>";
}
elseif (isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide2{
visibility:hidden !important;
}
.users2{
visibility:hidden !important;
}
</style>";
}
?>
<a id="showhide" href="#" style="background:#<?php echo $session2?>;">+</a>
<a id="showhide2" href="#" style="background:#<?php echo $session2?>;">?</a>
<a id="logout" onclick="return confirm('Are you sure?')" href="logout.php">-</a>
<script type="text/javascript">
$(document).ready(function () {
$('.users').hide();
$('a#showhide').click(function () {
$('.users').toggle(400);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
</script>
<center><h1>Group Chat In PHP</h1></center>
<div class="chat">
<div class="users" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="users2" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="chatbox">
<?php
if(isset($_SESSION['user'])){
include("chatbox.php");
}else{
$display_case=true;
include("login.php");
}
?>
</div>
</div>
</div>
You can see the live-version here: http://team3.digital-cultures.net/index.php
Just enter a name of your choice and choose an option from "Start" and "Ziel" and your session is started (and a chat is opened).
Can you help me finding the mistake?
Thanks!
It seems an event is not being bound to #showhide2. If you listen at the document level and let it bubble to #showhide as the target, it may work. This can happen for dynamically loaded elements.
Change
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
To
$(document).ready(function () {
$('.users2').hide();
$(document).on('click','#showhide2',function () {
$('.users2').toggle(400);
});
});
Most importantly, please resolve this error:
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight}); on line 2 of chat.js $(".msgs")[0] is undefined.
There are no elements matching $('.msgs'). Wrap it with the following:
if($('.msgs').length) {
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});
}
This maybe why the event isn't getting bound.
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
I want display and hide HTML div with ajax,
Situation:
progressbar('on');
very_long_function();
progressbar('off');
I want display div when working very_long_function(); , bUt when finish working I want hide div
Progress bar function:
function progressbar($status){
if($status == "on"){
echo "
<script>
$(document).ready(function() { function() {
$('#load').css('display','inline');
});
</script>
";
}
else{
echo "
<script>
$$(document).ready(function() { function() {
$('#load').css('display','none');
});
</script>
";
}
}
Problem is that div not showing when very_long_function(); working, maybe is possible to solve this priblem with AJAX or jQuery
HTML
<div id="load" style="display: none;"><img src="loading_baras.gif" style="width: 550px; height: 10px; margin-top: -10px"></div>
I think, that you architecture is wrong. You have to user JS for it.
Like next:
$(function(){
$('#load').css('display','inline');
$.post('/very_long_function.php', {url: 'http://www.google.com'}, function(result){
alert(result);
$('#load').css('display','none');
});
});
PHP: very_long_function.php
$url = $_POST['url'];
$result = very_long_function($url);
echo $result;
die;
Are sure that you included jquery lib for using it . Also there is no double $$ in jquery.
Please give the html and after we will correct it.
I have a php function:
function myfunc() {
//then I have a div...
echo '<div class="overlay">';
echo "<button onclick=\"$('.overlay').hide();\">Close</button>";
echo '</div>';
}
My problem is that when I click on the close button the div is not hiding.
What I'm I doing wrong here?
Avoid to hardcode javascript handlers and inline events inside the output of php code: do instead
echo '<div class="overlay">';
echo "<button>Close</button>";
echo '</div>';
and previously insert in your page this code that detects a click on your button using event delegation
<script>
$(document).on('click', '.overlay button', function() {
$(this).parent().hide()
});
</script>
try:
<button onclick="this.parentNode.style.display = 'none'; return false;">Close</button>
Try this code:
function myfunc() {
//then I have a div...
echo '<div class="overlay" id="overlay" >';
echo "<button onclick=\"hide()\">Close</button>";
echo '</div>';
}
//using the javascript code:
function hide()
{
document.getElementById("overlay").style.display="none";
}
try:
$('.overlay button').live('click',function(
$('.overlay').css({'display': 'none'});
));
I need to output alert message if val = -1, but the problem is that this message appears at the bottom of the page and this does not depend on the value of val.
if ($val == -1)
echo '
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
';
else { //... }
<div id="dialog-message" title="Process failed.">
<p><span class="ui-icon ui-icon-circle-check"
style="float: left; margin: 0 7px 50px 0;"></span> Error message.</p>
</div>
To hide the div use css
#dialog-message{
display:none;
}
For a better alert there is a nice plugin for Alert, Confirm & Prompt use that plugin
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
It's download page is here
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
You can use position function to position the dialog:
Link
What's wrong with the good old fashioned alert() javascript function? It should do the job just fine in this situation.