I'm currently working on a page which loops some content. When you click on the image, more information appears in a javascript popup. I want to give every popup an unique link (with a $_GET). Any ideas how I can do this with PHP or Javascript (or both).
Pop-up script:
<!----- JAVASCRIPT FOR EACH ELEMENT ---->
<script type="application/javascript">
function openPopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "block";
}
function closePopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "none";
}
</script>
The pop-ups are created inside a foreach loop (PHP) with the onClicks in it.
Thanks in advance!
you can do like this:
<?php if (isset($_GET['my_get_var']) && !empty($_GET['my_get_var']) : ?>
<div class="my-popup">
<!-- my popup code -->
</div>
<?php endif; ?>
no need for js at all - just CSS, HTML and PHP
Related
html (quotazioni.php)
<?php
$azioni = $db_handle->runQuery("SELECT idAzione,nome,prezzo FROM azioni");
foreach($azioni as $azione){
?>
<tr>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["nome"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["prezzo"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;">
<a href="compraVendi.php?action=segui&idAzione=<?=$azione["idAzione"]?>" id="<?=$azione["nome"]?>" style="text-decoration:none;" class="preferiti" >
<span style="color:yellow;font-size:200%;" id="<?=$azione["idAzione"]?>" >☆</span>
</a>
</td>
</tr>
<?php
}
?>
php (compraVendi.php)
case "segui":
$db_handle->query("INSERT INTO preferiti (visibile,idAzione) VALUES (1,'".$_GET["idAzione"]."')");
header("location: quotazioni.php");
break;
javascript
$(document).ready(function(){
<?php
$preferiti = $db_handle->runQuery("SELECT * FROM preferiti");
foreach($preferiti as $preferito){
if ($preferito["visibile"]==1){
?>
var element = document.getElementById(<?=$preferito["idAzione"]?>);
element.hide();
<?php
}
}
?>
});
I must hide the span inside the link after I click on it. How do I keep the span disabled considering the page contains an automatic refresh? I provide an example of code which not work, please help me to solve the problem. In the sql database, the table preferiti contains idPreferito,visibile and idAzione. The row preferito contains 1 if i clicked on the respective prefer.
When user clicks on the the star - you need to save this data to a persistent storage, e,g your backend. This is the only way you will be able to regain this state after page refresh.
So when serving the page to the client, you will consider another field, for example 'disabled' which contains string 'disabled'
It could be something like this:
<a href="#" id="<?=$azione["nome"]?>" class="preferiti" >
<span class="favourites-star <?=$azione["disabled"]?>" id="<?=$azione["idAzione"]?>" >☆</span>
</a>
Consider not using insline styles and instead using classes for styling - this is a general good practice.
.favourites-star {
color:yellow;
font-size:200%;
}
Classes are also better when dealing with events.
$(document).ready(function(){
$('.prefereti').on('click', function(evt){
// Save the state first and then disable the star - try it yourself!
$.post()
.done(function () {
$(evt.currentTarget).addClass('disable');
})
.fail(function () {
// Don't disable - instead show error
});
});
});
One more thing that you need to keep in mind while the state is being saved, your page might reload - so you might like to prohibit it from reloading for that time.
I was following a tutorial on YouTube about how to display a popup box after the click of a button. It was fairly simple but now I want to twist things a little bit. I want to display the markup inside a PHP IF function.
I believe that creating a JavaScript function would be the road to follow but I am not proficient in JavaScript/jQuery as I am only starting with it now.
I want to display the following markup should my PHP IF function equate to TRUE
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>Close popup</p>
</div>
</div>
</div>
The following JavaScript function is used in the tutorial that I was following. It works perfectly when it is triggered by onClick.
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
I have the following PHP script
function cart($userEmailAdd){
global $dbc; // database connection variable
/*
Verify if the product that is being added already exists in the cart_product table.
Should it exist in the cart then display popup box with an appropriate
message.
Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];
$queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND cpProductid = '$productID'";
$executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
?>
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>X</p>
</div>
</div>
</div> <!-- -->
<?php
} else {
$query = "INSERT INTO cart..." ;
// rest of script continues after this for insertion of the product
How do I go about using the same function or a similar one without using onClick to display the markup?
you can just add inline css display:block so that the popup is displayed by default when page load.
<div id="popup-box" style="display:block" class="popup-position">
and then edit the close button of the popup to tell him to call toglle_visibility() onclick
<p>X</p>
of course you will need yo put your toggle_visibility() function in a script tag (better before the closing body element)
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
You can do something similar to this:
function cart($userEmailAdd){
global $dbc; // database connection variable
/*
Verify if the product that is being added already exists in the cart_product table.
Should it exist in the cart then display popup box with an appropriate
message.
Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];
$queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND cpProductid = '$productID'";
$executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
?>
<script>
$(document).ready(function(){
toggle_visibility('popup-box');
});
</script>
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>X</p>
</div>
</div>
</div> <!-- -->
<?php
} else {
$query = "INSERT INTO cart..." ;
// rest of script continues after this for insertion of the product
All you have to do is to tell javascipt that it has to open popup. Here, I made Javascript run function toggle_visibility('popup-box'); after the document loads.
The popup div doesn't have to be inside php's IF statement. And instead of using $(document).ready(function(){ }); you can use onLoad="toggle_visibility('popup-box')" attribute in <body> element.
Instead of executing the html block within the php if clause, you could use a simple boolean variable to indicate whether or not to show the popup:
$showPopup = false;
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
$showPopup = true;
?>
<?php
} else {
Then in your html code you could show the popup based on what the $showPopup has been set to:
<div id="popup-box" <?php echo ($showPopup === false)? 'style="display:none"' : '' ?> class="popup-position">
</div>
I have .phtml file which have order button on product page.
How can I change font and position "Ask product Question" button on this code?
I have already this code;
<?php $_product = $this->getParentBlock()->getParentBlock()->getProduct(); ?>
<?php if (Mage::helper('askfordetails')->checkIfMailForAskForDetailsIsSet()): ?>
<a class="button popup-ask-question" href="<?php echo Mage::getUrl('askfordetails/askfordetails', array('product_id' => $_product->getId())) ?>"><?php echo Mage::helper('askfordetails')->__('Ask Product Question') ?></a>
<?php endif; ?>
and I try this but nothing happen;
.askfordetails {
font-size:16px;
}
Also no have any .css files for this button.
The class of this link is actually popup-ask-question and not askfordetails which is an helper and have nothing to do with CSS...
You should try
.popup-ask-question {
font-size:16px;
}
.button.popup-ask-question {font-size:16px;}
should do the trick.
If not try:
.button.popup-ask-question {font-size:16px !important;}
If even this doesn't work please let me know so we can look into this issue some more.
I am trying to get the code of a specific summer note div with multiple ones on a single page.
My summer notes are created from a database with php as follows:
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>
And then my javascript is:
<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>
It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.
What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.
(btw) I am initilizing the summer notes like this:
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
After selecting all summernote's you need to access their attributes by specifying one element like:
<script>
$('.summernote').each(function(i, obj) { $(obj).summernote({
onblur: function(e) {
var id = $(obj).data('id');
var sHTML = $(obj).code();
alert(sHTML);
}
});
});
</script>
To display multiple editors on a page, you need to place more than two <div> elements in HTML.
Example:
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
Then run summernote with jQuery selector.
$(document).ready(function() {
$('.summernote').summernote();
});
For more information click
Note: Multiple Editor summernote not work with id
I Finally got the code working for multiple summernote editors and image uploading!
To fix
"undefined"
, try:
var id = $(obj).data('id');
to
var id= $(obj).attr('id'))
Source:
https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js
Regards!
For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc
Summernote works for the first output only but you can make it work for others by using the class twice:
<div class"summernote summernote"> </div>
Provided your script is like this:
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"
Dont forget to do the same on your initialisation script
<script>
$('.summernote').summernote({
height: 200 //just specifies the height of the summernote textarea
});
</script>
Example
<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>
<script>
$('.summernote').summernote({
height: 200
});
</script>
I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>
in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"