Dover Fine Responsive Template

Quote:

---

Originally Posted by dharrison

Yeh you are right,that was a lot easier. :blush:

---

I am happy it worked for you ;)

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

I am happy it worked for you ;)

Thanks,

Anne

---

Sorry, I did mean to add a thank you to my post.

I have created 2 new pages: page_2 and page_3, but I am getting horizontal scroll bars for tablet and phone resolution.

The only difference I can see is where the body id is page for the standard pages, but for the two new pages its page2body. But I cannot locate any css that may be causing the conflict.

Please, I welcome any advice. :shocking:

Quote:

---

Originally Posted by dharrison

Sorry, I did mean to add a thank you to my post.

I have created 2 new pages: page_2 and page_3, but I am getting horizontal scroll bars for tablet and phone resolution.

The only difference I can see is where the body id is page for the standard pages, but for the two new pages its page2body. But I cannot locate any css that may be causing the conflict.

Please, I welcome any advice. :shocking:

---

If I were trouble shooting it I would use the web developer tools and start putting display:none; on elements until I found the one that was breaking the page.

Thanks,

Anne

I have been doing so all night. All the other pages (about us, etc) resize well, but for some reason, what was page 2 and page 3, leave horizontal scroll barson smartphone and tablet setup.

I have run page 2 and about us on Winmerge and with exception to the body id, its all pretty much the same. There isn't any custom styling that appear to be affecting these two pages. :wacko:

Quote:

---

Originally Posted by dharrison

I have been doing so all night. All the other pages (about us, etc) resize well, but for some reason, what was page 2 and page 3, leave horizontal scroll barson smartphone and tablet setup.

I have run page 2 and about us on Winmerge and with exception to the body id, its all pretty much the same. There isn't any custom styling that appear to be affecting these two pages. :wacko:

---

What happens when you take all of the content out of the page?

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

What happens when you take all of the content out of the page?

---

Same story. The content is only paragraphs and a numbered list. the wholething remedies itself when I hide .content But I need that!

Quote:

---

Originally Posted by dharrison

Same story. The content is only paragraphs and a numbered list. the wholething remedies itself when I hide .content But I need that!

---

Then you have figured out what is causing the problem ;) Just eliminate all css styles on this element and those that are cascading one by one to find the offender.


Thanks,

Anne

Quote:

---

Originally Posted by batracy

Hmph, seems I found another problem. When trying to navigate on my iPhone 5 the screen behaves badly - as in instead of scrolling to allow selection of menu items, it just clears and goes back to the home page at the moment when the browser bar at the top and the browser options bar at the bottom clear.

I tested this on the simulator and it worked fine - just does it on the actual phone. Any ideas?

---

I struggled with this and found the fix.. actually 2 fixes I think are out there.. and they are related to the
includes/templates/******/jscript/jquery.slimmenu.min.js
file.

This thread offers one solution (I didn't try this one)..
https://www.zen-cart.com/showthread....ter-New/page60

and another (the one that worked for me) is found here..
https://github.com/adnantopal/slimme...limmenu.min.js

which uses this code..

Code:

---

(function(e,c,a,g){var d="slimmenu",f={resizeWidth:"768",collapserTitle:"Main Menu",animSpeed:"medium",easingEffect:null,indentChildren:false,childrenIndenter:"&nbsp;&nbsp;"};function b(i,h){this.element=i;this.$elem=e(this.element);this.options=e.extend({},f,h);this.oldwidth=0;this.init()}b.prototype={init:function(){var h=this.options,j=this.$elem,i='<div class="menu-collapser">'+h.collapserTitle+'<div class="collapse-button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div></div>',k;j.before(i);k=j.prev(".menu-collapser");j.on("click",".sub-collapser",function(m){m.preventDefault();m.stopPropagation();var l=e(this).closest("li");if(e(this).hasClass("expanded")){e(this).removeClass("expanded");e(this).find("i").html("▼");l.find(">ul").slideUp(h.animSpeed,h.easingEffect)}else{e(this).addClass("expanded");e(this).find("i").html("▲");l.find(">ul").slideDown(h.animSpeed,h.easingEffect)}});k.on("click",".collapse-button",function(l){l.preventDefault();j.slideToggle(h.animSpeed,h.easingEffect)});this.resizeMenu({data:{el:this.element,options:this.options}});e(c).on("resize",{el:this.element,options:this.options},this.resizeMenu);e(c).trigger("resize")},resizeMenu:function(l){var m=e(c),h=l.data.options,j=e(l.data.el),k=e("body").find(".menu-collapser");var i=m.width();if(c.innerWidth!==g){if(c.innerWidth>i){i=c.innerWidth}}if(i!=this.oldwidth){this.oldwidth=i;j.find("li").each(function(){if(e(this).has("ul").length){if(e(this).has(".sub-collapser").length){e(this).children(".sub-collapser i").html("▼")}else{e(this).append('<span class="sub-collapser"><i>▼</i></span>')}}e(this).children("ul").hide();e(this).find(".sub-collapser").removeClass("expanded").children("i").html("▼")});if(h.resizeWidth>=i){if(h.indentChildren){j.find("ul").each(function(){var n=e(this).parents("ul").length;if(!e(this).children("li").children("a").has("i").length){e(this).children("li").children("a").prepend(b.prototype.indent(n,h))}})}j.find("li").has("ul").off("mouseenter mouseleave");j.addClass("collapsed").hide();k.show()}else{j.find("li").has("ul").on("mouseenter",function(){e(this).find(">ul").stop().slideDown(h.animSpeed,h.easingEffect)}).on("mouseleave",function(){e(this).find(">ul").stop().slideUp(h.animSpeed,h.easingEffect)});j.find("li > a > i").remove();j.removeClass("collapsed").show();k.hide()}}},indent:function(k,j){var h="";for(var l=0;l<k;l++){h+=j.childrenIndenter}return"<i>"+h+"</i>"}};e.fn[d]=function(h){return this.each(function(){if(!e.data(this,"plugin_"+d)){e.data(this,"plugin_"+d,new b(this,h))}})}})(jQuery,window,document);

---

Hope that helps! Totally fixed my SlimMenu problems on the iphone.

-Andy

Quote:

---

Originally Posted by Andy_M

I struggled with this and found the fix.. actually 2 fixes I think are out there.. and they are related to the
includes/templates/******/jscript/jquery.slimmenu.min.js
file.

This thread offers one solution (I didn't try this one)..
https://www.zen-cart.com/showthread....ter-New/page60

and another (the one that worked for me) is found here..
https://github.com/adnantopal/slimme...limmenu.min.js

which uses this code..

Code:

---

(function(e,c,a,g){var d="slimmenu",f={resizeWidth:"768",collapserTitle:"Main Menu",animSpeed:"medium",easingEffect:null,indentChildren:false,childrenIndenter:"####"};function b(i,h){this.element=i;this.$elem=e(this.element);this.options=e.extend({},f,h);this.oldwidth=0;this.init()}b.prototype={init:function(){var h=this.options,j=this.$elem,i='<div class="menu-collapser">'+h.collapserTitle+'<div class="collapse-button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div></div>',k;j.before(i);k=j.prev(".menu-collapser");j.on("click",".sub-collapser",function(m){m.preventDefault();m.stopPropagation();var l=e(this).closest("li");if(e(this).hasClass("expanded")){e(this).removeClass("expanded");e(this).find("i").html("▼");l.find(">ul").slideUp(h.animSpeed,h.easingEffect)}else{e(this).addClass("expanded");e(this).find("i").html("▲");l.find(">ul").slideDown(h.animSpeed,h.easingEffect)}});k.on("click",".collapse-button",function(l){l.preventDefault();j.slideToggle(h.animSpeed,h.easingEffect)});this.resizeMenu({data:{el:this.element,options:this.options}});e(c).on("resize",{el:this.element,options:this.options},this.resizeMenu);e(c).trigger("resize")},resizeMenu:function(l){var m=e(c),h=l.data.options,j=e(l.data.el),k=e("body").find(".menu-collapser");var i=m.width();if(c.innerWidth!==g){if(c.innerWidth>i){i=c.innerWidth}}if(i!=this.oldwidth){this.oldwidth=i;j.find("li").each(function(){if(e(this).has("ul").length){if(e(this).has(".sub-collapser").length){e(this).children(".sub-collapser i").html("▼")}else{e(this).append('<span class="sub-collapser"><i>▼</i></span>')}}e(this).children("ul").hide();e(this).find(".sub-collapser").removeClass("expanded").children("i").html("▼")});if(h.resizeWidth>=i){if(h.indentChildren){j.find("ul").each(function(){var n=e(this).parents("ul").length;if(!e(this).children("li").children("a").has("i").length){e(this).children("li").children("a").prepend(b.prototype.indent(n,h))}})}j.find("li").has("ul").off("mouseenter mouseleave");j.addClass("collapsed").hide();k.show()}else{j.find("li").has("ul").on("mouseenter",function(){e(this).find(">ul").stop().slideDown(h.animSpeed,h.easingEffect)}).on("mouseleave",function(){e(this).find(">ul").stop().slideUp(h.animSpeed,h.easingEffect)});j.find("li > a > i").remove();j.removeClass("collapsed").show();k.hide()}}},indent:function(k,j){var h="";for(var l=0;l<k;l++){h+=j.childrenIndenter}return"<i>"+h+"</i>"}};e.fn[d]=function(h){return this.each(function(){if(!e.data(this,"plugin_"+d)){e.data(this,"plugin_"+d,new b(this,h))}})}})(jQuery,window,document);

---

Hope that helps! Totally fixed my SlimMenu problems on the iphone.

-Andy

---

There is a patch posted for the slimmenu fix in the Westminster New template thread. I will be adding the patch to this package when I do the next update.

Thanks,

Anne

Hi Anne,

First.. Thanks for all your hard work on these templates!!

I don't know if there is a solution for this one but I tested my site on a tablet, Acer Iconia Tab, resolution 1920x1200, in Portrait mode, using chrome browser, and I am unable to select the Slim Menu dropdown as it is mostly hidden at the top of the page...
Attachment 15225

Kinda weird. If you have any ideas, let me know.

Thanks!

Andy