I have a list like this:
<div class="list"></div>
<div class="list"></div>
<div class="list on"></div>
<div class="list"></div>
... etc
I get the total like this:
var count = $('.list').length; // 4 in this case
But I want to write a function that selects the next div with the down arrow, and I can't figure out how to get the next div, select it, and deselect the current div. This is what I have now, but it doesn't work:
var visible = $('.list:visible');
var on = $('.list.on:visible');
if (e.keyCode == 40) { // down key
if(on.length == 0) {
visible.first().addClass("on"); // this works
}
else if( // div placement // < count) {
var next = on.next(); // this part doesn't work
on.removeClass("on"); // :(
next.addClass("on"); // :(
}
else { // if its the last div
// do nothing
}
}
You can do:
if (e.keyCode == 40) { // down key
if(on.length == 0) {
visible.first().addClass("on");
}
else if(on.length && on.next("div.list").length > 0) {
var next = on.next("div.list");
on.removeClass("on");
next.addClass("on");
}
else { // if its the last div
// do nothing
}
}
A quick demo: http://jsfiddle.net/GL7tA/
You can work with .index() to see which item is currently "selected":
var $items = $('.list:visible'),
$selectedItem = $items.filter('.on'),
selectedIndex = $items.index($selectedItem);
if (selectedIndex == -1) {
$items.eq(0).addClass('on');
} else if (selectedIndex + 1 < $items.length) {
$selectedItem.next().andSelf().toggleClass('on');
}
You have a syntax error in the else if ( part, where you say it doesn't work.
It doesn't work because the else if is expecting a condition to evaluate but you are not even closing the parenthesis of that if condition, neither have you openned the brackets for its block.
Related
I am trying to create 'previous' and 'next' buttons that cycle through different locations on an embedded Google Maps image, but have the 'previous' button hidden at the first location, and have the 'next' button disappear once the last location shows.
I know adding a CSS class called 'hidden' would do the trick, however I'm not sure where to place it, and how to place it.
Here is my HTML code. The iframe element is the google maps, and I gave it an id of 'mappy', to select it easier in JavaScript. Below the map are the two buttons.
Here is my JavaScript code. Currently, the next and previous buttons just cycle through each location.
var main_map = document.getElementById('mappy');
var maps = [
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'
];
var i = 0; // Current Image Index
var a;
function prev() {
if (i <= 0) i = maps.length;
i--;
return setImg();
}
function next() {
if (i >= maps.length - 1) i = -1;
i++;
return setImg();
}
function setImg() {
return main_map.setAttribute('src', maps[i]);
}
<p><iframe id="mappy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
<div class="buttons">
<button class="button" id="prev" onclick="prev()">← Previous</button>
<button class="button" id="next" onclick="next()">Next →</button>
</div>
You can check the index, if it is 0 make the previous button hide, and if the index of is 4 you make the next button hide. You can use toggleclass to hide the buttons
if (i = 0) { //if index is 0, toggle class hide
classList.toggle("hide");
else {
classList.toggle(“show”); //if the index is not 0, toggle class show
}
}
if (i = 4) { //if index is 4, toggle class hide
classList.toggle("hide");
else {
classList.toggle(“show”); //if the index is not 4, toggle class show
}
}
Edit: added a nested else statement to toggle class show if the index isn’t 0 or 4.
There are definitely better ways to do this, but this is probably the least convoluted method so you can see how it's done and probably rewrite it better!
var main_map = document.getElementById('mappy');
var previousBtn = document.getElementById('btn-prev');
var nextBtn = document.getElementById('btn-next')
var maps = [
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'];
var i = 0; // Current Image Index
var a;
function prev() {
if (i <= 0) i = maps.length;
i--;
viewButtons(i);
return setImg();
}
function next() {
if (i >= maps.length - 1) i = -1;
i++;
viewButtons(i);
return setImg();
}
function viewPrevious(index) {
if (index === 0) {
previousBtn.classList.add('hidden');
} else {
previousBtn.classList.remove('hidden');
}
}
function viewNext(index) {
if (index === maps.length - 1) {
nextBtn.classList.add('hidden');
} else {
nextBtn.classList.remove('hidden');
}
}
function viewButtons(index) {
viewPrevious(index);
viewNext(index);
}
function setImg() {
return main_map.setAttribute('src', maps[i]);
}
previousBtn.addEventListener('click', prev);
nextBtn.addEventListener('click', next);
viewButtons(i);
I have this html:
<table>
<tr>
<td>
Set right order
</td>
<td>
<span style = "display: block;">asd | ↑↓</span>
<span style = "display: block;">dsa | ↑↓</span>
<span style = "display: block;">qwe | ↑↓</span>
<span style = "display: block;">ewq | ↑↓</span>
</td>
</tr>
</table>
And this JS:
function moveChoiceTo(elem_choice, direction)
{
var curr_index = -1; //index of elem that we should move
var td = elem_choice.parentElement.parentElement; //link to TD
for (var i = 0; i < td.children.length; i++) //determine index of elem that called this function
if (td.children[i].children[0] == elem_choice)
{
curr_index = i;
break;
}
if (curr_index == -1)
return;
if (curr_index == 0 && direction < 0) //if nowhere to move
return;
if (curr_index == td.children.length - 1 && direction > 0) //if nowhere to move
return;
var curr_child = td.children[curr_index]; //save current elem into temp var
td.children.splice(curr_index, 1); //here I getting exception that splice isn't supported by object, but arent this is array?
td.children.splice(curr_index + direction, 0, curr_child); //attempt to insert it
}
I getting exception that splice isn't supported, but this supposed to be an array and support this method?
What other ways I have to change children order?
I will add the answer with simpler (and better) approach:
function moveChoiceTo(elem_choice, direction) {
var span = elem_choice.parentNode,
td = span.parentNode;
if (direction === -1 && span.previousElementSibling) {
td.insertBefore(span, span.previousElementSibling);
} else if (direction === 1 && span.nextElementSibling) {
td.insertBefore(span, span.nextElementSibling.nextElementSibling)
}
}
The key idea is using insertBefore method properly. You also don't need to remove anything from DOM.
Demo: http://jsfiddle.net/dq8a0ttt/
Splice is not supproted in HTMLCollection, you need to use .removeChild and .insertBefore something like this:
var before = td.children[curr_index + direction];
var child = td.children[curr_index];
td.removeChild(child);
td.insertBefore(child, before); //attempt to insert it
Same as dfsq's answer but with some modifications.
var selected_element;
function moveElementTo(selected_element, direction) {
var element_to_move = selected_element,
td = element_to_move.parentNode;
if (direction === -1 && element_to_move.previousElementSibling) {
td.insertBefore(element_to_move, element_to_move.previousElementSibling);
} else if (direction === 1 && element_to_move.nextElementSibling) {
td.insertBefore(element_to_move, element_to_move.nextElementSibling.nextElementSibling)
}
}
function move(dir){
if (selected_element != undefined){
moveElementTo(selected_element,dir);
}else{
console.error("No element Selected to move!");
}
}
<div >
<div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element One <button onclick='move(-1);'>Move_up</button></div>
<div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element Two <button onclick='move(-1);'>Move_up</button></div>
<div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element Three <button onclick='move(-1);'>Move_up</button></div>
</div>
My scenario for this was An element needs to be selected first, because I use it for a popup dialogue for which the operations show up upon long click, the Select Element button is just for demo.
I've been making a webpage and I have one feature (making fixed divs scrollable) that requires some javascript, I've found a way to make it work with jquery but can't get it to work without it. Any help would be appreciated. Here's the code:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
// A globar variable to save to last element that the following class was applied to
var Last;
// This adds the class "ttth" so that tt the class "tt" will be displayed.
$(".tttw").live('touchstart', function() {
if (Last) Last.removeClass('ttth');
$(this).addClass("ttth");
Last=$(this);
});
// Test if we have a touchdevice.
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
// This function makes a fixed div on touch devices scrollable.
function touchScroll(selector) {
if (isTouchDevice()) {
var scrollStartPosY=0;
var scrollStartPosX=0;
$('body').delegate(selector, 'touchstart', function(e) {
scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
});
$('body').delegate(selector, 'touchmove', function(e) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
e.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
e.preventDefault();
this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
});
}
}
// Touch is being initialised.
$(document).ready(function(){
touchScroll('.tt');
});
</script>
This code is already working but to reduce the loading time I want to get rid of jQuery. How to do that? For example - how can I select all classes "tttw" and add an eventlistener?
Any help, rough direction, etc. would be great!
Okay - found the answer myself. I did it like this:
function touchScrolli(selector) {
if (isTouchDevice()) {
var scrollStartPosY=0;
var scrollStartPosX=0;
var list = document.querySelectorAll(selector);
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('touchstart', function (e) {
scrollStartPosY=this.scrollTop+e.touches[0].pageY;
scrollStartPosX=this.scrollLeft+e.touches[0].pageX;
e.preventDefault();
}, false);
list[i].addEventListener('touchmove', function (e) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
vthis.scrollTop+e.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+e.touches[0].pageY > scrollStartPosY+5))
e.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+e.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+e.touches[0].pageX > scrollStartPosX+5))
e.preventDefault();
this.scrollTop=scrollStartPosY-e.touches[0].pageY;
this.scrollLeft=scrollStartPosX-e.touches[0].pageX;
});
}
}
}
Just needed to know how to select all classes without jQuery.
I have created a javascript filter that is working but not all the time. To first see this in action, visit the following link. On the left side, click on the Bridgestone e6 link under "Brand Model". It returns nothing, but in reality it should return 3 products in the view.
The way the filter works is as follows. I grab the value of the item clicked on the sidebar, then I search the html elements in the main view to see if there are any matches. If there are, I only show those products in the view and hide the rest.
The javascript that takes care of this is (also you can see it here):
Is it some whitespace issue or something incorrect in my JS? I tried to use the jQuery trim function to no avail.
The javascript:
var noProductMatches = jQuery('.no-products-found');
jQuery('#filter-by-brand li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery(this).html();
var productVendorFromCollection = jQuery("#product-vendor");
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'All Brands' )
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery(this).html().indexOf(brandNameSelected) > -1 || jQuery(this).html().indexOf(productVendorFromCollection) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-model li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery.trim(jQuery(this).html());
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'Any Model' )
{
productContainer.fadeIn("slow");
}
else
{
var results = productContainer
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery.trim(jQuery(this).html()).indexOf(brandNameSelected) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-price li a').click(function()
{
noProductMatches.hide();
var priceRangeSelectedItem = jQuery(this).html();
var minSelectedPrice = parseInt( jQuery(this).attr("name") );
var maxSelectedPrice = parseInt( jQuery(this).attr("title") );
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (priceRangeSelectedItem == 'Any Price')
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
var minProductPrice = parseInt( jQuery(this).find("#lowestPriceRange").html() );
var maxProductPrice = parseInt( jQuery(this).find("#highestPriceRange").html() );
//alert(minProductPrice);
//alert(maxProductPrice);
return (minProductPrice >= minSelectedPrice && maxProductPrice <= maxSelectedPrice);
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
The problem is that it is mixed case. In the menu it says Bridgestone e6 but on the page it says Bridgestone E6, with an uppercase E. Either you have to make everything lowercase when you search our make sure they are equal in the menu and on the page.
A list of paragraphs (<p>) is given. As soon as the user clicks on paragraph A the class of paragraph A changes to "activated". Now the user selects paragraph B and all the paragraphs between A and B change their class to "activated".
By clicking on B again, only A remains with the class "active".
By clicking on A the class "active" gets removed on all paragraphs between A and B (including A and B).
It shouldn't be possible to "deactivate" any paragraph between A and B. The selection between A and B should always be a uninterrupted list of selected paragraphs.
Can anyone give me a hint on how to realize this with Prototype/Scriptaculous? The application is implemented in Rails, so any hint in RJS would even be more appreciated!
Assuming your paragraphs are in a wrapper div called 'info': (I haven't tested it, but it would be something like this)
$('info').select('P').each(function(element) {
Event.observe(element,'click',function(event){
flipIt(event)
})
})
function flipIt(evt) {
var element = evt.element();
if($(element).hasClassName('active')) {
$(element).removeClassName('active')
}
else {
$(element).addClassName('active')
}
}
Try this
<!DOCTYPE HTMP PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<style type="text/css">
.active {
background-color: maroon;
}
</style>
<div id="info">
<p>
1 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br/>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
2 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
3 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
4 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
</div>
<%javascript_tag :defer => 'defer' do -%>
$('info').select('P').each(function(element) {
Event.observe(element,'click',function(event){
flipIt(event)
})
})
function flipIt(evt) {
var element = evt.element();
var all = $('info').select('P');
var first = -1;
var last = -1;
var clicked = 0;
for ( i=0;i<all.size();i++ ) {
if( all[i].hasClassName('active') && first == -1 )
first = i;
if( all[i].hasClassName('active') && first != i )
last = i;
if ( all[i] == element){
clicked = i;
}
}
if ( first == clicked && last == -1 ){
all[clicked].removeClassName('active');
return;
}
if ( first == -1 && last == -1 ) {
all[clicked].addClassName('active');
return;
}
if ( last < clicked && first != -1 ){
for (i=first;i<=clicked;i++)
all[i].addClassName('active');
return;
}
if (last == clicked && first != -1 ) {
for (i=first+1;i<=clicked;i++)
all[i].removeClassName('active');
return; }
}
<%end%>
</body>
</html>
I've tested the code below and it does what you want, although it's a bit convoluted. The key to it is holding the paragraphs in an array, which is achieved using Prototype's $$ function.
<style type="text/css">
.activated {
background-color: yellow;
}
</style>
.
.
.
<div id="container">
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>
</div>
<script type="text/javascript">
Event.observe(document, "dom:loaded", function() {
var paragraphs = $$("#container p");
paragraphs.each(function(paragraph, index) {
paragraph.observe("click", function(event) {
// A clicked; toggle activated class on A
if (index == 0) {
toggleStyle(paragraphs[0]);
// A clicked; remove activated class from A + 1 through to B
// if present
for (var i = 1; i <= paragraphs.length; i++) {
if (paragraphs[i] && paragraphs[i].hasClassName("activated")) {
paragraphs[i].removeClassName("activated");
}
}
}
// A + 1 clicked; toggle activated class on A + 1
if (index > 0 && paragraphs[0].hasClassName("activated")) {
for (var i = 1; i <= index; i++) {
toggleStyle(paragraphs[i]);
}
}
});
});
});
function toggleStyle(paragraph) {
if (paragraph.hasClassName("activated")) {
paragraph.removeClassName("activated");
} else {
paragraph.addClassName("activated");
}
}
</script>
OK, in the meantime and with the help of a coworker I came up with an own answer to this problem:
<script type="text/javascript">
// holds paragraph A (first selected paragraph)
var a_selected = null;
// holds paragraph B (second selected paragraph)
var b_selected = null;
// holds all 'active' paragraphs
var selected_paras = [];
function class_flipper_init() {
// reset paragraphs A and B
a_selected = null;
b_selected = null;
var paragraphs = $$("#foobar p");
paragraphs.each(function(paragraph, index) {
// if user clicks on a paragraph
paragraph.observe("click", function(event) {
// if A and B are 'active': reset everything.
if(b_selected != null) {
selected_paras.each(function(i) {
toggleStyle(i);
})
a_selected = null
b_selected = null
return
}
// if A is 'active'
if(a_selected != null) {
// if A is 'active' and selected B is below A:
// select all paragraphs between A and B
if(a_selected < index) {
b_selected = index;
for (var i = a_selected + 1; i <= index; i++ ) {
toggleStyle(paragraphs[i])
}
}
// if A is 'active' and selected B is above A:
// select all paragraphs between A and B
else if(a_selected > index) {
b_selected = index;
for (var i = a_selected - 1; i >= index; i-- ) {
toggleStyle(paragraphs[i])
}
}
// if A == B
else {
toggleStyle(paragraph)
a_selected = null
}
}
// if A is selected
else {
a_selected = index;
toggleStyle(paragraph)
}
});
});
}
function toggleStyle(paragraph) {
// remove active class
if (paragraph.hasClassName("active")) {
paragraph.removeClassName("active");
selected_paras = selected_paras.without(paragraph)
}
// set active class
else {
paragraph.addClassName("active");
selected_paras.push(paragraph)
}
}
</script>
class_flipper_init() is called everytime the page (or in my case a certain partial) is loaded.
Please don't hesitate to submit a solution written in "pure" RJS or something more elegant. :-)