Jump to content


Photo

Interactive map won't appear in Jetpack mobile theme

js javascript map jetpack mobile theme

  • Please log in to reply
11 replies to this topic

#1 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 12 September 2017 - 08:05 PM

Hi all,

 

I created an interactive map using Raphaël JS and although it appears on desktops it doesn't on mobiles - I am using a customised version of the Jetpack mobile theme.

 

The map appears toward the bottom of this page.

 

http://greencastlepa...h/js/raphael.js

 

http://greencastlepa...arish/js/map.js

 

Can anyone help out please?


Edited by Demonolith, 12 September 2017 - 08:06 PM.


#2 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,568 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 13 September 2017 - 05:18 AM

Don't use the jetpack mobile theme. It chops, cuts and hacks your site to make it work on a mobie and in doing so stops all sorts of features working.

 

What you need to do is make your theme responsive rather than use a third party plugin. There is no other simple solution (other than choosing a ready made theme - of which there are thousands to choose from and many of which will replicate your current layout)

 

PS: the site doesn't work too well on a tablet either.



#3 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 13 September 2017 - 07:56 AM

Yikes, I was hoping that wasn't the case but I'll accept it and adapt.

 

In what way is the site not working well on tablet (I don't have one on-hand)?

 

Instead of using a responsive theme can I use media queries to make the current theme responsive?



#4 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,568 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 13 September 2017 - 11:24 AM

On a tablet you get a reduced sized site making the touch points too small in places. And the interactive map thing doesn't work well (because you can't hover on a touch screen).

 

Yes, you can use media queries to make it responsive but it's going to take a lot of work and many of your layout features won't translate well to a small screen. The main menu for example would be far better without dropdowns.



#5 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 13 September 2017 - 08:19 PM

At the moment the Jetpack theme appears as it does in the attached image - if I change to a responsive theme can I retain this design?

 

The map would not function in the same way on mobiles and tablets - if I view on a mobile phone and request desktop view I can see the map, it will then let me tap on an area rather than 'hover'.

 

site.png

 

Incidentally (sorry if this would be better suited to a separate topic, in which case I will move it if it is), I notice that the site loads very slowly - could this be due to messy Javascript / PHP etc.?

 

Or do I need a better web host?

 

freehostia.png



#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,568 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 September 2017 - 05:10 AM

You can make the mobile verson look like anything you want (but don't for get the tablet version as well). But the jetpack verasion isn't actually very good - all sorts of problems with the layout.

 

And the site is slow because of all the plugins and code caggage that needs to load and your cheap shared hosting. The site could be so much faster and more user (and google) friendly. Instead of keep adding to the site, stripping out all the bloat will make your life so much easier.



#7 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 14 September 2017 - 07:23 PM

I'm going to move my site to a local server with an aim to make the theme more responsive while keeping the current version where it is in case things go wrong for me.

 

I see now why making it more responsive is better, though I dread learning media queries - please tell me I'm over-reacting and they aren't that hard to get your head around!



#8 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,117 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 15 September 2017 - 07:22 AM

I'm going to move my site to a local server with an aim to make the theme more responsive while keeping the current version where it is in case things go wrong for me.

 

I see now why making it more responsive is better, though I dread learning media queries - please tell me I'm over-reacting and they aren't that hard to get your head around!

 

Media Queries are a doddle, it's just css that changes at a given point. For example...

.background{background-color:red;}
@media all and (max-width: 720px)  {
.background{background-color:blue;}
}

... this would make the background red, but when the screen gets smaller than 720px it would become blue. Chris Coyer is worth a read for a roundup at https://css-tricks.c...andard-devices/ and this is another good read on not specifically targeting a device https://responsivede...ic-breakpoints/


Edited by BrowserBugs, 15 September 2017 - 07:24 AM.


#9 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 15 September 2017 - 03:05 PM

Thanks very much BrowserBugs, I'll certainly give them a read.



#10 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,568 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 September 2017 - 03:36 PM

However (and this is quite a big however), your current site structure doesn't work well on smaller screens. You maybe need to rethink the page layouts so it works in all screen sizes.



#11 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 16 September 2017 - 03:45 PM

I've been having a go with media queries in an attempt to make the site more responsive, but it doesn't seem to be working for me.

 

I've been using Bootstrap 3 breakpoints and placing them in 'Additional CSS', to start with I just tested them out by adding the following to make my top banner not appear on screen sizes under 480px (line 20).

@import  "https://fonts.googleapis.com/css?family=Oswald:400,300,700";
@import  "https://fonts.googleapis.com/css?family=Kalam:400,300,700";
@import  "https://fonts.googleapis.com/css?family=Simonetta:400,400i,900,900i";
@import  "https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900";
@import  "https://fonts.googleapis.com/css?family=Cinzel";
@import  "https://fonts.googleapis.com/css?family=Voltaire";
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two');

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
		.topbanner {
			display: none;
		}
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

I also added the following meta tag to header.php

<meta name="viewport" content="width=device-width, initial-scale=1">

And here's the CSS for .topbanner as it appears in style.css

.topbanner {
	font-family: Oswald;
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 10px;
	text-align: center;
	color: #FFF;
	background: #000;
	padding: 3px 0 3px 10px;
	border-bottom: solid 1px #FFF;
}

Edited by Demonolith, 16 September 2017 - 03:46 PM.


#12 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 301 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 17 September 2017 - 09:05 PM

Am I applying this incorrectly?

 

I tried it on a much smaller-scale site via WAMP and it didn't work there either.







Also tagged with one or more of these keywords: js, javascript, map, jetpack, mobile, theme

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users