Excluding Part of HTML Code from Executing

I have a CSS class which reads something like

fr.pos_fixed {
 font-family: 'Roboto Regular';
 font-size: 70%;
    position: fixed;
    top: 0px;
    right: 20px;
    color: #800080;
}

and fixes the position of some text, making it non-scrollable. The problem is that the text in question is overlaid when the page is opened on an iPhone. So, iPhone has to be detected first and that should prevent the execution of the above class. HTML doesn't have if ... else structure, so it should be done somehow with Javascript. I tried it with something like

<script type="text/javascript">
      if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) {
            document.location = "http://<whateverwebsite.com/mobileversion.html>";
      }
</script>

which is well and good, but it redirects to another page, instead of skipping just the interfering (in the iPhone) part of the HTML. It means that I have to maintain in parallel two different versions of the web page -- one mobile and one regular. I'd like to avoid such doubling. Do you know how that can be accomplished?
judicoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
right of the top of my head you want to build a responsive website. so to do this look at bootstrap http://getbootstrap.com. responsive because the layout changes relative to the screen size.fundamentally done with css but with JavaScript add-ons as required.

using jquery it makes adding and telling a class from an element easy so you could detect the iPhone as you already are and then use the .toggleClass, .removeClass, .addClass functions of jquery to do your bidding
0
judicoAuthor Commented:
Responsive website is unclear to me. Is it a separate file? If it is, I can just redirect to it when iPhone is detected by just removing the code overlaying the text. But then I'll have to deal with two identical website (save that part of code unwanted in iPhone), if I understand you correctly. This is exactly what I want to avoid -- I don't want to monitor two separate files for one website.
0
RobOwner (Aidellio)Commented:
responsive is the ONE site with the ONE set of code. you use css media queries (depending on the screen width) to arrange your html elements.

have a read of bootstrap.

in the interim to just fix your issue you can use JavaScript to remove the class
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

judicoAuthor Commented:
I including this:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

and it appears to re-size the webpage on the iPhone but it changes the outlay on the laptop and the top gets some strange unevenness on the left in all several browsers I checked.

How can the issue be fixed by using JavaScript and avoiding bootstrap?
0
RobOwner (Aidellio)Commented:
that's because of how the webpage is coded. long term you'll reduce these kind of problems by moving to bootstrap.

I'll look at a JavaScript solution for you
0
judicoAuthor Commented:
This is the solution I could come up with so far:

<script type="text/javascript">

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 

{
 
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'MYstyleiphone.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);	

}

else  {

var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'MYstyle.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);	
    
  }

</script>

Open in new window


As you can see, I'm using two different css files, one of which doesn't contain the pos_fixed class. Not the most elegant solution but appears to do the job.
0
RobOwner (Aidellio)Commented:
you can have one css file if you want using media queries and the min-width or max-width commands but at the end of the day, whatever works.
0
judicoAuthor Commented:
Couldn't figure out how to exclude via JavaScript that class when iPhone is detected. Then only one css file will do.
0
RobOwner (Aidellio)Commented:
this is the trouble you run into trying to make a desktop site, work on mobile. ultimately you'll want to move to a granite like bootstrap as it puts mobile first and scales up to desktop resolutions.
your solution is ideal for now though
0
RobOwner (Aidellio)Commented:
this is the trouble you run into trying to make a desktop site, work on mobile. ultimately you'll want to move to a granite like bootstrap as it puts mobile first and scales up to desktop resolutions.
your solution is ideal for now though
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
judicoAuthor Commented:
Thanks a lot for the help. For now I'll work with this but eventually I may get back with a separate question and then we may discuss the mobile solutions in some more depth.
0
RobOwner (Aidellio)Commented:
sounds good and I'll look out for it. feel free to message me directly if you're not getting any comments
0
RobOwner (Aidellio)Commented:
sounds good and I'll look out for it. feel free to message me directly if you're not getting any comments
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.