I'm using Colorbox for my PM system. Clickin on the 'Inbox' link, opens colorbox and loads the inboxpage via ajax. The inboxpage shows linked titles of the users messages. Clickin on that, should open the read_message page inside the same colorbox. Unfortunately, that is not the case. Whenever I click on the link, it just opens the page outside the box.
I've tried different things, but no love whatsoever. Any help would be appreciated!
Piece of javascript (If you need the whole javascript of Colorbox.js, please let me know so!)
$(document).ready(function(){
$("#ajax").colorbox({ajax:true, width:"500px", height:"450px"});
});
Page that opens the Colorbox once $newMessages or $noNewMessages has been clicked
<div class="pageHeader">
<p class="title"><?php echo $myAccount ?></p>
<a class="viewMessages" id="ajax" href="message/inbox.php">
<?php
if (mysqli_num_rows($getAmountMessages) > 0 ) {
$row = mysqli_fetch_array($getAmountMessages);
if($row['message_read'] == 0){
echo $newMessages;
} else {
echo $noNewMessages;
}
}
?>
</a>
</div>
Inbox page - Clickin on the Linked Titles should open the read_message.php file within the Colorbox
//Select messages in db
$getMessages = mysqli_query($mysqli,"SELECT * FROM messages WHERE recipient = '".$_SESSION['user_id']."' ORDER BY message_id DESC");
$numMessages = mysqli_num_rows($getMessages);
//Message(s) available for user
if (mysqli_num_rows($getMessages) > 0 ) {
echo '<ul>';
for($count = 1; $count <= $numMessages; $count++)
{
$row = mysqli_fetch_array($getMessages);
//Show if a message is still new
if($row['message_read'] == 0)
{
echo '<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a>(NEW MESSAGE)<br>';
}else{
echo '<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a><br>';
}
}
echo '</ul>';
//No message(s) available for user
}else{
echo ("<p class='messagesinfo'>Er zijn geen nieuwe berichten</p>");
}
Thank you.
When clicking on a message (link), you are telling the browser to do a redirect to that link, which will result in a new page load.
Instead, you need to call $.colorbox via javascript.
Change your links from:
<a id="ajax" href="message/read_message.php?messageid='.$row['message_id'].'">'.$row['message_title'].'</a>
to
<a id="ajax" onclick="showMessage($row['message_id'])">'.$row['message_title'].'</a>
In your Javascript add the following function:
function showMessage(id) {
$.colorbox({href:"message/read_message.php?messageid=" + id});
}
Hope this helps!
Related
on my website I want to show a Logout button when a user is logged in and a logout button when the user is not logged in.
I wrote this code:
if(isset($_SESSION["username"])){ echo "<li class='xy'><button class='x' onclick='location.href = 'index.php';'>Logout</button></li>"; } else { my login button... }
The buttons do appear but unfortunately the are not clickable.
How can I solve this problem?
You are not properly escaping quotations
Replace:
onclick='location.href = 'index.php';'
with:
onclick='location.href = \'index.php\';'
You need to escape the single quotes as they are mixing up with each other.
Corrected Code:
<?php
if (isset($_SESSION["username"])){
echo "<li class='xy'><button class='x' onclick='location.href = \'index.php\';'>Logout</button></li>";
}
else {
//my login button...
}
Another solution can be not to write HTML in PHP.
PHP and HTML can be embedded into each other without any restriction.
You are embedding HTML into PHP. Embed PHP in HTML:
<?php
if (isset($_SESSION["username"])){
?>
<li class='xy'><button class='x' onclick="location.href = 'index.php'">Logout</button></li>
<?php
}
else {
//my login button...
}
If you just want to send the user to an URL target (index.php in your example) use a link, instead of re-inventing a link and simulating it using JS. Style the link to look like a button. (There are plenty CSS examples on the web on how to do that.)
<?php
if( isset( $_SESSION["username"] ) ) {
echo '<li class="xy"><a class="button x" href="index.php">Logout</a></li>';
}
else {
// my login button...
}
I'm using the basic way to doing the hover image as the CSS method doesn't work for me. Current I'm using the if/else statement to do so. If the contain the URL like abc.com it will hover the image.
But now I only can hover the group url but if there is sub categories in groups I won't able to hover, how can I do it all the activity inside the group, the image will hover?
How to doing if the URL contain the words or path. For example abc.com/groups/* it will hover the groups. Similar like we doing searching in MySQL the words/variable as using "%".
<?php
$request_url = apache_getenv("HTTP_HOST") . apache_getenv("REQUEST_URI");
$e = 'abc.com/dev/';
$f = 'abc.com/dev/groups/';
$g = 'abc.com/dev/user/';
?>
<div class="submenu">
<?php
if ($request_url == $e) {
echo '<div class="icon-home active"></div>';
} else {
echo '<div class = "icon-home"></div>';
}
?>
<?php
if ($request_url == $f) {
echo '<div class="icon-groups active"></div>';
} else {
echo '<div class = "icon-groups"></div>';
}
?>
</div>
I propose a javascript way to do so, with jQuery
$("a[href*='THE_URL_PATTERN_YOU_WANT_TO_MATCH']").children(".icon-home").addClass("active");
BTW, it is NOT a good idea to wrap a div into a a tag.
i'm creating a simple slideshow. 4 images coming from db by php stored in a div called home_gallery_thumb with relative position and the images are wrapped inside anchor tag trying to change them with a next and previous buttons but it jumps to the third image then everything stops completely though it works without any problem if these images are static not coming from the db here's the div fetching images
<div class="home_gallery_thumb" style="background-color:#006; position:relative;">
<?php
require('_req/base.php');
$getImgsQ = "select Photo_Name from photos order by Photo_ID DESC limit 4";
$getImgsR = mysql_query($getImgsQ);
while($galleryRow = mysql_fetch_array($getImgsR)){
?> <a class="galleryLink" style="position:absolute;" href="products_large/<?php echo $galleryRow['Photo_Name']; ?>"><img src="products_thumb/<?php echo $galleryRow['Photo_Name']; ?>" /></a> <?php
}
mysql_close($connect);
?>
so now i have links with images inside the div and here's the jq code
$(".home_gallery_thumb a.galleryLink").css("display","none");
$("a.galleryLink:first").fadeIn(500);
var allImgs = $(".home_gallery_thumb a").length;
$(".next").click(function(){
var curImg = $("a.galleryLink:visible").index();
var nxtImg = curImg+1 ;
if(nxtImg == allImgs) { nxtImg = 0; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+nxtImg+")").fadeIn(800);
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible").index();
var prevImg = curImg-1 ;
if(prevImg == -1) { prevImg = allImgs-1; }
$("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
$("a.galleryLink:eq("+prevImg+")").fadeIn(800);
});
});
this code is inside document.ready and that's what i noticed through firebug
first : images load and all other links are : display:none
after clicking next button first link doesn't get display:none style and it jumps to the third link making it visible then everything stops. And the previous button does nothing at all as it doesn't exist
try this, if not work, provide a link to your slide
$("a.galleryLink").hide();
$("a.galleryLink:first-child").fadeIn(500);
$(".next").click(function(){
var curImg = $("a.galleryLink:visible");
var nxtImg = curImg.next();
if(!nxtImg.length) { nxtImg = $("a.galleryLink:first-child"); }
curImg.fadeOut(800,function(){
nxtImg.fadeIn();
});
});
$(".previous").click(function(){
var curImg = $("a.galleryLink:visible");
var prvImg = curImg.prev();
if(!prvImg.length) { prvImg = $("a.galleryLink:last-child"); }
curImg.fadeOut(800,function(){
prvImg.fadeIn();
});
});
I have a php page that creates page data from two .txt files (one for info, and one for slideshow images), and creates pagination based on this data. I have a few different categories though - so I don't want all the work sharing the same pagination. I would like the user to be able to select different categories from a menu, and the page data txt files will change.
I was wondering if there is a script which can simply change the name of the .txts file when a link in the menu is clicked, and go to the first page of that?
Here is my current setup, at start of document:
<?php
$data=file("brief.txt");
$pages=0;
foreach($data as $temp){
$x=explode("|",$temp);
if($x[0]>0){
$pages=$pages+1;
}
}
if($_GET['p']){
$page=$_GET['p'];
}
if($_GET['i']){
$index=$_GET['i'];
}
if($index == "p"){
$page=$page-1;
}
if($index == "n"){
$page=$page+1;
}
if($page < 1){
$page=1;
}
if($page > $pages){
$page=$pages;
}
$line=$data[$page-1];
$fields=explode("|",$line);
?>
Slideshow images (from work.txt)
<?php
echo"
<div id='portfolioslider'>
<div class='slider'>
";
$photos=file("work.txt");
foreach($photos as $image){
$item=explode("|",$image);
if($item[0]==$fields[0]){
$photo=trim($item[1]);
echo"<div><img src='images/work/$photo' alt='' /></div>\n";
}
}
echo"
</div>
</div>
"?>
Information (from brief.txt)
<?php
echo"
<div id='overview'>
<h3>{$fields[1]}</h3> </br></br>
<h3>Project Overview:</h3> {$fields[2]}</div>";
echo"
<div id='skills'><h3>Skills:</h3><ul>{$fields[3]}</ul></div>
";
?>
I'm not sure if I understand exactly what you're asking, but to rename on a click, you could have html like so:
Then on page.php, have a script that renames the txt file:
<?php
if(isset($_GET('file'))) rename("/blank.txt", "/" . $_GET('file') . ".txt");
?>
Then to go to that page, I guess you could have a header function to go to another page, or you could just open the txt file on page.php:
<?php
if(isset($_GET('file'))) {
$data=file("/" . $_GET('file') . ".txt");
foreach($data as $temp){
echo $temp;
}
}
?>
The header function could go to a dynamic page that pulls the filename with $_GET:
<?php
if(isset($_GET('file'))) header("Location: http://www.example.com/dynamic?page=" . $_GET('file'));
?>
And that page could run the foreach loop.
so after all the confusion here (my apologize)
here is what I have figure I will just re-write it here and make it clear and just for the future notes (I know people won't really need this) but then will just be like a case study
what I was actually wanted is like this example
***********************************************
** link1 - link2 - link3 - link4 - link5 **
***********************************************
** content here, here's the words **
** content here, here's the words **
** content here, here's the words **
** content here, here's the words **
** content here, here's the words **
***********************************************
then I found it something like this
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<?php
if(!isset($HTTP_GET_VARS['link'])){
$link = 1;
} else {
$link = $HTTP_GET_VARS['link'];
}
if ($link == 1) {
echo "<div id="player1"blah blah with video link1";
} elseif ($link == 2) {
echo "<div id="player2"blah blah with video link2"";
} elseif ($link == 3) {
echo "<p>Some text about link 3</p>";
} elseif ($link == 4) {
echo "<p>Some text about link 4</p>";
} else {
echo "<p>Some text about link 1</p>";
}
?>
then #royrui clarify me that
the solution should be like this
<?php
if(!isset($_GET['link'])){
$ch = 1;
} else {
$ch = $_GET['link'];
}
if ($link == 1) {
echo "<div id='player1'blah blah with video link1'";
} elseif ($link == 2) {
echo "<div id='player2'blah blah with video link2'";
} elseif ($link == 3) {
echo "<p>Some text about link 3</p>";
} elseif ($link == 4) {
echo "<p>Some text about link 4</p>";
} else {
echo "<p>Some text about link 1</p>";
}
?>
so if you notice first thing I changed from if(!isset($HTTP_GET_VARS['link'])){
to if(!isset($_GET['link'])){
in the div all it was " so I change it to ' and now the div can be place in echo
and now every single time when people click on link 1 then that div will be place and 2 and so on.
I know it was my problem with the confusion questions but then I really appreciated with all the help from here.
I want to vote the best answers but all it was useful so I just thought of put together to answer myself in this first post
Thanks once again!
The trick is that your PHP code is running on the server and not the browser. You need a combination of code running on both sides to accomplish this (known as AJAX).
Here is some example JavaScript code (no library needed) to replace the contents of a div:
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function getLinkText(linkNo) {
http.open("GET", "getLinkText.PHP?link=" + linkNo, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('divLinkText').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
<p>Link1</p>
<div id="divLinkText">
This will be replaced by the AJAX Call.
</div>
The next step is to make a PHP page that returns the contents of the DIV tag at getLinkText.PHP?link=1. I'll leave that to you as it seems you have that part down.
As others have mentioned, adding the jQuery library makes this code a lot more compact and I recommend it.
I'm doing this with a javascript library called jquery, because the way you specify it, it looks like you want some AJAX functionality. You can do this in javascript without the use of a library, but then you have to work around quite some browser incompatibilities.
For this example, I will assume that all your navigation items are placed in an element with an id of nav.
then your javascript code should look like this:
$('#nav a').click(function(){
$('#destinationdiv').load($(this).attr('href'));
});
The php looks like this: First, you make your main php file, such as page.php or whatever.
<?php
$secure=true; //This will ensure that users can't request any content without this script in between.
$pagenum = (isset($_GET['page'])) ? $_GET['page'] : 1;
require('page'.$pagenum.'.php');
?>
and now, you add php files for every page of content that you want to serve, they should all look like this:
<?php if(!$secure) die("access denied!"); ?>
<h1>My awesome page content!</h1>
<p>bla bla bla</p>
so, to glue it all together
On your server, you should have files for each page you want the user to ba able to view. In your navigation, your a tags should have a href tag of page.php?page=1 or whatever. So, if you have a file called page1.php, and then put page.php?page=1, the javascript will stop the link from actually linking to that file. Instead, it will make a request to your server for page.php with a get variable called page, with a value of 1. the php script now looks on the server for a php file called page1.php and includes that in the current script. When PHP is done executing, the output will be sent back to the browser. Than the javascript load function that we called to request the page will insert it into the div we selected.
<li>Link 1</li>
<li>Link 5</li>
</ul>
<?php
if(!isset($_GET['link'])){
$link = 1;
} else {
$link = $_GET['link'];
}
if ($link == 1) {
echo "<div id='player1'>content here, here's the words plus html'video link1'</div>";
} elseif ($link == 2) {
echo "<div id='player1'>content here, here's the words plus html'video link1'</div>";
} elseif ($link == 3) {
...
} else {
echo "<p>Some text about link 1</p>";
}
?>