I need some help, theres a selection list and now you can scroll to next "shop" by clicking to the right. But cant get the left button to go to previous "shop". Theres a list of shops and you can scroll horizontal between each shop.
This is right button:
$(function() {
var scrollerwidth = 0;
var scroller = $("#scroller");
$("#scroller li").each(function() {
scrollerwidth += $(this).width() + 1;
});
$("#scroller").width(scrollerwidth);
$("#scroller li:first-child").attr('id', 'current');
var iscroll = new IScroll('#countylist', {
eventPassthrough: true,
scrollX: true,
scrollY: false
});
$("#scrollnext").click(function() {
current = document.getElementById("current");
current.id = "";
//var next = $("#current").next();
var next = current.nextSibling.nextSibling;
next.id = "current";
iscroll.scrollToElement(next);
});
}
)
HTML:
<div id="scrollnext" class="scrollnav next">
<span>ยป</span>
</div>
<div id="countylist">
<div id="scroller">
<ul>
<? foreach ($counties as $i => $c): ?>
<li>
<a id="county_<?=$i?>" href="javascript:" class="stopped"><span><?=utf8_decode($c)?> (<?=count($stores_by_county[$c])?>)</span></a>
</li>
<? endforeach ?>
</ul>
What do I need to get it for previous?
Related
Let's say I open an accordion tab with one click, and I want to close it with the second click.
This is the JS/jQuery I have so far:
var APP = window.APP = window.APP || {};
APP.accordion = (function () {
var $accordionHeader = $('.accordion__header');
var $accordionContent = $('.accordion__content');
var showAccordionContent = function(e) {
var $t = $(this);
$accordionHeader.removeClass('accordion__header--active');
$t.addClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.next().addClass('accordion__content--expanded');
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};
var bindEventsToUI = function () {
$accordionHeader.on('click', showAccordionContent);
};
var init = function () {
bindEventsToUI();
};
return {
init: init
};
}());
HTML:
<div class="accordion__tab">
<a href="#" class="accordion__header accordion__header--active">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
<div class="accordion__tab">
<a href="#" class="accordion__header">
Setting alerts
<span class="accordion__arrow"></span>
</a>
<div class="accordion__content">
<p>
{{!-- things --}}
</p>
<ul class="cf">
<li>
{{!-- more things --}}
</li>
</ul>
</div>
</div>
Suggestions?
I would do it like this, just some pseudos
var bindEventsToUI = function () {
$accordionHeader.on('click', toggleAccordionContent);
};
var toggleAccordionContent = function (e) {
var accordionIsOpen = $(this).classList.indexOf('accordion__header--active') >= 0; // may need to use another selector base on `this`
return accordionIsOpen ? hideAccordionContent.call(this) : showAccordionContent.call(this);
}
I guess you are looking for this. Modified showAccordionContent method logic a bit.
Hope this is what you are looking for.
This change will now close already open accordion on clicking it. And once you click on inactive accordion-header that will open. There might be a condition where user closes all the accordion after this code change.
var showAccordionContent = function(e) {
var $t = $(this);
/*Modified block logic*/
if($t.hasClass('accordion__header--active')){
$t.removeClass('accordion__header--active');
$t.next().removeClass('accordion__content--expanded');
}else{
$accordionHeader.removeClass('accordion__header--active');
$accordionContent.removeClass('accordion__content--expanded');
$t.addClass('accordion__header--active');
$t.next().addClass('accordion__content--expanded');
}
$('html, body').animate({
scrollTop: $t.offset().top - 60
}, 500);
e.preventDefault();
};
I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.
PHP/HTML
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div class='pic'>
<img src= " . $dir . $pic_array[$index] . " />
</div>
<div class='caption'>
<p id='title'>$titles[$index]</p>
<p id='des'>$descriptions[$index]</p>
</div>
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</html>";
$conn->close();
?>
Javascript
$(function () {
var arrPix = $('#json_pics').val();
var arrPix = $.parseJSON( arrPix );
var index = 0;
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $next = $slides.find('.next');
var $previous = $slides.find('.previous');
var $caption = $slides.find('.caption');
var slide_length = $slide.length;
$slider.hover(function() {
$caption.css('opacity', '1');
$next.css('opacity', '1');
$previous.css('opacity', '1');
}, function() {
$caption.css('opacity', '0');
$next.css('opacity', '0');
$previous.css('opacity', '0');
}
);
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
});
EDIT: Should I be using load instead?
In an endeavor to get you a solution that
Uses AJAX
and uses PHP,
I would suggest something like the following.
'getpic.php'
Summary: (A new file... used to simplify the process of getting a new picture.)
Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.
$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;
function priWrap($index) {
/*
This handles the actual generating of the <img> tag as well as
the caption and such.
$index refers to a specific picture in $pix_array.
*/
global $pix_array, $dir, $titles, $descriptions;
$arr_len = count($pix_array);
if ($index < 0) {
$index = $arr_len-1;
}
else if { $index >= $arr_len) {
$index = 0;
}
echo "<div class='pic'>
<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
</div>
<div class='caption'>
<p id='title'>" . $titles[$index] . "</p>
<p id='des'>" . $descriptions[$index] . "</p>
</div>";
}
#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
$index = intval($_GET['index']);
priWrap($index);
}
Changes to 'gallery_.php'
The code you posted should now look like this:
require_once('getpic.php');
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div id='picWrapper'>";
echo priWrap($index) . "
</div><!--End #picWrapper-->
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</body>
</html>";
$conn->close();
?>
Your javascript needs changed, too.
var index = 0;
should be
var index = parseInt($(".pic img").attr("data-ind"));
and
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
should be
$next.click(function() {
index++;
$("#picWrapper").load("getpic.php?index=" + index,
/*Add callback so that index is updated properly.*/
function () {
//update our index
index = parseInt($(".pic img").attr("data-ind"));
//show our caption stuff...
$(".caption").css('opacity', '1');
}
);
});
I have bit of a problem. Animation is working just first time is clicked, second time when it is clicked, it is refusing to work - when I click right and back it is working, but when I want to go right again it is not working. Code:
var main_container = $('.main_container'),
menu = $('.home_navigation_text'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
menu.hover(
function(){
var $this = $(this),
page = $this.find('a').attr('href');
second_page.empty().load(page);
},
function(){
}
);
menu.on('click', function(e){
main_container.animate({
right: '+=' + body_width
}, 600, 'linear', function() {
go_back();
});
return false;
});
function go_back()
{
var back = second_page.find('.back');
back.on('click', function(e){
main_container.animate({
left: '+=' + body_width
}, 600, 'linear', function() {
});
return false;
});
}
HTML Code:
<div class="main_container clearfix">
<section class="home_page clearfix">
<header class="home_header container">
<div class="grid_3 alpha omega" id="home_logo">
<img class="" src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo">
</div>
<div class="grid_9 alpha omega">
</div>
</header>
<!-- END OF HEADER -->
<div class="home_main container">
<nav class="home_navigation clearfix">
<ul class="clearfix">
<?php foreach ($menu as $mn): ?>
<li class="home_navigation_text">
<a class=home_navigation_link href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a>
</li>
<?php endforeach ?>
</ul>
</nav>
</div>
</section>
<section class="second_page">
</section>
</div>
As you're loading content, I'm guessing the menu is somehow replaced, and is as such dynamic. Delegating to the main_container would probably work, but it's hard to say as there is no markup posted and I have no idea how it looks ?
var main_container = $('.main_container'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
main_container.on({
mouseenter: function() {
second_page.empty().load( $(this).find('a').attr('href') );
},
click: function(e) {
e.preventDefault();
main_container.animate({
right: '+=' + body_width
}, 600, 'linear');
}
}, '.home_navigation_text');
main_container.on('click', '.back', function(e){
e.preventDefault();
main_container.animate({
right: '-=' + body_width
}, 600, 'linear');
});
I have created a javascript accordion, which works when one accordion is always open, I was wondering how I might modify my code so that the accordion, can also be closed when clicked again - so that all are collapsed?
$('.accordion-bottom').hide();
$('.accordion-link').on('click', global.toggleAccordian);
};
global.toggleAccordian = function(e){
var $Arrow = $(this).find('.arrow');
var $parentDiv = $(this).parent();
var $bottomAccordion = $parentDiv.siblings('.accordion-bottom');
var $accordionLi = $parentDiv.parents().eq('1');
var $siblingLis = $accordionLi.siblings('li');
var $siblingBotAccordions = $siblingLis.find('.accordion-bottom');
var $siblingArrows = $siblingLis.find('.arrow');
$siblingArrows.addClass('arrow-down');
if (!$accordionLi.hasClass('active')){
$bottomAccordion.slideDown('slow');
$Arrow.removeClass('arrow-down');
$siblingBotAccordions.stop().slideUp('slow');
}
e.preventDefault();
return false;
}
html:
<ul class="accordion">
<li>
<div class="item-inner-padding accordion-item">
<div class="accordion-top">
Title<span class="arrow arrow-down">Down</span>
</div>
<div class="accordion-bottom">
</div>
</div>
</li>
</ul>
I'm using the following code to create a sliding card effect where each "card" is a list element and they slide across the screen. They are only visible within the "stage" I've set with specific height and width. It's working great -- except that, while the cards slide out nicely to the left, they don't perform the same sliding function inwards from the right. Instead, it simply jumps onto the page and looks a bit startling.
Does anyone know how I could get the next list item to slide in from the right instead of simply appearing?
Thanks!
JS:
window.addEvent('domready', function () {
var totIncrement = 0;
var increment = 968;
var maxRightIncrement = increment * (-303); //this is -303 because there are 303 cards, but the example below only has 3
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 300,
//transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// EVENTS for the button "previous"
var pbuttons = document.getElementsByClassName('prevButton');
for(i = 0; i < pbuttons.length; i++) {
$(pbuttons[i]).addEvents({
'click': function (event) {
if(totIncrement > maxRightIncrement) {
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
}
});
}
//-------------------------------------
// EVENTS for the button "next"
// var buttons = $('.nextButton');
var buttons = document.getElementsByClassName('nextButton');
for(i = 0; i < buttons.length; i++) {
$(buttons[i]).addEvents({
'click': function (event) {
if(totIncrement > maxRightIncrement) {
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
});
}
});
HTML:
<div id="slider-stage">
<ul id="slider-list">
<li id="l1">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
<li id="l2">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
<li id="l3">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
</ul>
</div>