Java script to run/ mobile menu (Solved)

[Dave59]

I have searched the forums for hours and tried for 3 days to solve this.
Fought with superfish and several others.
I am using CMSMS 1.11.10
I have set up mobile detection rather then screen size as there are a lot of rich people with 240 - 400 dpi phones. Thanks Goran thats the only one I found that worked and is well explained. Great work!
So I can switch the css and the div on a mobile detect. I have used the mobile menu on the computer screen just for debugging.
What I would like to do is repeat the navigation in my temporary static site http://www.edible-gold.com.
(Or preferably have a slide in from the side)
This collapses to an acordian menu for click only on mobile or smaller screens.
In the static site the expansion is set by

Code: Select all

<div id="mobilemainnav" class="fluid"><a href="#" class="indent50" onMouseOver="dmxAnimate('#mobilemainnav', {'height': 30}, {'height': 240})">Navigation</a> 

The MouseOver can be replaced by OnClick.
I can not see how to add the behaviour in CMSMS when calling the menu template.

Code: Select all

<a href="#" class="indent50" onMouseOver="dmxAnimate('#mobilemainnav', {'height': 30}, {'height': 240})">Navigation</a>
{menu number_of_levels='1'}

Obviously the {'height': 30} {'height': 240}are confusing for the system. The template throws up a syntax error. It tried

Code: Select all

<div id="menuwrapper">
<a href="#" class="indent50" onMouseOver="dmxAnimate {literal}('#menuwrapper', {'height': 30}, {'height': 240}){/literal}">Navigation</a>
{menu number_of_levels='1'}
</div>

That solved the error.
In the head I have

Code: Select all

{literal} 
<__script__>function dmxAnimate() {//v1.0 
  jQuery.dmxAnimate.apply(this, arguments);
}</__script>
    <__script__ type="text/javascript" src="/uploads/ScriptLibrary/jquery.easing.1.3.js"></__script>
 <__script__ type="text/javascript"src="/uploads/ScriptLibrary/jquery.dmxzone_animations_pack.js"></__script>
 <__script__ type="text/javascript" src="/uploads/ScriptLibrary/jquery-latest.pack.js"></__script>
<__script__ type="text/javascript"src="uploads/css-responsive/respond.min.js"></__script>
{/literal}

The output in fire fox is

Code: Select all

<div id="menuwrapper"><a href="#" class="indent50" onMouseOver="dmxAnimate ('#menuwrapper', {'height': 30}, {'height': 240})">Navigation</a>

which looks good but the script wont run? All you see is the 30px high div with Navigation. It wont expand on click. Can anyone tell me why please?
The above is not elegant in that the hight of the menu div is predetermined (240 px). If you add content you have to change this.

The resengoerg.de works great almost exactly what I am trying to do. I may drop in for a drink its not that far from me. I tried to implement this as per the instructions, but failed.
In the simplex template when the menus collapses to vertical you can not select the submenus. Try selecting a child of “CMSMS works.
The solution shown in http://themes.multiintech.com/ looks good, but this dose not seem to be available (just for show?).

Is there a way of swapping CSS on click?

The Url is http://www.entwurf.wats-on.de/ depending of which version of the template I have attached it could be a mess or a bigger mess as this is my place for learning. Not intended to be public or have perfect HTML.
I have looked at several templates with a view to purchase. I was amazed to see that even many of these failed on a mobile device and small screens, with the menu disappearing off the bottom of the screen or other problems.
I am inspired by the team at CMSMS when I see what is produced, at least it can be done, but I also see a lot of people struggling with this subject.
There are massive hurdles for nubies to fight with to produce a responsive site in CMSMS. Once I have solved this I will try and write up a detailed post from a greenhorns view point of what we did. It may help others. If it gets solved.
I think that is enough. If anyone can save my sanity I would be greatfull.
I will even buy them a beer next time I am passing the Resengörg.
Thanks
Dave

[velden]

Note that CMSMS is in no way involved in your javascript execution!

The Smarty error you got is caused by using the curly brackets {} inside the Javascript. You can indeed use {literal} tags OR (less work, cleaner code) make sure there is at least one space after each opening curly bracket

Code: Select all

<div id="menuwrapper">
<a href="#" class="indent50" onMouseOver="dmxAnimate('#menuwrapper', { 'height': 30 }, { 'height': 240 })">Navigation</a>
{menu number_of_levels='1'}
</div>

As your url gives a 403 forbidden it's hard to look what's going wrong.
Have a look at the complete html source and use a web inspector to find javascript errors.

[Dave59]

Sorry if I gave the impression CMSMS were responsible or should get involved.
I did not mean to do that. It is my problem and I am very thankful for any help I get.
I thought I was missing something basic in the way I am linking the JS in the head.
Especially as Superfish didn't work either.
I was also not implying your responsibility for the third party premium templates it was just an observation. It is up to us to see that we buy what works.
I have made a copy in a sub folder this morning an re-installed.
I will leave this alone for a while. http://entwurf.wats-on.de/cmsms/index.php
I was cleaning out the old installation as it was getting messy so it is off line. Sorry!
I have put backgrounds in bright colors just to easily see that things are working.
The menu that should open is yellow.
I also use the{literal} as you can see they are there. As space gets easily missed.
As I stated in my post I noticed this mistake a corrected it.
I am not looking for some one to be involved with my Javascript. I have probably made a silly mistake and can not see it. The Js runs great on my static site so I feel it must be in the template.
May be wrong!
Thanks
Dave

[velden]

Don't worry.

At this point your template is broken. Probably because you hard-coded the links to javascript files in it and didn't change those while moving the site.

Tip: use {uploads_url} in stead of '/uploads'

e.g (note that forum adds underscores automatically in script tags:

Code: Select all

 <__script__ type="text/javascript" src="{uploads_url}/ScriptLibrary/jquery-latest.pack.js"></__script>

Then, make sure you're jQuery library is linked BEFORE you try to use it.
Then fix the missing space before 'src=':

Code: Select all

<__script__ type="text/javascript"src="uploads/css-responsive/respond.min.js"></__script>

[Dave59]

Thanks
I will start from scratch as there are so many changes and quoted out bits. I will try and have a cleaner template for tomorrow.
I had never even thought of that {uploads_url}. Silly you see it for images etc all the time. It just didn't click.
I am now editing in Notepad++. Saving each update (001, 002)and keeping a record as well as describing each update in an word table. This way I hope to avoid the mess I got in by editing in the WYSIWYG in CMSMS.
Thanks for your help
Dave

[Dave59]

I think I have cleaned up all the mistakes I had made in the links.

Code: Select all

{literal} 
  <__script__ type="text/javascript" src="{uploads_url}/ScriptLibrary/jquery.easing.1.3.js"></__script>
 <__script__ type="text/javascript" src="{uploads_url}/ScriptLibrary/jquery.dmxzone_animations_pack.js"></__script>
 <__script__ type="text/javascript" src="{uploads_url}/ScriptLibrary/jquery-latest.pack.js"></__script>
<__script__ type="text/javascript" src="{uploads_url}/css-responsive/respond.min.js"></__script>
{/literal}

I am not sure how the page loads so I have tried various combinations of where to put the following as the links must be populated before the script executes as you mentioned.

Code: Select all

<__script__>function dmxAnimate() { //v1.0 
  jQuery.dmxAnimate.apply(this, arguments); }</__script>

First I had it in the literal tags with the links.
Then directly after the links.
In the body before pagewrapper

Then with the links before {process_pagedata}
If the links can not be populated before the script executes then I have no chance.
The template now only has a content and this menu. To hopefully make it easier.

DMXzone have a lot of interesting plugins for dreamweaver and it would be great if they can work in CMSMS in the converted template.
Dave

[velden]

Well, you really need to redo the template. Output is lacking opening tags for html and head, nog doctype declaration.

And {uploads_url} won't work from within {literal} tags (of course).

[Dave59]

The (html and head)tags were there I had just tried putting the JS calls before the {page process} as a last desperate thought to get them loaded first, so they weren't where you would expect them to be.
They are back where they belong now and the {literal} is deleted.
Thanks the literal should have been removed I missed that.
I took all the content out and left a minimum to focus on the menu.
If I can not get this to work then I will need to find another solution and populating at this stage seemed only to de-focus.

A Html validation check throws up 2 errors:
<__script__>function dmxAnimate() { //v1.0
and
…href="#" class="indent50" onMouseOver="dmxAnimate ('#menuwrapper', {'height': …
because of the MouseOver
I think I am trying to run before I can walk and causing you too much trouble.
Sorry.

[velden]

Okay, because we already got this far I'll continue, but this really is some basic knowledge.

Code: Select all

  <__script__ type="text/javascript" src="http://entwurf.wats-on.de/cmsms/uploads/ScriptLibrary/jquery.easing.1.3.js"></__script>
 <__script__ type="text/javascript" src="http://entwurf.wats-on.de/cmsms/uploads/ScriptLibrary/jquery.dmxzone_animations_pack.js"></__script>
 <__script__ type="text/javascript" src="http://entwurf.wats-on.de/cmsms/uploads/ScriptLibrary/jquery-latest.pack.js"></__script>
<__script__ type="text/javascript" src="http://entwurf.wats-on.de/cmsms/uploads/css-responsive/respond.min.js"></__script>

You can't include jquery.easing BEFORE you include jQuery itself. So make sure jquery-latest.pack.js is loaded before the easing and dmxzone scripts.

It really is pretty straight forward to create a cmsms template from a working, static html page (I do this all the time). But then you should not change the order or things etc.

Further: learn to work with some web inspector like e.g. Firebug for Firefox. You can't do without such a tool. It will immediately show you errors regarding javascript, unloadable files.
It is a great help for finding out why some css styling is not applied as you expected too.

[Dave59]

I am sorry I troubled you. I know its basic.
I use web developer 1.2.5 in Firefox. I quoted extracts from this a couple of times.
Here is a direct copy from my template that is working.

Code: Select all

</__script>
<__script__ src="http://use.edgefonts.net/arapey:n4:default.js" type="text/javascript"></__script>
<__script__ type="text/javascript" src="../ScriptLibrary/jquery.easing.1.3.js"></__script>
<__script__ type="text/javascript" src="../ScriptLibrary/jquery.dmxzone_animations_pack.js"></__script>
<__script__ type="text/javascript" src="../ScriptLibrary/jquery-latest.pack.js"></__script>
<__script__ src="../css-responsive/respond.min.js"></__script>

The same as in my CMSMS template
It now works with the order you suggested. Then why did it work with this order in the static site?
I don't expect an answer it is only frustration.
At least I know the script can work so I will solve it next time.
CMSMS Even the name is targeted at beginners. People who will need to learn some basics.
You were very patient thank you.

[velden]

'Simple' is actually ment for the end-users, the editors.

The website developer will indeed need to have some understanding of html/css/javascript and specifically Smarty. You will also need to understand some basic programming like a foreach loop or if-then-else statements.

I'm patient because I've been there
But I can assure you that your investment in learning this cms will pay back. Especially if you're going to build more websites.

[Dave59]

Thanks.
I checked my static template in fire fox.
When I look at the source code the Jquery-latest.pack.js is in fact loaded first, but in all my pages on my hard drive before uploading it is last. In fact the header is very different in fire fox. I must dig deeper.
I have learnt a lesson Thanks

[applejack]

DPI and screen size are not the same thing.

See this a reference http://www.quirksmode.org/mobile/tableViewport.html