I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jeopardy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customStyles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flip.js"></script>
</head>
<body>
<div class ="container">
<div class="row">
<div class="prizeAmount">
<div class="span2">
<h3 id="test">100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
</div>
</div>
</div><!--close container-->
</body>
</html>
javascript
$(function() {
$('#span2').click(function() {
$(this).hide(400);
/*$('#span2').hide(400); <--tried this also */
});
});
I've used jquery to animate navigation on a site before. Am i missing something obvious?
Your
$('#span2') // id selector
Should be
$('.span2') // class selector
Since it's a class
Your problem is that you are using the hash # which is the id selector instead of the class selector which is a dot ..
Try
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
You might want to read up more on the different jQuery Selectors on the official documentation
You dont have any elements with ID "span2", they are all CLASS=span2.
Try this:
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
Note: this will effect ALL elements with the class "span2" if you don't want that behavior, then use ID="span2" for a single element, and use unique names for each.
Related
My goal is to build a dynamic FAQ page where the questions are visible, and when you click on the said question the div with the answer would appear. Once you click the div again it would toggle again.
I've tried a few things and the best result I've accomplished was toggling the first question's answer regardless of what question was clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="#{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="#{img/artboard-copy-3-unnamed-3#2x.png}" class="arrow"/>
<img th:src="#{img/artboard-copy-3-unnamed-13#2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>
That is my current code and it does absolutely nothing. Here are a few attempts I took
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}
Is this even possible?
find() will find children inside the element you provide (so in this case you put this in it so .questions) but your .dropdown-answer is not a child of that element.
you can write it like this
$(this " + .dropdown-answer").toggle();
Or place the element inside the .questions element and get it like this
$(this).find(".dropdown-answer").toggle();
we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
I'm trying to make my own class with panels that open and close content using Bootstrap and jQuery (not an accordion, I want multiple open at a time). However, the click event isn't working for me and I have no idea why... I tried the "*" selector and the alert was working but it's not working when I try to associate it with specific elements.
Practice2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practice 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../static/css/prism.css">
<link rel="stylesheet" href="../static/css/styles.css">
<script src="../static/js/prism.js"></script>
<script src="../static/js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default panel-toggle" id="demo">
<div class="panel-heading">solution</div>
<div class="panel-body">
<code class="language-python">
def solution(self):
func = self.functionGenerator()
length = self.endTime - self.initialTime
timesConcerned = [self.initialTime+x/1000. for x in range(length*1000)]
return odeint(func,self.initialValues,timesConcerned)
</code><br>
Explanation
</div>
</div>
</div>
</body>
</html>
script.js
// $(".panel-toggle:panel-header").click(function(){
// // $(this).next().toggle();
// alert("hello");
// });
$("#demo").click(function(){
alert("hello");
});
styles.css
.panel-toggle .panel-heading:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-toggle .collapsed:after {
content:"\e080";
}
.panel-toggle .panel-body {
}
Clearly the rest of the code needs some adjustment but I'm just troubleshooting this part right now and would appreciate some advice on what I'm missing. Thanks!
With
HTML
<div class="panel panel-default panel-toggle">
<div class="panel-heading">solution</div>
<div class="panel-body">
<code class="language-python">
def solution(self):
func = self.functionGenerator()
length = self.endTime - self.initialTime
timesConcerned = [self.initialTime+x/1000. for x in range(length*1000)]
return odeint(func,self.initialValues,timesConcerned)
</code>
Explanation
</div>
</div>
JS
$(document).ready(function(){
$(".panel-heading").click(function(){
$(this).next().toggle("slow");
});
});
works
JSFiddle demo
You should put your jQuery code in document.ready block ensure your code working after those element been generated.
Script.js should be changed like this.
$(document).ready(function(){
$("#demo").click(function(){
alert("hello");
});
});
I have used this method to make a slider popping up when clicking on a button:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I have made my own button for it + some other changes. However — i have struggled for 2 days now, trying to figure out how to be able to move my button out of the div it was in the original script.
Because; when i move it out of the original div, tat looks like this:
<div id="slidebottom" class="slide">
It simply stops working.
At first i thought it had something to do with the fact that the ID that started the slider animation, was defined as '(this')
So i ran a 'test' to figure out the ID that 'this' was and replaced it with that.
But still; nothing happens when i move it into another div.
I can move it out of all divs just below the 'body' tag — and there it will work as well.
Here is the html-part
<div id="slidebottom" class="slide">
<img src="xxx.jpg">
</div>
And here is the javascript:
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
I am a rookie when it comes to javascript, so please forgive me if this is dumb question.
Just to sum up; i just want to be able to move my button somewhere else than this one particular div.
I hope I get it in total, so...
Your slider is based on next(), which means: starting at $("#hotels"), the function is binding the sliding functionality to the element directly after $("#hotels") - literally the next element, and ONLY the next element.
If the element you want to toggle is moved to another position in your HTML, the function will stop working, because it strictly refers to a position in the HTML, not to a designated element (like it would be done by a query selector).
Maybe you could post your whole HTML?
And thank you for answering.
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--*********** Aktivere CSS3 selectors i IE 7 & 8 ***********
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<![endif]-->
<title></title>
<!--*********** CSS ***********-->
<link href="../../css/dev_brokop_em.css" rel="stylesheet" type="text/css"/>
<!--
<link href="../../css/mediumstyles.css" media="only screen and (min-width: 768px)" rel="stylesheet" type="text/css"/>
<link href="../../css/smallstyles.css" media="only screen and (min-width: 610px)" rel="stylesheet" type="text/css"/>
-->
<link href="../../css/jquery.fullPage.css" rel="stylesheet" type="text/css"/>
<!--*********** JS ***********-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.fullPage.js"></script>
<!--*********** Aktivere Media Queries i IE 7 & 8 ***********-->
<script src="../../js/respond.min.js"></script>
</head>
<body id="em">
<div id="fullpage">
<div class="section" id="bg">
<!--************ Bottom Logos ************-->
<div id="circlesbottom">
<img src="../../img/experience_meetings/em_circles.png" border="0">
</div>
<div id="logobottom">
<img src="../../img/experience_meetings/em_logo.jpg" border="0" width="100" height="100">
</div>
<img id="pic" class="portrait" src="../../img/experience_meetings/hotels_off.png" border="0" width="100" height="100">
<div id="content">
<div id="movie_button">
<img src="../../img/experience_meetings/em_button_movie.png" width="90" height="90" border="0">
</div>
<div id="content_inside">
<h1>EXPERIENCE MEETINGS</h1><br>
<h2>Daectisquia volum velent audam dit qui adipiet pra posaepe liaspidebite veliqui vendit plia nus con nectur?Aqui berum que ommolenis quiasperum eturepe sunt alit exped quassunt prestem quam aut reiunt quae volupitatet omnient ma exerisq uundam fuga. Nem. Itatecatur, officiu reicietur?</h2>
</div>
</div>
<!--************* Slidebottom ************-->
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--************** Turn Hotel button on and off ************-->
<script type="text/javascript">
var newsrc = "hotels_on.jpg";
function changeImage() {
if ( newsrc == "hotels_on.jpg" ) {
document.images["pic"].src = "../../img/experience_meetings/hotels_on.png";
document.images["pic"].alt = "hotels_on";
newsrc = "hotels_off.jpg";
}
else {
document.images["pic"].src = "../../img/experience_meetings/hotels_off.png";
document.images["pic"].alt = "hotels_off";
newsrc = "hotels_on.jpg";
}
}
</script>
<!--************* Bottom slider ****************** -->
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
<!--*********** fullpage.js ***********-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</body>
</html>
I managed to work it out with the help of your logic. Here is the code i ended up with.
Thank you all for great help! :)
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#inner').slideToggle();
});
});
</script>
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});