I have this problem: I can't find out how to hide a div that appears just when session begins. So I a have a X button for closing, and when the page is refreshed, the div appears again! But I don't want to stop the session.
My code:
<div id="got-points" style="display:<?php echo (isset($customer) && !empty($customer) && isset($customer['customer']) && !empty($customer['customer'])) ? 'block' : 'none'; ?>"> // Checks if session is active
<div class="got-points-bg" style="display: visible;">
<div class="got-points-box">
<img class="got-points-close" src="<?php echo base_url();?>static/images/i8.png" /> //Close Button
My text here
</div>
</div>
</div>
And js
<script>
$(document).ready(
function() {
$(".got-points-close").click(function() {
$(".got-points-bg").hide("fast");
});
});
</script>
If it is on refresh then it is easy; just do it in the PHP session; like this:
HTML:
<div id="got-points" style="display:<?php echo (isset($customer) && !empty($customer) && isset($customer['customer']) && !empty($customer['customer']) && empty($_SESSION['first_load'])) ? 'block' : 'none'; ?>"> // Checks if session is active
<div class="got-points-bg" style="display: visible;">
<div class="got-points-box">
<img class="got-points-close" src="<?php echo base_url();?>static/images/i8.png" /> //Close Button
My text here
</div>
</div>
</div>
and in your PHP before then (like on login/session start) - this will obviously need significant editing since you haven't included your PHP I can't guess it very well, but this should provide a starting point:
<?php
//load user check pseudo code
if !empty($_SESSION[user]) and whatever other checks... {
$_SESSION['first_load'] = False; //important line number 2
}
//login pseudo code to demonstrate placement within your code
if user & pass = valid {
$_SESSION['first_load'] = True; //important line number one
}
That is assuming you want th div output but not displayed on subsequent loads.
Interesting question, how about something like this?
<?php
if(isset($_SESSION['variable'])){
sleep(3); /* Duration(in seconds) div is displayed for */
echo
"<script>
$( document ).ready(function() {
$(".got-points-bg").hide("fast");
});
</script>";
}
?>
try this
<?php error_reporting(0); session_start(); if(empty($_SESSION['user'])) echo "<div id='togglediv'> My text here </div>"; ?>
hope it will work
Related
I have this code:
<div class="menuList">
<li><img src="/images/icon/arena.png" alt="">Arena<span class="green"> (+)</span>
</li>
</div>
And i want to remove <span class="green"> (+)</span> after users click that link.
Anyone can help me (php code)?
As already mentioned, PHP is not the ideal language to do this in. But, if you need to use PHP, here is how you could do it.
Set a session variable on the /arena/ page, like this;
<?php
session_start();
$_SESSSION['visited'] = 1;
?>
Then, use PHP to check for the session variable in your HTML code like this:
<div class="menuList">
<li><a href="/arena/"><img src="/images/icon/arena.png" alt="">Arena
<?PHP
If(isset($_SESSION['visited'])){
echo '<span class="green"> (+)</span>';
}
?>
</a>
</li>
</div>
You will need to add session_start() to the top of the page wherever you are accessing session variables, before you output anything to the page (e.g. DOCTYPE declaration.)
in Jquery you may do this like
<script>
$(function(){
$('.menuList').find('a').click(function(){
$(this).children('.green').remove();
});
});
</script>
You can accomplish this by adding this javascript to your page:
<script>
window.onload = function() {
var a = document.querySelector('.menuList a');
a.onclick = function() {
var span = a.querySelector('.green');
a.removeChild(span);
}
}
</script>
OR if you're using jQuery:
<script>
$(document).ready(function(){
$('.menuList').find('a').click(function(){
$(this).find('.green').remove();
});
});
</script>
I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.
I am creating a log in system in PHP and I'm trying to make it a little nicer.
When you log out, you get redirected back to index.php. Like this:
header("loaction: index.php?logout=true")
This makes the url look like www.mysite.com/index.php?logout=true. I then use the following code:
if(isset($_GET['logout'])) {
$logoutvalue = $_GET['logout'];
if($logoutvalue = "true") {
$notification = "You've been logged out!";
}
to get the value of logout from the URL and do something with it.
I have a small popout window that will display the notification variable's value. In this case it's "You've been logged out!" My question is how do I get the modal window to display when the page loads and when the url equals /index.php?logout=true ?
All comments, answers, and suggestions are greatly appreciated!
Thanks!
- Ryan
First of all,
You can't "Open a Modal Window using PHP" directly.
You can only do this only by exchanging variables (via JSON or XML), or embedding PHP conditions right into your markup.
PHP and JavaScript are independent.
My question is how do I get the modal window to display when the page
loads and when the url equals /index.php?logout=true ?
There are two ways you can achieve this.
First: Make a good use of embedding PHP conditions right into the markup.
Second: Have somewhere hidden input, like (<input type="hidden" id="showModal" />) and then check if it exists via JavaScript itself.
For example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
if ( document.getElementById('showModal') ){
alert('Box'); //replace with your own handler
}
}
</script>
</head>
<body>
<?php if ( isset($_GET['logout']) && $_GET['logout'] === 'true' ): ?>
<input type="hidden" id="showModal" />
<?php endif;?>
</body>
</html>
Are you looking for something like:
<script>
<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
echo 'alert("You\'ve been logged out!");'
}
?>
</script>
EDIT: I believe you are looking for something like this for a modal window (using jQuery)
<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
$message = "You've been logged out!";
?>
<script>
$(function() {
$("#dialog").dialog();//if you want you can have a timeout to hide the window after x seconds
});
</script>
<div id="dialog" title="Basic dialog">
<p><?php echo $message;?></p>
</div>
<?php } ?>
I know it is an old post, but to help someone in future with similar quest, I guess the following may help to get into right directions ( I have tested the below code myself, so please make adjustment).
<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
$message = "You've been logged out!";
?>
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<div class="fetched-data"><?php $message ?></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
Ok, so your existing code is like this snippet, and the problem you're having is that you want to show a jQuery/Bootstrap modal triggered by/with PHP, but jQuery/JS hasn't loaded yet (so you'll get a "$ undefined" error).
When you say "a small popout window" I'm assuming you mean a bootstrap type modal.
if(isset($_GET['logout'])) {
$logoutvalue = $_GET['logout'];
if($logoutvalue = "true") {
$notification = "You've been logged out!";
}
}
What I did was move the PHP code block to the end of the .php file, after jQuery (etc), and have an include, so it would look like this (assuming the name of your modal is id="logoutModal"):
logout.php
if(isset($_GET['logout'])) {
$logoutvalue = $_GET['logout'];
if($logoutvalue = "true") {
include("logout-modal.php");
}
}
logout-modal.php
<?php ?>
<script>
$('#logoutModal').modal('show');
</script>
<?php ?>
Not 100% sure this answers your question, but this works for me. Hope this helps.
Best way to get done this by using the PRG pattern.
index.php
1. Create the element for modal content in HTML
<div id=modal></div>
2. Style your #modal element
#modal {
position: fixed;
display: none; /*important*/
color: white;
text-align: center;
z-index: 1000;
width: 100%;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: crimson;
line-height: 2;
}
3. Define function how to show and disappear the modal box using jQuery
'use strict'
window.jQuery ?
$.fn.notify = function(interval) {
let el = $(this),
text = el.text(),
modal =()=> { // this will fire after the interval has expired
el.fadeOut(),
clearInterval(timer)
},
timer = setInterval(modal,interval)
!text.match(/\S+/) || el.text('') // this will fire when modal box contains text
.append(`<h3>${text}</h3>`)
.show()
}
: alert('jQuery required.')
4. Attach .notify() to the jQuery selector
$(()=>{
$('#modal').notify(1500) // 1500 is the interval in milliseconds
})
5. Insert the notification sent from PHP inside the #modal element
<div id=modal>
<?=
#$_SESSION["notify"]; // if this variable is not set, nothing will happen
unset($_SESSION["notify"]);
?>
</div>
6. Perform a simple $_GET request
<a href=parse.php?logout>Logout</a>
parse.php
7. Return a value using PHP in a $_SESSION variable
if (isset($_GET["logout"])) {
$_SESSION["notify"] = "You have been logged out.";
header("Location: index.php");
}
This is good practice. Once the logout request is sent to PHP, it will redirect to the index page with the result in a session variable. The PRG pattern does not always require a POST request. This example sends a GET request which is ok for logouts. Note that you have to place session_start(); at the top of your files.
Or you could even write the script inside if statement:
<?php
if(isset($_GET['logout']) && $_GET['logout'] === 'true'){ ?>
<script type="text/javascript>
window.open(yourhtml);
</script>
</php }
else {
// may be some other script
}
?>
Please download a Modal JS Library http://simplemodal.plasm.it
and Use the Condition
if(isset($_GET['logout'])) {
$logoutvalue = $_GET['logout'];
if($logoutvalue = "true") {
code to open the Modal as in the JS library.....
}
Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:
<script language="javascript">
jQuery(document).ready(function ()
{
var terms = ["span_1","span_2"];
var i = 0;
function rotateTerm() {
jQuery("#text-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
});
jQuery("#title-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
i == terms.length - 1 ? i=0 : i++;
});
}
rotateTerm();
setInterval(rotateTerm, 1000);
});
</script>
And here is the PHP code I use:
<?php
if (!empty($testLst)) :
$num=1;
foreach($testLst as $key=>$item):
$item->slug = $item->id;
$item->catslug = $item->catid ;
?><div id="hidden-content" style="display:none;">
<div id="title-slider">
<span class="<?php echo 'span_'.$num; ?>">
<h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
<?php echo $item->title; ?></a>
</h4>
</span>
</div>
<div id="text-slider">
<span class="<?php echo 'span_'.$num; ?>">
<p>
<?php
$concat=array_slice(explode(' ',$item->introtext),0,20);
$concat=implode(' ',$concat);
echo $concat."...";
?>
</p>
</span>
</div></div>
Learn more >></p>
<?php
$num++;
endforeach;
endif;
?>
<div id="title-content">
</div>
<div id="text-content">
</div>
And here is a JSFiddle page reproducing what I would like to do.
My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.
You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.
I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy
Alright not sure what to do and i am honestly bit lost. What I am trying to do is upload a file to site via jQuery and push it to PHP which then deletes original image file and makes a a copy of it called header.jpg and pushes it where it needs to go. That part works with no problem. The problem here is how would I go about updating the div element if the header.jpg image is the background?
Note: no matter what the img will always be header.jpg but it needs to be re-cached by browser and outputed to user without page refresh
Here is how the header div is layed out
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
and here is the jquery bit which displays loader and auto-starts the upload process
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#header',
success : function(data) {
$("#header").html(data).fadeIn('fast');
}
}).submit();
});
When you want to update the image, change it's source. You can append a time-stamp to the source so it will not come from the browser's cache. In PHP that would be something like:
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
The time-stamp should just be ignored and the image will be downloaded each update.
Update
Ok, I see now that the background image is on the element you are replacing the HTML of. You could use jQuery to update the url() of the image:
success : function(data) {
var theDate = new Date();
$("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
}
You could also use PHP to output the #header element and use replaceWith() instead of .html():
success : function(data) {
$("#header").replaceWith(data).fadeIn('fast');
}
This assumes that your PHP output now looks like this:
<div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>