off-canvas menu designed by helix3 disappears in mobile mode of my site - joomla

I'm building a persian (rtl) website with an offcanvas menu using helix3. The site works fine in all modes (mobile/desktop) when testing with "responsive web design Tester" or other testing tools. But when surfing the site with tablet or ipad, the offcanvas menu appears for a second or 2 and then disappears surprisingly (It works fine over iPhone 7).
I am using helix3, joomla 3.8.10 and jquery v1.12.0.
my site: www.bapgroup.ir
Any help would be highly appreciated.

Related

Test Webforms Masterpages with Mobile browsers

What is a good way to test a Webforms website with a mobile master page from code? Electric Mobile Studio works but it is not free.
I use Chrome DevTools (Ctrl+Shift+I).
From DevTools you can toggle device tool bar (Ctrl+Shift+M).
Once open you can view as different:
devices
resolutions
network speeds
and change from portrait to landscape.
This is the best solution I have been able to find in the past year+
Chrome has an extension called "User-Agent Switcher for Chrome." It can be used to switch to iPad and other views that will invoke the mobile master page.
The main strength of this solution (for me) is that it can be used from code in debug mode.
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

Responsive Web Design Testing Tool is not opened on IE 8

I'm testing a Responsive Web Design and I'm using the following tool on Windows 7:
http://mattkersley.com/responsive/
The tool is working well on Chrome and Firefox. But it is not being opened on IE8. The following pop up message was displayed:
"Internet Explorer has stopped working"
You can use http://www.isresponsive.com/ it's work fine on IE to test responsive web design

Joomla mobile template testing

Joomla automagically recognises the mobile template and displays it on the mobile devices. but sometimes it does not display(very rarely) and also sometimes the behaviour is different(like logo disappearing).
Question:
1) Is there a way we can test the mobile template on the desktop computers (like m.mobilesite.com) so that we can debug the issue?
Yes You can,
The http://www.browserstack.com sites Provide a real machine for testing the device and browser compactability.(It a remote machine so the result is 100%).This required signup.
Also you can check iphone and ipad compactabilty with safari Developer option.
From Settings->Preference ->Advanced ->check the Show Develop menu option.
Now you will get a new menu in the browser Developer there you can choose the user agent.
You can also find several sites that provide mobile testing but those are not 100% sure
like iphone4simulator.com, iphonetester.com
Hope this may help you..
I also found that - If you decrease your browser width and height - it will display mobile format. I am not sure if this is a feature of later versions of joomla. Also on Chrome - developer tools, there is an option to choose the mobile device to test the webpage.

browser add-on to test mobile design

Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.
If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.
However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.
Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.
Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)

uploadify: Firefox browser does not display upload file button

Folks,
I am using uploadify component (http://www.uploadify.com) in ASP.NET MVC 3. uploadify works fine with all browser (IE 8, Google Chrome). However, Mozilla Firefox does not display upload file button.
I have spent almost one day to troubleshoot and I still have not solution. Could you give some idea?
I just got a new computer and installed firefox (V8.0.1) yesterday. I've just experienced a similar issue (i.e. not seeing the uploadify button in firefox, though I do in chrome - both in the site I'm developing and http://www.uploadify.com/demos/). Using firefox I've browsed to http://www.mozilla.org/en-US/plugincheck/. There I'm told "For your safety, Firefox has disabled your outdated version of Flash. Please upgrade to the latest version.". I've upgraded the version of Flash and now when I visit the uploadify demo page I can see the "Select Files" button, as expected.
Install adobe flash player...it will work properly....

Resources