The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.



Post new topic Reply to topic  Page 1 of 1
  [ 17 posts ] 
  Print view Previous topic | Next topic 
Author Message
davidbeal
PostPosted: Fri Oct 14, 2011 4:02 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Hi,
I'd like my main Joomla! site to redirect to a separate mobilized html site whenever the user is on a mobile device. I think I need just a simple bit of code to put in my index.php file that automatically redirects if the user is on a screen that is less than 600px wide.

I've been using this code in the head section of another html desktop site:

<script type="text/javascript">
if(screen.width < 600){
window.location = "http://bealmedia.com/mobile";
}
</script>

How do I translate this for Joomla!?

Thanks!
Top
 Profile  
 
toivo
PostPosted: Sat Oct 15, 2011 5:23 am 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Thu Feb 15, 2007 5:48 am
Posts: 3344
Location: Sydney, Australia
There are free templates which already recognize mobile devices so that special versions of the templates are used which can be styled separately. Have a look for example at http://www.joomlart.com/

_________________
toivo
my first programs were assembled and run in 16KB :)
http://archive.computerhistory.org/resources/text/GE/GE.GE-115SystemSoftware.1967.102646096.pdf#zoom=100
Top
 Profile  
 
ranwilli
PostPosted: Sat Oct 15, 2011 7:01 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Sun Feb 19, 2006 6:47 pm
Posts: 17259
Location: Toledo, OH
Can be "detected" in css:

Code:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/your_template/css/mobile.css" media="only screen and (max-device-width: 480px) and (min-device-width: 240px)" type="text/css" />/*smart phones*/
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/your_template/css/mobile_simple.css" media="handheld, only screen and (max-device-width: 239px)" type="text/css" />/*not so smart phones*/

_________________
Don't HACK the Joomla! core. Extend and Override.
http://harpervance.com - Live Joomla! Help Available skype: harpervance
Top
 Profile  
 
davidbeal
PostPosted: Sat Oct 15, 2011 2:50 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Thanks! I actually just want a simple redirection to a different site...not a different style sheet. Is there a simple way to do this in the index.php file?
Top
 Profile  
 
Mightec
PostPosted: Thu Apr 12, 2012 3:07 pm 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
Hi
I am just trying to achieve the same or similar. I have created a separate mobile website, as a sub-domain of my main website. I have used a commercial product, I put a link below.

http://detectmobilebrowsers.mobi/#home
Top
 Profile  
 
davidbeal
PostPosted: Sat Apr 14, 2012 10:20 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Hi,

I was able to get it to work by putting this code in the head section of my TEMPLATE index.php file. It's got to be the index.php file that is found when you go to your Joomla! root directory and then navigate to "templates/[YOUR_TEMPLATE]"

Code:
<script language="javascript">
if(screen.width < 600){
window.location = "http://m.bealmedia.com";
}
</script>


Hope that helps!

David
Top
 Profile  
 
Mightec
PostPosted: Sun Apr 15, 2012 5:15 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
Hello David
I assume that this is the index.php files of the non-mobile site, silly question, I am sure that it is. Where did you insert the script, I am using an Artisteer created template, did you place it right at the top, right below the <?php line? Does it work with all smartphones and tablets, iPhone, Android, etc.?

I have followed you advise and it seems to be working fine, thanks. Would the same thing work to open at different template in the same website, instead of having a sub-domain?

Just been on your website from my smartphone, it works very well and you have a great looking mobile website. I loved the icons, how did you do that, can you advise.

Regards
Mike
Top
 Profile  
 
davidbeal
PostPosted: Mon Apr 16, 2012 4:03 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Hi Mike,
You are correct...the index.php file I was referring to is the file found in the template folder of the non-mobile site.

On my desktop site, I put the redirect script right under the first "<head>" tag. The main thing is to put it between the "<head>" and "</head>" tags of the php doc...if that makes sense. ;) This redirecting script basically says: "if the web browsing device width is less than 600px wide, route the webpage to the mobile site". It should function with all smartphones and tablets, iPhone, Android, etc.

I actually custom wrote our mobile site in html...so I did have lots of functionality. The icons are basically linked images. If you're referring to the phone and email icons at the bottom of the mobile home page, I acquired the basic art from a great icon site I found.
http://icons.mysitemyway.com/

I don't know how familiar you are with html, but I'd be happy to explain further. :) I'm sort of learning this as I go along.


David
Top
 Profile  
 
davidbeal
PostPosted: Mon Apr 16, 2012 4:22 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Hi Mike,

I forgot to address one of your questions.

Quote:
Would the same thing work to open at different template in the same website, instead of having a sub-domain?


This is a neat idea, and I actually don't have a definite answer at this point. It probably can be done, but I'm not quite sure how I'd go about doing it. I've done some experimenting with alternate stylesheets and media selectors and that seems to work very well. Instead of rerouting the site, you might want to just tell the device browser to switch out the css stylesheet if the device is less than 600px wide. This link explains how it can be done http://css-tricks.com/resolution-specific-stylesheets/.

Template designers like http://www.rockettheme.com/ are now building templates for both mobile and desktop user experiences. They've already done a lot of the work. If you happen to still be experimenting with different templates, it might be a good idea to explore some of those pre-made solutions.

Hope that helps!
David
Top
 Profile  
 
Mightec
PostPosted: Mon Apr 16, 2012 4:29 pm 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
Hi David
thank you for responses, I have configured my own website as per your solution and I am very pleased with the outcome, much easier than other detect and redirect methods. I will have a look at the use of icons in preference to a vertical menu.

It helped a lot, thank you.
Mike
Top
 Profile  
 
davidbeal
PostPosted: Mon Apr 16, 2012 4:35 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Awesome! I'm so glad it's working!
Top
 Profile  
 
Mightec
PostPosted: Thu Apr 19, 2012 10:28 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
davidbeal wrote:
I actually custom wrote our mobile site in html...so I did have lots of functionality.
David


Hi David

I see that you had written the mobile site in html, are you saying that this script would work equally as well in an html website by just inserting the script in the index.html file, say at the start of the <head>insert here</head>

Regards
Mike
Top
 Profile  
 
davidbeal
PostPosted: Thu Apr 19, 2012 2:01 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
Yes, the script should work just fine an an "index.html" file...however, if the site is html based, you would have to put the script in every single html page on the site. So, for example:

Let's say your default page is "index.html". You have a link on that site to another page of the website which could be named something like "contact.html". You would want to put the script into both pages so that if someone opens a link on a smartphone device...and the link they are opening is something like "your_site.com/contact.html", it will route the user to the mobile version of the site.

David
Top
 Profile  
 
Mightec
PostPosted: Thu Apr 19, 2012 4:57 pm 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
David
thank you, also your icons on your mobile site, did you make these in Photoshop, how did you get the shiny surface look, are they an icn extension
Top
 Profile  
 
davidbeal
PostPosted: Sun Apr 22, 2012 1:16 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 1:51 pm
Posts: 15
If you are referring to the mail and phone icons near the bottom of the site, I basically got them free from http://icons.mysitemyway.com/ and then slightly modified them in a graphics editor (mostly just tinting them blue). I used After Effects to modify them, but you could use just about any simple graphics editor. :)

David
Top
 Profile  
 
lacorsi
PostPosted: Wed May 09, 2012 9:23 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Jul 20, 2007 2:48 pm
Posts: 19
Hi - Your simple javascript works beautifully and I thank you!!

I need the redirect to happen if the user goes to the home page ONLY.

The reason for this is because I want to link back to the full site from the mobile site as an option for our users.

I'm using Joomla 1.5.

Any ideas?

Thanks so much!

~Laurie
Top
 Profile  
 
Mightec
PostPosted: Thu May 10, 2012 5:38 am 
Joomla! Intern
Joomla! Intern

Joined: Fri Dec 16, 2011 10:44 am
Posts: 60
Lasorsi
I agree the simple script does work well, but have you also looked at Mobile Joomla with a sub-domain, I think that gives you the option to display as a mobile or standard website. Also to answer your question, would it work if all you had in the sub-domain was the home page.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 17 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Who is online

Users browsing this forum: Google Adsense [Bot] and 19 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group