I have a iframe containing div to be shown later that is initially hidden using a class. When I remove the class from the container div, everything inside it is shown. but textbox inside iframe is not shown.
parent.htm
<style>
.hide
{
display: none;
}
</style>
<script>
function showSearchWindow(show) {
if (show) {
$('div.overlay').removeClass('hide');
}
else {
$('div.overlay').addClass('hide');
}
}
</script>
<form id="form1">
<div class='overlay hide'>
<input type="text" id='txt1' value='test1' />
<iframe id="frame" src="frame.htm"></iframe>
</div>
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' />
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' />
</form>
frame.htm
//Reference to jQuery 1.4.1 js file
<form id="form1">
<input type="text" id='txt2' value='test'/>
</form>
when I click 'btnShow', 'txt1' is shown but 'txt2' is not shown.
I did not work in IE 7,8 and 9. in other major browsers it works fine.
Are you using jQuery?
Calling $('div.overlay').removeClass('hide') is not pure javascript.
A solution with pure javascript could look like this:
<html>
<head>
<style>
.hide { display: none; }
</style>
<script>
function showSearchWindow(show) {
document.getElementById("mydiv").className = (show ? "" : "hide");
}
</script>
</head>
<body>
<form id="form1">
<div class='hide' id='mydiv'>
<input type="text" id='txt1' value='test1' />
<iframe id="frame" src="frame.htm"></iframe>
</div>
<input type="button" id='btnShow' value='Show' onclick='showSearchWindow(true)' />
<input type="button" id='btnHide' value='Hide' onclick='showSearchWindow(false)' />
</form>
</body>
</html>
The changes I've made is using document.getElementById("mydiv").className to set the class name. I also access the div using id=mydiv instead of class=overlay.
This works in FF9. Hope it helps!
Reloading the page after removing the class is the best solution I found so far.
function showSearchWindow(show) {
if (show) {
$('div.overlay').removeClass('hide');
$('#frame').attr('src', 'frame.htm');
}
else {
$('div.overlay').addClass('hide');
$('#frame').attr('src', 'about:blank');
}
}
<iframe id="frame" src="about:blank"></iframe
Related
I am trying to show a DIV if two inputs have the same value, as already asked here: How to compare two inputs and show a div
I can run the code snippet, but when I try it myself it doesn't seem to work. The code is very simple, yet I don't see why the DIV isn't showing when the two values are matching:
$("#some1, #some2").on("keyup change", function(){
let firstEl = $("#some1"),
secondEl = $("#some2"),
conditionalEl = $("#showhide");
if (firstEl.val() == secondEl.val() ) {
conditionalEl.show();
} else {
conditionalEl.hide();
}
});
#showhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" name="some1" id="some1">
<input type="number" name="some2" id="some2">
<div id="showhide">The inputs are the same</div>
<input type="submit">
</form>
</html>
Seems your key up function is not working, Try this
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function myFunction(vaule){
let conditionalEl = $('#showhide');
if ($("#some1").val() == $("#some2").val() ) {
conditionalEl.show();
} else {
conditionalEl.hide();
}
}
</script>
<form>
<input type="number" name="some1" id="some1" onchange="myFunction()">
<input type="number" name="some2" id="some2" onchange="myFunction()">
<div id="showhide" style="display:none;">The inputs are the same</div>
<input type="submit">
</form>
</body>
</html>
HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>
Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.
HTML:
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered
My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.
It is hidden like this:
#block-views-exp-display-products-page .views-submit-button {
visibility: hidden;
}
What I actually need now is something like this:
#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
visibility: visible;
}
But I dont know how to do that.
Edit:
In case anyone comes across this, this is my final solution:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('focusout', function(){
if (!$("#edit-submit-display-products").is(":hover")) {
$("#edit-submit-display-products").css("visibility", "hidden");
}
});
});
</script>
This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.
You can leverage :focus-within.
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
Support is non-IE/Edge though.
Something like:
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within + .views-submit-button input {
visibility: visible
}
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within+.views-submit-button input {
visibility: visible
}
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
You could add Javascript (jquery) to solve this problem:
<script src="code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
I am new to angular js. I am trying to change the border of the fields to red when empty form is submitted.
I have written controller where it processes the input when valid form is submitted and just makes a field(invalidFormSubmitted) to true when invalid form is submitted.
I tried below css but it is not working
input.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
I also tried with ng-submitted, but no luck.
How do i make the field border red when this variable is set to true?
Thanks in advance.
you're looking for ng-class
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
input.invalidFormSubmitted{
border:1px solid red;
}
</style>
<div ng-app="app">
<form name="myForm">
<input type="text" required ng-model="foo" name="sample" ng-class="{'invalidFormSubmitted':myForm.sample.$invalid}" />
</form>
</div>
As you can see the class is applied as long there is no value in the input here
try this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
});
.invalidFormSubmitted{
border-bottom: 0.125rem solid #e42105;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="form">
<input name="name" ng-model="name" ng-required="true" ng-class="{'invalidFormSubmitted': form.name.$invalid && check}">
<button type="button" name="button" ng-click="check = true">ENVIAR</button>
</form>
</div>
I would like to know if there is a way to change the color of an input field after you clicked on a submit button, like change it's color to red if the input is invalid. My current solution marks every input red at the beginning, because of my current css code.
input:invalid {
background: #FF3300;
}
I want the input fields to remain white until you hit submit button, then the correct inputs should turn green while the incorrect ones should turn red.
Thanks in advance.
Small example.
HTML:
<html><!DOCTYPE html>
<head>
<title>Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<form action="">
<input type="text" id="name" class="input" maxlength="50" pattern="[A-Za-z\\s]*" placeholder="Name" required>
<input type="submit" value="Submit" id="Submit">
</form>
</body>
</html>
CSS:
input:invalid {
background: #FF3300;
}
input:valid {
background: lightgreen;
}
#Submit{
background: lightgrey;
}
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Say I'm a duck</title>
</head>
<body>
<script>
function verify(){
var value = document.forms[0].item.value; // or replace document.forms[0].item by document.getElementById('name')
var objective = "I'm a duck";
if(objective != value){
document.forms[0].item.style.color="#FF3300";
return false;
} else {
document.forms[0].item.style.color="lightgreen";
}
return true;
}
</script>
<form action="" method="" onSubmit="verify();">
<input type="text" name="item" id="name" class="input" maxlength="50" pattern="[A-Za-z\\s]*" placeholder="Name" required>
<input type="submit" value="Submit" id="Submit">
</form>
</body>
</html>
The onSubmit property will call the js verif() function.
In javascript, the call to DOM Object.style.property = value; will change the object style.
W3School js change css
Admin XVII
You may have incorrectly set parameters in the tag input. That is: type, required, pattern. Read more on the Internet about HTML5 form validation. CSS selector you are correct. Please note that this method works only in modern browsers supporting HTML5, in older browsers, you will have to use JS libraries to validate the form or write a small script in PHP.
What you are asking for is one of angularJS features.
But to answer your question... First of all I asume you are using ajax, or the reload won't show the input any more. If that is so, when you get an error from the call you can add an .invalid class, so instead you'd need this:
input.invalid {
background: #FF3300;
}
And on ajax error:
document.querySelector(".targetInput").classList.add("invalid");
Have you considered using JQuery validation plugin?
$("form").validate({
errorClass: "my-error-class",
validClass: "my-valid-class",
rules: {
test: {
required: true,
minlength: 12
}
}
});
http://jsfiddle.net/8vQFd/