I'm trying to display a webpage with the following tabbed style navbar when clicked :
But I getting this result, even if I click on the links several times :
(kindly ignore texts, those are examples from a reference book)
Below is my code :
<?php
// complete code for index.php
// reporting error if any
error_reporting(E_ALL);
ini_set("display_errors", 1);
// main code
include_once "classes/page_data.class.php";
$pageData = new stdClass(); // (old) declaring a new anonymous class object
$pageData->title = "My Portfolio"; // setting title name;
$pageData->content = include_once "views/navigation.php"; // setting content to page_data() class object
$pageData->css = "<link href='css/layout.css' rel='stylesheet' />"; // CSS stylesheet added from css folder
//changes end here
// URL variable starts here
$navigationIsSet = $_GET['page']; // Click to get page URL via variable 'page' in $_GET['page url'] superglobal array
if ($navigationIsSet) // checking if a page has been clicked
$fileToLoad = $_GET['page']; //get the clicked page's URL value
else
$fileToLoad = 'skills'; // default page view
$pageData->content .= include_once "views/$fileToLoad.php"; // concatenate URL in the content
//URL variable ends here
//new code below: dynamic style added below
$pageData->embeddedCSS = "
<style>
nav a[href *= \'?page=$fileToLoad\']:visited{
padding:3px;
background-color:white;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
</style>";
$page = include_once "templates/page.php"; // linking pages
echo $page;
?>
and this is from layout.css file :
body{
background-color: aliceblue;
}
nav {
background-color: #CCCCDE;
padding-top: 10px;
}
nav a{
display: inline-block;
text-decoration: none;
color: #000000;
margin-left: 10px;
}
nav a:hover {
text-decoration: underline;
font-style: italic;
}
Also if you want to check page.php :
<?php
return "<!DOCTYPE html>
<html>
<head>
<title>$pageData->title</title>
<meta http-equiv='Content-Type' content='test/html; charset=utf-8'/>
</head>
<body>
$pageData->content
$pageData->css
</body>
</html>";
?>
Now that reference book has almost same code to generate the snapshot 1, while my code doesn't show the tabbed nav bar while the user clicks on the links.
Can you please help me to find out what's wrong with the index.php dynamic style ? I'm using PHPStorm with PHP 7.2 as php IDE.
Thanks in advance
You should add a active class to the current selected tab. In that css class you can change the style for only that tab. Below here you see how to add the active class with an if statement to a li object in your navbar. Then in your style.css you can change i.e. the background-color for that class.
<li>
<a href="<?php echo base_url();?><?php echo $this->uri->segment(1) ?>/home"
class="<?php if($this->uri->segment(2)=="home"){echo 'active';}?>">
Home
</a>
</li>
I think I found my answer accidentally ;)
before $page = include_once "templates/page.php"; // linking pages
add this echo "$pageData->embeddedCSS";
this works exactly as I wanted. :D
Related
I am attempting to change some css to display:none; when the user is logged in.
It's just a "Sign In / Register" link. ( so when the user is logged on they wont see it)
<span class="hide-this-class-when-logged-in">Sign Up / Register</span>
I have copied my _header.php file into my child theme, and replaced
<body <?php body_class(); ?>>
with this
<body<?php echo (is_user_logged_in() ? ' class="logged-in"' : ''); ?>>
thinking that this would provide an additional .class for logged in users, so I could then
.class {display:block}
.class .logged-in {display:none}
but the body got all screwed up,( everything got a float left; ) and I am back to the drawing board.
Any input on this topic, or how to use body_class() with x theme would be really appreciated. thanks.
Use this in your header.php file.
<body <?php body_class(); ?>>
This built in function already tracks user status, as well as a number of other useful states like page template, page id, etc.
Example of output:
<body class="home page page-id-403 page-template page-template-page-home logged-in admin-bar no-customize-support custom-background group-blog">
https://codex.wordpress.org/Function_Reference/body_class
SOLVED!!!
<body
<?php
if ( is_user_logged_in() ) {
body_class('logged-in');
} else {
body_class('logged-out');
}
?>
>
goes in your _header.php file
.logged-in{whatever;}
.logged-out{whatever;}
try this
//create two variables
$user_loggedin_class = "loggedin";
$user_notlogin_class = "notloggin";
// add css like this
<style type="text/css" >
.loggedin{
display: none;
}
.notloggin{
display: display:block;
}
</style>
// your span tag should like this
<span class="<?php echo ( (is_user_logged_in())?$user_loggedin_class:$user_notlogin_class ); ?>">Sign Up / Register</span>
I already asked this question, sry, but ill try again.
The question is: How do i bind css to a div, only if user is logged in?
I got following, and it is working(Also session startet and so on)
if (isset($_SESSION['username']))
{
include("/view/leftmenu.php");
}
Now i want to add 20% to margin-left on my maincontent. Maincontent comes after this.
So how do i activate some css to a div only when the user is logged in. PHP!!!!
Sry for asking again:(
<?php
$class = "";
if (isSet($_SESSION['username'])) {
$class = "addmargin";
}
?>
Then in your view/HTML/...
<div class="<?php print $class; ?>">...</div>
Now you just need something like this in your CSS
div.addmargin {
margin: 20%;
}
In the <head> do :
<?php if (isset($_SESSION['username'])) : ?>
<style type = "text/css">
#maincontent{
margin: 20%;
}
</style>
<!-- or add link to the style sheet -->
<link href="logged-in-style.css" rel="stylesheet" type="text/css">
<?php endif; ?>
Ok, based on the answer here by traitadmin (scroll down) I am trying to display different CSS for my front page and one for all other pages.
Previously, my body tag looked like this:
<body <?php body_class() ?>>
Now, I have edited it to look like this:
<body <?php if (is_home()) { ?> id="home"<?php } else { ?> body_class()<?php } ?> >
Also I have put new stylesheets in my enqueue, and all styles for the homepage now have #home in front of them.
However, there is no style at all now and my site broke down entirely, for all pages.
I think I may need body_class() also for the homepage. But how I can edit this code so that it works?
Easiest would actually be this:
<link rel="stylesheet" href="main.css">
<?php if (is_home()) {
echo '<link rel="stylesheet" href="home.css">'
} ?>
Rules in home.css should have a high priority than main.css. So with this if main.css has this:
body { background-color: white; }
and home.css has this:
body { background-color: blue; }
Since home.css is linked after main.css the rule in home.css will take priority and the background will be blue. This way you can only overwrite the styles you need to and all the other styles will still apply.
In your case after your other wp_register_style() just add an if test and then register another style.
if (is_home()) {
wp_register_style('home-style',get_stylesheet_directory_uri().'/stylesheets/home.css');
}
Looks like a wordpress code so here goes:
In the head:
<?php if (is_home()) {
// loading the stylesheet if it is the homepage
echo '<link rel="stylesheet" href="home.css">'
} else {
// loading the other stylesheet if it is not the homepage
echo '<link rel="stylesheet" href="other.css">'
} ?>
By default, WordPress adds two classes to the body tag: on the front page (is_front_page()) the home class is added, and on the home page (is_home()) the blog class is added. So, in your main CSS file, you can use the body class as follows:
#mydiv {background:green;}
.home #mydiv {background:blue;}
.blog #mydiv {background:red;}
I have a popup window that with the following source code ("likes.php"):
<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
</body>
</html>
Now the problem is that although all the paragraphs are created, I can't see them, because there is no scrollbar. How can I attach a scrollbar to my page?
Link to printscreen
It is working on chrome, but not in firefox IF it comes in a popup window (other file calls window.open("likes.php"). Works in both browsers in regular windows.
Use the css overflow property. Add this to your <head> tag:
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.scroller {
overflow: scroll;
padding: 5px;
height: 100%;
}
</style>
To specifically add a horizontal or vertical scrollbar, use overflow-x or overflow-y, respectively.
You'll also want to fix the close tag of your <li> element, and wrap it in a proper container, like this
<div class="scroller">
<ul>
<?php for($i=0;$i<500;$i++)
echo "<li>".$i."</li>";
?>
</ul>
</div>
To control overflow, you generally need to use the CSS overflow property
overflow: scroll
as stated by p.s.w.g., but you would never need to apply this to the whole body like (s)he suggests. The browser should add a scrollbar to the full page on it's own if your code is formatted properly.
The current issue is likely caused by your not closing the second <li> tag and by the PHP being improperly formatted. You don't need a break at the end of each line. The reason the lines aren't breaking is that you haven't enclosed the <li> elements inside an <ol> or <ul>. Also, putting the beginning of your if statement, the filler, and the end inside separate php tags will just confuse the computer. Instead use:
<?php
echo "<ul>";
for( $i=0; $i<500; $i++) {
echo "<li>" . $i . "</li>";
}
echo "</ul>";
?>
i'm trying to use a jQuery show/hide script on a PHP file, and it goes like this:
<?php
foreach ($empresas as $empresa) {
echo "<style type='text/css'>
.$empresa[teaserid] {
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
.showhide$empresa[teaserid] {
display:none;
}
</style>";
echo '<script type="text/javascript">';
echo ' $(document).ready(function(){ ';
echo ' $(\".$empresa[teaserid]\").hide(); ';
echo ' $(\".showhide$empresa[teaserid]\").show(); ';
echo ' $(\".showhide$empresa[teaserid]\").click(function(){ ';
echo ' $(\".$empresa[teaserid]\").slideToggle(), 500; ';
echo ' }); ';
echo ' });';
echo '</script>';
echo "<a href='#' class='showhide$empresa[teaserid]'>$empresa[titulo]</a><br />
<div class='$empresa[teaserid]'>
TEST</div>";
}
?>
So, what I need is a foreach in php that echoes new CSS values and a new jQuery script. because each DIV needs different CSS and jQuery to relate and be able to show and hide its content. This echoing didn't work. The CSS goes ok, but the jQuery doesn't with the PHP $strings. What can I do?
Or there's a simpler way to do this? A jQuery function that relates to any current div alone ?
Thanks anyone who helps me in this one..
Worth mentioning:
You can create a settings object to keep your variables in. For example:
Your php:
<?php
$settings = array( 'settingA' => 'something',
'settingB' => 'something else',
'wat' => 9001 );
?>
Keep your JS in your js file - scripts.js, whatever. But you can add this to your html file:
<script>
var settings = <?php echo json_encode( $settings ) ?>;
</script>
What will that output?
var settings = {"settingA":"something","settingB":"something else","wat":9001};
So you can put your required server info in ONE global object (or put it as a property of your application object or something) and can access it.
console.log( settings.settingA ); // returns "something"
Looking further at your question, don't forget you dont' have to stay in the PHP tags. I'm not advocating ever needing PHP in your css, but this should help you grasp the concept:
<style>
<?php foreach ($empresas as $empresa): ?>
.showhide<?php echo $empresa['teaserid'] ?> {
display:none;
}
<?php endforeach; ?>
</style>
In PHP, you can only put variables in double quote strings:
$a = 'Jon';
echo "Hi $a"; // Should output 'Hi Jon'
echo 'Hi $a'; // should output 'Hi $a'
So if you want the Javascript to read:
$(".Jon") // where Jon is the value of $a
Then in PHP you can output it this way:
echo '$(\".' . $a . '\")'; // Notice we are splitting the echo statement into a concatenation of 3 strings
There isn't really a need to have the PHP print out a new block of CSS and Javascript for each item. If you write the css and javascript is a good way, then it will all be handled for you.
One other thing to keep in mind is that PHP is at it's most basic a templating language, so if you find yourself echoing large chunks of code, you are probably being something wrong. Instead something like this:
<?php
$variable = "SOme value";
echo "Some very long huge string with <html> tags and stuff plus $variables";
?>
You can do something like this, opening and closing the tags several times.
<?php $variable = "SOme value"; ?>
Some very long huge string with <html> tags and stuff plus <?php print $variables; ?>
With that covered, here is a reworked version of your code.
As well, rather than needing to make PHP output custom Javascript with hard-coded ids, what you reall need is to structure your javascript so that it doesn't need to know ANY of that stuff at all, as I have done.
<style type='text/css'>
/* The CSS is the same, so just have one class that is used on all the items. */
.empresa-teaser {
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
</style>
<script type="text/javascript">
$(function(){
// Hide all of the teasers to start.
$(".empresa-teaser").hide();
// Add a handler for when the show/hide link is clicked.
$(".showhide-empresa-teaser").click(function(){
// When it is clicked, find the next item with the 'empresa-teaser' class
// and show it using a sliding toggle effect.
$(this).nextAll('.empresa-teaser:first').slideToggle(500);
});
});
</script>
<?php foreach ($empresas as $empresa) { ?>
<a href='#' class="showhide-empresa-teaser">
<?php print $empresa['titulo']; ?>
</a>
<br />
<div class="empresa-teaser">TEST</div>
<?php } ?>