PragmaMx Mobile 1.12.3 HTML 5 & Responsive design - Javascript conflicts ?

shorty · 19 Dezember 2013, 23:36:51

Hello @ all PragmaMx Community

In the same reflexion of AlaMobile,
i wanna make a template can be used on every type of hardware, Computer/Table/Mobile...
So i try to convert html 5 Responsive themes to PragmaMx.and need your help

It's work a little bit but stay some problems. My biggest is a Jquery conflicts with other module use javascript.
Also it's difficultto do it work without touch header.php

for exemple, in my last "working" test i put CSS in settings.php and Javascript in header.php

header.php :

Code Auswählen

<head>
<title><?php echo $pagetitle ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo _CHARSET ?>" />
<meta http-equiv="Content-Language" content="<?php echo _DOC_LANGUAGE ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="expires" content="0" />
<meta name="revisit-after" content="10 DAYS" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="resource-type" content="DOCUMENT" />
<meta name="distribution" content="GLOBAL" />
<meta name="rating" content="general" />
<meta name="author" content="<?php echo htmlspecialchars(strip_tags($GLOBALS['sitename'])) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($GLOBALS['metakeywords']) ?>, pragmaMx <?php echo PMX_VERSION ?>" />
<meta name="generator" content="pragmaMx <?php echo PMX_VERSION ?> - by http://pragmaMx.org" />
<meta name="copyright" content="Copyright (c) <?php echo Date("Y") ?> by <?php echo htmlspecialchars(strip_tags($GLOBALS['sitename'])) ?>" />
<meta name="description" content="<?php echo htmlspecialchars(strip_tags($GLOBALS['slogan'])) ?>" />
<script type="text/javascript" src="includes/javascript/debugmode.js"></script>
<script type="text/javascript" src="includes/javascript/jquery/jquery.colors.js"></script>
<script type="text/javascript" src="themes/colorstest/js/bootstrap.js"></script> <!-- Bootstrap -->
<script type="text/javascript" src="themes/colorstest/js/filter.js"></script> <!-- Filter JS -->
<script type="text/javascript" src="themes/colorstest/js/jquery.carouFredSel-6.1.0-packed.js"></script> <!-- CarouFredSel -->
<script type="text/javascript" src="themes/colorstest/js/jquery.flexslider-min.js"></script> <!-- Flexslider -->
<script type="text/javascript" src="themes/colorstest/js/jquery.isotope.js"></script> <!-- Isotope -->
<script type="text/javascript" src="themes/colorstest/js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->
<script type="text/javascript" src="themes/colorstest/js/jquery.tweet.js"></script> <!-- Tweet -->
<script type="text/javascript" src="themes/colorstest/js/custom.js"></script> <!-- Main js file -->

and i put css in settings.php of theme

Code Auswählen

pmxHeader::add_style(MX_THEME_DIR . '/style/bootstrap.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/font-awesome.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/flexslider.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/prettyPhoto.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/style.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/bootstrap-responsive.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/forms.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/news.ss');
pmxHeader::add_style(MX_THEME_DIR . '/style/patch_ie.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/print.css');

inside this lineof header.php, i've renamhed te jquery.js file given with the original theme and put inside pmx jquery folder for test
<script type="text/javascript" src="includes/javascript/jquery/jquery.colors.js"></script>

- the navigation don't work when i use ther original jquery.js file from system

- the navigation don't work with any module use javascript like forums

- the navigation don't work also if i use a bottom javascript navbar like you can see on http://tradezone.fr homepage

- the navigation work good when i use in modules don't use Javascript like legal (only a right side block don't wanna come but all the left and top navigation works.)

- I also don't know how center block can take right and left block space when they're not active (like in working legal module).

- Another bug come when your minimize the Window, an empty area stay at the top of site, and i've the same error with multiple thème i've tried to convert

So PragmaMx globally working with responsive theme but it's stay little things to do for adapt thèmes.

Thanks all the community for your support and for your trust in PragmaMx.

AlternativeComputing · 22 Dezember 2013, 14:42:47

If you can wait, i send you a download link from a finished Responsive themes.
This you can use as sample.

If you use Responsive themes, you don't need the als Mobile Modules

moeller · 23 Dezember 2013, 18:35:33

Hallo Peter,
ich kann mir vorstellen, dass es nicht nur mich interessieren würde, wenn du den Link zu einem Responsive Pmx-Theme auch hier rauslegen würdest.

Dann könnte man mal sehen wie das gestrickt wird und evtl. selbst für vorhandene, eigene Themes übernehmen.

AlternativeComputing · 23 Dezember 2013, 20:55:41

Ja kann ich auch machen.

Bin heute noch nicht dazu gekommen.

shorty · 24 Dezember 2013, 00:18:34

Danke Peter !
Thanks for you support

I'm interrested by your work.
You can send me a link, i need many themes for my website, and yes moeller, maybe it's will help us for convert
over html 5 themes. So i really want to convert the theme i show you, and other themes i like.
Themes i tested works you can use all modules and blocks but i get problems with javascript jquery inclusion and header keep a blank space. Yes with a responsive theme it's not necessay to use alamobile,
and you can acces to every modules. I think it's a good solutions for make multiplatform website.
For me the principal problem i for integrate external mixed java(jquery)/css inclusion

regards.
shorty

AlternativeComputing · 24 Dezember 2013, 01:18:34

A demo you can watch here: http://www.pusdorf.de

Resize the Browserwindows to view the efects.

I will make at the seceond Christmas Day a pmx_blank fit for Responsive design and put it in the PMX Downloads.

cihan · 24 Dezember 2013, 18:53:31

Hallo,
ich finde, man kann mit 'Media Queries' jedes tabellenloses Theme so anpassen, dass es sich der Auflösung des jeweiligen Gerätes anpasst. Habe schon vor langer Zeit mal damit gespielt... Derzeit ist bei mir so, dass wenn die Auflösung kleiner als 600px wird, sich die ganze Seite responsiv verhält. Und das ist Geräte-unabhängig... Funktioniert also auch im Browser, wenn ihr den schmaler macht.

Das ganze beginnt bei mir ab 600px abwärts, weil ich der Meinung bin, dass so ein 7-Zoll-Tablet im Querformat durchaus groß genug sind, um eine Seite (zumindest meine) in normal-Größe anzuzeigen.

Damit das ganze auch im Forum funktioniert musste ich weg von diesem zwei-Spalten-System und hin zu einer Spalte, somit passt sich auch das Forum sehr schön an die jeweilige Größe.

lg

AlternativeComputing · 24 Dezember 2013, 19:11:34

Zitat von: cihan am 24 Dezember 2013, 18:53:31
Hallo,
ich finde, man kann mit 'Media Queries' jedes tabellenloses Theme so anpassen, dass es sich der Auflösung des jeweiligen Gerätes anpasst. Habe schon vor langer Zeit mal damit gespielt... Derzeit ist bei mir so, dass wenn die Auflösung kleiner als 600px wird, sich die ganze Seite responsiv verhält. Und das ist Geräte-unabhängig... Funktioniert also auch im Browser, wenn ihr den schmaler macht.

Das ganze beginnt bei mir ab 600px abwärts, weil ich der Meinung bin, dass so ein 7-Zoll-Tablet im Querformat durchaus groß genug sind, um eine Seite (zumindest meine) in normal-Größe anzuzeigen.

Damit das ganze auch im Forum funktioniert musste ich weg von diesem zwei-Spalten-System und hin zu einer Spalte, somit passt sich auch das Forum sehr schön an die jeweilige Größe.

lg

Responsive design = Media Queries

Nur müssen die css Dateien für die Media Queries erst mal geschrieben werden.
Was bei etwas komplexeren Themes lange dauern kann.

Das Theme auf der von mir Verlinkten Seite stammt von mir und werde dieses, mit Absprache des Seitenbetreibers, in abgewandelter Form als Vorlage in den Download packen.

shorty · 25 Dezember 2013, 07:16:44

Happy Merry Christmas @ll community

re and thank you for your responses

So the theme you show me seems be functionnal

but is it working with blocks right and left simulatenous

have you found a way to include java/css can be used for converting themes ?
In your theme you use only the jquery library of pmx core or it's possible to use multiple library.
I put this questions because i also continue to hope the theme i show u can perfectly work with pragmamx

regards

AlternativeComputing · 25 Dezember 2013, 16:30:36

Zitat von: shorty am 25 Dezember 2013, 07:16:44
...

but is it working with blocks right and left simulatenous
....

The Blocks left and right, yes it's works.
At the first in Mobile devices the content will shown and than came the blocks:

header
header menu
Middle content
left Block
right Block

Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
have you found a way to include java/css can be used for converting themes ?
...

Yes, i have modified the header.php (in pmx-root) to use Media Queries.
And in the Themes i added the Media Queries css files.

You need jQuery (from PMX-Core. Maybe you must update it to 1.8.3) only, if you will use the Bootstrap/Flat UI Frameworks or other jQuery plug-ins.

The "converting" does the Media Queries in the css files, no javascript needed for that.

Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
In your theme you use only the jquery library of pmx core or it's possible to use multiple library.
....

You should use the jQuery version from PMX-Core and take only the necessary plug-ins in the Theme, if the pmx-core don't have it.
If the Plug-Ins needed a Version higher as 1.6.4 Update it to a Version < 1.9.0.

The Version >= 1.9.0 is a UTF-8 Version

Multiple jQuery Versions can make conflicts.
.

Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
I put this questions because i also continue to hope the theme i show u can perfectly work with pragmamx
...

If you used my Theme as a template it 100% with pragma running, even with the 2.0.

shorty · 30 Dezember 2013, 07:47:22

Thanks for your support

It's help me a lot :

ZitatIf the Plug-Ins needed a Version higher as 1.6.4 Update it to a Version < 1.9.0.

So i've update to 2.0.2 and it's working better. (only a right side widget don't wanna work. So i delete it.)
I've modified the colors, and i will start to try to put a bottom navigation bar tomorrow or next year.
Also i see you sucribe on the wrong website. normally if you try to acces with a mobile phone or a tablet. the testing website http://tradezone.fr/trade-zone/ redirect you to another testing website http://tradezone.fr/services/ [old relase of same template]

I've also find a solution for the bug come when your minimize the Window, an empty area stay at the top of site. It was a padding-top in the css i've moved and duplicate in other top tables of the theme and it's works better.

It stay many blocks positionnement problems. also to fix right block at the right side (come on the left side of center blocks or if they stay à right the don't take all the page and let a blank space). Also i've thinked to replace original navigation menu by blocks content but i don't know how/if it's possible to automated with personalise css of blocks <ul> <li>, <li>²..., <span> of blocks

Code Auswählen


 <li class="has_sub"><a href="#" class="br-blue"><i class="icon-list-alt"></i> Services  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
<ul class"nameofclass">
<li>content</li>
</ul> 
 <li class="has_sub"><a href="#" class="br-green"><i class="icon-list-alt"></i> Services  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
<ul class"nameofclass">
<li>content</li>
</ul>

Also i'm thinking its better to put center blocks (main content) before left and right blocks in minimized mode, but i don't know if it's possible because the lefts blocks are written before in the html code. Like this mobile user who consult the website can acces more easily to the content.

So i'm really interresting to try your theme, can you send me a download link ?
I also can give links the theme if somedy also wanna work on it.

Happy new year @ all PragmaMx best cms community

Regards.

shorty · 31 Dezember 2013, 07:45:08

re @ all community

I've also a cache problem similaire to this message from sitki
Loginform and other fuctions i try to call appears in bad way like
-:_f19d6c115201e2f3827fd39085067e44_:-loginform} instead {loginform}
I try to change settings.php true/false :

Code Auswählen

define('MX_THEME_CACHABLE', true);

and the visitors cache in admin area but without succes like you can see on header & footer of the testing websites.

http://www.pragmamx.org/Forum-topic-28232-start-msg182479.html#msg182479

i try to read this but i've don't find a solution @ this time.
http://www.pragmamx.org/doku.php?id=faq:allgemein:wie_wirkt_sich_das_cache_zuruecksetzen_aus

regards
shorty

AlternativeComputing · 02 Januar 2014, 05:59:36

Let me finished the sample Theme.

In this you will find all you neeed.

shorty · 03 Januar 2014, 00:40:18

Danke !

AlternativeComputing · 06 Januar 2014, 17:19:19

http://www.pragmamx.org/Downloads-pmx-blank-bootstrap-style-Responsive-Design-view-863.html

shorty · 06 Januar 2014, 21:15:09

i will try it

AlternativeComputing · 10 Januar 2014, 19:24:37

Did it help you?

shorty · 13 Januar 2014, 04:26:34

re

It's great job, it will be helpful but at this time it's not really helping me.
I don't now where is the conflict for the displaying of bottom navbar & for login form.
http://www.tradezone.fr/services/

thanks for your support

AlternativeComputing · 14 Januar 2014, 01:49:42

Try this:

Code Auswählen



          <nav>
          <!-- main-nav -->
          <!-- Navbar -->

          <div id="headmenu">
             <div class="navbar page-content">

                <div class="navbar-inner">

                         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                         </a>
                      <!-- START Loginform -->
                      <div id="loginForm" class="pull-left">
                        {LOGINFORM}
                      </div>
                      <!-- END Loginform -->
                      <div class="nav-collapse collapse">

                         <ul class="nav">
                            <li><a href="/" class="tohome"><i class="icon-home icon-large"></i> {_THEME_GOTOHOME}</a></li>
                            <!-- START headmenue -->
                            <li class="active"><a tabindex="-1" href="#">Home</a></li>
                            <li><a tabindex="-1" href="#">About</a></li>
                            <li><a tabindex="-1" href="#">Services</a></li>
                            <li><a tabindex="-1" href="#">Products</a></li>
                            <li><a tabindex="-1" href="#">Contact</a></li>
                            <!-- END headmenue -->
                         </ul>

                      </div>
                      <!--//.nav-collapse -->

                </div>

             </div>
          </div>
          <!-- //navbar -->
          <!-- //main-nav -->
          </nav>

<Edit>
And for the Navigation use the Menumanarger or the bootstrap navigation.

</Edit>

shorty · 14 Januar 2014, 19:01:53

Thanks, loginform works now !
My navbar works also, it was a human mistake.
the reason was i've forgot to add the navbar functions inside the php file.
So it stay some graphical ajustement now, and i think the new pmx blank responsive will help a lot

I also wanna ask community for a syntax inside settings.php for put different html pages for different modules.
It's working with two modules but i can't put one more if or elsif, i don't know why

working syntax for use a second template in some modules

Code Auswählen

if (mxIsUser())
{
if (mxModuleActive('Troc') && ('Forum')) {
define('MX_THIS_THEMEFILE', 'index.html');
	}
	
else

define('MX_THIS_THEMEFILE', 'theme.html');

}

NOT working test for try to put a third html page for other modules

Code Auswählen

if (mxIsUser())
{
if (mxModuleActive('Troc') && ('Forum')) {
define('MX_THIS_THEMEFILE', 'blog1.html');
	}
elseif (mxModuleActive('Webmasters') && ('Videos')) {
define('MX_THIS_THEMEFILE', 'blog2.html');
	}

else
{
define('MX_THIS_THEMEFILE', 'theme.html');
}
}

I try to put different html for guest and the possibility to choose different pages for each modules for members and guest.

Thanks BDM design for your great support

Regards.