I'm currently working on a wordpress site and i'm using the same page-templates on two pages. The page-template file is single.php . Now i've got a history back button that needs to be on one of the pages and not on both. Also i'm using the permalinks. Well since i'm not that good at php i'm going to ask you to help me out. I've already found the following code on the internet but i can't get it to work:
The php:
<?php
if (strpos($_SERVER["REQUEST_URI"], "localhost:8888/sunbook/reader-comments/") >= 0) {
$historyback_class = "showme";
}
else {
$historyback_class = "hideme";
}
?>
The html:
<div id="historyback" class='<?php echo $historyback_class; ?>'>
<script>
function goBack()
{
window.history.back()
}
</script>
<input type="button" value="Back" onclick="goBack()">
</div>
The css:
#historyback { margin-left: auto; margin-right: auto; width: 95%; max-width: 920px; color: #bfbfbf; font-size: 23px; font-family: 'RobotoLight', Arial, sans-serif; line-height: 28px; margin-bottom: 0px; }
.hideme { display: none; }
.showme { display: block; }
I think the problem is in the requested uri because everywhere I see they are calling a php file. Which in my case seems impossible because the templates are the same so that itsn't going to work.
Related
I have set up an accordion to present terms and conditions on a website which works until I attempt to pull a page from elsewhere on the server.
My coding so far is as follows:
CSS:
/* Accordion controls & Styles */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
Accordion:
<button class="accordion">Standard Terms</button>
<div class="panel">
<p>
<?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?>
</p>
</div>
and JavaScript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Standard terms page to render:
<?php include(SHARED_PATH . '/public_header.php'); ?>
<ol>
<h3><li>What we provide</li></h3>
</ol>
<?php include(SHARED_PATH . '/public_footer.php');?>
Everything works as it should until I put the <?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?> in if I remove it and place outside of accordion it renders fine and displays the content.
Only inside accordion does it stop everything in its tracks.
It doesn't render the rest of the page, and no errors are thrown.
Any Ideas?
Sorry found the answer, realised my mistake after posting the standard terms page. header and footer have already been called by previous page.
How would I be able to load all my login/profile.php files into one specific div without affecting or reloading the rest of my website? I have thought of using $_GET variables to keep the parent url the same and I have used this same tactic for my navigation menu where all my pages load in my #back_drop div.
Below I put together a very basic version of what my site looks like and as you can see the #side_panel is where I would like all my login/profile files to load into while the nav, content, and footer is unaffected by what the #side_panel does. I want to be able to login, logout, get errors, reset password, etc inside this div without it reloading the main portion of my site.
I have an index.php file which is my main index with includes for my header, aside, content, and footer and then I have an entire folder for my php files relating to my login form and other files that will load into my main content page. I didn't want to separate each include so I have them below with comments before each include noting that they are separate so you can see what I am working with.
I am currently loading my login files using an iframe because it is the simplest way to get what I am looking for but have found it very irritating at times especially when I logout and pages requiring to be logged in are still present unless the page is refreshed which seems to be a major security issue.
I have tried to use an include function into my #side_panel but if I attempt to login in, it either won't connect or will end up logging in through the parent url depending on how I edit my login.php file. I am thinking of using $_GET variables but am not sure if that would be a security issue if the variables are in the url but cannot think of any other way
index.php <-- My main index page
<?php
$page = $_GET['page'];
if (!$page) {
$page = 'Home';
}
include('includes/header.php');
echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";
include('includes/footer.php');
?>
aside.php <-- where my login/profile files are included from
<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>
$(document).ready(function(){
$("#show_login").click(function(){
$("#side_panel").toggle("slide");
$("#side_panel").toggleClass("slide");
$(this).find('img').toggle();
if ($("#side_panel").hasClass("slide")) {
$("#back_drop").animate({'padding-left': '0'}, 300);
} else {
$("#back_drop").animate({'padding-left': '230px'}, 300);
}
});
});
* {
margin: 0;
padding: 0;
}
a {
outline: 0;
}
body {
width: 100%;
-webkit-box-pack: center;
background-color: #CCC;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header, nav, section, aside, footer, article {
display: block;
}
#big_wrapper {
text-align: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
position: fixed;
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
border-bottom: 2px solid #262626;
border-radius: 3px 3px 0 0;
background-color: #404040;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
z-index: 9999;
}
#back_drop {
background-color: #CCC;
padding-top: 10px;
padding-left: 230px;
max-width: 100%;
}
#content {
border: 5px solid red;
height: 500px;
}
#show_login {
float: left;
width: 24px;
padding-top: 12px;
padding-left: 5px;
height: auto;
cursor: pointer;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#show_login:active {
width: 23px;
padding-top: 13px;
padding-right: 1px;
}
#side_panel {
position: fixed;
background-color: #a19b9b;
color: #000;
margin-top: 54.491px;
width: 230px;
height: 100%;
word-wrap: break-word;
z-index: 9999;
transform: translateX(0);
}
.slide {
transform: translateX(0);
}
#main_section {
clear: right;
text-align: center;
margin-right: auto;
}
#bottom_footer {
clear: both;
text-align: center;
padding: 20px;
background-color: #404040;
}
<!-- header.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
<header id='top_header'>
<nav id="navigation">
<div id="show_login">
<button>Show</button>
</div>
<div id="main_menu">
<!--Navigation header menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";
if ($row==$page) {
echo "class='active'";
}
echo ">$row</a>";
}
?>-->
</div>
</nav>
</header>
</div>
<div id='side_panel'>
<div id='login_contain'>
<!-- aside.php -->
#side_panel<br>
Where my login/profile pages load in
</div>
</div
<!-- This is what is actually in my code. Commented to show in snippet
<?php
echo "<div id='side_panel'><div id='login_contain'>";
include('includes/aside.php');
echo "</div></div>";
?>
-->
<div id='back_drop'>
<div id='content'>
#back_drop<br>
All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
</div>
</div>
<!--footer.php -->
<div class="footer_nav">
<!--Navigation footer menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
}
?>
-->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>
Couple things here:
You will want to use AJAX for this, an iFrame is not suitable for your needs
Not sure how much of your dynamic page system is represented in your sample script but you should check on your page call on the $_GET, that method can be dangerous if someone tests your $_GET and includes a page that shouldn't.
/index.php
<?php
# Create an allow array (or have these in a database)
$public = array(
'home',
'about'
'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>
<div id='back_drop'>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<div id='content'>
<?php include('php/'.$page.'.php') ?>
</div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// On clicking the menu link
$('li > a').on('click',function(e){
// Stop the link from reloading page
e.preventDefault();
// Create ajax
$.ajax({
// Send request as GET
'type': 'get',
// Send to the index page
'url': '/index.php',
// equivalent of ?page={pagename}
'data': {
'page': $(this).attr('href')
},
// When request comes back, find the content and place just the content
// into this page's content
success: function(response) {
// "response" is what is coming back from the ajax all
// Find the content from the returned html
var getContent = $(response).find('#content').html();
// Place it into this page's content id
$('#content').html(getContent);
}
});
});
});
</script>
<?php include('includes/footer.php') ?>
I would like to display a message in a page in case of user summited specific value.
The form:
text form
lots of free space for the message
submit button
PHP:
<?php
echo '<link rel="stylesheet" href="t1.css">';
echo '<div class="csstest">';
echo ' <form action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'" method="post">';
echo ' <input type="text" name="data1" autocomplete="off">';
//this is the form where I want to display error message
echo ' <input type="submit" name="button2" value="buttontest">';
echo " </form>";
if (isset($_POST['button2'])) {
if ($_POST['data1']==1) {
echo '<p id="errormessage">error message</p>';
}
}
echo "</div>';
?>
CSS:
body {
font-family: Arial;
}
.csstest {
padding: 40px;
width: 500px;
height: 200px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #dddddd;
}
.csstest input[type=submit] {
width: 100%;
display: block;
margin-bottom: 20px;
position: relative;
top: 350px;
border-radius: 5px;
}
.csstest input[type=text] {
height: 35px;
font-size: 10px;
width: 100%;
margin-bottom: 10px;
padding: 0 8px;
box-sizing: border-box;
}
.csstestinput.errormessage {
font-size: 16px;
text-align: center;
position: relative;
left: 200px;
top: 250px;
}
How can i display message between the text form and submit button if the user submit a specificed value ?
I am looking like something when you specifiy non standard username at gmail.com, after submit it display error message at the same css div, between the text form and the submit button.
Thank you.
As per your original post https://stackoverflow.com/revisions/35632309/1 where you kept on editing from my comments.
Well, at first you were assigning here if ($_POST['data1']=1) rather than comparing if ($_POST['data1']==1) which you edited after the fact.
Then, you were using the wrong name attribute for the submit button, so nothing inside that conditional statement if (isset($_POST['buttontest'])) {...} would have fired up as per
<input type="submit" name="button2" value="buttontest"> being the originally named button and error reporting would have thrown you something about it, being an undefined index buttontest notice.
Then you're referencing an id rather than a class for <p id="errormessage">.
As per the .csstestinput.errormessage CSS rule.
Which should read as <p class="errormessage">.
However, if you want to keep it as an id, then you will need to modify your CSS rule to read as #errormessage but that's your decision entirely.
1) Double Quotes missing from last echo.
Change: echo "</div>';
To: echo "</div>";
2) Button too far from top, no where near text input.
Change:
.csstest input[type=submit] {top: 350px;}
To:
.csstest input[type=submit]{top: 100px;}
3) Stylesheet references a class that does not exist. Change: .csstestinput To: .csstest
4) Stylesheet references a class that does not exist. Change: .errormessage To:#errormessage.
Personally I would place errormessage paragraph tag exactly where I wanted it and then use javascript in the IF statement to change visibility as needed. Rather then mess with relative positioning in CSS...I've found that technique useful for when I may wish user to stay on the page, but want to remove/change the error message due to a different text input. This is what I would change:
In php file:
//this is the form where I want to display error message
and:
if (isset($_POST['button2'])) {
if ($_POST['data1']==1) {
echo '<p id="errormessage">error message</p>';
}
}
To:
echo '<p id="errormessage">error message</p>';
and:
if (isset($_POST['button2'])) {
if ($_POST['data1']==1) {
echo '<script>document.getElementById("errormessage").style.visibility="visible";</script>';
}
}
In css file:
.csstestinput.errormessage {
font-size: 16px;
text-align: center;
position: relative;
left: 200px;
top: 250px;
}
To:
.csstest #errormessage{
font-size: 16px;
text-align: center;
visibility: hidden;
}
Not sure if this is too much info, but trying to help.
Check this url please http://x2t.com/262032
You can see how does facebook button work right side of navigation menu.
This code works with this button.
CSS
div.social-wrapper {
float: right;
text-align: right;
font-size: 15px;
font-weight: bold;
margin: 11px 15px 0px 0px;
}
div.social-wrapper-text {
margin-bottom: 10px;
}
div.social-icon:first-child {
margin-left: 0px;
}
div.social-icon {
float: left;
margin-left: 11px;
opacity: 0.55;
filter: alpha(opacity=55);
cursor: pointer;
}
I need the code for two facebook buttons with mouse over and out function.
On mouse over guest will see for example white FB button and on mouse over black one.
How to do this?
<button class="class_of_button"> like us on facebook </button>
.class_of_button {
background: url('source of fb image');
}
.class_of_button:hover {
background: url('source of black fb image');
}
Here my personal solution for this:
HTML:
<div class="social-icon">
<a href="CHANGE THIS LINK TO YOUR ONE">
<img src="MOUSE_OFF.jpg"></img>
<img src="MOUSE_ON.jpg"></img>
</a>
</div>
CSS:
<style type="text/css">
div.social-icon
{
width: 600px; /* Width of IMG, TO BE CHANGED *
height: 800px; /* Height of IMG, TO BE CHANGED *
}
div.social-icon img:nth-child(2)
{
display: none;
}
div.social-icon img:first-child
{
display: block;
}
div.social-icon:hover img:nth-child(2)
{
display: block;
}
div.social-icon:hover img:first-child
{
display: none;
}
</style>
Just put the CSS into the
and the html where you would have placed your button.
And don't forget to change the mentioned values in the css and html.
And yes: You have to create the images yourself, so show yourself some Paint skillz~
I don't even know if I'm doing this correctly, but I thought I'd ask to get a better opinion. Basically what I've done is this: created an information/navigation bar that expands depending on tab clicked by the user. What I'm trying to add is the functionality to expand a certain tab and be forwarded to it (like what this link would do: <a href="#contactus">) based on a link earlier on the same page. I can't seem to do it. The tab that should be opened is contained within a <ul><li> list and is hidden. I'll include the code:
<div id="tab1">
<ul class="tablinks">
<li><span>Check-Out</span></li>
<li><a onClick="show('tab2')">Payment</a></li>
</ul>
<table>
<tr>
<td><img alt=Check-Out src="http://link.com/images/checkouticon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
<!-- tab 2 -->
<div id="tab2">
<ul class="tablinks">
<li><a onClick="show('tab1')">Check-Out</a></li>
<li><span>Payment</span></li>
</ul>
<table>
<tr>
<td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
This is the CSS that affects it:
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}
#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}
ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}
ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}
ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}
ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}
ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}
ul.tablinks li a:active{
text-decoration:underline;
}
div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}
div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}
And last but not least this is the code that is within a .php external file that affects the hidden aspect of the tabs:
function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
//document.getElementById(id).style.display = "inline";
document.getElementById(id).style.display = "block";
}
}
function hide(){
if(ie5 || ns6){
document.getElementById('tab1').style.display = "none";
document.getElementById('tab2').style.display = "none";
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "none";
document.getElementById('tab5').style.display = "none";
document.getElementById('tab6').style.display = "none";
document.getElementById('tab7').style.display = "none";
}
}
So the idea is to be able to insert a link earlier in the document to open the "Payment" tab. I tried something like this: Payment Information and changed the tags for the list to: <li><span name="payments">Payments</span></li>. This didn't work unless I had already clicked on the "Payments" tab and opened it and then clicked on the link. Then my screen would scroll down and focus on that area. Is there a way to have the screen scroll down and view the <span> without having to 'open' it first?
Thanks for all your help in advance. And I should note, that while I do have some ability with HTML, Javascript, and PHP, I'm still learning and don't know all of the best ways of doing things.
The best (and easiest) way to code this is to use a JS framework like jQuery. It'll help tremendously in normalizing the browser differences.
But if that's not an option, let's try to fix the existing code. Payment Information will jump to an element with the id="payments", not name. Once you fix that, add an onClick="show('tab2')" to that <a>.
In the show function, what is the point of this code if(ie5 || ns6)? This is basically saying, if it's IE5 or Netscape6, then show the element (assuming the variable ie5 and ns6 are set properly somewhere of course). Try removing this, I don't think you need it.