-3

I need a conditional javascript code.

no need to set display:none code. its already works. but I want the code based on html/body class.

when body/html class is "gecko" only show firefox div and remove all others div from page. Like: 

 <body class="gecko">
 <div id="firefox"></div>
 <div id="ie"></div> [need to remove this]
 <div id="chrome"></div> [need to remove this]
 <div id="safari"></div> [need to remove this]
 </body>

When body/html class is chrome only show chrome div and remove all others div from page.

<body class="chrome">
<div id="firefox"></div> [need to remove this]
<div id="ie"></div> [need to remove this]
<div id="chrome"></div>
<div id="safari"></div> [need to remove this]
</body>

when body/html class is blank only show IE div and remove all others div from page.

<body>
<div id="firefox">text here</div> [need to remove this]
<div id="ie"></div> 
<div id="chrome"></div> [need to remove this]
<div id="safari"></div> [need to remove this]
</body>

I don't want to set display:none or visibility:hidden code. I want to remove() javascript code.

I tried using this. Its works on all of major browser. detect browser and set display:none; for others browser. You can see the css part demo here: http://www.downloadsaga.com/inboxace/. but its still load iframe for others div when I use iframe. for that I need a code that can't load iframe when its not show.

<?php require('css_browser_selector.php') ?>
<html class="<?php echo css_browser_selector() ?>">
<head>
<title>Browser Detect</title>

<style type="text/css">
.ie #firefox, .ie #chrome, .ie #opera, .ie #safari {
  display:none;
}
.gecko #chrome, .gecko #ie, .gecko #opera, .gecko #safari {
  display:none;
}
.win.gecko #chrome, .win.gecko #ie, .win.gecko #opera, .win.gecko #safari  {
  display:none;
}
.linux.gecko #chrome, .linux.gecko #ie, .linux.gecko #opera, .linux.gecko #safari  {
  display:none;
}
.opera #firefox, .opera #chrome, .opera #ie, .opera #safari  {
  display:none;
}
.safari #firefox, .safari #chrome, .safari #ie, .safari #opera  {
  display:none;
}
.chrome #firefox, .chrome #opera, .chrome #ie, .chrome #safari  {
    display:none;
}
.opera #opera {
display:block;
}
.chrome #chrome {
display:block;
}

html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;} 

</style>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    if ($("body").hasClass("gecko")){
    $( "#ie" ).remove();
    $( "#chrome" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    } else if ($("body").hasClass("chrome")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("")) {
    $( "#chrome" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("safari")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#chrome" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("opera")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#chrome" ).remove();
    } 
});
</script>
</head>
<body class="webkit chrome win">
<div id="#content">
    <div id="firefox">
        <iframe src="firefox.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="chrome">
        <iframe src="google.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe> 
    </div>
    <div id="ie">
        <iframe src="microsoft.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="opera">
        <iframe src="opera.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="safari">
        <iframe src="safari.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
</div>
</body>
</html>

Any Expert solutions?? here you got the css_browser_selector.php file. https://github.com/bastianallgeier/PHP-Browser-Selector

Alshe Dupur
  • 13
  • 6
  • We're not here to do your work for you. Please show what you've tried so far, and someone will help you get it working. – Barmar Oct 05 '13 at 08:42
  • Dear Barmar, I already give my code http://pastie.org/8379335 .. I think you don't see it. – Alshe Dupur Oct 05 '13 at 08:44
  • Your "full code" does not contain any attempts on the Javascript part. – Ingo Bürk Oct 05 '13 at 08:45
  • 2
    Besides, this is done much easier with pure CSS, but you explicitly say you don't want that. You may want to explain reasons for that. As a general rule: If it can be done with CSS, do it with CSS. – Ingo Bürk Oct 05 '13 at 08:47
  • Ingo Burk, I want to set iframe inside every every div firefox, safari, chrome, ie. now its possible iframe load disable when its hidden? I think its not possible for that I find a conditional for remove the div. – Alshe Dupur Oct 05 '13 at 09:52

2 Answers2

0

You can use Jquery hasClass method

$(document).ready(function(){

    if ($("body").hasClass("gecko")){
    // display:none for other than firefox
    } else if ($("body").hasClass("chrome")) {
    // display:none for other than chrome
    } // continue your code
});
Ajith S
  • 2,687
  • 14
  • 30
  • '$(document).ready(function(){ if ($("body").hasClass("gecko")){ $( "#ie" ).remove(); $( "#chrome" ).remove(); $( "#safari" ).remove(); $( "#opera" ).remove(); } else if ($("body").hasClass("chrome")) { $( "#ie" ).remove(); $( "#firefox" ).remove(); $( "#safari" ).remove(); $( "#opera" ).remove(); } // continue your code }); ' I added this code but its not work! – Alshe Dupur Oct 05 '13 at 09:36
  • no. I can't find the solutions. please see my post. I post my full code with php file. hope now you'll help me. – Alshe Dupur Oct 05 '13 at 10:03
-1
  first you will get body attribute class value and then store value variable 
and check if variable value is gecko means firefox div is enable and other divs are disable or 
if variable value is chrome means only chrome div is enable others to be disable 
 last condition for variable value null means is ie div enable and others to be disable
        $(document).ready(function(){
        var className=$("body").attr("class");
        if(className=='gecko')
        {

        $("#firefox").addClass('in');

        $("#ie").removeClass('in');

        $("#chrome").removeClass('in');

        $("#safari").removeClass('in');
        }
        else if(className=='chrome')
        {

        $("#firefox").removeClass('in');

        $("#ie").removeClass('in');

        $("#chrome").addClass('in');

        $("#safari").removeClass('in');
        }
        else if(className=='')
        {

        $("#firefox").removeClass('in');

        $("#ie").addClass('in');

        $("#chrome").removeClass('in');

        $("#safari").removeClass('in');
        }
        });

Using jquery 
first get body tag class attribute value
then check attribute value 
gecko,chrome and null
gecko means firefox div is enable using addClass Property
chrome means chrome div is enable using addClass Property
null means ie div is enable using addClass Property
Punitha
  • 154
  • 12