1

I am currently using display:none to hide all the divs on my website. Users click on like for example "info" or "contact" and the appropriate div will slide down via JQuery. To support users without Javascript, the links goes to "info.php" and "contact.php" if Javascript is no enabled.

This is quite a hassle to maintain because I have to update both the main page and the non-javascript versions (info.php, contact.php etc) when I make any changes.

What is a sensible back up to JQuery sliding divs for users without Javascript?

Legendre
  • 3,008
  • 7
  • 28
  • 44
  • 3
    Users without javascript ? Are you sure you need to support them ? – Denys Séguret Jan 24 '13 at 18:09
  • 7
    What about hiding the divs with jQuery so that users without Javascript would still see the divs? – Antony Jan 24 '13 at 18:09
  • jQuery *IS* JavaScript - is cannot be a backup plan. – Diodeus - James MacFarlane Jan 24 '13 at 18:10
  • There are ways to slide content with plain CSS, even on click. You should provide code if you need specific solutions – nice ass Jan 24 '13 at 18:11
  • @Diodeus I think they understand that. They're using the terms interchangeably. Their point was that the divs are being slid by jQuery (Javascript), but the only thing you can disable is Javascript, which is what jQuery is built from – Ian Jan 24 '13 at 18:12
  • @Diodeus What he meant was that don't hide the content with css if you wish the non- javascript users to see them too. – Jani Hyytiäinen Jan 24 '13 at 18:14
  • @Antony - Thats brilliant. I'll hide divs with JQuery. For users without Javascript, they see all the divs on one long page and I'll make the link buttons scroll the page down to the specific div instead. Thanks! (if you write this into an answer I'll accept it) – Legendre Jan 24 '13 at 18:17
  • @Ian, [one does not simply use the terms JavaScript and jQuery interchangeably :)](http://i.imgur.com/zp9rYyP.jpg) – Alexander Jan 24 '13 at 18:19
  • @Alexander HA. Too many people do though – Ian Jan 24 '13 at 18:40

6 Answers6

2

When I have understood you right, make a php-file with the static content. (The content on all sites) und include the content (info/contact) per include from another file depending on a GET Param like "page".

fvosberg
  • 627
  • 9
  • 25
2

Hide the <div>s with jQuery so that users without JavaScript can still see all the <div>s in one long page. Users with JavaScript, on the other hand, can slide the <div>s as usual.

  • jQuery IS JavaScript - is cannot be a backup plan.
  • one does not simply use the terms JavaScript and jQuery interchangeably

jQuery is a JavaScript library. By disabling JavaScript, the jQuery scripts will not be able to hide the <div>s. The key is to keep it functional when JavaScript is not available. As long as you do not perform critical manipulation to the page that would render it non-functional without JavaScript, you can cater for those non-JavaScript users. In this case, putting the modification work over to jQuery (or JavaScript) is a way to preserve functionality.

Antony
  • 14,372
  • 10
  • 41
  • 71
1

Have your info.php main text in an include file. Lets say info.inc.php

When non-js user clicks the link, they go to info.php into which the include file is, well, included.

But when a js user clicks the link, you load the info.inc.php onto your div and only THEN show it with jquery.

Say

$('a.info').click(function(e){
    e.preventDefault();
    $('#infoDiv').load('info.inc.php')
                .show();
    return false;
});

When you need to update content, just update the include file.

Jani Hyytiäinen
  • 4,804
  • 32
  • 45
1

At first add a class to_hide to all divs which should be hidden when javascript is activated.

The simplest way is to hide the divs like this on page load:

$(document).ready(function() {
    $('.to_hide').hide();
});

Note that if you do this, the layout will blink when loaded (the full content will be shown at first and then the dynamic divs will be hidden).

To avoid blinking you can add css rule for to_hide class dynamically. Use the following function in the <head> to do that:

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

dyn_css_rule('.to_hide', 'display: none');
Aidas Bendoraitis
  • 3,875
  • 1
  • 30
  • 43
1

A Pure CSS Solution

This may or may not work depending on the situation, but you can actually mimic a drop-down menu's behavior with css selectors in IE8 and up. Here's an example. Click on the menu, and as long as you hover around the content the content will appear, no javascript required.

Functionality

By default, all the content is hidden. However, thanks to the :active pseudoclass, you can change the content to display when the parent is clicked. This is pretty inconvenient though - the user has to hold down the mouse to see anything. However, we can cheat a bit - by adding a :hover pseudoclass that displays the content, if the user clicks and hovers the content will stick around.

So far, we have this css:

.container.content {
  display: none; 
}
.container:active .content {
  display: block;
}
.content:hover {
  display: block; 
}

This is a little flaky though - you have to move your mouse down over the content to have it persist, and will likely confuse. We can cheat a bit though by making the content larger than it appears. A simple way to do this would to be just to padding (that's what I've done in the example I added), but this can cause some odd reflow issues. A better way I think is to add deliberate spacing divs that add to the size of the content without changing the flow.

If we add this

<div style="position:absolute; top:-50px; height: 50px; width: 100%;"></div>

to the start of the content, there's an invisible div hovering over the menu, which will extend the area on which hover works. A similar thing can be done to the bottom, leaving us with a solution that has a larger hover area, and doesn't trigger reflows beyond the main content.

Remaining Problems

Anyway, this isn't perfect since it certainly isn't as flexible as javascript. There's no sliding, and you can't reliably make the content show up if the user mouses out.

As other people suggested, you can still improve this with javascript after the fact should the user have it enabled though - this can still work as a decent backup to noscript users.

Bubbles
  • 3,705
  • 1
  • 22
  • 25
1

I ended up using a solution that combines Antony's answer and this answer: https://stackoverflow.com/a/8928909/1342461

<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>

#foo
{
    display: none;
}

html.no-js #foo
{
    display: block;
}

$(document).ready(
   function()
   {
     $('html').removeClass('no-js');
   }
);

All the divs will be seen by people without javascript. Then, I can set my navigation links to a href="#info" for example, to get it to scroll down to the correct div for non-javascript users while doing "slide.down()" etc for javascript users.

Community
  • 1
  • 1
Legendre
  • 3,008
  • 7
  • 28
  • 44