jQuery - hidden class is not being displayed with fadeIn - javascript

I have a hidden class fadeThis, which does not appear when I hover over the button.
Perhaps it is clashing with another class/div?
What I'm essentially trying to do is create a red fade in over the grey box, when the cursor hovers over the button, and then when the cursor leaves the box(not the button), I want it to return back to it's original state.
I've also added the CSS to help demonstrate
HTML
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
CSS
.imageOne{
height: 300px;
width: 400px;
background-color: grey;
}
.centerButton{
display: flex;
justify-content:center;
padding-top:150px;
}
.btn{
height: 30px;
width:170px;
}
.onClickThis{
height: 300px;
width: 400px;
background-color: tomato;
}
JavaScript
$(document).ready(function () {
$(".onClickThis").hide();
$(".fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(this).addClass("fadeThis onClickThis");
$(".btn").remove();
});
$(".onClickThis").mouseleave(function () {
$(this).removeClass("fadeThis onClickThis");
});
});
});

I don't understand exactly what you are looking for. Maybe you could provide more details.
Here is a demo started from your code with some changes added.
$(document).ready(function () {
$(".onClickThis, .fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(".onClickThis, .fadeThis").fadeIn( 250 );
$(".btn").fadeOut();
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Related

html2canvas renders blank white image while capturing image of RTSP streaming

Here is my code. I am playing RTSP streaming. I want to take snap shot on click of button.
Although my code takes picture but it is blank white. I need help to diagnose the issue in my code. The play button plays the RTSP streaming and "Take Photo" button capture image.
I need help so that when I press click, the image could be rendered properly.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Script included -->
<script type="text/javascript" src="flashphoner.js"></script>
<script type="text/javascript" src="player-min.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script>
<!-- Main function to take picture -->
function takeshot()
{
window.scrollTo(0, 0);
let div = document.getElementById('play');
html2canvas(div, {
allowTaint: true,
useCORS: true
}).then(
function (canvas)
{
document.body.appendChild(canvas);
document.getElementById('snapshotImg').appendChild(canvas);
})
html2canvas(div, {
onrendered: function(canvas)
{
$("#canvas").append(canvas);
getCanvas = canvas;
}
});
}
</script>
</head>
<!-- CSS -->
<style>
.fp-Video
{
border: 1px double black;
width: 322px;
height: 242px;
}
.display
{
width: 100%;
height: 100%;
display: inline-block;
}
.display > video,
object {
width: 100%;
height: 100%;
}
</style>
<body onload="init_api()">
<!-- section will paly strp straming -->
<div class="fp-Video">
<div id="play" class="display"></div>
</div>
<!-- Button for play and take photo -->
<button id="playBtn">PLAY</button>
<button id="takephoto" onclick="takeshot();">Take Photo</button>
<div><img id="snapshotImg"></div>
<div id="canvas"></div>
<div id="snapshotBtn"></div>
</body>
</html>

Display a django-from from JS

so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>

How do I loop through HTML elements while executing a function on each element

I am a newbie to Javascript, I wanted to implement a for loop that would go through each div as selected by its class.
The simple idea is to reveal DIVs when I click on a button. But it has to be sequential: I click DIV1 appears, when I click again DIV2 appears and so on. Currently my code only changes the class of one DIV and not the rest. Here are my code samples:
$(document).ready(function(){
// jQuery methods go here...
var count = document.getElementById("page1").childElementCount;
for(var i = 0; i < count; i++){
var myClass = ".panel" + i;
$("button").click(function(){
$(myClass).addClass("showing animated fadeIn")
});
}
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
Please let me know what I am missing especially in the for loop or if I can do something else to be able to grab a DIV and add a class every time I click on the button.
Firstly, the HTML attribute class is made for multiple elements with the same style/behaviour. You should use id if it is to dissociate one panel for another.
You have to store a count variable to know which panel has to appear next.
And always try to do what you want in Javascript without jQuery if it is possible !
var i = 1;
function clickBtn() {
if (!document.getElementById("panel-" + i))
return;
document.getElementById("panel-" + i).classList.add("visible");
i++;
}
.panel {
width: 50px;
height: 50px;
display: none;
margin: 5px;
background-color: #bbb;
}
.panel.visible {
display: block;
}
<button onclick="clickBtn()">click me</button>
<div>
<div id="panel-1" class="panel"></div>
<div id="panel-2" class="panel"></div>
<div id="panel-3" class="panel"></div>
<div id="panel-4" class="panel"></div>
</div>
You could use counter like clickCount instead of for loop
$(document).ready(function(){
// jQuery methods go here...
var clickCount = 1;
$("button").click(function(){
var myClass = ".panel" + clickCount;
$(myClass).addClass("showing animated fadeIn")
clickCount++;
});
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
You've got this a little bit backwards; you're trying to attach an event handler to the button for each element. Instead, you should have one event handler for the button, which cycles through the elements.
You could set a variable to keep track of which element is currently highlit, but it's easier to just determine that based on the current state of the DOM:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.removeClass('showing') // clear it
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
There's a small cheat in the above -- if the current element is the last one, then it won't have a next() to highlight. That's why I waited to check for the case where there's nothing visible until after moving the highlight; that way it will work for both the first click, and for when you need the highlight to loop back around to the first element.
If you intended to have the elements reveal themselves in sequence and not hide earlier ones, just get rid of the .removeClass('showing') line:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
What you can do is count the amount of children that you have, and compare the amount of clicks through a given iterator you have to see what should be shown.
I added an extra functionality that hides the elements again once the max amount of divs has been shown.
Hope this helps.
$(document).ready(function() {
$('#page1').children().each(function () {
$(this).hide();
});
});
var panel="panel";
var pannelNum=0;
var count = $("#page1").children().length;
$(".one").on( "click", function() {
pannelNum=pannelNum+1;
if(pannelNum > count) {
$('#page1').children().each(function () {
$(this).hide();
});
pannelNum=0;
}
else {
clicked=panel+""+pannelNum;
$('.'+clicked).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
this is panel 1!
</div>
<div class="panel2">
this is panel 2!
</div>
<div class="panel3">
this is panel 3!
</div>
<div class="panel4">
this is panel 4!
</div>
</div><!-- page one -->
<div id="trial">
</div>

Drag and drop for fill in the blanks using JQuery UI

Below is my scenario explanation in screenshot,
From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.
If I drag another option in already defined place its overlapping for example
What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue.
Below is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>
Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container
HTML :
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
}
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
I think this is what you want
https://jsfiddle.net/4bL4tfrt/

Find a class using js and localStorage

I'm trying to convert a value stored by localStorage and then turn it into a class so I can manipulate it in the DOM.
I'm very new to javascript, so please allow me to explain:
I have a html file with multiple divs, and localStorage stores the class of the div that was last clicked.
I want my script to call the stored class from localStorage, find the div with that class (using jquery OR js, doesn't matter) and then change the background colour of that div using .css(), for example. I'll be able to do what I need to do with that logic, but I can't get it to work.
So what I am trying to do is $('the last clicked div').css({..manipulate the css..});
Is this possible?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//show the div that was last clicked
function currentStatus(){
if (localStorage.getItem("currentDiv") === $(currentClass))
{
$(currentClass).show();
$("b").html(localStorage.getItem("currentDiv"));
}
}
//set a color for the recently clicked div dynamically, not by .click
var highlightClass = localStorage.getItem("currentDiv");
highlightClass.css({
'background' : 'black'
})
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body onLoad="currentStatus()">
<div class="slide1">
<h1>"A question would go here."</h1>
</div>
<div class="slide2">
<h1>"A question would go here."</h1>
</div>
<div class="slide3">
<h1>"A question would go here."</h1>
</div>
<div class="slide4">
<h1>"A question would go here."</h1>
</div>
<div class="slide5">
<h1>"A question would go here."</h1>
</div>
<div class="slide6">
<h1>"A question would go here."</h1>
</div>
<div class="slide7">
<h1>"A question would go here."</h1>
</div>
<b></b>
</body>
</html>
Here's how to make it work, the core thing being: $("."+currentDivClass) which converts the string to a class!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body>
<div class="slide1">
<h1>"1 A question would go here."</h1>
</div>
<div class="slide2">
<h1>"2 A question would go here."</h1>
</div>
<div class="slide3">
<h1>"3 A question would go here."</h1>
</div>
<div class="slide4">
<h1>"4 A question would go here."</h1>
</div>
<div class="slide5">
<h1>"5 A question would go here."</h1>
</div>
<div class="slide6">
<h1>"6 A question would go here."</h1>
</div>
<div class="slide7">
<h1>"7 A question would go here."</h1>
</div>
<b></b>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//convert the string of the last clicked div into a class and then work your magic
var currentDivClass = localStorage.getItem("currentDiv");
$("."+currentDivClass).css({
'background' : 'red'
});
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
</body>
</html>

Categories

Resources