This is a strange one and it might not even be possible, but what I'm trying to do is check whether a particular stylesheet is loaded, if it is run one code, else run another. For example:
// Create loop counter
$counter = 0;
while ( have_posts() ) {
// MaxIT - Shows 2 listings per loop instead of 2
for ($x = 0; $x < 2; $x++) {
// Increase loop counter
$counter++;
the_post();
// Include listing loop template
get_template_part( 'loop', 'listing' );
} // endwhile have_posts()
echo '<hr style="width:100%; padding-left: 40px; margin: 60px 0px;" />';
}
The point of this code is to display properties on a real estate website. The original code did not have the FOR loop, I added that in so it would display 2 properties at a time before displaying in a horizontal rule. This was purely for aesthetics and looks great when viewing the properties in "grid" view, which shows two properties per row, like:
PROPERTY | PROPERTY
HORIZONTAL RULE
However, the client requested having a list view also, which shows 1 property per row, with image on the left and details on the right. I accomplished this with a second stylesheet which is loaded on click of a drop-down selector. However, because the above PHP loads 2 properties before the HR, it shows like:
PROPERTY
PROPERTY
HORIZONTAL RULE
So what I want to accomplish is having the PHP say "if the grid_view.css is loaded, show 2 properties before the HR, else if the list_view.css is loaded, show 1 property before the HR".
Is this possible with PHP? I'm not familiar with any other programming languages, so if it can be done in Javascript / JQuery that would be fine but I might need the "dummy" explanation if possible.
Thanks heaps in advance!
---- UPDATE / EDIT
Ok, I'm having trouble working out how to do what Justin suggested with "setting a flag" (don't quite understand that terminology tbh) in the PHP, so here's more insight on my current code (and yes it's built on Wordpress, sorry I should have said so earlier).
In my header.php I have... Argh, having trouble..
So in my header.php I have this...
<link rel="stylesheet" type="text/css" href="/wp-content/themes/wpcasa/slick/slick.css"/>
<link href="/wp-content/themes/wpcasa/lib/assets/css/layout.min.css" rel="stylesheet" type="text/css" title="layoutgrid">
<link href="/wp-content/themes/wpcasa/lib/assets/css/layout_list.css" rel="stylesheet" type="text/css" title="layoutlist">
<script type="text/javascript" src="/wp-content/themes/wpcasa/lib/assets/js/styleswitcher.js"></script>
Only one of those stylesheets is active at a time, whiche one is handled by the styleswitcher.js file...
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
That is not my code and as mentioned earlier I barely know anything about Javascript.
Then in my search-listings.php file I have this markup to create the selector...
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">View <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#" onclick="setActiveStyleSheet('layoutgrid'); return false;">Grid view</a></li>
<li><a href="#" onclick="setActiveStyleSheet('layoutlist'); return false;">List view</a></li>
</ul>
</div>
The main issue is that I need the loop counter from the PHP code at the top to run one way or another. The link provided by @aug seemed to make sense, but as far as I know I can't wrap that Javascript around the PHP to achieve what I need to do.
So to recap...
There's a PHP while loop which displays the property listings.
There's a PHP for loop which I wrote inside the while loop to display 2 listings each time the while loop cycles, instead of 1.
The above worked fine until the introduction of the "list" view came about, which due to my lacking PHP knowledge had to be implemented by using a Javascript file to switch the active stylesheet.
I now need a way to still be able to switch to the list view stylesheet, but to either change the $x < 2 to $x < 1 when the list view stylesheet is loaded, OR to be able to have an if / elseif statement that give you either $x < 2 or $x < 1 depending on which stylesheet is loaded.
I hope that makes sense, thanks for all the help so far!
