Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Conditional commands

Status
Not open for further replies.
SitesMasstec

SitesMasstec

Programmer
Sep 26, 2010
508
Brasil
Dear colleagues:

Inside <BODY> in my HTML code I have:
(in order to determine if the user browser is a Mobile one, return True.
If it is not a Mobile browser, then return False)

Code: 
<script type="text/javascript">
function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}
</script>


Well, in the same HTML page I have: (in order to display a Flash animated banner)

Code: 
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>

I would like to execute the above code (the banner) if the function detectmob() returns False.
If it returns True, it is because the user browser is a Mobile one, so, instead of the animated banner in Flash I would like to display an static image:
Code: 
<IMG SRC="receitas1_256.gif" WIDTH="80%">

How to accomplish this?
Is there a command in HTML or I will have to change the <object> command to Javascript?


Thank you,
SitesMasstec
 
Sort by date Sort by votes
There's a couple of ways of doing this.

Personally I would just get the element where you wish this to be, like a div or something, and alter its innerHTML property.

Code: 
<body onload="loadBanner();">
...
<div id="banner">
<!-- You want to see the banner here --->
</div>

<script type="text/javascript">
function loadBanner()
{
var bannerDiv = document.getElementByID('banner');
[indent]if(detectmob()==true)[/indent]
[indent]{[/indent]
[indent]
bannerDiv.innerHTML = '<IMG SRC="receitas1_256.gif" WIDTH="80%">'; [/indent]
[indent]}[/indent]
[indent]else{[/indent]
[indent]bannerDiv.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>" [/indent]
[indent]}[/indent]
}

</script>



----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Hello Phil!

I tried your advice but it hasn't working:

Code: 
...

<BODY TEXT="#FFFF4A" BGCOLOR="#9BCDFF" link="#DD0000" vlink="#DD0000" alink="#008000" LEFTMARGIN="25" onload="loadBanner();" >


<FONT  FACE="Verdana" COLOR="#23238E">
<BR>

<!-- 22/10/2017, de: [URL unfurl="true"]https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser[/URL] -->
<script type="text/javascript">
function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}
</script>


<div id="banner">
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>
</div>

<script type="text/javascript">
function loadBanner()
{
var bannerDiv = document.getElementByID('banner');
if(detectmob()==true)
{

bannerDiv.innerHTML = '<IMG SRC="receitas1_256.gif" WIDTH="80%">'; 
}
else{
bannerDiv.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>" 
}
}

</script> 

...

You can see the result at:


But for accessing a mobile device I do not wish the flash banner. Instead I wish the image "receitas1_256.gif", that can de displayed on a mobile device) , so I changed part of it to:
Code: 
<script type="text/javascript">
function loadBanner()
{
var bannerDiv = document.getElementByID('banner');
if(detectmob()==true)
{
bannerDiv.innerHTML = '<IMG SRC="receitas1_256.gif" WIDTH="80%">'; 
}
else{
bannerDiv.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>" 
}
}

</script>

You can see the result at:


Thank you,
SitesMasstec
 
Upvote 0 Downvote
This should work, had missed a semicolon, and the <object> closing tag was on a new line :

Code: 
<BODY TEXT="#FFFF4A" BGCOLOR="#9BCDFF" link="#DD0000" vlink="#DD0000" alink="#008000" LEFTMARGIN="25" onload="loadBanner();" >


<FONT  FACE="Verdana" COLOR="#23238E">
<BR>

<!-- 22/10/2017, de: [URL unfurl="true"]https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser[/URL] -->
<script type="text/javascript">
function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}
</script>


<div id="banner">
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed>
</object>
</div>

<script type="text/javascript">
function loadBanner()
{
var bannerDiv = document.getElementById('banner');
if(detectmob()==true)
{

bannerDiv.innerHTML = '<IMG SRC="receitas1_256.gif" WIDTH="80%">'; 
}
else{
bannerDiv.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed></object>"; 
}
}

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Hello Phil!

Nice, it works as expected now, except I do not know how to align the flash banner in center of the web page.

Where in the code I can put ALIGN="CENTER" ?

Code: 
...
else{
bannerDiv.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='720' height='100'><param name='movie' value='receitas1.swf'/><param name='wmode' value='#ffffff'/><param name='quality' value='high'/><embed src='receitas1.swf' quality='high' wmode='#ffffff'pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='720' height='100'></embed></object>"; 
}
---


The non Flash banner appears correctly in mobile devices, as I was able to insert ALIGN on it:
Code: 
bannerDiv.innerHTML = '<H3 ALIGN="CENTER"><IMG SRC="receitas1_256.gif" WIDTH="80%"></H3>';

Thank you,
SitesMasstec
 
Upvote 0 Downvote
you are doing it wrong
you should not be detecting bowser screen Resolution or anything else about the users environment, all of that information can be faked/spoofed

the correct way to style pages differently for mobile users & computer users is to use the correct CSS style sheets & le the device decide which it thinks is most appropriate


Do things on the cheap & it will cost you dear
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

vbfvr10
  • Locked
  • Question
Conditional Execution
Replies
3
Views
59
vbfvr10
vbfvr10
bilfus01
  • Locked
  • Question
Tomcat Conditional Redirect using requestURL
Replies
1
Views
53
feherke
feherke
newme01
  • Locked
  • Question
Working with dates and conditional text color change
Replies
6
Views
84
feherke
feherke
twcman
  • Locked
  • Question
Conditionals within jquery mobile variables
Replies
1
Views
55
jpadie
jpadie
edwardglass57
  • Locked
  • Question
Problem with an if-else if conditional statement
Replies
3
Views
71
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top