Div verbergen op mobiele website

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

J C

J C

07/01/2014 03:49:01
Quote Anchor link
Hallo,

Ik zou graag een bepaald deel van mijn website niet willen laten zien wanner mijn website wordt bezocht met een mobiele telefoon.
Het zou gaan om het volgende scriptje:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<div id="main" class="sixteen columns">    
        <div id="bannerhome" class="sixteen columns">
        <?php
            //template/menu.php
            echo $banner;
            ?>

        </div>
    </div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
$banner ='
        <div id="kenburns" class="slideshow">
            <div class="slideshow-images" ></div>
            <div class="slideshow-captions" ></div>
            <div class="slideshow-controller" ></div>
            <div class="slideshow-loader" ></div>
            <div class="slideshow-thumbnails" ></div>
            <img src="sliderimages/1000wishes.jpg" alt="1" />
        </div>';


Ik heb zitten experimenten met @media only screen{} maar dat werkt dus niet.

Ook ben ik bezig geweest met hidden !important; maar daarmee krijg ik het ook niet weg.
Gewijzigd op 07/01/2014 04:34:20 door J C
 
PHP hulp

PHP hulp

29/03/2024 08:51:29
 
Michael -

Michael -

07/01/2014 08:09:09
Quote Anchor link
Misschien helpt onderstaande je verder. Hiermee verdwijnt de div als de browser breedte minder is dan 768px.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@media only screen and (max-width: 767px) {
    div#content{display:none;}
}
</style>
</head>
<body>

<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor neque convallis, fringilla quam quis, placerat nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget consectetur libero. Phasellus tincidunt metus felis, ut euismod sapien gravida sit amet.</div>

</body>
</html>
Gewijzigd op 07/01/2014 08:09:29 door Michael -
 
Ward van der Put
Moderator

Ward van der Put

07/01/2014 08:28:07
Quote Anchor link
Wil je de gehele div id="bannerhome" verbergen? Dan kun je inderdaad @media only screen gebruiken, maar moet je daaraan een regel voor de maximumresolutie toevoegen. Bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
@media only screen and (max-width: 480px) {
  div#bannerhome {
    visibility: hidden;
    display:    none;
  }
}
Gewijzigd op 07/01/2014 08:28:39 door Ward van der Put
 
Ivo P

Ivo P

07/01/2014 08:50:28
Quote Anchor link
zorg je er dan ook voor dat niet alleen de div niet getoond wordt, maar dan in die verborgen div ook niet een verborgen slideshow getoond wordt?
Beetje zonde om MBs aan data te laden op een mobiele verbinding en die dan niet te tonen.

Ik zou liever in PHP op basis van USER_AGENT of de keuze "ik wil de mobiele versie" die betreffende div in de html niet opnemen. Dat scheelt ten eerste al html om te laden, en ten tweede een stuk css of javascript om dit weer te verbergen en het laden van de slideshow te vermijden.
 
Michael -

Michael -

07/01/2014 09:08:18
Quote Anchor link
Ivo P op 07/01/2014 08:50:28:
zorg je er dan ook voor dat niet alleen de div niet getoond wordt, maar dan in die verborgen div ook niet een verborgen slideshow getoond wordt?
Beetje zonde om MBs aan data te laden op een mobiele verbinding en die dan niet te tonen.

Ik zou liever in PHP op basis van USER_AGENT of de keuze "ik wil de mobiele versie" die betreffende div in de html niet opnemen. Dat scheelt ten eerste al html om te laden, en ten tweede een stuk css of javascript om dit weer te verbergen en het laden van de slideshow te vermijden.

De slideshow wordt wel geladen, maar niet getoond, dus kwa data maakt het geen verschil.
Als je de slideshow niet wilt laden zou je toch naar javascript moeten kijken. Met javascript kun je kiezen of je het achteraf wel of niet wilt inladen (op basis van resolutie bijvoorbeeld).
 
Ivo P

Ivo P

07/01/2014 09:12:12
Quote Anchor link
je kunt prima 10 afbeeldingen laden en niet tonen. Dat kost je dan even goed ook data. En dat lijkt me ook wel iets waar je op wilt besparen. Als ik even aanneem dat je op een mobiel device ook vaker een draadloze verbinding via het GSM netwerk hebt (en dus een tragere en evt. per MB betaalde verbinding).

Net zo goed als dat je zou moeten overwegen om (andere) afbeeldingen in kleiner formaat aan te bieden.

een afbeelding van 600x400 laden en dan verkleind weergeven op 60x40 werk ook wel, maar maakt je site onnodig traag.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

07/01/2014 12:38:30
Quote Anchor link
Dus hoe voorkom je dan dat de afbeeldingen geladen worden?

Ik denk dat de TS daar tenminste iets aan heeft
 
Michael -

Michael -

07/01/2014 13:00:08
Quote Anchor link
Frank Nietbelangrijk op 07/01/2014 12:38:30:
Dus hoe voorkom je dan dat de afbeeldingen geladen worden?

Ik denk dat de TS daar tenminste iets aan heeft

Door met javascript te kijken naar de resolutie (if(screen.width<=500)) en vervolgens een ajax request te doen om de slideshow op te halen. Of in de request tevens te kijken naar de user agent (http://mobiledetect.net/) en aan de hand daarvan wel of niet ophalen.

Toevoeging op 07/01/2014 13:06:13:

dit is ook wel leuk. Een stukje javascript (volgens nog volledig in de kinderschoenen) die kan kijken naar de bandwidth. Zoals Example 2 kun je bij lagere snelheden een mindere resolutie tonen en bij hoge snelheden hd afbeeldingen.
 
J C

J C

07/01/2014 13:09:25
Quote Anchor link
Bedankt voor alle reacties.

Javascript heeft wel als nadeel dat dat niet altijd herkent wordt.
Eigenlijk zoek im iets wat er voor kan zorgen dat het hele javascript niet wordt uitgevoerd. Ik kan dan simpel met hidden ervoor zorgen dat de drie div's niet worden getoond.
 
Michael -

Michael -

07/01/2014 13:17:11
Quote Anchor link
J C op 07/01/2014 13:09:25:
Bedankt voor alle reacties.

Javascript heeft wel als nadeel dat dat niet altijd herkent wordt.
Eigenlijk zoek im iets wat er voor kan zorgen dat het hele javascript niet wordt uitgevoerd. Ik kan dan simpel met hidden ervoor zorgen dat de drie div's niet worden getoond.

Javascript staat in principe altijd aan en je mag er vanuit gaan dat deze bij je bezoekers ook aan staat omdat de meeste websites dit tegenwoordig wel 'vereisen'.
Je kunt met het script van mobiledetect.net in PHP controleren op de useragent en daarop je slideshow wel of niet includen.
Met 'hidden' voorkom je niet dat je slideshow wordt geladen, alleen wordt het niet zichtbaar.
Gewijzigd op 07/01/2014 13:17:42 door Michael -
 
Frank Nietbelangrijk

Frank Nietbelangrijk

07/01/2014 13:25:29
Quote Anchor link
Wat Michael zegt is inderdaad een mooie serverside oplossing.
 
J C

J C

07/01/2014 17:01:11
Quote Anchor link
Dank jullie wel, ik ga mee eens inlezen en experimenten.

Ze zeggen dat het een lichtgewicht script is, maar het bestaat uit een hoop bestanden en mappen. Probeer me er door heen te worstelen, maar heel makkelijk is het niet.

IS er iemand die ermee kan helpen, volgens mij heb ik niet alles nodig. Maar snap ook niet welk van de vele bestanden ik moet includen en of ik nog iets moet aanpassen.

Toevoeging op 07/01/2014 21:10:03:

Ik heb inmiddels na veel uren zoeken een betere duidelijke website gevonden. Wellicht hebben jullie hier ook wat aan:

http://detectmobilebrowsers.com/

Met dit als resultaat php script:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$useragent
=$_SERVER['HTTP_USER_AGENT'];
if(!preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{

?>

<!--css voor de slideshow-->
<link rel="stylesheet" href="css/slideshow.css" type="text/css" />
    <style type="text/javascript">
        .slideshow { float: left; margin: 50px; border: 10px; bgcolor: #000;}
    </style>
    <script type="text/javascript" src="js/mootools-1.3.2-core.js"></script>
    <script type="text/javascript" src="js/mootools-1.3.2.1-more.js"></script>
    <script type="text/javascript" src="js/slideshow.js"></script>
    <script type="text/javascript" src="js/slideshow.kenburns.js"></script>
<?php
}else
{
echo 'boe';
}

?>


Nu nog een manier vinden om dit met variablen korter te maken, want dit is wel veel elke keer.

Zoiets dan
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
$useragent
=$_SERVER['HTTP_USER_AGENT'];
if( preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{

$devicescheck = 1;
}

else
{
$devicescheck = 0;
}

if($devicescheck == 0)
{

?>

<!--css voor de slideshow-->
<link rel="stylesheet" href="css/slideshow.css" type="text/css" />
    <style type="text/javascript">
        .slideshow { float: left; margin: 50px; border: 10px; bgcolor: #000;}
    </style>
    <script type="text/javascript" src="js/mootools-1.3.2-core.js"></script>
    <script type="text/javascript" src="js/mootools-1.3.2.1-more.js"></script>
    <script type="text/javascript" src="js/slideshow.js"></script>
    <script type="text/javascript" src="js/slideshow.kenburns.js"></script>
<?php
}
else
{
echo 'boe';
}

?>
Gewijzigd op 07/01/2014 21:53:52 door J C
 
Michael -

Michael -

08/01/2014 08:13:47
Quote Anchor link
Waarom vond je mobiledetect.net niet handig? Ik vind bij detectmobilebrowser.com geen documentatie van hoe het werkt.

Met eerst genoemde zal ik het gewoon als volgt doen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

if( !$detect->isMobile() ){

    //Hier je slideshow
}
?>
 
J C

J C

10/01/2014 16:43:52
Quote Anchor link
Ik wist niet welke van de bestanden ik moest uploaden. Ook geen duidelijk uitleg.

De website die ik aangaf geeft gewoon alle mogelijkheden op, welke je regelrecht op je website kan planten.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.