The following code allows the user to click on the question of a flashcard and it displays the answer.
The problem is it displays all the answers for all the flashcards.
How can I pass the id of each flashcard so that the user can click on the title and toggle the question open and closed?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div > div.answer").hide();
$("div > div.question").click(function() {
$("div > div.answer").fadeIn("slow");
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
}
</style>
</head>
<body>
<div id="1" class="flashcard">
<div class="question">Who was Wagner?</div>
<div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
</div>
<div id="2" class="flashcard">
<div class="question">Who was Thalberg?</div>
<div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
</div>
</body>
</html>
You don't need to pass in the ID. Just traverse from the div clicked to the answer you want. this refers to the source of the event, which will in this case be a div with class "question".
$("div.question").click(function() {
$(this).next().fadeIn("slow");
});
Also, assuming your markup is accurate this can be simplified:
$("div > div.answer").hide();
to simply
$("div.answer").hide();
but I would actually do it with CSS:
div.answer { display: none; }
so no Javascript needs to be executed when the page loads. In my experience when using an async load of jQuery with the Google AJAX Libraries API like you are, the page will render and then your flashcard answers will visibly disappear. This tends to be undesirable. Just use CSS to hide them.
Also, jQuery is as of a day or two ago up to version 1.4.1.
Since the two divs are siblings, you can use the next method to get the next div.answer element:
$("div > div.question").click(function() {
$(this).next("div.answer").fadeIn("slow");
});
Check an example here.
When you are inside the event, you need to reference the this keyword, so that you are in the proper context. Otherwise, you are selecting globally, rather than specifically.
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div.flashcard div.answer").hide();
$("div.flashcard div.question").click(function() {
$(this).next('div.answer').fadeIn("slow");
});
});
This should be code you are looking for. I tested and it is working.
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div > div.answer").hide();
$("div > div.question").click(function() {
if($(this).siblings('.answer').css('display') == 'none')
$(this).siblings('.answer').fadeIn("slow");
else
$(this).siblings('.answer').fadeOut("slow");
});
});
</script>
Related
const findClosestParent = (startElement, fn) => {
const parent = startElement.parentElement;
if (!parent) return undefined;
return fn(parent) ? parent : findClosestParent(parent, fn);
};
$document.on('click', event => {
let target = event.target;
if (findClosestParent(target, parent => parent.classList.contains('.calendar')) {
// do some things
}
});
I'm trying to find if an element is within another element. I can't do that with closest in Internet Explorer 11. So I went the route of creating a recursive searching up the DOM tree function. However, I also cannot simply grab the parent element of the targeted event element in Internet Explorer 11 in an angular js controller using jQuery's event.target property. This does snippet not work because startElement.parentElement in findClosestParent is always null no matter what I click. Also, startElement.parentNode is null. event.currentTarget.parentNode is null. I have tried so many things. Nothing works. Another thing I tried, I cannot simply add an id to the divs I am trying to select and use a pure vanilla js getElementById query selector because these elements are abstracted away in a 3rd party library. I would very much so like to be able to use event target or something similar to get me the dang element in IE11.
I think it boils down to the fact that, according to https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement, for IE, parentElement is "Only supported on Element". Thats what it says... what that means is that I think internet explorer doesn't think event.target is an "Element".
Here is a simple solution using angularjs and jQuery Core.
Try clicking somewhere inside and outside the element with the calendar class.
(function () {
'use strict';
angular.module('app', []);
angular.
module('app')
.controller('myController', ['$scope', function ($scope) {
$(document).on('click', function ($event) {
var nativeElement = $event.target;
if ($(nativeElement).closest('.calendar').length) {
console.log('Inside a calendar');
}
else {
console.log('Outside a calendar');
}
});
}])
})();
.calendar {
margin: 20px;
padding: 20px;
border: 2px solid blue;
}
.widget {
margin: 20px;
padding: 20px;
border: 2px solid green;
}
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="module.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="myController">
<div class="calendar">
<div class="ancestor-2">
<div class="ancestor-1">
Calendar
</div>
</div>
</div>
<div class="widget">
<div class="ancestor-2">
<div class="ancestor-1">
Not a calendar
</div>
</div>
</div>
</body>
</html>
JSFiddle demo
I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
I'm trying to load some links from a text file into a navigation menu using the jQuery AJAX load() method. It's working fine when it loads the links but it won't let me apply an active class for the current link. It applies all the other CSS for the links but not the active class. Am I missing anything?
My HTML/jQuery:
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$('#cat-1-button').click(function(){
$('#sec-nav-container').show();
$('#sec-nav-items').load('textfile.txt #cat-1-items');
return false;
});
$('.subCat').click(function() {
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
});
});
</head>
<body>
<div id="sec-nav-container>
<div id="sec-nav-items> </div>
</div>
<button type="button" id="cat-1-button"> Click Here </button>
</body>
</html>
Textfile:
<div id="cat-1-items">
cat1-sub1
cat1-sub2
cat1-sub3
cat1-sub4
cat1-sub5
cat1-sub6
cat1-sub7
</div>
CSS:
.active {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
You may need to add rule for pseudo-element :visited
.active,.active:visited {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
DEMO
__
Check also your html , for example, you have here some issues :
<div id="sec-nav-container"> instead of <div id="sec-nav-container>
<div id="sec-nav-items"> instead of <div id="sec-nav-items>
try this replace instead $('.subCat').click(function()...
$('#sec-nav-items').on( 'click', 'a.subCat', function(){
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
})
I am trying to create a toggling highlight effect using addClass and removeClass.
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
The addClass is working properly, but removeClass does not. I know there is a toggleClass method but I am just wondering what is wrong with this code.
You're removing the class, then adding it back with no delay, before the UI can be redrawn. You need to do one or the other, which suggests an else:
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight')
} else {
$(this).addClass('box-highlight')
}
The problem with your code is that it runs very quickly, and you won't see the effect :).
To make such effect, you can use a timer or delay. For example, you can do like this:
$("#box").addClass("box-highlight")
.delay(300).queue(function(next){
$(this).removeClass("box-highlight");
next();
});
Try this................
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}else{
$(this).addClass('box-highlight');
}
});
});
Check the bottom for revised edition
Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view.
Here's the HTML:
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
Right now I have this in my CSS:
#one div { display: none; }
And this for my JS:
$(document).ready(function() {
$('#one').hover(function() {
$('#one > div').css({ display : 'block' });
});
});
I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.
Thanks guys/gals
revised
New JavaScript
$(document).ready(function() {
$('#one').hover(function () {
$('#one > div').slideToggle();
});
});
This works! Although it comes down from the top, and I planned on having it come up from the bottom.
Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .animate().
CSS:
#one {
overflow: hidden;
position: relative;
border: 1px solid gray;
height: 40px;
}
#one div {
position: absolute;
bottom: -100%;
}
jQuery:
$('#one').hover(
function() {
$(this).find('div').animate({
bottom: '0%'
}, 'fast' );
},function() {
$(this).find('div').animate({
bottom: '-100%'
},'fast');
}
);
jsFiddle: http://jsfiddle.net/blineberry/mrzqK/
what about using jQuery slideUp or fadeIn?
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideUp/
This code works for me.
$(document).ready(function () {
$('#one').hover(function () {
$('#one > div').slideDown();
});
});
Needs a bit of tweeking to make it look nice but it does slide down.
edit
Here is a site describing how to use animate to do what you want.
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
you may do something like this
$(div).show("slide", { direction: "down" }, 1000)
or even the animate property may solve your problems
more here
http://docs.jquery.com/UI/Effects/Slide
api.jquery.com/animate/
firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)
secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?
I added a bg color for demo purposes.
hears a little demo:
http://jsfiddle.net/R9A3G/
If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style>#one div { display: none; }</style>
<head>
<title></title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$("#one").find("div").slideDown("slow");
});
$('#one').mouseout(function() {
$("#one").find("div").slideUp("slow");
});
});
</script>
<body>
<div>
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
</div>
</body>
</html>
TRY THIS