WordPress.org

Forums

[resolved] One button two links (8 posts)

  1. Tremor
    Member
    Posted 6 years ago #

    A bit of a strange question, but I have a scenario where I want one click of a button to open two urls.

    I have built my site to access two different themes, one English and one Japanese. I want to set it so that when the user click on the Japanese flag button, they load my Japanese theme *and* are taken to the category listing page for Japanese-only posts.

    http://michaeldowney.net

    Currently I have it somewhat awkwardly set up so that the first click opens the new theme and the second opens the category listing. Any way to have it so just one click does both actions? If possible I'd like to avoid Javascript.

    Thanks in advance!

  2. Tremor
    Member
    Posted 6 years ago #

    Here is the code in my site to help:

    Stylesheet:

    .jp-link { behavior: url(http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Jp) }

    Sidebar:

    <ul class="language">
    <li><a href="http://michaeldowney.net/category/japanese/" class="jp-link" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/jp.gif" title="日本語:2回クリックして" alt="Jp"></a></li>
    <li><a href="http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Eng" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/gb.gif" title="English: Please press twice" alt="Eng"></a></li>
    <li><a href="http://michaeldowney.net/index.php?wptheme=Knowing-Nothing-Eng" ><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/gbjp.gif" title="English and Japanese" alt="Main"></a></li>
    <li><a href="<?php bloginfo('rss2_url'); ?>" class="feed"><img src="http://michaeldowney.net/nikki/wp-content/themes/kn-jp/images/feed.gif" title="Subscribe to my journal by RSS" alt="Feed"></a></li>
    </ul>

    The Japanese button is the first one, noted with 'jp-link'.

    Any ideas of how I can make the button do these two actions at once?

  3. demetris
    Member
    Posted 6 years ago #

    On my site I use Theme Switcher Reloaded to switch styles (I also wrote a how-to on Theme Switcher Reloaded as a style switcher). I just tried this and it seems to work OK:

    http://op111.net/topic/english?wptheme=dk (category English, default style)

    http://op111.net/topic/greek?wptheme=dk/dark (category Greek, dark variation)

    Is this what you want?

    Greetings,
    Demetris

  4. Tremor
    Member
    Posted 6 years ago #

    Hey Demetris! Perfect! It worked like a charm :)

    I also changed the Theme Switcher I had to the one you recommended, for future proofing against updates.

    I have one more question that perhaps you could help me with..?

    It relates to this topic:

    http://wordpress.org/support/topic/210809?replies=3

    Basicaly, because of the PNG image hack I applied to combat IE6, the one line of my code jumps up as invalid in the CSS validator. Any ideas why or what I can do to correct it?

    Here is the error:

    img, div, a, li, span, input, textarea Property behavior doesn't exist : url(nikki/wp-content/themes/kn-eng/iepngfix.htc)

    And here is my code:

    img, div, a, li, span, input, textarea { behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc) }

    Thanks again! Nice tutorials by the way - very clear.

  5. demetris
    Member
    Posted 6 years ago #

    Hey, Tremor. Glad it works for you, and also glad you liked the tutorials. :-)

    About the validation issue

    I’m not a coder or a designer, but I think this cannot validate, since "behavior" is an IE-specific property, not part of the specification.

    One way to have valid CSS while using IE-specific stuff would be conditional comments. E.g.:

    <!--[if lte IE 6]>
    <style type="text/css">
    img, div, a, li, span, input, textarea {
        behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc);
    }
    </style>
    <![endif]-->

    (lte: lower than or equal to)

    Such comments are only recognized as CSS by IE, so the validation problem goes away. You’ll have to insert this code into the HTML head in some way -- either by editing header.php (I suppose this is the one) or by using a plugin that can insert data into the HTML head (two I use are Extended Options (by Scott Wallick) and HeadSpace2 (the module Raw Data)).

  6. Tremor
    Member
    Posted 6 years ago #

    Hi again. Thanks for your reply. I have moved the CSS to the header successfully and it works as normal on the main page of my site.

    However, something curious happens when I go to the category page directly (i.e: http://michaeldowney.net/category/japanese/?wptheme=Knowing-Nothing-Jp) - the hack ceases to work. In other words, on the main page of my site, using both themes, I get transparent borders in IE6, but on the category pages for English and Japanese, on both themes, I get grey borders.

    Any insight? I tested this and it also happened on the original setup where the code was in my CSS file - I just didn't notice it before.

  7. yoshi
    Member
    Posted 6 years ago #

    behavior: url(nikki/wp-content/themes/kn-eng/iepngfix.htc);
    A relative path to iepingfix.htc reads different location depending on the page showing.

    Change it to a absolute path:
    behavior: url(/nikki/wp-content/themes/kn-eng/iepngfix.htc);
    should fix the problem.

  8. Tremor
    Member
    Posted 6 years ago #

    Hi Yoshi. Thanks for your help! I made the relevant changes and it has corrected the problem. I almost forgot, but you have to edit the htc file itself to match the two absolute urls. In case anyone reads this in the future - don't forget!

    Here is the new code in the header:

    <!--[if lte IE 6]>
    <style type="text/css">
    img, div, a, li, span, input, textarea {behavior: url(/nikki/wp-content/themes/kn-eng/iepngfix.htc);}
    </style>
    <![endif]-->

    And the code in the htc file:

    if (typeof blankImg == 'undefined') var blankImg = '/nikki/wp-content/themes/kn-eng/blank.gif';

    What a mess just to get IE6 to play nice, eh?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.