I have a bunch of class="section" divs which I want to move with up/down buttons inside of them. The up button works alright, but the down button I have to press twice to get the div to move down a spot. Can't get my head around it. It's the same in Firefox as in Chrome.
What am I doing wrong?
The HTML:
<div class="section">
.
. //content goes here
.
<button class="up" type="button">up</button>
<button class="down" type="button">down</button>
</div>
The Javascript
//event listeners
var classup = document.getElementsByClassName("up");
var classdown = document.getElementsByClassName("down");
for (var i=0; i<classup.length; i++) {
classup[i].addEventListener('click', upf, false);
classdown[i].addEventListener('click', downf, false);
}
//functions
function downf() {
var temp = this.parentNode;
temp.parentNode.insertBefore(temp, temp.nextSibling.nextSibling);
}
function upf() {
var temp = this.parentNode;
temp.parentNode.insertBefore(temp, temp.previousElementSibling);
}
You've use .nextSibling instead of .nextElementSibling. This will move your section after the following whitespace text node when clicking down.
function downf() {
var section = this.parentNode;
if (section.nextElementSibling)
section.parentNode.insertBefore(section, section.nextElementSibling.nextElementSibling);
}
Related
I'm working on this website www.betamaths.eu
When a user had clicked inside one of the divs that have placeholder text and then click a button on the left, I would like the text from that button to append inside the div.
I have this code from another user which appends or prepends text ouside the div (not what I am looking for. You can test it with the lowercase alpha button in the menu on the left of the webpage listed above if you wish to get a better understanding.
<script type="text/javascript">
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('<div>Test'+No+'</div>');
No++
});
});
If I change the line
$('#answer_step1').append('<div>Test'+No+'</div>');
to
$('#answer_step1').append('Test'+No);
nothing happens. Any help is appreciated. If I can get one of these working, the rest will be easy.
You must have a syntatically error in your code, because I used your same code and was able to accomplish the append();
HTML:
<button id="alpha">
Click
</button>
<div id="answer_step1">
hi
</div>
Javascript:
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('Test' + No);
No++
});
});
https://jsfiddle.net/typtzr7z/
I have this code for smooth scrolling, it works great but only for one "clickme" id, how could i use this code for multiple tabs whit i++
<div class="navbar">
<button type="button" id="clickme1">Scroll to red section!</button>
<button type="button" id="clickme2">Scroll to blue section!</button>
</div>
<div class="second" id="second">Hello</div>
<div class="tab1" id="tab1">The start of the red section!</div>
<div class="tab2" id="tab2">The start of the blue section!</div>
and here is the pure javascript that i want to use, please do not recommend me jQuery and anchor navigation.
document.getElementById('clickme1').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab1'));
});
*******or more simplified, how can i make this code shorter:*******
document.getElementById('clickme1').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab1'));
});
document.getElementById('clickme2').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab2'));
});
here is JSFIDDLE
You can do something like following
// Get buttons
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
// Iterate over buttons and add handler
buttons[i].addEventListener('click', clickHandler, false);
}
// Handler function
function clickHandler(){
var counter = this.id.substring(7); // Substring id to get counter
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab'+counter));
}
Note : As you can have some other buttons on your page and do not want to add this handler to them, so, in place of tag name selector, I will suggest you to add a specific class to the button elements and then use class selector to get elements.
You should consider using proper anchor links with progressive enhancement for smooth scrolling. This would involve either changing the buttons to <a> tags or just wrapping them:
<div class="navbar">
<button type="button">Scroll to red section!</button>
<button type="button">Scroll to blue section!</button>
</div>
You can then use event delegation to trap clicks on any anchor link at the document level:
document.addEventListener('click', function (evt) {
var tgt = evt.target;
if (tgt.tagName === 'A' && tgt.getAttribute('href')[0] === '#') {
smoothScroll(document.getElementById(tgt.hash.slice(1)));
}
});
There are numerous benefits to this approach, including:
Ability to hotlink to a section by copy/pasting the URL
Graceful degrading when JavaScript is not present.
I have ten buttons. When one is clicked I want the corresponding div to fade in and when another button is clicked I want the div to fade out and the new div to fade in.
My method is not working correctly because my knowledge of JS is limited. I am currently running with something like this:
var active01 = false;
var active02 = false;
var active03 = false;
var active04 = false;
var active05 = false;
$("#button1").click(function () {
active02 = false;
active03 = false;
active04 = false;
active05 = false;
active01 = true;
});
if(active01){
//fadein;
} else{
//fadeout;
}
Is there a way to set all the active buttons to false without having to write everything out each time? Something like this....
var active01 = false;
var active02 = false;
var active03 = false;
var active04 = false;
var active05 = false;
var actives = active01, active02, active03, active04, active05;
$("#button1").click(function () {
actives = false;
active01 = true;
});
Optionally you could use data elements to help you out. For instance...
<input type="button" data-key="1">
<input type="button" data-key="2">
<div data-key="1"></div>
<div data-key="2"></div>
Given this setup you could have event handlers on the inputs. When on is clicked, fade all your divs. Then find the div that corresponds to your input with $('div').filter('[data-key="'+ $(this).data('key') +'"]') and then you can perform your fade in logic on it.
use an array
var active = [];
for(i = 0; i<10; i++){
active.push(false);
}
$("#button1").click(function () {
for(i = 0; i<active.length; i++){
active[i] = false;
}
active[1] = true;
});
I'd use it like this
$('.fade-target-container').on('click', function() {
var targetContainer = $(this).attr('data-target');
$('.fadeable-div').hide('fast');
$('#' + targetContainer).show('fast');
});
.fadeable-div {
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="fade-target-container" data-target="div1">My Button 01</button>
<button class="fade-target-container" data-target="div2">My Button 02</button>
<button class="fade-target-container" data-target="div3">My Button 03</button>
<button class="fade-target-container" data-target="div4">My Button 04</button>
<button class="fade-target-container" data-target="div5">My Button 05</button>
<div class="fadeable-div" id="div1">DIV1</div>
<div class="fadeable-div" id="div2">DIV2</div>
<div class="fadeable-div" id="div3">DIV3</div>
<div class="fadeable-div" id="div4">DIV4</div>
<div class="fadeable-div" id="div5">DIV5</div>
Hard to give an exact answer without seeing the HTML, but I can give it to you in pseudocode and we can go from there.
You don't need variables to do this . . . from what you've stated, you want all the divs to be hidden, unless their associated button is clicked, and then, only that one div should show. You can do this with jQuery selectors pretty easily.
$(".commonButtonClass").on("click", function() {
$(".commonDivClass").fadeOut();
$("...SELECTOR_TO_FIND_THE_ASSOCIATED_DIV...").fadeIn();
});
Each div would need to have the commonDivClass class assigned to them and the buttons need to have the commonButtonClass assigned to them. then, based on whatever relationship ties the buttons to their specific divs, you would need to create the correct selector to replace "...SELECTOR_TO_FIND_THE_ASSOCIATED_DIV...".
Using this, you don't need to track the states of the divs, just make sure that they are all hidden, before you show the one that is paired with the button that was clicked.
(P.S. - If you provide the actual HTML, I can give you a more exact answer, but, hopefully, you can figure it out from what I've posted.)
Objective
What method to use to make item 3 move to another container.
Then if click again return the item to previous position
this function should be apply to all items.
Jquery
$('#item3').click(function(){
// What method to use to make item_1 move to another container.
// Then if click again return the item to previous position
});
Check DEMO
HTML
<div id="start">
<div class="element">one</div>
<div class="element">two</div>
<div class="element">three</div>
</div>
<div id="target"></div>
jQuery
$('.element').click(function() {
var cont = $(this).parent().attr('id');
if (cont == 'start') {
var place = '#target';
} else {
var place = '#start';
}
$(place).append($(this));
});
you can use drag and drop plugin of jquery UI.
if you cont want use this then you can try this code by onClick finction....
.JS
function onclickIteam(iteamId){
var x = if('#iteamId').html();
if(if('#iteamId').parent().prop("id") == "my_inventory"){
//$('#iteamId').detach();
$('#server_inventory').append(x);
}else{
//$('#iteamId').detach();
$('#my_inventory').append(x);
}
`}`
HTML:
<div class="page">111111</div>
<div class="page">222222</div>
<div class="page">333333</div>
<div class="page">444444</div>
<div class="page">555555</div>
JavaScript:
var div = document.getElementsByClassName("page");
for (i = 0; i < div.length; i++) {
bt = document.createElement("button");
bt.innerHTML = "kill my followings";
div[i].appendChild(bt);
bt.onclick = function (i) {
return function () {
kill(div[i]);
}
}(i);
}
function kill(obj) {
// ...
}
See FIDDLE here.
I constructed some divs which class="page". I used JavaScript to add buttons to each div, and add onClick event to each of them.
I need to remove the divs after my current operating div. e.g, If user click button in No.3 div, No.4 and 5 should be removed.
How to realized it?
(if not necessary, the structure of original html is not allowed to change)
Thanks a lot!
This should be the simplest way to go:
function kill(obj) {
while (obj.nextSibling) {
obj.parentNode.removeChild(obj.nextSibling);
}
}
DEMO: http://jsfiddle.net/BtSKJ/3/