CODEWITHSUNDEEP
phpconditional-statements
likeawave
likeawave

Reputation: 11

How to make conditional PHP links?

I've searched for a way to do this, but since i'm not fluent in PHP, nothing i've tried seems to work. I have a general idea of how it should work, and it seems simple enough, but I can't get it to work the way I want it to.

Basically, I have two links on my site - each one of them links to a different style sheet, which is part of a JS style switcher. The style switcher works fine, except for one thing - I want the links to be conditional. For example, right now, my links look like this:

They both appear at once.

I'd like it to work this way: when the page loads, only the "Make it Dark" link shows. Then when it's on "Make it Dark", only a link to the Main style sheet shows.

This can be seen on the last.fm page at the very top right: http://www.last.fm/

There's two themes there: "Paint it Black" and "Simply Red". Only one link shows at a time so that you can switch between them. How would I be able to do that?

I'd appreciate any help with this. Thanks.

Upvotes: 1

Views: 1907

Answers (5)

Nick
Nick

Reputation: 6346

Personally I'd use a session variable and not a cookie.

Something like this should work:

<?php
session_start(); // add to the top of your page
if (!isset($_SESSION['dark_theme'])) {
  $_SESSION['dark_theme']==false;
}

if ($_GET['changetheme']!='') {
  if ($_GET['changetheme']=='dark') {
    $_SESSION['dark_theme']=true;
  } else {
    $_SESSION['dark_theme']=false;
  }
}
?>

This bit, place where you want the link:

<?php
if(!$_SESSION['dark_theme']){
?>
<a href="?changetheme=dark" id="darken">Make it Dark</a>
<?
}else{
 ?>
<a href="?changetheme=light" id="lighten">Make it Light</a>
<?
}
?>

Or do it using CSS+JavaScript:

The HTML:

<a href="#" id="darken">Make it Dark</a>
<a href="#" id="lighten">Make it Light</a>

The CSS:

In your "dark" stylesheet:

#darken {
  display:none;
}

In your "light" stylesheet:

#lighten {
  display:none;
}

JavaScript (note, I'm using JQuery as it's much easier to write than normal JS - just you'll need to include JQuery if it's not already on the site):

(function($, undefined)
{
  $('#darken').click(function() {
    $(this).preventDefault(); // stops the link from functioning as a link
    chooseStyle('none', 60); //call your change stylesheet function
    $('#darken').hide(); //hide the dark link
    $('#lighten').show(); // show the light link
  })

  $('#lighten').click(function() {
    $(this).preventDefault(); // stops the link from functioning as a link
    chooseStyle('none', 60); //call your change stylesheet function
    $('#lighten').hide(); //hide the light link
    $('#darken').show(); // show the dark link
  })
})(jQuery);

Upvotes: 1

Ahsaan Yousuf
Ahsaan Yousuf

Reputation: 715

Or you can tell php to do this in one line, you just need to set cookie when user is switching to another stylesheet change below cookie name according to your need.

echo (isset($_COOKIE['dark_theme'])) ? '<link rel="stylesheet" href="/css/dark.css">' : '<link rel="stylesheet" href="/css/light.css">';

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17762

if($_COOKIES['dark_theme']){
 $show_dark = true;
}else{
 $show_dark = false;
}


if($show_dark){
 echo "<link rel="stylesheet" href="/css/dark.css"...";
}else{
 echo "<link rel="stylesheet" href="/css/light.css"...";
}

When you click "make it dark", just reload the page and modify the cookie.

Upvotes: 0

Bas Slagter
Bas Slagter

Reputation: 9929

You can specify a class on both off them and than add a display: none in the opposite stylesheet to hide it for the user. So you have:

<a href="" class="darken">Make it dark</a>
<a href="" class="lighten">Light it up</a>

And in the two stylesheets you have in the dark one:

.lighten { display: none; }

And in the light one:

.darken { display: none; }

Upvotes: 1

Vilx-
Vilx-

Reputation: 106920

Would it work if in each of your stylesheets you gave one of your links display:none?

Upvotes: 4

Related Questions