трябва ми кратък къстъм код - работа за програмист

V

viper1

Member
Значи имам къстъм код на който ми трябва преработка.
Той дефинира 2 класа "desktop-only" и "mobile-only"
Използвам го така:
<div class="desktop-only" style="overflow: hidden; display: none">
<div class="mobile-only" style="overflow: hidden; display: none">

Тоесто всичко, което е в div-a ми го показва само на десктоп и обратното.

Кода си работи, но ми трябва следното: в сегашният вариант в div-а ми показва на десктоп и само скрива съдържданието за мобилни у-ва, но всъщност в бекграунд го зарежда и се получава конфликт между тях. Трябва да се дефинира така, че когато се отвори примерно на десктоп зарежда си съдържданието в клас <div class="desktop-only">, a към <div class="mobile-only"> въобще да не се обръща към съдържанието му и да не го зарежда на страницата.

Примерно имам 2 видеа едното е в клас десктоп, другото в мобилни. На десктоп си ми зарежда това което си е в клас <div class="desktop-only">, другото за мобилни го скрива, но тъй като са на аутоплей се чува звука и на другото скрито за мобилни видео!

За работа по кода си плащам!
 
Нещо такова:

Код: 
<?php
    function isMobile() {
        return preg_match("/(android|webos|avantgo|iphone|ipad|ipod|blackberry|iemobile|bolt|boost|cricket|docomo|fone|hiptop|mini|opera mini|kitkat|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
    }
?>

И после:

Код: 
<?php if(isMobile()): ?>
    <div class="mobile-only" style="overflow: hidden;">
<?php else: ?>
    <div class="desktop-only" style="overflow: hidden;">
<?php endif; ?>
 
Според мен се губи смисъла да са два div-а ако във всеки момент единия ще е празен. Може да си е просто един div, който да го пълниш със съответното съдържание, независимо дали това съдържание е предоставено от PHP или е генерирано в браузъра. Но това са детайли. Аз на твое място бих направил сайта responsive, т.е. при различните резолюции да се променя само разположението на нещата през CSS.
 
сайта си е респонсив просто видеата не са респонсив и си трябва 2 отделни класа за десктоп и мнбилни.
Viktor R написа какво трябва, но не ми отговаря на ЛС да му платя и да ми доработи текущият код,каза че не иска нищо и до там!
 
Това е къстъм кода,който поствам ,тъй че ако има някой, който знае как да внедри казаното от Viktor R, ше почерпа

<!--// The Invisible Div //-->

<style>
@Media all and (max-device-width: 1098px) {
*[class*="mobile-only"] {
display: block !important;
max-height: none !important;
}
}
</style>

<!--[if !mso]><!-->
<div class="mobile-only" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
<!--// Everything inside is invisible to desktop //-->
</div>
<!--<![endif]-->



<!--// The Invisible Div //-->

<style>
@Media all and (min-device-width: 1098px) {
*[class*="desktop-only"] {
display: block !important;
max-height: none !important;
}
}
</style>

<!--[if !mso]><!-->
<div class="desktop-only" style="font-size: 0; max-height: 0;

overflow: hidden; display: none">
<!--// Everything inside is invisible to mobile //-->
</div>
<!--<![endif]-->
 
Всъщност подхода според мен трябва да е малко по различен. Div - а с видеото ти трябва да се зарежда с Ajax след проверка на текущата резолюция на екрана. Ако ползваш Bootstrap или нещо подобно е лесно да определиш текущата резолюция и на база на това да си заредиш в съответния Div каквото ти трябва, Ако не ползваш някакъв frondend frame , пак става ама е малко повече играчка, с JS.
Поздрави и успех
 
Благодаря за отговорите, при мен с php странно, но не работеше , получи се с js ето елементарен код, може да потрябва на друг:

<script type='text/javascript'>
var Mobile ='<iframe src="testfold/testvid_mobile.mp4" width="500" height="300"
scrolling="no"></iframe>';
var Desktop = '<iframe src="testfold/testvid_laptop.mp4" width="800" height="450"
scrolling="no"></iframe>';
if (screen.width < 860)
{document.write (Mobile)}
else
{document.write (Desktop)}
</script>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе