I'm learning php following some tutorials
but the codes are not working as directed by the tutorials.
I want to make a selected page to become bold. these are the codes.
<?php
$subject_set = get_all_subjects();
while($subject = mysqli_fetch_array($subject_set)) {
echo "<li";
if ($subject["id"] == $sel_subj) {
echo "class=\"selected\"";
}
echo "><a href=\"content.php?subj=" . urlencode
($subject["id"]) . "\">{$subject["menu_name"]}</a></li>";
$page_set = get_all_pages_for_subject($subject["id"]);
echo "<ul class=\pages\">";
while($page = mysqli_fetch_array($page_set)) {
echo "<li><a href=\"content.php?page=" . urlencode
($page["id"]) . "\">{$page["menu_name"]}</a>
</li>";
}
echo "</ul>";
}
?>
In your HTML document you need this
<head>
<style>
li.selected{
font-weight: bold;
}
</style>
</head>
Currently you are setting the selected list item to have a class of "selected" but your not actually assigning the css class "selected" from the limited example you provided.
You can learn more here:
http://www.w3schools.com/cssref/pr_font_weight.asp
Related
My navigation is called on all page with code <?php include 'navigation.php'; ?>. Navigation I want to use on all pages:
<nav class="white-color">
<!-- nav code -->
</nav>
But I need to change class="white-color" on specific pages to be class="black-color". Is there a option to add simple PHP code to define:
<?php
if($page == "index") {
echo '
<nav class="first-class">
</nav>
';
} else if($page == "register") {
echo '
<nav class="second-class">
</nav>
';
} else {
/* DEFAULT CLASS FOR PAGES*/
echo '
<nav class="third-class">
</nav>
';
}
?>
Or maybe I can resolve this with the switch method. Any advice or example will be good.
Thanks all for helping me.
basename($_SERVER['SCRIPT_FILENAME'])
will return the file name that is currently in use. So if you are on localhost/index.php it will return index.php.
Furthermore you can make your code more effective by doing the following:
print "<nav class='";
if(basename($_SERVER['SCRIPT_FILENAME']) == "index.php"){
print "first-class";
}
else if(basename($_SERVER['SCRIPT_FILENAME']) == "register.php"){
print "second-class";
}
else{
print "third-class";
}
print "'></nav>";
If we take into account the comment from deceze it would look like this.
if(basename($_SERVER['SCRIPT_FILENAME']) == "index.php"){
$navClass = "first-class";
}
else if(basename($_SERVER['SCRIPT_FILENAME']) == "register.php"){
$navClass = "second-class";
}
else{
$navClass = "third-class";
}
print "<nav class='$navClass'></nav>";
Im currently busy with working on a website but I got stuck.
The site is running on Processwire and working with the FeatherLight lightbox.
Now the strange thing is, I am only able to see the images when I'm logged in as admin. When I'm just a guest (incognito) the site won't show these images but shows the other pages.
You can find the website over here
I've looked at the page settings in the CMS, and the guest is able to view the pages, as it also does with the text pages.
But I can't figure out how to get the images back.
Here is the code
<div id="container">
<div class="grid-sizer"></div>
<?php if ($page->numChildren(true)) {
echo "<ul class='project'>";
foreach ($page->children as $childIndex => $child) {
if ($child->head_image) {
$image = $child->head_image;
echo "<li class='item'><a href='#' data-featherlight='#mylightbox" . $childIndex . "'><img id='mylightbox" . $childIndex . "' src='{$image->url}' class='image'></a></li>";
}
}
echo "</ul>";
}
?>
<style>
.featherlight-content:after {
content: "<?php echo nl2br($child->title); ?> <?php echo nl2br($child->image_description); ?> <?php echo $child->formaat; ?>";
}
</style>
Thanks in advance!
Although I have resorted to stackoverflow for answers in the past many times but this is my first ever question on stackoverflow. I researched a lot about my issue and couldnt get answer to this specific issue. Hope posting actual question might help.
So here it is:
I have 2 divs in artwork.php
echo '<div id="on_going_art"></div>';
echo '<div id="completed_art"></div>';
My DB has 2 tables: artwork and user_hour_log
each user_id can have multiple art_id assigned to it and each art_id can have multiple user_hour_log entries.
Say $art[] is an array with multiple art_id in it and I am getting user_id from cookie:
for ($i=0; $i<count($art); $i++){
$query2= "SELECT *, SUM(total_time) AS total_time FROM user_hour_log WHERE user_id = '".$user_id."' && art_id = '".$art[$i]."'";
$result2 = mysqli_query($conn, $query2);
$row2 = $result2 -> fetch_assoc();
$hours_completed_artwork = $row2['total_time'];
$query3= "SELECT * FROM artwork WHERE winner_user_id = '".$user_id."' && art_id = '".$art[$i]."'";
$result3 = mysqli_query($conn, $query3);
$row3 = $result3 -> fetch_assoc();
$highest_bid_hours = $row3['highest_bid_hours'];
Here I am checking if $hours_completed_artwork is less than $highest_bid_hours, then append in #on_goin_art else append in #completed_art respectively:
if($hours_completed_artwork < $highest_bid_hours) {
echo '<script type="text/javascript">
$(document).ready(function() {
$("#on_going_art").append("
echo "<div class=\"row box1\">";
echo "<div class=\"col-xs-4 col-sm-4 col-md-4\">";
echo "<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\">";
echo "</div>";
echo "<div class=\"col-xs-8 col-sm-8 col-md-8\">";
echo "<h6 >"'.$row3['artwork_name'].'"<span id=\"percentage\">"'.number_format($hours_completed_artwork/ $highest_bid_hours *100,0).'"%</span> </h6>";
echo "</div>";
echo "</div>";
");
});
</script>';
} else if($hours_completed_artwork >= $highest_bid_hours) {
echo '<script type="text/javascript">
$(document).ready(function() {
$("#completed_art").append("
echo "<div class=\"row box1\"> \n";
echo "<div class=\"col-xs-4 col-sm-4 col-md-4\"> \n";
echo "<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\"> \n";
echo "</div> \n";
echo "<div class=\"col-xs-8 col-sm-8 col-md-8\"> \n";
echo "<h6 >'.$row3['artwork_name'].'<span id=\"percentage\">100% </span> </h6> \n";
echo "</div> \n";
echo "</div>";
");
});
</script>';
The problem is the append doesnt work, if I append just the strings eg: 'incomplete' and 'complete' it appends perfectly in right divs but it doesnt do it with my code.
I tried closing php tags right before including script tags that dint work either.
I have included Google CDN jquery links, tried changing position of script tags.
Sorry for such a long question. Hope it makes sense.
Here is a working snippet:
$row3['artwork_name'] = 'Some name';
$hours_completed_artwork = 40;
$highest_bid_hours = 50.00;
$percentage = $hours_completed_artwork < $highest_bid_hours ? number_format($hours_completed_artwork/ $highest_bid_hours *100,0) : 100;
$html = '<div class="row box1">\'+
\'<div class="col-xs-4 col-sm-4 col-md-4">\'+
\'<img class="img-responsive thumbnail" src="http://i.imgur.com/jYea7Id.jpg?1">\'+
\'</div>\'+
\'<div class="col-xs-8 col-sm-8 col-md-8">\'+
\'<h6 >'.$row3['artwork_name'].'<span id="percentage">'.$percentage.'%</span> </h6>\'+
\'</div>\'+
\'</div>';
$snippet = '<script type="text/javascript">
$(document).ready(function() {
$("#on_going_art").append(\''.$html.'\');
});
</script>';
echo '<div id="on_going_art"></div>';
echo $snippet;
I refactored the code to make it more maintainable. In javascript you cannot just throw html into an append function. New lines need to be concatenated using + and single or quotes. That is built in now. Also since only the percentage is either 100 or variable, i put that lot into one variable.
Your quotes are messed up.
And you have multiple echos inside the string, I guess you just copied the code and put it into the string.
It would be easier to build the html first, put it into a var, then use it:
if($hours_completed_artwork < $highest_bid_hours) {
$html = "<div class=\"row box1\">
<div class=\"col-xs-4 col-sm-4 col-md-4\">
<img class=\"img-responsive thumbnail\" src=\"http://i.imgur.com/jYea7Id.jpg?1\">
</div>
<div class=\"col-xs-8 col-sm-8 col-md-8\">
<h6 >".$row3['artwork_name']."<span id=\"percentage\">".number_format($hours_completed_artwork/ $highest_bid_hours *100,0)."%</span> </h6>
</div>
</div>";
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$(\"#on_going_art\").append('".$html."');
});
</script>";
//....
Even better would be the use of HEREDOC or NEWDOC
Anyway the structure seems a little odd to me. Why don't you include the html via php in first place? Does it really have to be added later via javascript?
I'm designing a web page to show some commodity
results (such Model, price, Comment) for every Commodity is a database
and I call theme to show in each Commodity (it while be shown in a div)
I wanna to set backgrounds for each div (it saved in database and every Commodity have one background-image)
please tell me whats the true syntax for this div s
for example I wrote this code:
<div class="commodities"> <style>.commodities{ background-image:<?php $Images[$i]?>} </style>
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
please help me to fix this part of code: { background-image:}
You have to do this:
<div class="commodities" style="background-image: url('<?php $Images[$i]?>');">
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
If you put < style > tags in the < body > (put it on the < head > tags) you are doing nothing ;)
Instead use style property. ;)
Apart you are forgetting to use url tag on the background-image property. ;)
You are missing two keywords, scoped and url. See e.g. http://www.w3schools.com/tags/att_style_scoped.asp and http://www.w3schools.com/cssref/pr_background-image.asp.
use inline css.
<div style="background-image: url(<?php echo $variable_name; ?>);">
or
use internal css.
<style type="text/css">
.logo {
background: #FFF url(<?php echo $variable_name; ?>);
}
</style>
I'd like to show the first 5 names in a list and toggle the display of any additional names as a single block.
I've currently got the names list as an array object though I'm happy to change it to an array if the solution would be simpler with that.
Here's what I have so far which is *in*complete because I don't know how to create the hidden div of names:
PHP
$names_count=0;
echo '<div id='nameList' class='toggler'>';
foreach($names as $name){
echo '<a id='name'.$name->acct_id.'>'.$name->full_name.'</a>';
if($names_count<=4){
echo '</div><!--toggler div-->';
}
else
<div class='namesList' style='display:none'>
//put additional names in hidden div?
</div>
}
$names_count++;
} //endforeach
JS:
UPDATE Sorry for the confusion. This isn't really a javascript question so I deleted that tag but I'm including the following jQuery code snippet for completeness with the PHP
$('.toggler').click(function(){
var id=this.id;
$('#'+id).toggle();
});
PHP
$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
if ($names_count == 4) {
echo '</div><div class="hidden">';
}
$names_count++;
}
echo '</div>';
JS
$('.toggler').click(function(){
$(this).next().toggle();
});
CSS
.hidden {
display: none;
}
Here's an example with two while loops.
$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;
echo '<div id="nameList" class="toggler">';
// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
$name = $names[$nameIndex++];
echo '<a id="name' . $name . '">' . $name . '</a>';
}
// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{
echo '<div class="hiddenNames" style="display:none">';
while ($nameIndex < $nameCount) {
$name = $names[$nameIndex++];
echo '<a id="name' . $name . '">' . $name . '</a>';
}
echo '</div>';
}
echo "</div>";
That code produces the following output.
<div id="nameList" class="toggler">
<a id="nameBob">Bob</a>
<a id="nameAndy">Andy</a>
<a id="nameTim">Tim</a>
<a id="nameMax">Max</a>
<a id="nameRoger">Roger</a>
<div class="hiddenNames" style="display:none">
<a id="nameJohn">John</a>
<a id="nameTest">Test</a>
</div>
</div>
It also safe if you have less than 5 names; the script would produce :
<div id="nameList" class="toggler">
<a id="nameBob">Bob</a>
<a id="nameAndy">Andy</a>
<a id="nameTim">Tim</a>
</div>
For the JS, I would probably do something along the lines of :
$('.toggler').click(function(){
$('.hiddenNames').toggle();
});
Even if the code is a bigger, I find it easier to follow and probably easier to maintain in the long run. (Opinion)
Hope this helps!
To make a <div> hidden:
<div style="display: hidden"></div>
Then the jQuery should make it visible with the .toggle() command.