Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I'm trying to make a menu, but when I have tried to execute the code in Chrome I've got an error.
So for debug proposes I made a button:
<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" />
This is the function where error is:
var loginshow = false;
function login(c)
{
e = document.getElementsByClassName(c);
if(loginshow)
{
e.style.height = "0";
}
else
{
e.style.height = "110px";
}
loginshow=!loginshow;
}
The error from google chrome:
bar.js:13 Uncaught TypeError: Cannot set property 'height' of undefined
at login (bar.js:13)
at HTMLInputElement.onclick ((index):32)
getElementsByClassName returns an array-like object of all child elements which have all of the given class names. You need to iterate all the elements and apply the style on each one
var loginshow = false;
function login(c) {
let elements = document.getElementsByClassName(c);
for(let i=0,l=elements.length;i<l;i++){
elements[i].style.height = loginshow ? "0" : "110px";
}
loginshow = !loginshow;
}
div {
background-color: tomato;
border: 1px solid black;
}
<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" />
<div class="logf"></div>
<div class="logf"></div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I have a small test. When I click on the "click" button, the display is good which changes the color, but console.log shows that the code is not working according to the logic I put in.
In the beginning, the color is black, that's correct
I clicked the button the color turn to red, that's correct
but looking at the console, I think "show bar" must be shown first.
I may do something wrong, or my logic was wrong. Please help me.
function hideShow() {
const footer = document.getElementById("footer");
authorInfo = document.getElementById("authorInfo");
if (footer.style.display === "none") {
footer.style.display = "block";
authorInfo.style.display = "none";
console.log("show bar");
} else {
footer.style.display = "none";
authorInfo.style.display = "flex";
console.log("hide bar");
}
}
<div id="footer" class="item" style="
width: 100px;
height: 200px;
background-color: black;
display: flex;
"></div>
<div id="authorInfo" class="object" style="width: 100px; height: 200px; background-color: red; display: none"></div>
<button type="button" onclick="hideShow()">click</button>
You're checking if (footer.style.display === "none") which is false accordingly to the HTML you provided as it contains the display: flex; property. Therefore, the else block of your conditional is executed.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
If I make elements with CreateElement, and name them the same as elements supposed to be affected by a Style section in the page, they actually won't be affected?
If I want to style my JavaScript created elements, I have to do it with JavaScript, right?
Like:
test()
function test() {
var x = document.createElement("div");
x.setAttribute("class", "test");
document.body.appendChild(x);
}
#test {
width:100%;
position:absolute;
top:10px;
bottom:10px;
background-color: #123456;
}
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Yes they are affected.
In your code, it won't be affected because you assign it to the test class, while the style is referred to the test id.
Correct with JS:
x.setAttribute("id", "test");
Correct with CSS:
.test{
width:100%;
position:absolute;
top:10px;
bottom:10px;
background-color: #123456;
}
You are using a CSS ID selector but give your element a CLASS.
Try
.test{
...
}
I think you did small mistake here. In setAttribute please change to id instead of class.
<!DOCTYPE html>
<html>
<style>
#test {
width:100%;
position:absolute;
top:10px;
bottom:10px;
background-color: #123456;
}
</style>
<body>
<script>
test()
function test() {
var x = document.createElement("div");
x.setAttribute("id", "test");
document.body.appendChild(x);
}
</script>
</body>
</html>
Everything seems correct except the mismatched attribute between id (#) and class (.).
If test is a class then use .test in CSS.
If you want the selector to be id then set that in the JS:
x.setAttribute("id", "test");
#test {
width:100%;
position:absolute;
top:10px;
bottom:10px;
background-color: #123456;
}
<script>
test()
function test() {
var x = document.createElement("div");
x.setAttribute("id", "test");
document.body.appendChild(x);
}
</script>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
i'm looking for a script, wich changes the background image of an div container when spefic numbers are into the input field.
I build this creditcard layout here
inside of it is a <input type="text" name="" class="credit-input"> with the class credit-input.
What i'm looking for is, that if the first three numbers inside the value generate a different background.
So for example, when the value starts with 411, there should be a background image of an amex card, or when it starts with 311, there should be mastercards and so on.
there would be in total 4 different backgrounds.
i'm not so good in js, so i hope that i could find here some help from ya.
That's how my html looks at the moment.The class="jp-front" includes the whole style at the moment the
<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>
thx for any help
Try this :
$(document).ready(function() {
$(".credit-input").on("input",function(){
var value = $(this).val();
if (value == "411")
$(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
else if (value == "311")
$(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
})
})
Final code :
$(document).ready(function() {
$(".credit-input").on("input",function(){
var value = $(this).val();
if (value == "411")
$(".jp-front").css({backgroundImage:"url(http://www.lowestrates.ca/newcontent/img/creditcards/Gold_Rewards_Card_chip_467x293.png)"});
else if (value == "311")
$(".jp-front").css({backgroundImage:"url(https://www.bmo.com/img/main/credit-cards/large/rewards-card.jpg)"});
})
})
.jp-front {
width: 300px;
height: 150px;
border: 1px solid #000;
background-size:100% 100%;
background-repeat: no-repeat;
padding: 20px 0px 0px 20px;
}
<div class="jp-front">
<input type="text" name="" class="credit-input">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Not overly complex, but this should do the trick:
$("input[name='card']").keyup( function() {
img = 'blank.png';
switch($(this).val().substring(0, 3)) {
case '111':
img = '111.png';
break;
case '222':
img = '222.png';
break;
}
$('.img').css('background', 'url(' + img + ') no-repeat center center');
});
Example: https://jsfiddle.net/6hhtgnep/
If you haven't JQuery
Add id="..." and onchange="" onkeypress="" onkeydown=""
<div class="jp-front" id="card-div-id">
<input id="card-input-field-id" type="text" name="" onchange="onCodeInput()" onkeypress="onCodeInput()" onkeydown="onCodeInput()" class="credit-input">
</div>
Javascript:
<script>
function onCodeInput(){
var card_number = document.getElementById('card-input-field-id').value;
if (str.substr(0, 4) == '5466') {
document.getElementById('card-div-id').style.backgroundImage="url(images/mastercard.jpg)"
} else { /* others */ }
}
</script>
Your input element will be -
<div class="jp-front">
<input type="text" name="card-number" class="credit-input">
</div>
Let your image element be
<img src="default.jpg" id="card-img">
Your JavaScript will be like this -
$('input[name=card-number]').keyup(function() {
var inp = $('input[name=search]').val();
if (inp === '311') {
$("#card-img").attr("src","mastercards.jpg");
}
else if (inp === '411') {
$("#card-img").attr("src","amex.jpg");
}
else if (inp === '') {
$("#card-img").attr("src","default.jpg");
}
});
Thank You!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What I am trying to do is fade out one box once the cross of that box is clicked but carn't seem to get it to work even by googling I got it to work when clicking the div it self by using $(this)but I want it to work when the cross is clicked.
<?php
require "global.php";
$select_staff = mysqli_query($database_connection,"SELECT * FROM staff_info");
if(!$select_staff) {
die("Database Error");
}
while($staff_info = mysqli_fetch_array($select_staff)) {
$div_id = $staff_info['div_id']; // assuming you have an id field in your DB
$account_name = $staff_info['account_name'];
$position = $staff_info['position'];
$description = $staff_info['description'];
echo "
<div class='staff_boxes' id='staff_boxes_$div_id'>
<a href='#' class='delete_button'> X </a>";
echo"
<h2>$account_name</h2>
$position
<p>$description</p>
</div> ";
}
?>
<script>
$( document ).ready(function() {
$('div').click(function() {
var myScript = document.getElementById('myScript');
$(this).removeAttr('id').fadeOut();
});
});
</script>
<style>
.staff_boxes {
width: 250px;
min-height: 150px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
}
.staff_boxes {
margin-left: 63px;
float: left;
}
/**Clear floats after the boxes**/
</style>
Thanks
Target the parent like so:
$('.delete_button').click(function() {
$(this).parent().fadeOut();
return false; //Without this the browser may scroll to the top of the page
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i have a simple sms interface written in javascript and every time i click on a call button, a calling bar will(something like a progress bar that never stops or status bar). i still have no code for it because im still a beginner..please help
i have here a link http://jsfiddle.net/XBppR/22/
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
else{
// nothing, this else not required
}
}
this code is not working..don't mind this..for posting purposes only..
Warning: The following answer contains jQuery
So what you need to do is make two images, a foreground image to set the style:
(Can't see it very well, put it on a black background)
And a background image to create an animation effect:
Next, you must superimpose the FG on the BG.
HTML:
<div class="callbar">
<div class="callbarbg" style="width: 200px;"></div>
<div class="callbarfg"></div> <!-- later elements have higher z-index -->
</div>
CSS:
.callbarbg {
height: 20px;
background-repeat: repeat-x;
background-image: url("http://s9.postimage.org/4oij09p7j/sliding_Progress_Bar_BG.png");
background-position:right top;
}
.callbarfg {
position:relative;
top:-20px;
width: 200px;
height: 20px;
background-image: url("http://s9.postimage.org/bg8y34e73/sliding_Progress_Bar_FG.png");
}
.callbar {
overflow:hidden;
width:200px;
height:20px;
}
Finally, you must move the background image in order to make the fade in/out animation in each dot:
JS:
window.setInterval(function(){
var obj = $("parent of .callbar").find(".callbarbg");
if(!obj.data("width"))
obj.data("width", 200);
var w = obj.data("width") + 3;
obj.data("width", w).css("width", w);
var h = w%200;
if(h == 0 || h == 1 || h == 2){
obj.data("width", 200);
}
}, 33);
working jQuery jsFiddle with crude API: http://jsfiddle.net/pitaj/K25U8/6/
EDIT:
jQuery-free jsfiddle now up!
working jQuery-free jsFiddle with crude API: http://jsfiddle.net/pitaj/GpGE2/