I have a ul list that is rendered in PHP and I am trying to highlight the current selected item. The code is part of a tag sorting jquery portfolio. I have tried to add a current class to the li element but that only works for the default element "All".
PHP-code
if ($unique_tags_arr) {
echo '<ul class="jquery">';
echo '<li data-filter=".filterable">';
echo "All";
echo '</li>';
foreach ($unique_tags_arr as &$value) {
echo '<li data-filter=".'.str_replace(' ', '', $value). " " .'"> '.$value.'</li>';
}
echo '</ul>';
}
Try this
jQuery(document).on("click", "ul.jquery > li", function() {
var $this = jQuery(this);
jQuery(".highlight").removeClass("highlight");
$this.addClass("highlight");
});
and then write a css rule for the highlight class
You can try with the following css style.
.jquery li:hover
{
color: #000;
background: #fff
}
I'm guessing there's no page load when filtering because your list items have the data-filter attribute and therefore I'd guess it's using jQuery. Then you should use something like gbestard suggested.
But if there's page load and you are using PHP on this like your tags say... You'll need the selected item value stored somewhere (POST, GET etc.) and with your stored selected item you need to compare if any of the array items has the same value and if it is, just add class "selected".
This is with GET so your selected value would be in the url.
$active = $_GET['selected_filter'];
if ($unique_tags_arr) {
echo '<ul class="jquery">';
echo '<li data-filter=".filterable">';
echo "All";
echo '</li>';
foreach ($unique_tags_arr as &$value) {
echo '<li data-filter="'.str_replace(' ', '', $value).'" ';
if ($value == $active) { echo 'class="selected"'; }
echo '> '.$value.'</li>';
}
echo '</ul>';
}
Then just give styles to the .selected class.
Related
I've made a function to hide/view my category menu:
The script:
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
I use it on a p tag like this:
<p onclick="toggle('foos');";>Category</p>
The above works perfectly. When I click on "Category" it shows or hide my div.
However I then made another menu as a list. I want to execute my "toggle" function when you click on one of the "li" from my list.
I've tried to do that with this:
$(".uldropdown").on('click','li',function (){
$("#displaytwo .menu p").click();
});
But when I click on one of the "li" it shows my category menu only for a split second and then it immediately disappears.
So it almost works, but for some reason the div disappears immediately right after the click. I hope someone can tell me whats wrong. Thank you
Edit:
This is my list menu:
echo '<div id="foo">';
echo '<ul id="uldropdown" class="uldropdown">
<ul>';
while($row = mysqli_fetch_array($results)) {
echo '<li class="lidropdown">'.$row['name'].'</li>';
}
echo '</ul>
</ul></div>';
My category menu:
<div class="hejsa" >
<p onclick="toggle('foos');";>Category</p>
<?php
echo '
<div id="foos">';
echo '<ul id="catdropdown" class="catdropdown">
<ul>';
while($row = mysqli_fetch_array($resultcats)) {
echo '<li class="catdropdown" onclick="location.reload()"; ">'.$row['category'].'</li>';
}
echo '</ul>
</ul></div></div>';
I did not add some of the SQL parts, just to keep it as simple as possible.
I have an unordered list of movies being displayed from the Rotten Tomatoes API in a page called browse (using Laravel Framework). I am trying to use AJAX to load content into a div from a separate file that I have setup as a route called movie when the user clicks on the anchor.
In my routes file I have this:
Route::get('browse', array('as'=>'browse', 'uses'=>'browse#index'));
Route::get('movie', array('as'=>'movie', 'uses'=>'browse#movie'));
Browse View located at /application/views/browse/index.blade.php
$movies = $search_results->movies;
echo '<div id="browse">';
echo '<ul class="movieResults">';
foreach ($movies as $movie) {
echo '<div class="movieCard">';
echo '<li><img src="'. $movie->posters->detailed .'"</li>';
echo '<li class="movieCardInfo">' . $movie->title . '</li>'; // HERE'S WHERE I HAVE THE PROBLEM
echo '</div>';
}
echo '</ul>';
echo '</div>';
Movie View located at /application/views/browse/movie.blade.php. I have dummy text for now
echo '<div class="details">';
echo 'test';
echo '';
Browse Controller
public $restful = true;
public function get_index()
{
return View::make('browse.index')
->with('title', 'Browse Movies');
}
}
Javascript File
$(function() {
$('.movie').click(function() {
$('.details').load(this.href);
return false;
});
});
The project can be found here
Seems like your using the wrong "this"-operator. Should be "$(this)" if it's is a jQuery scripts? (The JavaScript part...)
Also: Ur telling it to add the result from ".load()" into the ".details", but I can't see that you have such a field in your html code?
EDIT
Change the following in /application/views/browse/index.blade.php:
echo '<li class="movieCardInfo">' . $movie->title . '</li>';
echo '<li class="movieCardInfo">' . $movie->title . '<div class="details"></div></li>';
And remove the "div.details" from the response, so the response only returns the text you want in your details.
Then, in the the JavaScript:
$(function() {
$('.movie').click(function() {
$('.details').load($(this).href);
return false;
});
});
I've been working on this list that will provide information from an xml file. The markup I'm working with is as follows:
<?php
$xml_file = '/path';
$xml = simplexml_load_file($xml_file);
foreach($xml->Continent as $continent) {
echo "<div class='continent'>".$continent['Name']."<span class='status'>".$continent['Status']."</span>";
foreach($continent->Country as $country) {
echo "<div class='country'>".$country['Name']."<span class='status'>".$country['Status']."</span>";
foreach($country->City as $city) {
echo "<div class='city'>".$city['Name']."<span class='status'>".$city['Status']."</span></div>";
}
echo "</div>"; // close Country div
}
echo "</div>"; // close Continent div
}
?>
What I'm trying to accomplish is changing the 'Status'. Regardless of the element, the 'Status' only has two values and will always be either "Red" or "Blue". What I'm trying to do is go through the whole document, find the "Status" attribute, see if the value is "Red", then display an icon or some text, but if it's blue, display nothing. I've come across different examples, but none that show this type of generality. Most of the examples were for locating a specific node and then displaying it's attributes. I'm also trying to avoid, if possible, having to create this rule within each loop, but instead applying it to the whole document (if this seems like the best method.)
Use css selectors instead of javascript. That will make your code lighter and simple!
For example:
<?php
$xml_file = '/path';
$xml = simplexml_load_file($xml_file);
foreach($xml->Continent as $continent) {
echo "<div class='continent'>".$continent['Name']."<span class='status ". cssForStatus($continent['Status'])."'></span>";
foreach($continent->Country as $country) {
echo "<div class='country'>".$country['Name']."<span class='status ". cssForStatus($country['Status'])."'></span>";
foreach($country->City as $city) {
echo "<div class='city'>".$city['Name']."<span class='status ". cssForStatus($city['Status'])."'></span></div>";
}
echo "</div>"; // close Country div
}
echo "</div>"; // close Continent div
}
function cssForStatus($status='')
{
switch ($status) {
case 'red':
$css = "red";
break;
default:
$css = "blue";
break;
}
return $css;
}
while your css can be:
span.status {
height: 10px;
width: 10px;
}
span.status.red {
background-color: "red";
}
span.status.blue {
background-color: "blue";
}
we are using the concept of multiple css classes
Just change your code slightly to add status as your div class.
Example:
echo "<div class='continent status-{$continent['Status']}'>{$continent['Name']}</div>";
This will output (in case of a red continent named Europe)
<div class='continent status-red'>Europe</div>
then add this CSS to your html:
.status-red {
background-color: red;
}
.status-blue {
background-color: blue;
}
Or somehting along these lines
Basically by clicking the "comment" link the last result of the query should show and by clicking again it should be hidden. I have tried Rocket's code as well but I get an error message in the bottom of the browser and when I click "comments" it just takes me to the top of the page. I would apprieciate some advice on this
$i = 1; // ID Counter
while($row = mysql_fetch_array($result))
{
echo "<h1>$row[title]</h1>";
echo "<p class ='second'>$row[blog_content]</p> ";
echo "<p class='meta'>Posted by .... • $row[date] • Comments<div id='something$i' style='display: none;'>$row[comment]</div>";
$i++; // Increment counter
}
This is a loop, echoing the same thing over and over, thus making all the divs have the same ID, something2.
IDs need to be unique, you gonna have to make unique IDs for each div.
Something like: <div id='something$i' style='display: none;'> (remembering to increment $i).
Also, you're gonna to escape the quotes in your onclick attribute.
<a href='#' onclick=\"toggle_visibility('something$i');\">
The code should look something like this:
$i = 1; // ID Counter
while($row = mysql_fetch_array($result))
{
echo "<h1>$row[title]</h1>";
echo "<p class ='second'>$row[blog_content]</p> ";
echo "<p class='meta'>Posted by .... • $row[date] • Comments<div id='something$i' style='display: none;'>$row[comment]</div>";
$i++; // Increment counter
}
Escape the quotes :
$blah = "onclick='toggle_visibility(\"something2\");'>Comments</a>"
There is an easier way to hiding / showing the next sibling ....
try this
<div style="display:none">some hidden content</div>
function toggle(el,ev) {
ev.preventDefault(); // prevent the link from being followed
el = next(el); // get the next element
if (el.style.display == "none") { // toggle the display
el.style.display = "block";
} else {
el.style.display = "none";
}
}
/*
Credit to John Resig for this function
taken from Pro JavaScript techniques
*/
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
Working example
You can throw in a counter into your code as the while loop is executing to dynamically generate unique id's for each comment div. Or, you can pull a unique field out of the query result for the id's, as long as you hook up to it appropriately later if it ends up being used and remain consistent in the rest of the code.
either
$count = count($result);
...
while (...){
$count--;
echo '... id="something'. $count .'" ...'
}
or...
while (...){
echo '... id="something'. $row['ID'] .'" ...'
}
I am pretty sure that if I use something like this in css
#list {
float:left;
}
I can format the display of my array to look like
A B C
rather than
A
B
C
The problem is I am having problems formatting the php of the with the proper <div>'s to give me what I want.
foreach ( $model->address as $address ) {
if ($address->Address) echo $address->Address.'<br />';
if ($address->city->Name) echo $address->city->Name;
}
Can someone help me modify the foreach above to achieve the different layout. I also need to be able to format the Address differently then the Name
EDIT: For clarification...
A =
Address
City
B =
Address
City
C =
Address
City
You need to wrap each address in a div and use a class to float it:
PHP/HTML:
foreach ( $model->address as $address ) {
echo '<div class="address-item">';
if ($address->Address) echo $address->Address.'<br />';
if ($address->city->Name) echo $address->city->Name;
echo '</div>';
}
CSS:
.address-item {
float: left;
}
$out = "<ul>";
foreach($model->address as $address){
if(!isset($address->Address) && !isset($address->city->Name)) continue;
$out .= "<li>" . isset($address->Address) ? $address->Address : "" . " "
. isset($address->city->Name) ? $address->city->Name : "" . "</li>";
}
$out .= "</ul>";
print $out;
CSS
li {
float: left;
}
something like:
foreach ( $model->address as $address ) {
echo '<div class="list">';
if ($address->Address) echo $address->Address.'<br />';
if ($address->city->Name) echo $address->city->Name;
echo '</div>';
}
wherein, the CSS will be:
.list {float:left;}