We Keep Coding

Add text to specific DIV

How to append text to a specific <div> if i know the ID of the <div>?
For example, here's my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function appendDIV(idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
}
appendDIV("content-01", "some text");
</script>
<div id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>
Function accepts the ID of the <div> and some text, but nothing happens.
What's going wrong?

code for getting each p in side div you should do like this
Working
// Shorthand for $( document ).ready()
$(function() {
appendDIV("content-01", "some text");
//get all p element and go through each
$('#content-01 > p').each(function( index ) {
console.log( index + ": " + $( this ).text() );
console.log( "id of element" + $(this).attr('id'));
});
});
function appendDIV(idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
}
Working Demo
you should allows to load DOM first before doing any manipulation , so for that you should write you code in document.ready method provided in jquery, which get called when DOM is ready
// Shorthand for $( document ).ready()
$(function() {
appendDIV("content-01", "some text");
});
add code as above. that will do . Read here : $( document ).ready()

You might also consider a custom trigger, passing values, for example if you want a click event on the DIV, then insert some stuff:
$('body').on('appenddiv', function(event, idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
});
// some where later in code:
$(".mydiv-group").on('click', function() {
let myid = $(this).attr('id');
let mytext = myid + ": some text";
$('body').trigger('appenddiv', [myid, mytext]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv-group" id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>
<div class="mydiv-group" id="content-02" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>

how to hide loading image after load chart in d3?

$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?

You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>

$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});

How do I change color with onmouseover?

I wonder how I can do those 2 functions into 1 function instead.
function test1() {
document.getElementById('div1').style.color = 'red';
}
function test2() {
document.getElementById('div1').style.color = 'blue';
}
<div onmouseover="test1()" onmouseout ="test2()" id="div1">
</div>

pass the object and color to the test method
function test(thisObj, color)
{
thisObj.style.color = color;
}
<div onmouseover="test(this, 'red')" onmouseout ="test(this, 'green')" id="div1"></div>

you can achieve this with just css
https://jsfiddle.net/dango_x_daikazoku/404o04co/1/
#test1{
color:red;
cursor:default;
}
#test1:hover{
color:blue;
}

If you want to do with JavaScript you can do in this way.
JS :
window.onload = function(){
var htmlDiv = document.getElementById("div1");
htmlDiv.addEventListener('mouseover',function(){
htmlDiv.style.color = "red";
})
htmlDiv.addEventListener('mouseout',function(){
htmlDiv.style.color = "blue";
})
}
HTML :
<style>
#div1{
width:100px;
height : 100ppx;
border :1px solid black;
}
#div1 {
color:blue;
}
</style>
Here is the plunker

I would recommend CSS :hover Selector
If you want to change class from javascript, i would recommend jQuery:
jQuery addClass() Method,
jQuery removeClass() Method,
hover()
mouseover()
hasClass()
As for your request to do this with one function, you could write:
function manageHoverColor(){
if( $("#hoverTestDiv").hasClass("mouseHovered") ){
$( "#hoverTestDiv" ).removeClass('mouseHovered');
}else{
$( "#hoverTestDiv" ).addClass('mouseHovered');
}
}
$( "#hoverTestDiv" ).mouseover(manageHoverColor);
$( "#hoverTestDiv" ).mouseout(manageHoverColor);
or you could do:
$( "#hoverTestDiv" ).mouseover(function() {
$( "#hoverTestDiv" ).addClass('mouseHovered');
});
$( "#hoverTestDiv" ).mouseout(function() {
$( "#hoverTestDiv" ).removeClass('mouseHovered');
});
.ordinaryText {
color: #00FF00;
}
.ordinaryText.mouseHovered {
color: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hoverTestDiv" class="ordinaryText" > I am div to test jQuery mouse hover <div>

how to expand onclick <video>

here's my html code:
echo "<div>";
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo "</div>";
here's my js code:
<script>
var videou = $( "video" ).attr("width", "150") + $( "video" ).attr("height", "80");
$( "video" ).click(function()
{
$(this).attr("width","500");
$(this).attr("height","500");
var open = true;
});
</script>
i want to go back to the original attributes. But i already tried everything. Should i use divs?

Expansion is a transitional event. Do you mean changing the width/height?
Here are expansion methods. As I had mention, check out jQuery's .slideDown() feature. Is this what you were looking for?
Simply replace the code for the .videocontainer with a video frame.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.slideDown('fast', function() { state = true; btn.html('Close Video'); });
} else {
video.slideUp('fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
display: none;
width: 500px;
height: 380px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also to expand the frame look into jQuery's .animate() function.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.animate({width: '500px', height: '500px'}, 'fast', function() { state = true; btn.html('Close Video'); });
} else {
video.animate({width: '100px', height: '80px'}, 'fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
width: 100px;
height: 80px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your question is hard to understand, but based on your js code, maybe is this what you want
<script>
var open = false;
$( "video" ).attr("width", "150");
$( "video" ).attr("height", "80");
$( "video" ).click(function()
{
if(open){
$(this).attr("width","150");
$(this).attr("height","80");
open = false;
}else{
$(this).attr("width","500");
$(this).attr("height","500");
open = true;
}
}
);
</script>

I'm not sure exactly what you are trying to achieve, as your description seems rather vague... If you are wanting a video to be displayed on the click of another element...
echo '<div id="divVideo" style="display: none;">';
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo '</div>';
echo 'Show Video';
<script>
$(document).ready(function() {
$('#aVideo').click(function(e) {
e.preventDefault();
$('#divVideo').show();
}
});
</script>
If that is not what you are trying to do, then please more descriptive and I'll try to help the best I can.

jQuery animation without queuing

I am trying to figure out how .stop() and clearQueue() work.
Here is my sample code in jsfiddle: http://jsfiddle.net/PsTQv/1/
You will see the animation is queuing if hove over several blocks.
To work around with this, I tried to use stop() and clearQueue.Simple add stop after hide() or show() or both won't work.The behaviors like:
1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()
I want to understand what the differences between clearQueue and stop to explain the behaviors above.Also I want to figure out how to achieve the animation without queueing in this example, that is, hover over the block and the text shows up in the slide effect.
Thanks

You need to clear the animation queue in the callback function that executes when the slide animation is done:
$('.block').hover(function(){
$('section').hide('fast');
//$('section').stop().show('slide',{direction:'left'},1000);
$('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});
jsFiddle

var inAnimation = new Array();
$("div").hover(function(){
if (!inAnimation[$("div").index(this)] ) {
$(this).animate({ width: "200px" });
}
}, function() {
inAnimation[$("div").index(this)] = true;
$(this).animate({ width: "100px" }, "normal", "linear", function() {
inAnimation[$("div").index(this)] = false;
})
});

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clearQueue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).click(function() {
var myDiv = $( "div" );
myDiv.show( "slow" );
myDiv.animate({
left:"+=200"
}, 5000 );
myDiv.queue(function() {
var that = $( this );
that.addClass( "newcolor" );
that.dequeue();
});
myDiv.animate({
left:"-=200"
}, 1500 );
myDiv.queue(function() {
var that = $( this );
that.removeClass( "newcolor" );
that.dequeue();
});
myDiv.slideUp();
});
$( "#stop" ).click(function() {
var myDiv = $( "div" );
myDiv.clearQueue();
myDiv.stop();
});
</script>
</body>
</html>