Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • July 20, 2016 at 6:20 pm #663077
    hdpcr

    Hi
    I have a large map with hotspots (many hotspots) it looks great in desktop but not that good in mobiles very confusing, So my question is: It is possible to have some custom CSS that detects if visitor is browsing from mobile or tablet and redirect him to other page that will only have a map image with no hotspots (a whole different page)

    Thank you very much

    July 21, 2016 at 8:06 am #663227
    Vinay

    Hey hdpcr,

    You can add a map image on the same page and hide the image in desktop and show only hotspot. An extra page won’t be necessary.

    Turnon custom css class name support for layout elements http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    and class only_mobile to the map image and only_desktop to the hotspot and use the below css

    /*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

    Best regards,
    Vinay

    July 21, 2016 at 4:28 pm #663447
    hdpcr

    Hi

    Please take a look on the page on desktop then in mobile so you can have an idea if this CSS will work. There are a lot of hotspots, 107

    Thank you

    July 21, 2016 at 4:38 pm #663454
    Yigit

    Hi!

    I believe that would definitely work. We have a post on our documentation – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/, it explains in a bit more detail. That would be the easiest solution in my opinion :)

    Regards,
    Yigit

    July 21, 2016 at 5:13 pm #663473
    hdpcr

    Hi Yigit

    This only_mobile in the image with hotspot element? and the code only_desktop should be for each hotspot? and i guess the css will go to custom CSS in general styling?
    Also i couldnt find any custom CSS in hotspot properties :)

    Thank you very much

    • This reply was modified 8 years, 5 months ago by hdpcr.
    July 21, 2016 at 5:26 pm #663486
    Yigit

    Hey!

    You can add one Image with hotspots elements ( with “only_desktop” class ) and then on image element (without hotspots and with “only_mobile” class) to your page and add custom CSS code into Quick CSS :)

    Cheers!
    Yigit

    July 21, 2016 at 5:36 pm #663496
    hdpcr

    Hi Yigit
    Now i understand how it works. I thought the code will make hotspots fits :) its to avoid to have 2 pages :)
    I guess there is no way to make so many hotspots to look good on mobile.
    I’m not sure it the size of the circles can be controlled or changed or to shrink in mobile version?
    Now. i this fix i will use it in the future but as i already stared a few days ago to work on alternative page for this map it would be a lot of work to start all over because it takes time to place and align each of them that is why i still need some fix to make page redirect if detects mobile so at least i can use it in this case if possible.

    Thank you very much

    July 21, 2016 at 7:00 pm #663540
    Yigit

    Hi,

    I believe this one is resolved? :)

    Best regards,
    Yigit

    July 21, 2016 at 7:32 pm #663557
    hdpcr

    Hi Yigit

    No :) i still need the redirect code to use :) as i explained i have investing so many times in that page for mobile and i cannot copy image with hotspot element from a page to other :)
    Please if you have a code to redirect a page according to device i will appreciate because i need to use it in the other page :)
    Also i wrote this “I’m not sure it the size of the circles can be controlled or changed or to shrink in mobile version?”
    Thank you very much

    • This reply was modified 8 years, 5 months ago by hdpcr.
    July 22, 2016 at 6:36 pm #664016
    Yigit

    Hey!

    Please add following code to Functions.php file of your child theme

    function redirect_on_mobile(){
?>
if(is_page(4719) && is_mobile()) {
 <script>
jQuery(window).load(function(){
window.location.replace("http://yourdomain.com/your-page-mobile-version");
});
 </script>
}
<?php
}
add_action('wp_head', 'redirect_on_mobile');

    4719 is your pages ID. You should alter that for other pages.

    Then please add following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.responsive  .av-image-hotspot { 
    height: 15px;
    width: 15px;
    line-height: 15px;
}}

    Regards,
    Yigit

    • This reply was modified 8 years, 5 months ago by Yigit.
    July 22, 2016 at 7:16 pm #664029
    hdpcr

    Hi Yigit

    I did but now i get this error when page loads in all pages
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘redirect_on_mobile’ not found or invalid function name in /home/fantas78/public_html/wp-includes/plugin.php on line 525

    Thank you very much

    • This reply was modified 8 years, 5 months ago by hdpcr.
    July 22, 2016 at 7:21 pm #664036
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it in private content field so we can look into it? :)

    Regards,
    Yigit

    July 22, 2016 at 8:05 pm #664057
    hdpcr

    Hey!

    Sure! I deleted the code meanwhile.

    July 22, 2016 at 8:54 pm #664075
    Yigit

    Hey!

    I realized i had some little errors on the code i fixed them and added in functions.php file 

    function redirect_on_mobile(){
if( is_mobile() && is_page(4719) ) {
?>
 <script>
jQuery(window).load(function(){
window.location.replace("http://yourdomain.com/your-page-mobile-version");
});
 </script>
<?php
}}
add_action('wp_footer', 'redirect_on_mobile');

    Please review your website and replace “yourdomain.com/…” link to your mobile page

    Regards,
    Yigit

    July 22, 2016 at 10:55 pm #664084
    hdpcr

    Hey

    Still not working not it displays on desktop but on mobile it doesnt redirect and something hapend to the image in the page below that its not displaying anymore. the desktop page in mobile shows an fatal error at line 588.
    Pictures on other pages are not showing anymore
    I deleted the sscruips in the php and its working again
    Thank you

    • This reply was modified 8 years, 5 months ago by hdpcr.
    July 25, 2016 at 10:49 pm #664891
    Yigit

    Hi,

    Can you please use the code as following?

    function redirect_on_mobile(){
if(is_page(4719)) {
?>
 <script>
jQuery(window).load(function(){
if (jQuery(window).width() < 767) {
window.location.replace("http://yourdomain.com/your-page-mobile-version");
}
});
 </script>
<?php
}}
add_action('wp_footer', 'redirect_on_mobile');

    :)

    Best regards,
    Yigit

    July 26, 2016 at 4:53 pm #665401
    hdpcr

    URGENT

    I added the code above it worked then it stoped andnow im gettin error in all pages
    Warning: Cannot modify header information – headers already sent by (output started at /home/fantas78/public_html/wp-content/themes/enfold/functions.php:1) in /home/fantas78/public_html/wp-includes/pluggable.php on line 1167
    Now Everything loads with erros

    July 26, 2016 at 5:00 pm #665405
    Yigit

    Hey!

    That is weird, it does not cause any issues on my local installation and works fine. Please remove the code from functions.php file via FTP. Also please make sure that you have added the code to the bottom of Functions.php file and not very top.

    Best regards,
    Yigit

    July 26, 2016 at 5:02 pm #665406
    hdpcr

    URGENT
    Please hold on while i see if i can get a restore of yesterday

    i did remove the function and even its not working
    in Admin i have this error

    Warning: Cannot modify header information – headers already sent by (output started at /home/fantas78/public_html/wp-content/themes/enfold/functions.php:1) in /home/fantas78/public_html/wp-includes/option.php on line 823

    Warning: Cannot modify header information – headers already sent by (output started at /home/fantas78/public_html/wp-content/themes/enfold/functions.php:1) in /home/fantas78/public_html/wp-includes/option.php on line 824

    • This reply was modified 8 years, 5 months ago by hdpcr.
    July 28, 2016 at 12:37 pm #666157
    Yigit

    Hi,

    Sorry for the late reply!
    Seems like you fixed it though?
    Can you please post FTP logins here privately as well so i can try to add the code myself and fix if any issue occurs?

    Best regards,
    Yigit

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.