Page 4 of 53 FirstFirst ... 2345614 ... LastLast
Results 31 to 40 of 527
  1. #31
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by rbarbour View Post
    Example of new on click link

    <a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

    Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.
    .
    Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

    Thanks,

    Anne

  2. #32
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,023
    Plugin Contributions
    32

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by rbarbour View Post
    Creating different menus for different devices is very easy.

    Anne, I apologize for the hijack of your support thread. Last post regarding this.

    Take a look at the responsive classic to see how swapping the category tabs for a select is done.

    Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

    Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

    Keep the current mega menu for desktop.

    Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

    Example of new on click link

    <a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

    Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

    I have several new responsive plugins, just trying to find the time to get them packaged up.
    Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??


    Quote Originally Posted by picaflor-azul View Post
    I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.


    Thanks,

    Anne
    I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

    What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

    Then there's a whole slew of site's with webbased responsive testing tools popping up:
    http://beta.screenqueri.es/
    Brief Description: Pixel Perfect Media Query Debugging Tool* Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
    if the resolution of the device you are testing isn't included.
    This one rivals the functionality of the FireFox Responsive Design Mode tool.

    http://mattkersley.com/responsive/
    Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


    http://www.studiopress.com/responsive/
    Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.

    Quote Originally Posted by picaflor-azul View Post
    On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.
    I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)
    My Site - Zen Cart & WordPress integration specialist
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  3. #33
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by DivaVocals View Post
    Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??



    I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

    What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

    Then there's a whole slew of site's with webbased responsive testing tools popping up:
    http://beta.screenqueri.es/
    Brief Description: Pixel Perfect Media Query Debugging Tool* Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
    if the resolution of the device you are testing isn't included.
    This one rivals the functionality of the FireFox Responsive Design Mode tool.

    http://mattkersley.com/responsive/
    Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


    http://www.studiopress.com/responsive/
    Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


    I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)
    Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

    Thanks,

    Anne

  4. #34
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,023
    Plugin Contributions
    32

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by picaflor-azul View Post
    Since I too do not own many of these devices, I am left to rely on testing on various development sites, some of which you have mentioned above.

    Thanks,

    Anne
    Do you have others you could share????
    My Site - Zen Cart & WordPress integration specialist
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  5. #35
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,023
    Plugin Contributions
    32

    Default Re: Stirling Grand Responsive Template

    At this point may I suggest we move this discussion to a new thread.. I think it's an interesting enough discussion to open up to the community, and we are CLEARLY (yes myself included) hijacking this support thread..

    I will start it off and post the link..
    Last edited by DivaVocals; 16 Oct 2013 at 08:39 PM.
    My Site - Zen Cart & WordPress integration specialist
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  6. #36
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,023
    Plugin Contributions
    32

    Default Re: Stirling Grand Responsive Template

    My Site - Zen Cart & WordPress integration specialist
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  7. #37
    Join Date
    Jul 2009
    Location
    picaflor-azul.com
    Posts
    6,930
    Plugin Contributions
    45

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by DivaVocals View Post
    Thanks for posting the new thread. I'll see you there ;)

    Thanks,

    Anne

  8. #38
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    10,023
    Plugin Contributions
    32

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by picaflor-azul View Post
    Thanks for posting the new thread. I'll see you there ;)

    Thanks,

    Anne
    You're welcome.. Apologies for the temporary hijack..
    My Site - Zen Cart & WordPress integration specialist
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  9. #39
    Join Date
    Feb 2010
    Location
    Syracuse, NY
    Posts
    2,159
    Plugin Contributions
    17

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by picaflor-azul View Post
    Does this mean that I just need to make this change to the mega menu links to make them touch friendly? If so, that would be really great!

    Thanks,

    Anne
    It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

    Here is an Example using this template:

    Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.
    Website - Github. Like the ZCA Bootstrap 4 Template? Donations Welcome. Bootstrap Plugins?

  10. #40
    Join Date
    Feb 2010
    Location
    Syracuse, NY
    Posts
    2,159
    Plugin Contributions
    17

    Default Re: Stirling Grand Responsive Template

    Quote Originally Posted by rbarbour View Post
    It will not make them touch friendly but will include a onClick event handler so if one is using a touch screen the mega menu can be clicked.

    Here is an Example using this template:

    Notice, your mega menu CSS file goes untouched, the onHover CSS still applies only after the onClick event and continues to use the onClick event handlers as fall back on any device.
    After further playing with:

    I was able to keep the current onHover intact without the use of first using onClick. Therefore onHover will be default and if one is using a touch device the onClick will be the fall back.
    Website - Github. Like the ZCA Bootstrap 4 Template? Donations Welcome. Bootstrap Plugins?

 

 
Page 4 of 53 FirstFirst ... 2345614 ... LastLast

Similar Threads

  1. Responsive All Business Template
    By picaflor-azul in forum Addon Templates
    Replies: 392
    Last Post: 3 Oct 2019, 05:42 AM
  2. v154 Best Responsive Template
    By martynbaker52 in forum General Questions
    Replies: 4
    Last Post: 12 Sep 2015, 02:35 AM
  3. v151 responsive template problems
    By irishshopper in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 23 May 2014, 07:11 AM
  4. Stirling Grand Template blank product info page
    By Pablo_escobar in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 18 Jan 2014, 04:38 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR