Develop Reference

How to fix modal popup closing button's showing part on Wordpress?

I successfully added "x" close button into modal popup. But when i click on it then shows only some part of the content. I'd want it to show full page of content not just upper part.
I've tried CSS code and this php code:
CSS:
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: absolute;
right: 0;
top: 0
}
php:
<div id="surbma-yes-no-popup" class="uk-modal <?php echo 'surbma-yes-no-popup-' . $popupthemes; ?>">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<header style="background-color:#000;color:#fff;">
<span onclick="document.getElementById('surbma-yes-no-popup').style.display='none'" class="close-button topright" >×</span>
</header>
<h2><?php echo esc_attr_e( $options['popuptitle'] ); ?></h2>
</div>
<div class="uk-modal-content"><?php echo stripslashes( $options['popuptext'] ); ?></div>
<div class="uk-modal-footer">
<button id="button1" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton1style'] ); ?><?php if( $options['popupbuttonoptions'] != 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton1text'] ); ?></button>
<?php if( $popuphidebutton2 != 1 ) { ?>
<button id="button2" type="button" class="uk-button uk-button-large uk-button-<?php echo esc_attr_e( $options['popupbutton2style'] ); ?><?php if( $options['popupbuttonoptions'] == 'button-1-redirect' ) echo ' uk-modal-close'; ?>"><?php echo esc_attr_e( $options['popupbutton2text'] ); ?></button>
<?php } ?>
</div>
</div>
</div>
It is able to close the popup but it is only shows upper part of the content, not a full page. It is just like cut of upper page, i expect to show the full content after clicking on it. How to fix?

Retrieving id error from jQuery and PHP Chat

I have some problems on the retrieving id from php on mysql, somewhat, for what I found out, is that the id is saving somewhere (eg: something like a cache) where it saves it and create a loop when I don't ask for a loop.
For example
you can see the chat windows. Where it shows the user you are talking and the list of user which are online. (Like facebook)
The problem here is that when I toggle where it says "Nuno Monteiro" chat message. it hides it, and goes to the id "1" in this case but if I click on "Joane" and do that the id it will show as "1" and after "2".
And when I go back to "Nuno" I can not toggle and hide again but it gives me the id as "1" then "2" then "1" again "2" like that.
What I want is to pick just the current id from the function callID(id) and just select that one.
Here below you have the code:
dashboard.php:
<div class="chat-data" id="chat-data" style="display:none;">
<?php
for ($i = 0; $i < count($result); $i++) {
if($result[$i]['online'] == 0) {
echo "<span onclick='callID(".$result[$i]['id'].");' class='user-btn".$result[$i]['id']."' style='padding: 7px; display:inline-block; position: relative; border-bottom: 1px solid #ccc; width: 100%; cursor: pointer;'><span class='offline'></span> ".$result[$i]['firstname']." ".$result[$i]['lastname']."</span>";
} else {
echo "<span onclick='callID(".$result[$i]['id'].");' class='user-btn".$result[$i]['id']."' style='padding: 7px; display:inline-block; position: relative; border-bottom: 1px solid #ccc; width: 100%; cursor: pointer;'><span class='online'></span> ".$result[$i]['firstname']." ".$result[$i]['lastname']."</span>";
}
}
?>
</div>
This is the part from the chat(1) window.
The part of "Nuno Monteiro" window is also from dashboard.php, which is the following code:
<div class="chat-user" style="display: none;">
<div class='user-title'>
<span class="titles"></span>
<span class='pull-right remove_field'>X</span>
</div>
<div class="chat-time">
<div class="msg_data" id="msg_data">
<div class="friend_pic pull-left">
<img src="<?php echo $domain; ?>resources/img/babox_logo.png" data-toggle="tooltip" data-placement="bottom" title="Nuno Monteiro" />
</div>
<div class="friend">
<span>Hey There are you ok?</span>
</div>
<div class="your_pic pull-right">
<img src="<?php echo $domain; ?>resources/img/babox_logo.png" data-toggle="tooltip" data-placement="bottom" title="You" />
</div>
<div class="you">
<span>I am fine!</span>
</div>
</div>
<div class="msg_box" id="msg_box">
<textarea id="chatbox"></textarea>
</div>
</div>
</div>
The $domain variable is where I get my website name so I don't need to change it in every code I have and change it only there.
That is picking up results from $db = new DbManager(); and the variable $result will execute the select by doing: $result = $db->execute_select($sql)
The $sql variable is: "SELECT * FROM users";
Then we going pass through our jQuery function (which I mention above):
function callID(id) {
$(".chat-time").prop("id",id);
$(".chat-user").hide();
$(".remove_field").click(function() {
$(".chat-user").hide();
});
$.post('callID.php', {id : id }, function(rID) {
// nothing on here
$(".user-title").click(function(e) {
$('#' + rID).toggle();
e.preventDefault();
alert(rID);
});
if(id == rID) {
$(".chat-user").show();
$(".user-title span.titles").html($(".user-btn" + rID).text());
} else {
$(".chat-user").hide();
}
});
}
this is part from my general.js script.
Then the script will go pick the information to the callID.php:
<?php
include('application/database/dbmanager.php');
$db = new DbManager();
$sql = "SELECT id FROM users WHERE id='".$_POST['id']."'";
$db->execute_select($sql);
echo $_POST['id'];
?>
What I wanted to happen is that when I toggle in the online user chat on each username, go pick only the id of that user, so later I can save the messages in database and pick it up.

How to make an element appear on right or left depending of the position of the element clicked?

I’m working on a project where i have a mosaic of images (4 images per row) and when user mouses over an image, it makes appear a sidebar with some content inside.
The thing is if the user hovers image 1 or 2, the side bar is on right, if he hovers image 3 or 4 the side bar is on left.
I’m trying with a click for now as i find it easiest to do.
But at a certain point, a bug appears and the side bar is not on right side.
Here is my code :
The html in the snippet is a copy of the source code but i use php and a foreach loop to build the sidebar and the mosaic of images.
Try the snippet below.
HTML & PHP
<!-- Side bar -->
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<img id="bt_close_sidebar_content" class="bt_close pull-right pointer" src="img/site/bt-close.png" />
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
?>
<div id="membre_<?php echo $equipe['alias']; ?>" class="contenu_sidebar">
<h2><?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?></h2>
<h3><?php echo nl2br(htmlspecialchars($equipe['fonction'], ENT_QUOTES, 'UTF-8')) ?></h3>
<p><?php echo $equipe['texte']; ?></p>
</div>
<?php
$i ++;
endforeach;
reset($allDatasEquipe);
?>
</div>
</div><!-- fin sidebar_content_right -->
<!-- Images -->
<div class="container container_agence">
<div class="row mosaique_equipe">
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
if ($i == 1 || $i == 2) {
$class = 'sidebar_left';
} else {
$class = 'sidebar_right';
}
?>
<div class="col-md-3 col-lg-3">
<div id="<?php echo $equipe['alias']; ?>" class="img_mosaique_equipe toggle-sidebar pointer <?php echo $class; ?>">
<img src="img/equipe/<?php echo nl2br(htmlspecialchars($equipe['image'], ENT_QUOTES, 'UTF-8')) ?>" alt="<?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?>"/>
</div>
</div>
<?php
$i ++;
if ($i > 4) {
$i = 1;
}
endforeach;
reset($allDatasEquipe);
?>
</div>
</div>
JS / jQuery
$sidebar_content = $('#sidebar_content');
$('.images').click(function() {
var id = $(this).attr('id');
console.log('id : ' + id);
var position_sidebar = $('.contenu_sidebar').hasClass('sidebar_left');
if ($sidebar_content.hasClass('visible')) {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"text-align": "left",
"right": "0"
});
$sidebar_content.animate({
"right": "-1000px"
}, "slow").removeClass('visible');
console.log('sidebar_left closed');
position_sidebar_content = 'right';
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"text-align": "right",
"right": "0"
});
$('#sidebar_content').css({
"left": "0"
});
$sidebar_content.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
position_sidebar_content = 'left';
console.log('sidebar_right closed');
}
} else {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"right": "-1000px"
});
position_sidebar_content = 'right';
$sidebar_content.animate({
"right": "0px"
}, "slow").addClass('visible');
console.log('sidebar_left open');
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"left": "-1000px"
});
position_sidebar_content = 'left';
$sidebar_content.animate({
"left": "0px"
}, "slow").addClass('visible');
console.log('sidebar_right open');
}
}
});
/* side bar content */
#sidebar_content {
width: 50%;
position: fixed;
border-right: 1px solid #4c565c;
/* right: -50%;*/
right: -1000px;
top: 0;
height: 100%;
overflow: auto;
background: black;
z-index: 1000;
background-color: #999;
text-align: left;
}
.contenu_sidebar {
display: none;
}
.sidebar_content_wrapper {
position: relative;
height: 100%;
overflow: auto;
padding: 115px 50px 50px 50px;
}
.images {
width: 30px;
height: 30px;
background-color: red;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="1" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="2" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="3" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="4" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="5" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="6" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="7" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="8" class="images sidebar_right"></div>
</div>
</div>
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<p id="bt_close_sidebar_content" class="bt_close pull-right pointer">bt close </p>
<div id="membre_1" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_2" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_3" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_4" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_5" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_6" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_7" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_8" class="contenu_sidebar">
<p>text</p>
</div>
</div>
</div>

I didn't try your code but I think the example below shows a way of doing what you need.
<html>
<head>
<style>
.my-image {
display: inline-block;
background-color: #0f0;
with: 96px;
height: 72px;
margin: 1px;
}
.my-popup {
position: absolute; display: inline-block; z-index: 1000; background-color: red; with: 48px; height: 48px;
}
</style>
</head>
<body>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<script src="jquery.js"></script>
<script>
(function ($) {
var toDisplay = $('<div class="my-popup">Hey whats up</div>')
.appendTo($('body'))
.hide(0);
var images = $('.my-image');
$.each(images, function (index, el) {
var displayPos = calculatePosition(el, index >= images.length / 2);
var $el = $(el);
$el.on('mouseover', function () {
toDisplay.show(0).offset(displayPos);
});
$el.on('mouseout', function () {
toDisplay.hide(0);
});
});
function calculatePosition (image, right) {
var $image = $(image);
var pos = $image.offset(); // image position relative to document
if (right) {
pos.left -= toDisplay.width();
} else {
pos.left += $image.width();
}
return pos;
}
})(window.jQuery);
</script>
</body>
</html>
The idea is to set the displaying element position to absolute and calculate the new coordinates on each hover event and set them using jquery.

Calling PHP code with Ajax [duplicate]

This question already has answers here:
How to access a model method with javascript
(2 answers)
Closed 8 years ago.
Please have a loook at the following code
<?php
//echo $this->Html->css(array('bootstrap', 'mark', 'style'));
echo $this->Html->script(array('timer','swfobject','bootstrap.min.js'));
//$this->requestAction('/flip2/correctAnswer')
?>
<style>
#hideall {
display: none;
opacity: 0.7;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
vertical-align:middle;
text-align:center;
}
.removeCardflip{
transition: rotateY(0deg);
-webkit-transition: rotateY(0deg);
transition-duration: 0s;
}
/* SECTIONS */
.section {
clear: both;
padding: 0 10px 0 10px;
margin: 0px;
}
</style>
<div id="hideall">
<?php //echo $this->Html->image('progress.gif', array('alt' => 'Wait', 'style' => 'text-align:center; padding-top:200px;'));?>
</div>
<!--<div class="wrapper" style="border: 1px solid red; width: 100%;">-->
<div class="section group" style="margin-top: 50px;">
<div class="col span_3_of_3">
<h3 style="margin:0px; font-size:22px;">Play word game: </h3>
</div>
</div>
<div class="">
<div>
<div>
<span class="remainWords"><?php //echo count($words);?></span> oxxxxxxxxxxxxxxxf <?php //echo $totalWords;?>
</div>
<div>
<?php
echo $this->Html->image("comic_edit.png",
array(
"alt" => "Pareto List",
"id" => "paretoList",
'url' => "javascript:;"
)
);
?>
</div>
</div>
</div>
<div class="container"><div class="row">
<?php
foreach($worddeck as $worcard)
{
?>
<div class="xy col-lg-3 col-md-4 col-sm-6 img-rounded" id="card1" style="width:250px; height:200px; background-color:grey; heiht:170px; margin: 10px 10px;">
<div id="enside1" >
<h1 data-pos="<?php //echo ; ?>" ><?php echo $worcard['unique_wordsforcards']['en_word']; $enSpell = $worcard['unique_wordsforcards']['en_word']; ?></h1>
</div>
<div id="ptside1" style="display:none;">
<?php echo $phonemer[$enSpell]; ?>
<p><?php echo $worcard['unique_wordsforcards']['hint']; ?></p>
</div>
<div id="cntrol1">
<button type="button" id="acertei" class="a btn btn-success mr5 btn-lg">Acertei</button>
<button type="button" id="Errei" class="e btn btn-danger mr5 btn-lg">Errei</button>
</div>
</div>
<?php
}
?>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
});
</script>
This is the View of a CakePHP page. $this->requestAction('/flip2/correctAnswer') will call the correctAnswer() method in Controller.
Here If I call the $this->requestAction('/flip2/correctAnswer') on page load, this works fine. I need to call this when the Acertei button is clicked, so I added it to the Ajax as proposed by a fellow SO user. However, it didn't work, the function do not get called. Why is this?

I would recommend first giving your Acertei button a unique ID like "acertei" for example (it currently shares the ID of "2" with its sibling button). Then with jQuery you can do the following:
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
This adds a click event to the Acertei button that will start an AJAX request to the 'flip2/correctAnswer' URL.

Div height auto issue

I have a #val container div that stretches to accommodate Javascript content within a div called #cat-container.
cat-container has 4 tabs above it and are numbered 1 - 4, so if you click 1, it will load content from a php array, and similar for tabs 2 -3.
When you click on each tab, #val-container successfully stretches to the correct height, however I have set tab 1 and its content to display by default as the page loads. The problem is that the content from all the other tabs gets loaded into tab 1 onpage load.
<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
tab.style.position='absolute';
tab.style.top='0';
tab.style.left='0';
i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
displayTab(1);
}
else
{
if(urllocation.indexOf("#option1")>-1)displayTab(1);
else if(urllocation.indexOf("#option2")>-1)displayTab(2);
else if(urllocation.indexOf("#option3")>-1)displayTab(3);
else if(urllocation.indexOf("#option4")>-1)displayTab(4);
else displayTab(1);
}
</script>
Essentially I would like tab 1 to just show just its content on page load.
This line is the issue:
document.getElementById('val-container').style.height='auto';
So if the dispalyTab(1), just show its content!
The code that actually displays the tabs:
<script type="text/javascript">
function displayTab(num)
{
var tab,x;
x=1;
while(tab=document.getElementById('option'+x+'-body'))
{
if(num!=x)tab.style.display='none';
else tab.style.display='inherit';
x++;
}
}
</script>
<div class="category-tab" id="aoption1">Tab1</div>
<div class="category-tab" id="aoption2">Tab2</div>
<div class="category-tab" id="aoption3">Tab3</div>
<div class="category-tab" id="aoption4">Tab4</div>
<br><br>
Here is the PHP/HTML:
I have used tab 1 - 4 to simplify things but in actual fact they represent price ranges:
echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';
$cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over £100!</h3></a>";
else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
$i=0;
for ($p = 0; $p < count($game); $p++ )
{
$game[$p]->getProduct();
if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
{
if (($i % 3) == 0 )
{
if($i)echo "</tr></table>";
echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
}
echo "<td>";
$game[$p]->getLink();
echo $game[$p]->link;
echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
echo "<div class=\"container\" style=\"text-align:center;\"><div class=\"image-spacer\">";
echo $game[$p]->getImage();
echo $game[$p]->image;
echo "</div>";
echo "<div class=\"specialprice\" >";
if(!is_numeric($game[$p]->price)){
echo $game[$p]->price;
}
else
{
if($game[$p]->price < $game[$p]->maxprice)
{echo "From only: £".fixedtofloat($game[$p]->price);}
else
{echo "Only: £".fixedtofloat($game[$p]->price);}
}
echo "</div></div></a>";
echo "</td>";
$i++;
}
}
echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
?>
CSS:
#val-contain { }
#cat-container { }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }
Hope someone can help?
Volterony

This is a pure html/inline css solution with one static tab.
<body>
<style>
html{
height: 100%;
}
body {
min-height: 100%;
}
</style>
<div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">
<div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
return false;">Tab1</a></div>
<div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
return false;">Tab2</a></div>
<div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
return false;">Tab3</a></div>
<div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
return false;">Tab4</a></div>
</div>
<div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
Tab 1 content
</div>
</body>

you used 'val-contain' as your div's id
echo '<div id=\"val-contain\">';
but you are trying to change it with
document.getElementById('val-container').style.height='auto';
change the div's id to val-container.