I have just changed my website to be dynamic switching from html to php for a lot of my pages. In doing so I have lost a scroll effect I was using in jquery. The function allowed the user to click on the appropriate link on the header and it would scroll to the class linked to that button. In making the page dynamic each div on the page now has the same id. I was wondering if there was a way to set the buttons to scroll to specific pixels, or potentially using nth child?
function ScrollTo(id, speed)
{
$('html, body').animate({
scrollTop: $(id).offset().top
}, speed);
return false;
}
<div class="header-case2">
<a class="case2" onclick="ScrollTo('.case-div-1', 599)">Technology</a>
<a class="case2" onclick="ScrollTo('.case-div-2', 599)">Local Authority Modules</a>
<a class="case2" onclick="ScrollTo('.case-div-3', 599)">Data Channel</a>
<a class="case2" onclick="ScrollTo('.case-div-8', 599)">Housing Solutions</a>
<a class="case2" onclick="ScrollTo('.case-div-4', 599)"> Tenant Engagement</a>
<a class="case2" onclick="ScrollTo('.case-div-6', 599)">H&A Management</ a>
</div>
$query = $handler->query('SELECT * FROM solutions');
$results = $query->fetchAll(PDO::FETCH_ASSOC);
for ($i=0; $i < count($results); $i++) {
echo '<div class="case-div">';
echo '<h2 class="upper-blue">'.$results[$i]['headline'].'<br>'.'</h2>';
echo '<p class="pp13">'.$results[$i]['text'].'<br>'.'</p>';
echo '</div>';
echo '<div class="pa7"></div>';
}
You are missing your increments on your divs -
this can be easily fixed by adding your $i (your index of the for loop) so your divs classes -
echo '<div class="case-div-'.$i.'">';
Or maybe
echo '<div class="case-div-'.$i+1.'">';
since it starts on zero - This will make your onclicks work again.
Related
I'll try to be clear. My problem is that i'm using php to get data from mysql. The table has more than one record. To show table records i'm using a while loop that as a condition has mysqli_fetch_array(). The records from the table must be shown in an echo(because i want to show them as html on the page), but every div generated from the while loop has a link to send me to another page, and if the client clicks on that link it will get the current divs information(after the table in database has more than one record the informations will be different) to be shown at the next page. Hope you understood it. Thanks in advance!
while($rows1 = mysqli_fetch_array($query1,MYSQLI_ASSOC))
{
echo "<div class=\"row\">
<div class=\"col-md-6\">
<div class=\"thumb\">
<figure>
<img src=\"images/extra-images/room-grid1.jpg\" alt=\"\"/>
<figcaption>
<a rel=\"prettyPhoto[gallery2]\" href=\"images/extra-images/room-grid1.jpg\">
<i class=\"fa fa-search\"></i>
</a>
</figcaption>
</figure>
</div>
</div>
<div class=\"col-md-6\">
<div class=\"text\">
<h4>".$rows1['Dh_lloji']."</h4>
<p>".$rows1['Dh_Pershkrimi']."</p>
<ul class=\"room-grid-meta\">
<li>Max: ".$rows1['Dh_Kapaciteti']."</li>
<li>Size: ".$rows1['Dh_madhesia']."</li>
<li>Floor: ".$rows1['Dh_Kati']."</li>
</ul>
<div class=\"retail room-grid-retail\">
<span>
<sup>$</sup>
".$rows1['Dh_cmimi']."
<sub>night</sub>
</span>";
if(isset($_SESSION['Emri_Mbiemri']) != '')
{
echo "<a class=\"btn-3\" href=\"payment.php\">Book now</a>";
}else{
$error = "You must be logged in to book!";
}
echo "<br>".$error."</div>
<div id=\"price_room\">".$rows1['Dh_cmimi']."</div>
</div>
</div>
</div>";
$count++;
}
Looks like you need at least your custom counter, that will be increment inside cycle, and set div's id based on this counter plus use it in generated link
I made a solution for my problem and i wanted to share it with you guys. I gave a $count to the links defining every link the while loop generates...
<a class=\"btn-3\" href=\"payment.php?id=$count\">Book now</a>
After that i used a multidimensional array to store the current divs variable(in my case rooms price, the count, and the id) of the room from database...
$room_prices[$count][0] = $rows1['Dh_cmimi'];
$room_prices[$count][1] = $count;
$room_prices[$count][2] = $rows1['ID_Dhoma'];
After the client click a specific link he will get the id so i can make a search at my multidimensional array for the price and the id of that room..
for($i = 0; $i < $count; $i++)
{
if($_GET['id'] == $room_prices[$i][1]){
$sess_room_price = $room_prices[$i][0];
$sess_room_id = $room_prices[$i][2];
}
}
After i get these i store them at the global session variables to use them at the other page...
$_SESSION['Rooms_Price'] = $sess_room_price;
$_SESSION['Rooms_ID'] = $sess_room_id;
So this did the work for me... Hope this helps others.
I am trying to implement pagination functionality to a page. I have custom post types and I have looped through and gathered all the posts for this page. I display the first post and hide the rest and I have next/previous buttons that will show the next post and hide the current post. It seems to be working, however I am not able to view all the posts - only 2 of them.
Here is my code:
<?php
$currProj = 1;
$countposts = 3;
?>
<?php if ($countposts>1) {
$prevID = $currProj - 1;
if ($prevID <= 0) {
$prevID = $countposts;
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php } else {
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php
//$currProj = $prevID;
}
echo $currProj; //This outputs 3 where it should be 1
$nextID = $currProj + 1;
if ($nextID > $countposts) {
$nextID = 1;
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php } else {
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php
//$currProj = $nextID;
}
} ?>
The javascript function is working correctly, the issue seems to be the $currProj variable. I think the issue is my onClick attribute in the tag - is there a better way of having an onClick event that will give my variable a different value? Or a way of checking if this link has been clicked then give the currProj the value of prevID/nextID ?
I have been stuck on this for a while now and I don't seem to be getting anywhere. Any help would be greatly appreciated.
Your code above seems to be conflating what's happening on the server side and what's happening on the client side. Anything wrapped in <?php ... ?> is going to be executed on the server and then sent to the client as HTML -- for example, this line:
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
will end up being sent to the client with all of the PHP interpreted:
<a class="btn-previous" href="javascript:showProject(1,3)" onclick=""> < Previous </a>
The key thing here is this you're not re-running the PHP when you click -- the client is completely agnostic to the PHP ever having been there. Every time you click the Previous button, its href attribute is still javascript:showProject(1,3).
You have two options; namely, you can go back to the server and have it re-render the page whenever you click the next / previous button by including those variables as parameters to your page, e.g., get the current project from the URL and link like so:
$currProj = ( $_REQUEST['currProj'] ? $_REQUEST['currProj'] : 1 );
...
<a class="btn-previous" href="<?php echo '[your_url_here]?currProj=' . $prevID ?>">
However, it looks like you're interested in doing this without ever pinging the server again. In that case, you'll need to store, reference, and update these variables in javascript. There are probably a thousand ways to do this; the closes to what you seem to want to do would be to have your showProject function take no arguments and instead figure out what it needs to do based on the value of the current project, something like
var currProj = <?php echo $currProj; ?>; // this initializes the JS variable currProj from whatever it is in PHP when the server sends the page contents
var countposts = <?php echo $countposts; ?>; // initialize this too
var showPrevProject = function showPrevProject() {
// hide the current project using jQuery; assumes the DOM element you want to hide is given ID #project-[currProj]
$('#project-' + currProj).hide();
// Update the current project variable in JS; scope should update globally
currProj = currProj - 1;
if (currProj === 0) { currProj = countposts; }
// Now show that element
$('#project-' + currProj).show();
}
Then in your link you can use showNextProject or showPrevProject as appropriate.
More generally, though, it's probably better to include your javascript as a separate file and register event handlers to deal with this sort of thing. I would also recommend checking out jQuery, which is a powerful library that greatly simplifies accessing and manipulating DOM elements.
What about creating a HTML hidden input for storing those values?
<input type="hidden" value="<?php echo $currProj ?>" id="currProj">
So you can access it and modify it in client side with javascript or jQuery. If you want a solution server-side you can do it with ajax and POST or GET requests.
Maybe this isn't what you are looking for (modify the php attributes) and I misunderstood you. Let me know if this is your case.
hi guys i am trying to do this like i have 5 frames (fancy border) and i have items list. when items load every item load different frame. when 5 frame done then 6th frame repeat frames list. below my script
<?php
$allgfts=mysql_query("select id,image_url from {$statement} order by id limit {$startpoint}, {$limit}");
while($gfts=mysql_fetch_array($allgfts))
{
$id=$gfts['id'];
$image=$gfts['image_url'];
?>
<div id="pic-1">
<div class="thumbnail-item">
<?php echo '<img src="images/'.$image.'" alt="" width="161" height="161" class="thumbnail g-size" />'; ?>
<span><?php echo 'Readmore';?></span>
<?php echo '<a class="gtbtn" href="g_buy.php?id='.$id.'">Get This</a>';?>
</div>
</div>
<?php
}
?>
I think you're asking how to echo a list of images, with that list wrapping to a new line every fifth item.
Given an array of results from a table (consider using PDO, by the way), I would do the following:
//$arr being the array
$x=1; //start counter
$list = '<ul>'; //using a list, because that's what it is
for($i=0;$i<count($arr);$i++) {
$list.='<li class="thumbnail-item">';
$thumb ='<a href="g_detail.php?id='.$arr[$i][id].'">';
$thumb.='<img src="images/'.$arr[$i][image_url].'" alt="" class="thumbnail g-size" /></a>';
$thumb.='<span><a href="g_detail.php?id='.$arr[$i][id].'>Readmore</a></span>';
$thumb.='<a class="gtbtn" href="g_buy.php?id='.$arr[$i][id].'">Get This</a>';
$list.=$thumb;
$list.='</li>';
if($x%5 == 0)||($x==count($arr)) {
$list.='</ul>';
if($x<count($arr)) {
$list.='<ul>';
}
}
$x++;
}
echo $list;
This is untested, but broadly speaking should work.
Use the remainder operator("%"). I don't know what your table structure looks like, but I am going to assume your product ID loads in sequential order, starting with 1.
In your WHILE loop, use the following:
$remainder = $id % 5;
if($remainder == 1){
//load my DIV with frame 1
}
else($remainder == 2){
//load my DIV with frame 2
}
......
I have something that im currently working on, however it appears that the $_GET doesn't completely work.
I have a JavaScript light box that brings up an image in a little window, this works however i can only guess that it is using the same URL over and over again.
However when i view the source for the page (and even click one of the links in the source) it will display the correct data.
But the lightbox only seems to display the first image.
This is the JavaScript
<script>
//Checkes if any key pressed. If ESC key pressed it calls the lightbox_close() function.
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
</script>
<script>
//This script makes light and fade divs visible by setting their display properties to block.
//Also it scrolls the browser to top of the page to make sure, the popup will be on middle of the screen.
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
<script>
//This makes light and fade divs invisible by setting their display properties to none.
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
I wont show the CSS i dont think thats relivant (If someone wants it then ask away)
The relevant part that creates the links is this, its part of a ForEach statement all PHP
$i = 0;
foreach ($nrows as $nrow)
{
$id = $nrow['id'];
$rid = $nrow['RaidID'];
$bid = $nrow['BossID'];
$normal = $nrow['NormalKills'];
$heroic = $nrow['HeroicKills'];
$boss = substr($nrow['BossName'], 0, 3);
$p1 = $id + $bid.".php";
$image = $boss . $p1;
#echo $image;
echo $bid;
if ($oid != $rid)
{
$i = 0;
}
if ($i == 0) {
?><td style="width: 176px;"><center><b><?php echo $nrow['raid']; ?> </b></center></td> </tr><?php
$i++;
}
?><tr><td style="width: 176px;"><div align="left"><?php echo $nrow['BossName']; ?><div id="light"><img src="bossdata/template.php?boss=<?php echo $bid;?>"></a></div><div id="fade" onClick="lightbox_close();"></div>
</div>
<?php
if ($heroic == 0)
{
if ($normal > 0)
{
echo '<img src="images/whiteskull.png" align="right" alt="Normal Kill">';
}
else
{
echo '<img src="images/redx.png" align="right" alt="Not Killed">';
}
}
else
{
echo '<img src="images/redskull.png" align="right" alt="Normal Kill">';
}
?>
</td></tr><?php
$oid = $id;
}
Now this all works, and it actually displays an image with data, however no matter what link i click the boss data is always from the first one on the list.
To me this means that the data is getting through, and reaching the the right parts on image so its "Working", but all the links do the same thing and show the same data :(
*Removed last code Bulk
You have multiple div with the same ID "light" since you create them in a foreach loop.
<div id="light">
Your function lightbox_open() opens all the divs that have id "light".
document.getElementById('light').style.display='block';
That's why you always see the first lightbox. Because the others are behind the first one.
you should try something like this :
function lightbox_open(elem){
window.scrollTo(0,0);
elem.getElementByClass('light').style.display='block';
elem.getElementByClass('fade').style.display='block';
}
And change this :
<a href="#" onclick="lightbox_open();">
By this :
<a href="#" onclick="lightbox_open(this);">
And replace id by class in your div definition :
<div class="light">
$_GET is working correctly in your code.
The issue is in the way you are combining JavaScript and PHP in the second code box. First, all of your divs have the same ID: "light" which is wrong because they all IDs are meant to be unique within the HTML document. You need to identify them uniquely, for example appending the BossID to them.
After identifying each div uniquely you'll have to edit lightbox_open and lightbox_close so they can receive the BossID of the divs that you want to show and hide.
Question is on how to work with php variables in a webpage, using javascript/jquery. The following code represents the scenario.
PHP Code Snippet for pagination -
if($current_page>1)
$previous = $current_page - 1;
else
$previous = $current_page;
if($current_page==$num_pages)
$next = $current_page;
else
$next = $current_page + 1;
//the line below is for right arrow link - go to next page
<?php echo '<a href="gallery.php?p=' .$next. '">
<img src="Arrow-Right.png" width="16" height="16" title="Next Page" /> </a>';
?>
//the line below is for left arrow link - go to previous page
<?php echo '<a href="gallery.php?p=' .$previous. '">
<img src="Arrow-Left.png" width="16" height="16" title="Previous Page" /> </a>';
?>
Now my question -
I want to disable the left and right arrow links based on the condition -
if $current_page = $num_pages (meaning, if max page has reached), then use javascript to disable the right arrow link
if $current_page = 1 (meaning, if min page has reached), then use javascript to disable the left arrow link
Pretty simple scenario for pagination, but my concern is over how to use the variables correctly, since $current_page, $num_pages etc..are all PHP variables, and I assume they cannot be accessed readily in any Javascript code. So how do i access them, so that I can use JS to further work on link enabling/disabling or css styling using js etc...
Appreciate any pointers on the above.
<?php
$next_page = 12;
echo "<script>var next_page=$next_page;</script>"
Javascript variable next_page will be ready for use.
<?php
echo '<script>pagenum=' . $num_pages . ';current_page=' . $current_page . ';</script>';
?>
Just echo your values into javascript:
<script>
var jsvarname = "<?php echo $phpvarname; ?>";
</script>
I assume you know that javascript is client side and php server side, and what that means?
If you don't want the variables showing up in when the page source is viewed, you could store the information in a cookie.
Be aware that it's trivial to look at the contents of a cookie, however.