I have a container holding four divs. After I click on one div, the remaining three neeed to be appended to another div. How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
JQuery
$(document).ready(function(){
var yourCharacter;
var enemy1;
var enemy2;
var enemy3;
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
yourCharacter = $(this);
$('#your').append(yourCharacter);
enemy1 = $('.vader');
$('#enemies').append(enemy1);
})
});
I need to append the remaind charContainers that were not clicked to the enemies container div
This works for me. You may want to add a check for equality, since the chosen div will be initially appended to enemies, then moved:
$('.charContainer').on('click', function(){
$('.charContainer').each(function() {
$('#enemies').append($(this));
})
yourCharacter = $(this);
$('#your').append(yourCharacter);
})
Since "your character" has already been moved by the time the rest of the characters need to be moved, the selector '.characters>.charContainer' (all the "charContainer" children of "characters") will not select your character (since it's already moved) - just the remaining characters
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$('#enemies').append($(this));
});
})
Alternate version using arrow function:
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})
Or borrowing Tekebo's use of appendTo:
$('.charContainer').on('click', function() {
$(this).appendTo('#your');
$('.characters>.charContainer').appendTo('#enemies');
})
Note: the main advantage of using the children selector as opposed to the siblings of the clicked div or all divs of the 'charContainer' class is that it doesn't matter which order it's done in - the result will be the same. (However, moving the clicked div last will cause more work to be done)
You could simply use siblings(), like this:
$(document).ready(function(){
$(".charContainer").on("click",function(){
$(this).siblings().appendTo("#enemies");
$(this).appendTo("#your");
});
});
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();
I'm extremely new to ReactJS and am trying to use it to make a simple fitness web app. Currently, if I was to do this using JQuery, I would end up with a thousand lines in a single file, which isn't what I want, so I'm trying to get as much externalisation in as possible while keeping one html file. The premise is that when the user hits the page, the "Main" class will be rendered to the screen. When they press one of the video images, the DOM will unrender the main and replace it with the specific page linked to the video. As thing stand, I'm trying to create large classes full of html to render each time, and it's throwing a simple error that I don't understand enough to fix. Could you explain to me what I'm doing wrong.
Index.html
<!DOCTYPE html>
<html>
<head>
<title> Get Fit </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'>
<link href = "css/styles.css" rel = "stylesheet">
<script type = "text/javascript" src = "js/male.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
</body>
</html>
Male.js
var Main = React.createClass({
render: function() {
return (
<div class = "header">
<img class = "img-responsive" src = "assets/header.png" alt = "header" />
</div>
<div class = "content">
<div class = "genderSelection">
<h1 class = "title"> YOUR WORKOUT PLAN </h1>
<button id = "male"> Male </button>
<button id = "female"> Female </button>
</div>
<div class = "dayContainer">
<h2 class = "workoutDay"> Monday </h2>
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-1" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-2" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-3" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-4" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-5" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-6" />
</div>
</div>
<div class = "footer">
</div>
);
}
});
var MaleMonday1 = React.createClass({
render: function() {
return (
);
}
});
ReactDOM.render(
<Main />
);
Any links to helpful documentation is also much appreciated, the documentation I followed for this has seemed to lead me in to trouble so far.
Your current problem is two fold, first off standard HTML attributes aren't always used in React. For example, class is className, for is htmlFor. See here which attributes are supported.
Secondly, React needs to return a single DOM node which is why you're not seeing anything on screen and getting the error: Adjacent XJS elements must be wrapped in an enclosing tag.
If you wrap your entire HTML that you currently have in your render function within a div tag you'll have much more luck!
render: function() {
return (
<div>
<div className = "header">
</div>
<div className="content">
<div className= "genderSelection">
</div>
<div className = "dayContainer">
</div>
</div>
<div className="footer">
</div>
</div>
);
}
In addition to #limelights answer:
Thirdly, your <body> is empty. Try adding something like:
<body>
<div id="react-container"></div>
</body>
Fourth, your ReactDOM.render() needs a destination in the DOM to put your component. (documentation here) E.g:
ReactDOM.render(
<Main />,
document.getElementByID("react-container")
);
As for your question about general documentation, react's own tutorials (here) are a good place to start.
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;
});
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<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() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE