Here is a simplified version of a problem I am currently facing at work. The code runs as it should in Firefox 3.6. When a row is clicked, Javascript changes its class name and the properties of the children elements should change too.
In IE6 and maybe other versions, however, it only works for the "title1" and "title2" TDs: they change color. What doesn't work is "value1" and "value2" changing from display:none to their default value. I have tried working with the style.display attribute of the TDs to no avail.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<style type="text/css">
table#input{
width: 100%;
border-collapse: collapse;
}
table#input tr{
border-bottom: 1px solid #333;
}
table#input td{
padding: 4px;
}
tr.disabled td.key{
color: #ccc;
}
tr.disabled td.value{
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(rowElem){
rowElem.className = (rowElem.className == 'disabled') ? 'enabled' : 'disabled';
}
</script>
</head>
<body>
<table id="input">
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title1</td><td class="value">value1</td></tr>
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title2</td><td class="value">value2</td></tr>
</table>
</body>
</html>
I came up with an alternate solution that works in FF and IE6-8. For each TD with class="value", I enclosed the content with span tags and made the following change to the style sheet:
tr.disabled td.value span{
position: absolute;
top: -20px;
}
Now when a row is disabled, all the value content should be hidden off screen.
Related
I have an HTML file where I added code like described here:
https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_javascript
So my HTML code looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
<style>
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
}
</style>
</head>
<body>
<apple-pay-button buttonstyle="black" type="plain" locale="en">Check out</apple-pay-button>
</body>
</html>
When I open the HTML file in Chrome or Safari on my MacBook Pro it does not show the button. There are no JavaScript errors in the console either.
How can I make the Apple pay button show in the browser. I specifically need the Check out button with the Apple logo.
I have tried adding display: initial; inside the
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
}
code, and it worked for me.
It stays like this after adding it:
apple-pay-button {
--apple-pay-button-width: 140px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
display: initial;
}
So the reason is basically it has a display none/hidden somewhere.
I think you will have to modify that display for it to fit your needs.
This question already has answers here:
jQuery not working with my HTML at all?
(3 answers)
Closed 4 years ago.
This code to append to a to-do list works in the editor in a Codecademy tutorial, but using the same code in CodePen, nothing happens when I type text into the form box and hit submit (whereas in Codecademy, the entered text is added below the form box). It's not just an issue with CodePen, either; the same thing happened after entering it into Atom.
To see how it works you can view my CodePen, but I'll also enter the code used below for convenience.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To Do</title>
<link rel="stylesheet" href="stylesheet.css"/>
<script src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</body>
</html>
And the JavaScript:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
Why the discrepancy? Is something wrong with the code?
You need to enable jQuery. Also, if you want to clear the input field after adding a new item you can do this:
$('input[name=checkListItem]').val('');
Here's a working solution!
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
console.log(toAdd);
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
h2 {
font-family: Helvetica;
color: grey;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
}
.button {
/* makes button display next to form */
display: inline-block;
vertical-align: middle;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
color: #666;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
Uncaught ReferenceError: $ is not defined
at pen.js:1
Blockquote
Hey, Its always advisable to look at browser console to check what the error is. 60% of your problems will be solved by just looking at console. and next 40 % be be solved by debugging the javascript code using chrome browser. This is the error that is thrown along with other few errors. It means that you have not included Jquery library in your html. Please import it using this cdn link
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
or as mention by Andrey Petrov
You have to add jQuery support to your CodePen snippet. Click on "settings" in JavaScript window, then pick "jQuery" from "Quick-add" dropdown in the bottom of "Pen Settings" window.
You will have to link to jQuery dependency manually so your code can work flawless outside sandboxes like Codeacademy, CodePen, JSFiddle etc.
Here is how to use jQuery from CDN: http://jquery.com/download/#using-jquery-with-a-cdn
Basically, you will end up adding something like this:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
before the <script src="script.js"></script> line.
I use jquery.colorfy https://github.com/cheunghy/jquery.colorfy to change the key word color in the textarea.
I can set value use $('#textarea').text("value"); to change my textarea value.
The problem is: After the code $('#textarea').colorfy("markdown");, the command: $('#textarea').text("value"); is dead.
Could someone tell me what happened? Thanks a lot.
Try like this:
$(document).ready(function(){
$('#area').colorfy("markdown");
$('#area').text("value");//will be hidden you can see by inspecting the html
$('.area').html("value");// will be visible to you
});
Note: What i see from the example is it sets display:none to the textarea but creates a div with the same class which is the class of text area and applies it's own css on these.
$(document).ready(function(){
$('#area').colorfy("markdown");
$("#click").click(function(){
$('.area').html("value");// will be visible to you
});
});
.area {
float: auto;
margin-left: auto;
margin-right: auto;
width: 200px;
max-width: 200px;
height: 200px;
border-color: black;
border-width: 2px;
border-style: solid;
padding: 8px;
font-size: 15px;
text-align: left;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://cheunghy.github.io/jquery.colorfy/jquery.colorfy.js"></script>
<script type="text/javascript" src="http://cheunghy.github.io/jquery.colorfy/jquery.colorfy.markdown.js"></script>
<textarea id="area" class="area">
hi
</textarea>
<button id="click">click!</button>
Do operate first on text of textarea before applying colorfy or else post applying manage with span it adds with class
After you write $('#textarea').colorfy("markdown"); it applies color ie. custom css by modifying the textarea text by adding span and class. Tested this plugin please see the screenshot below.
Quick Note: Please dubug more as per your need.
I have a html page as below,
the tags code is :
<fieldset>
<legend>Tags</legend>
<div>
<label>
<input type="checkbox" name="col" value="summary" checked="checked" />
Name
</label>
......
</div>
</fieldset>
But i want to make the page as below:
In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks
It can be done by first finding all of the legend elements, then assigning an onclick handler. The handler is assigned to the first div found in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.
jsFiddle Demo
window.onload = function(){
var legends = document.getElementsByTagName("legend");
for(var i=0; i<legends.length; i++)
{
legends[i].onclick = function()
{
var myDivs = this.parentNode.getElementsByTagName("div");
var myDiv;
if(myDivs.length > 0)
{
var myDiv = myDivs[0];
if(myDiv.style.display == "")
{
myDiv.style.display = "none"
}
else
{
myDiv.style.display = "";
}
}
}
}
};
In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).
You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:
Jquery:
$(function(){
$('legend').click(function(){
$(this).nextAll('div').toggle();
$(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
});
})
CSS:
.hide{
padding-left: 10px;
background: url('img/down.gif') no-repeat left middle;
}
.show:after{
padding-left: 10px;
background: url('img/up.gif') no-repeat left middle;
}
Fiddle here
I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#title').click(function(){
$('#tags_check').toggle();
});
})
</script>
<style type="text/css">
#content {
position: relative;
padding: 10px;
}
#title {
border: 1px solid grey;
position: absolute;
background-color: #ccc;
top: -5px;
left: 15px;
z-index: 1;
cursor: pointer;
}
#tags_check {
border: 1px solid grey;
position: relative;
z-index: 0;
top: 3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="title">Columns</div>
<div id="tags_check">
<input type="checkbox" name="col" value="summary" checked="checked" /> Name1
<input type="checkbox" name="col" value="summary" checked="checked" /> Name2
</div>
</div>
</body>
I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.
About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!
I am trying to add a border to a div element when the moust is hovering on the div, but I found after the border is aded, the boder will occupy some space and make the content move. See the snippet below. Is it possible to avoid move the content in this case when the border is displayed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test-id').hover(function() {
console.log("test-id");
$('#test-id').css('border', '5px dotted');
},
function() {
$('#test-id').css('border', 'none');
}
);
});
</script>
</head>
<body style="margin-bottom:0px;margin-top:0px;">
<div>
<div style="width: 300px;">
</div>
<div id="test-id">
jfdjkfjdsfjaldsjfsjf
</div>
</div>
</body>
</html
>
Use CSS 'outline' property instead of border. Which will not occupy element space.
Hope will help you.
Try maintaing the border all the time, and just change the color from transparent to whatever color you want it to have when its visible. You could also use a the background color as the "off" color, but that means it has to overly a solid colored element.
Bin ,
Yes border is also cacluated as part of width. So do one thing give a border before itselef with the same color as background , once you mouseover you can change the color , so that it won't push the other ones down.
This is the behavior how the css render.
You need to set the margin to prevent this.
$('#test-id').css('margin', '-5px');
1 Solution is that you make the with: on hover -2px or another one on normal state, with the border color seted to the box color (or background color of the body).
ex 1:
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; }
.container:hover { width: 198px; border: 1px solid #000; }
ex 2: (best solution)
<body>
<div class="container"></div>
</body>
body { background: #ccc; }
.container { width: 200px; height: 200px; background: #fff; border: 1px solid #fff; } // or #ccc
.container:hover { border: 1px solid #000; }