Make a certain div show when the user's browser is detected - javascript

(UPDATED)
I am trying to make a certain div show when the user's browser is detected. I found the code online and am not sure if it even works or how to put a div in the certain browser sections of the code.
<script>
function BrowserDetection() {
if(!navigator || !navigator.userAgent) {
// Insert condition for old browsers
}
else if (navigator.userAgent.search("MSIE") >= 0) {
// Insert conditional IE code here
}
else if (navigator.userAgent.search("Chrome") >= 0) {
alert('code');
}
else if (navigator.userAgent.search("Firefox") >= 0) {
// Insert conditional Firefox Code here
}
//Check if browser is Safari
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
// Insert conditional Safari code here
}
//Check if browser is Opera
else if (navigator.userAgent.search("Opera") >= 0) {
// Insert conditional Opera code here
}
}
</script>
This one does not seem to work. Would anyone know where I could possibly find a working code. Thank you very much..

basically, there is a window.navigator object in browsers that gives information about the browser.
The above code should be updated to check if this navigator object exists before trying to access the userAgent.
ALSO, &GT; is not a valid comparison operator, replace it with >=
function BrowserDetection() {
if(!navigator || !navigator.userAgent) {
// Insert condition for old browsers
}
else if (navigator.userAgent.search("MSIE") >= 0) {
// Insert conditional IE code here
}
else if (navigator.userAgent.search("Chrome") >= 0) {
// Insert conditional Chrome code here
}
else if (navigator.userAgent.search("Firefox") >= 0) {
// Insert conditional Firefox Code here
}
//Check if browser is Safari
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
// Insert conditional Safari code here
}
//Check if browser is Opera
else if (navigator.userAgent.search("Opera") >= 0) {
// Insert conditional Opera code here
}
}

Inspect it using F12 and check if you can see that div in your sources code. Then add debugger to it and try checking your functionality.

Related

Disable piece of jQuery for Safari only

Is it possible to disable a piece of jQuery for Safari only? Having issues getting it to work correctly due to Safari loading the cached page when you click "back" so i just want to disable it completely in Safari only.
jQuery(".hometext").click(function() {
jQuery(this).toggleClass("slide");
jQuery(".hometext").toggleClass("active");
jQuery("#header-elementor").toggleClass("active");
})
})
You can do something below.
if (
navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1 &&
navigator.userAgent.indexOf('CriOS/') == -1
){
console.log('applied code to only safari');
} else {
console.log('applied code except safari');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

mouseenter/mouseover event in Chrome not working

This is the code I'm using right now:
signup.onmouseover = function() {
if(pass.value == passcheck.value && pass.value.length >= 6 && pass.value.length <= 60 && passcheck.value.length >= 6 && passcheck.value.length <= 60 && username.value.length >= 3 && username.value.length <= 20){
signup.removeAttribute("disabled");
} else {
signup.setAttribute("disabled", "true");
alert("Different passwords or length of username or password incorrect, check again!");
}
}
In Firefox it works, in Chrome and Safari it doesn't work at the moment. Does anyone know why?
I also used mouseenter event which doesn't work in Chrome and Safari.
EDIT
There's no error displayed when I move the mouse over the signup element. Just nothing happens when I do that which I don't understand.
mouseover works just fine in Chrome (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)
Make sure, it's mouseover and not onmouseover.
document.querySelector("button").addEventListener("mouseover", function () {
console.log("over");
});
<button>Button</button>

In JavaScript what does 0 === 4 mean?

I saw the following JavaScript code and it confused me since logically 0 will never be 4 or 5:
if (0 === 4) { // Safari
safari.self.addEventListener("message", safariMessageListener, false);
} else if (0 === 5) { // Opera
opera.extension.onmessage = operaMessageListener;
}
I will assume that this code works. So has the programmer managed to redefine 0 in some manner or is 0 somehow not referring to the number 0? Can anyone explain this code and why would anyone code like this? What are the advantages of this technique? (except for confusing people like me!)
For completeness, this snippet came from the YouTube Center Grease Monkey plug-in. The URL of which is:
https://github.com/YePpHa/YouTubeCenter/wiki/Developer-Version
And the full method is:
function initListeners() {
if (support.CustomEvent) {
window.addEventListener("ytc-content-call", eventListener, false);
} else {
window.addEventListener("message", messageListener, false);
}
window.addEventListener("unload", windowUnload, false);
if (0 === 4) { // Safari
safari.self.addEventListener("message", safariMessageListener, false);
} else if (0 === 5) { // Opera
opera.extension.onmessage = operaMessageListener;
}
}
The source code looks quite different:
if (#identifier# === 4) { // Safari
safari.self.addEventListener("message", safariMessageListener, false);
} else if (#identifier# === 5) { // Opera
opera.extension.onmessage = operaMessageListener;
}
There is just an Ant build script which replaces this #identifier# with ${indentifier.userscript}:
<target name="copy-userscript-meta">
<copy todir="${buildDir}">
<fileset dir="${src.meta}/" />
</copy>
<antcall target="tokenreplace" />
<replace dir="${buildDir}" value="${indentifier.userscript}" token="#identifier#" encoding="${encoding}" />
</target>
${indentifier.userscript} is defined in the same file.

Javascript (how to check Id exist or not in IE7 Browser)

How do I check if Id exist or not in IE7 browser. Below is my code but it does not run successfully in IE7.
if(document.getElementById('Username') != null) {
alert("In");
}
When run this code comes true part and show alert box even though Id ('Username) does not exist.
Just remove the != null part, like this:
if(document.getElementById('Username'))
{
alert("In");
}
Using jQuery
if ($.browser.msie && parseInt($.browser.version) == 7) {
if ( $("#Username").length > 0 ) {
//do something
}
}
First if you are checking whether the id exist then
if(document.getElementById('Username'))
But if you checking whether (i presume its a textbox) the textbox is empty or not then
if(document.getElementById('Username').text ==null)

java script is not working in mozila

I have added some javascript in html page for input validation.same page is working correct in IE and chrome but in mozila its not working.The problem is when user inputs invalid data its supposed to show alert msg box and when user clicks OK it should return false to form...BUT mozila is not waiting for alert box it just shows alert box for 5-6 sec and then goes to next page defined in form action="nextpage.php"
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(oldpassword, "<b>Error: </b>Please enter the Old Password!") == false)
{ changeColor("oldpassword"); return false; }
else if (valid_length(newpassword, "<b>Error: </b>Please enter the New Password!!") == false)
{newpassword.value=""; changeColor("newpassword"); return false; }
else if (valid_length(cnfpassword, "<b>Error: </b>Please enter the Confirm Password!!") == false)
{cnfpassword.value=""; changeColor("cnfpassword"); return false; }
else if (document.getElementById('newpassword').value != document.getElementById('cnfpassword').value)
{changeColor("newpassword");cool.error("<b>Error: </b>Passwords entered are not same!");
newpassword.value="";cnfpassword.value="";return false;}
}
}function validate_required(field, alerttxt)
{
with (field)
{
if (value == null || value == "")
{
cool.error(alerttxt);return false;
}
else
{
return true;
}
}
}
cool.error is nothing but CSS nd Js for alert box.I thing there is not any problem in my code weather problem is in some browser settings.Is it so??? because it is working fine in IE and Chrome.
You're using a non-standard IE-only behavior that creates global variables for every element with an ID.
To fix it, add a global variable for each element that you use:
var oldpassword = document.getElementById("oldpassword");
Also, you should never use Javascript's with block.
It is very different from VB's with block, and should not be used unless you truly understand its pitfalls and shortcomings. It will also slow down your code.
You could also use some javascript library to get past browser issues. I'm rooting for jQuery.

Categories

Resources