I am trying to work on some action based on the browser in rails. So I have this in my index.rhtml
<div class="function_tes">
<function whichBrwsr()
{
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("msie") != -1) return 'IE';
if (agt.indexOf("firefox") != -1) return 'Firefox';
}>
</div>
However, I do not see any result of "IE" nor "firefox" when I open index in those browser. Do I need to call whichBrwsr() somewhere in index.rhtml or?
Thank you for any guidance
Here you go.
<div id="myDiv" class="function_tes">
</div>
<script type="text\javascript">
function whichBrwsr()
{
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("msie") != -1) return 'IE';
if (agt.indexOf("firefox") != -1) return 'Firefox';
}
document.getElementById("myDiv").innerHtml = whichBrwsr();
</script>
Related
This question already has answers here:
How to add a class in Javascript/jQuery if an element has content in it?
(4 answers)
Closed 3 years ago.
I am working on a website in which I want to check whether element has any content in it.
Below is my html code. I have mentioned condition#1 where opacity-pointseven class should be added through script.
<div class="featured-block">
<a href="/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit">
<img src=""> // (condition#1)
</figure>
<div class="featured-block__content">
<h1 style="margin-bottom:0px;" class="featured-block__title">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h1>
<h1 class="featured-block__tag"> More Coverage</h1>
</div>
</div>
</a>
</div>
Problem Statement:
I tried in the following way, but it doesn't seem to work properly.
<script>
jQuery(function ($) {
if ($(this).find(".featured-block__title").not(":empty") && $(this).find(".featured-block__tag").not(":empty")) {
$(this).find(".img-fit img").addClass("opacity-pointseven"); // For condition#1
}
});
})
</script>
Pleas try something like this in Javascript unless it must be done in Jquery.
document.querySelectorAll(".featured-block__item-inner").forEach(function(itemInner){
var blockTitle = itemInner.querySelector(".featured-block__content .featured-block__title");
var blockTag = itemInner.querySelector(".featured-block__content .featured-block__tag");
var blockImage = itemInner.querySelector(".featured-block__image, .img-fit");
if(!(blockTitle && blockTag && blockImage)) return;
if(blockTitle.innerText = "" && blockTag.innerText="") {
blockImage.classList.add("default-opacity");
}
else if (blockTitle.innerText != "" && blockTag.innerText !="") {
blockImage.classList.add("opacity-pointseven");
}
.....
})
You want to check if the element has no content or child elements inside, right?
If that is your problem then you can use this code to get the html content of the element (the output of this code is string)
$(this).find(".featured-block__title").html()
To check whether its content is empty or not, you can use the condition below
if ($(this).find(".featured-block__title").html().trim() == "") {
$(this).find(".img-fit img").addClass("default-opacity");
}
You can change your script with this one.
<script>
jQuery(function ($) {
$(".featured-block__item-inner").each(function () {
if ($(this).find(".featured-block__title").html().trim() == "" && $(this).find(".featured-block__tag").html().trim() == "") {
$(this).find(".img-fit img").addClass("default-opacity");
} else if ($(this).find(".featured-block__title").html().trim() != "" && $(this).find(".featured-block__tag").html().trim() != "") {
$(this).find(".img-fit img").addClass("opacity-pointseven");
} else if ($(this).find(".featured-block__title").html().trim() != "" && $(this).find(".featured-block__tag").html().trim() == "") {
$(this).find(".img-fit img").addClass("opacity-pointseven");
} else if ($(this).find(".featured-block__title").html().trim() == "" && $(this).find(".featured-block__tag").html().trim() != "") {
$(this).find(".img-fit img").addClass("opacity-pointseven");
}
});
})
I am trying to make a form with a date input.
However, this input is in date format, and I would like to change the value while the control is still active.
Here is the full code :
// Javascript code
function add_value()
{
var dataoriginale = document.getElementById("fin_mater").value;
if(document.getElementById("fin_mater").value.length = 2)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
else if(document.getElementById("fin_mater").value.length = 5)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
}
<!-- Code of the input -->
<input id="fin_mater" type="text" onchange="add_value();" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>
But this is only updating the text when you exit of the control, and I would like to know how to run this javascript function while the control is still active.
Thanks.
You need to use onkeyup.
<input id="fin_mater" type="text" onkeyup="add_value();" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>
From the docs
Execute a JavaScript when a user releases a key
Also in your if your are using =, you should be using ==
...
if(document.getElementById("fin_mater").value.length == 2)//==
...
else if(document.getElementById("fin_mater").value.length == 5)
...
First let's make the code smell more like the "javascript" :)
// Javascript code
function $(id) {
return document.getElementById(id);
}
function add_value(event) {
var dataOriginale = $("fin_mater").value,
len = dataOriginale.length,
key = event.keyCode || event.charCode;
// Allow BACKSPACE and DEL
if (key === 8 || key === 46) {
return true;
}
if(len === 2 || len === 5) {
$("fin_mater").value = dataOriginale + '-';
}
return false;
}
<!-- Code of the input -->
<input id="fin_mater" type="text" onKeyUp="add_value(event);" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>
If you want to append the "-" automatically when you input numbers, you can listen on the "onKeyUp" event of the text box rather than the "onchange".
PS: You can use the key code to limit only numbers input and also do some validations.
You can use keypress():
$(document).ready(function()
{
$( "#fin_mater" ).keypress(function() {
var dataoriginale = document.getElementById("fin_mater").value;
if(document.getElementById("fin_mater").value.length == 2)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
else if(document.getElementById("fin_mater").value.length == 5)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
});
});
Fiddle
With some of your help and some documentation, I finally went to this, that works perfectly on every browser that supports javascript.
$(document).ready(function(event)
{
$( "#fin_mater" ).keypress(function(event) {
var dataoriginale = document.getElementById("fin_mater").value;
if(event.keyCode != 8)
{
if(document.getElementById("fin_mater").value.length == 2)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
else if(document.getElementById("fin_mater").value.length == 5)
{
document.getElementById("fin_mater").value=dataoriginale+'-';
}
}
});
});
Thanks everyone !
I am using javascript code shown below for displaying Cookies either
Enabled
or
Disabled
Code is:
<script>
txt=navigator.cookieEnabled;
document.getElementById("example").innerHTML=txt;
</script>
But this code is just displaying
true
I have no idea how to go ahead.
Please help. Thanks in advance.
navigator.cookieEnabled return true or false. So you can just display what you want on the basis of these values
<script type="text/javascript">
txt=navigator.cookieEnabled;
document.getElementById("example").innerText=(txt==true ?"Enabled":"Disabled");
</script>
please find the below link for checking the cookies enabled state:
http://sveinbjorn.org/cookiecheck
function are_cookies_enabled()
{
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
{
document.cookie="testcookie";
cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
}
return (cookieEnabled);
}
<script>
txt=navigator.cookieEnabled;
document.getElementById("example").innerHTML=(txt==true?"Enabled":"Disabled";
</script>
Now the form is one form, here is the new broken code
<script language="javascript" type="text/javascript">
function verifyIt(){
if((document.form1.baseline_08.value != "" && Number(document.form1.baseline_08.value) && document.form1.baseline_08.value != "-1")){
if((document.form1.baseline_09.value != "" && Number(document.form1.baseline_09.value) && document.form1.baseline_09.value != "-1")){
document.form1.submit();
return true;
}else{
alert("Please select how old you were when you started smoking every day.");
return false;
}
}
function submit2(){
document.form1.direction.value = "back";
document.form1.submit();
}
</script>
Now the verify doesnt work at all. I just dont see what is wrong with this now.
The problem I am having is the form1 is the only one being recognized. I believe it is because of my if statement structure. Basicly I only get the return from the form1. What is wrong with my js?
I believe it is because of my if statement structure.
Yes, you are always returning after checking form1. However, you cannot submit multiple forms at a time, so you should combine them into one. Then use
function verifyIt() {
if(!(document.form.baseline_08.value == "" && Number(document.form.baseline_08.value) && document.form.baseline_08.value != "-1")){
alert("Please select how old you were when you started smoking every day.");
return false;
}
if(!(document.form.baseline_09.value != "" && Number(document.form.baseline_09.value) && document.form.baseline_09.value != "-1")){
alert("Please select when you would smoke after waking up.");
return false;
}
document.form.submit();
}
I wrote a javascript validation script to validate if the URL contains '+' or whitespaces.
$.validator.addMethod("reportFileURL",
function(value,element){
if(((value.search(/[+]+/)) == -1)
&& ((value.search(/[ ]+/))) == -1){
return true;
}
},"Invalid filename");
Can i write the script more precise than this.
if (value.search(/[\s+]/) == -1) {
return true;
}
return value.search(/[ +]/) == -1;