Jump to content
Demonolith

Interactive map won't appear in Jetpack mobile theme

Recommended Posts

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://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/raphael.js

 

http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/map.js

 

Can anyone help out please?

Edited by Demonolith

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.com/snippets/css/media-queries-for-standard-devices/ and this is another good read on not specifically targeting a device https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/

Edited by BrowserBugs

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By GrahamUK33
      I have found a slideshow from the w3schools.com website, it comes with some Javascript to give the function of a left and right arrow and also indicator buttons that can be selected to display a required photo without using the left and right arrows.
      I also found more JavaScript (carousel) that animates the slideshow, but the indicator buttons do not update when the different photos are being displayed.
      Can someone please edit the code below and maybe give a brief description of what the code is doing.
      var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" slideshow-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " slideshow-white"; } var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); }  
    • By Lyndsey
      Hi guys,
       
      I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly:
       
      General Stuff:
      http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site.  
      CSS:
      http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts.  
      Responsive Design:
      http://www.getskeleton.com/ - Responsive Grid.  
      Server-Side Coding:
      http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP!  
      Form Validation (Client-Side):
      https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do
       
      Lyndsey.
    • By asomanikofi
      Issue:1
      I am using juqeryui widgets to create section tags which contains data from an external json file I have attempted to style the data that is printed out however the text will appear on the right handside of the image for some entries while other ones pieces of text just filter down to the bottom of the page
      How do I go about fixing this issue?
      DisplayHoliday.css
      HolidayForm.html
    • By predatorx
      Hello all
       
      I am trying to use the jQuery plugin EasyAutocomplete, but I have run into an issue.
       
      I have the plugin working in test from a json file which is fine. What happens is when the user types in a search, the search list filters and the user can click on one of the dropdown enters and be taken to another page.
       
      This is working as intended.
       
      My issue is that I have a submit button and when the user selects there search term, the submit button does not do anything. You also cannot select a search term by typing in the input field and pressing enter to be taken to that page.
       
      I would like the user to be able to go to the next page by either typing in the input field and pressing enter, pressing the submit button or clicking the link they want to use.
       
      You can view the test that I have mocked up here.
       
      Can anyone help with this? If more information is needed I can try to provide it?
       
      Thanks
    • By GrahamUK33
      I have an issue with a responsive menu that I have been working on One the screen size becomes 1024px the mobile menu button appears, the problem is that the menu does not appear as it should. Anyone know what the problem is? HTML with JavaScript <div class="container navigation group"> <div class="navigation-desktop" id="myNavigation"> <a href="index.html" class="active">Home</a> <a href="index.html">Item 1</a> <a href="index.html">Item 2</a> <a href="index.html">Item 3</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myNavigation"); if (x.className === "navigation-desktop") { x.className += "navigation-mobile"; } else { x.className = "navigation-desktop"; } } </script> CSS
      html,body { font-family: 'Open Sans',sans-serif; background-color: #ffffff; margin: 0px; } .container { position: relative; clear: both; padding: 0px; margin: 0px; } .navigation { background-color: #000099; height: 400px; color: #ffffff; } .navigation-desktop { overflow: hidden; background-color: #333; } .navigation-desktop a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navigation-desktop a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .navigation-desktop .icon { display: none; } /*-- solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+. --*/ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } @media screen and (max-width: 1024px) { .navigation-desktop a:not(:first-child) { display: none; } .navigation-desktop a.icon { float: right; display: block; } } @media screen and (max-width: 1024px) { .navigation-desktop .navigation-mobile { position: relative; } .navigation-desktop .navigation-mobile .icon { position: absolute; right: 0; top: 0; } .navigation-desktop .navigation-mobile a { float: none; display: block; text-align: left; } }  
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,534
    • Most Online
      4,970

    Newest Member
    2nd Mortgages GTA
    Joined
  • Forum Statistics

    • Total Topics
      65,734
    • Total Posts
      455,403
×