Develop Reference

What is the logic of html and js? [closed]

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.

Display a bottom message on click checkbox [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
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.
Closed 3 years ago.
Improve this question
I am trying to display a bottom message on listing product when someone click on one or several checkbox. But I don't see nothing inside my page.
Code:
<style>
.box{
color: #eee;
padding: 20px;
display: none;
margin-top: 20px;
}
.green{ background: #228B22; }
label{ margin-right: 15px; }
</style>
// loop to display the products with the checkbox
while($Qlisting->fetch()) {
...
echo '<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>';
...
}
<div class="green" style="display:none;">Your message</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>

Toggle() is used to interval between display:inline and display:none;
You are currently trying to toggle elements with no matching classes to your selector. ('.' + inputValue)
Create the the message you want to display inside a div with the same class as the corresponding checkbox value.
Example:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<div class="green" style="display:none;">Your message</div>

how to change background image dynamically only when radio button is selected and by pressing submit button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
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.
Closed 7 years ago.
Improve this question
how to change background image dynamically only when radio button is selected and by pressing submit button
link to sample

Using only Javascript
Test it online: http://jsfiddle.net/OscarGarcia/t70prkda/
HTML test code:
<form name="form" onsubmit="return check()">
<p><input type="radio" name="bg" value="no" />
Desactivate</p>
<p><input type="radio" name="bg" checked="checked" value="yes" />
Activate</p>
<input type="submit" />
</form>
Javascript code:
function check() {
if (document.form.bg.value == "yes") {
document.body.style.background = "red";
} else {
document.body.style.background = "";
}
return false;
}
Edit 1: Using jQuery
Test it online: http://jsfiddle.net/OscarGarcia/t70prkda/1/
function check() {
if ($("#form input[name=bg]:checked").val() == "yes") {
$('body').css('background', "red");
} else {
$('body').css('background', "");
}
return false;
}
Edit 3: Changing background image in JS and jQuery
For simplicity my code only change background color, this one changes background image: http://jsfiddle.net/OscarGarcia/t70prkda/2/
function check() {
if ($("#form input[name=bg]:checked").val() == "yes") {
$('body').css('background-image', "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)");
} else {
$('body').css('background', "");
}
return false;
}
And in pure javascript: http://jsfiddle.net/OscarGarcia/t70prkda/3/
function check() {
if (document.form.bg.value == "yes") {
document.body.style.backgroundImage = "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)";
} else {
document.body.style.background = "";
}
return false;
}
Edit 3: Smooth background image transition
Try it online: http://jsfiddle.net/OscarGarcia/2g6rfdsf/
CSS Code:
body {
height: 100%;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin:0px;
width: 100%;
height: 100%;
background: red url(http://thumbs.dreamstime.com/z/abstract-blue-tiled-background-5151518.jpg) -400px center;
transition: all 2s ease-in-out;
opacity: 0;
z-index: -1;
}
HTML Code:
<div id="overlay"></div>
<form name="form" id="form" onsubmit="return check()">
<p><input type="radio" name="bg" value="no" />
Fade-out</p>
<p><input type="radio" name="bg" checked="checked" value="yes" />
Fade-in</p>
<input type="submit" />
</form>
Note that I'm using an overlay (a div over the background) with opacity 0 (hidden) and I'll animate the opacity. It's not possible to animate background image changes, they will change instantly.
And javascript (jQuery version) code:
function check() {
if ($("#form input[name=bg]:checked").val() == "yes") {
$('#overlay').
css('opacity', '1').
css('background-position', '0px center');
} else {
$('#overlay').
css('opacity', '0').
css('background-position', '-400px center');
}
return false;
}
When pushing button background overlay will show or hidden smoothly because CSS code transition: all 2s ease-in-out; while left position changes slowly too!.
Hope it helps!

You will want to use jquery to register the eventHandler with both actions.
Something like:
var backgroundHandler = function(){//whatever};
$('#radioWhatever').on('changed',backgroundHandler);
$('#submitbtn').on('click', backgroundHandler);

JS script not working properly [closed]

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
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html

A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.

I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>

how do i make a calling bar in javascript? [closed]

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/