I am using JQuery/Ajax for some functionality on my site. Currently I have a left side that displays an unordered list and each list element has a class of something like shop-thumb, Whenever some clicks on a shop-thumb then on the right that content is loaded with Ajax.
Now I want to incorporate a next/previous button so users can click next (from the right side) and the next list item is loaded with the ajax changing the content on the right.
Here is a really basic version of what I am working with:
<div class="thumbs">
<ul class="products">
<li class="shop-thumb"><img src="www.google.com/image1" /></li>
<li class="shop-thumb"><img src="www.google.com/image2" /></li>
<li class="shop-thumb"><img src="www.google.com/image3" /></li>
<li class="shop-thumb"><img src="www.google.com/image4" /></li>
<li class="shop-thumb"><img src="www.google.com/image5" /></li>
</ul>
</div>
<div class="paginate">
<div class="prev">Prev</div> | <div class="next">Next</div>
</div>
<div class="main">
<!-- Ajax comes in here -->
</div>
Here is what I have in my JQuery/Ajax calls -- Everything is working fine except the .next click function:
<script>
jQuery(document).ready(function($){
var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
$(".main").load(defaultValue);
$("ul.products li.shop-thumb a").click(function(e){
e.preventDefault();
var addressValue = $(this).attr("href");
$(".main").load(addressValue);
});
$(".next").click(function() {
$("ul.products").next();
var newValue = $("ul.products .shop-thumb a").attr("href");
$(".main").load(newValue);
});
});
</script>
Any help would be appreciated on how I can achieve this next/previous functionality. Thought I should be using .next(), .find() or .nextAll
If you wouldn't mind throwing me a bone and showing me an example so I can see where and what I did wrong.
You need to have a marker for the current item to find out what is the next item. Once you find the next item, you can just fire the click event on that item to invoke the handler
You can use a class like
jQuery(document).ready(function ($) {
$("ul.products li.shop-thumb a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".main").load(addressValue);
//remove the active class from previous item
$("ul.products li.active").removeClass('active');
//add the active class to the current li element
$(this).closest('li').addClass('active');
});
$(".next").click(function () {
//find the next item and trigger the click event
$("ul.products li.active").next().find('a').trigger('click');
});
//default loading
$("ul.products li.shop-thumb a:first").click();
});
Related
In short, I have a 2 main links (Private Car and Commercial Vehicle) each with a specific class attached to their anchor tags. The same class names are used on the li tags of a second sublink ul to match them with to two top links. The idea is that each time a main link is clicked, the following happens:
The sublink ul slides up
All the li's inside are hidden
The li's with the corresponding main link class are shown
The sublink ul slides down showing only the correct li's
Unfortunately that is not the order that the functions fire in. What happens is this:
The sublink ul slides up
The sublink ul slides down
All list elements inside are hidden
The relevant list elements slide down
Any idea on how I can get the order to fire as I want it?
Here is the code
$('.insurer ul.toplinks a').click(function(e) {
e.preventDefault();
var sublinkCategory = $(this).attr('class'),
subLinksToShow = $(this).parent().parent().parent().find('li.' + sublinkCategory),
subLinksList = $(this).parent().parent().parent().find('ul.sublinks'),
allLinks = $(subLinksList).find('li');
// First time
if ($(subLinksList).is(":hidden")) {
$(subLinksToShow).slideDown();
$(subLinksList).slideDown();
// List visible but new links invisible
} else if ($(subLinksList).is(":visible") && $(subLinksToShow).is(":hidden")) {
$(subLinksList).slideUp(function() {
$(allLinks).hide(function() {
$(subLinksList).slideDown(function() {
$(subLinksToShow).slideDown();
});
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">Key Facts</li>
<li class="privatecar">Policy Wording</li>
<li class="commercialvehicle">Key Facts</li>
<li class="commercialvehicle">Policy Wording</li>
</ul>
Your code isn't working while we don't have the fully code.
This works, note the comments in the code to see what happens on the line under the comment.
$(function() {
// hide by default
$('.sublinks').hide();
$('.toplinks a').on('click', function(e) {
e.preventDefault();
// get the classname
var cl = $(this).attr('class');
// slide up
$('.sublinks').slideUp("slow", function() {
//on callback (= after slide up is done)
// show all links
$('.sublinks li').show();
// hide the ones not having the right class
$('.sublinks li:not(.'+cl+')').hide();
// slide down again
$('.sublinks').slideDown("slow");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">private Key Facts</li>
<li class="privatecar">private Policy Wording</li>
<li class="commercialvehicle">commercial Key Facts</li>
<li class="commercialvehicle">commercial Policy Wording</li>
</ul>
So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.
I'm running JQM 1.3.1 + JQ 2.0
I have a listview (no scroll) of about 60 elements + a fixed footer (tabbar). If I click on one element of my listview, it shows some content in a new hash page where I've added a "back" button.
The active button of the tabbar is set when populating the listview.
When I click on the back button, the previous page shows up but the active button from the tabbar is not active anymore (none of the buttons are active). Which makes me think that all the elements on the first page have been refreshed.
How can I prevent the elements from being refreshed and to keep their state on a "back" call ?
<div data-role='navbar' id='kms'>
<ul id='kml'>
<li id='l5'><a href='#' id='d5' class='ui-btn-active'>Ici</a></li>
<li id='l20'><a href='#' id='d20'>5 km</a></li>
<li id='l50'><a href='#' id='d50'>20 km</a></li>
<li id='l100'><a href='#' id='d100'>50 km</a></li>
</ul>
</div>
Working example: http://jsfiddle.net/Gajotres/6h7gn/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#kml li', function(){
var selectedLi = $(this);
$('#kml li').each(function( index ) {
var loopLi = $(this);
if(loopLi.find('a').hasClass('ui-btn-active')) {
$(this).find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
}
});
selectedLi.find('a').addClass('ui-state-persist');
setTimeout(function(){
$.mobile.changePage( "#second", { transition: "slide"});
},100);
});
});
Remove the class ui-btn-active from the tab bars.
And write your own customized css class for active and passive tabs.
It worked for me.This may help.
.footer-passive a
{
background: #99ce3e ; /*light green*/
}
for active buttons
.footer-active a
{
background: #709630;/*dark green*/
}
Well then try using below code snippet.
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li class="footer-color-active"><img src="your_file/path1" /></li>
<li class="footer-color"><a href="sample2.html" ><img src="your_file/path2" /></a></li>
<li class="footer-color"><a href="sample3.html" ><img src="youtr_file/path3" /></a></li>
</ul>
</div>
</div>
I am using a fancybox gallery template. When you click on a nav element in the header, thumbnails that match the rel="value" light up. How can I make the same thumbnail light up for multiple tags? Basically, something like: rel="value1 value2" The code that I have listed below is not working. Any element that has more than one value for rel="" lights up whenever any nav button is pushed. What should I do? I appreciate any help.
HTML:
<!-- .nav -->
<ul class="nav">
<li>Producing</li>
<li>Design</li>
<li>Puppetry</li>
<li>Multimedia</li>
</ul>
<!-- /.nav -->
</div>
<!-- content -->
<div id="content">
<!-- .thumbs -->
<ul class="thumbs">
<li class="first"><img src="images/images/h-thumb4.jpg" alt="description" /></li>
<li></li>
<li><img src="images/images/sus-thumb7.jpg" alt="description" /></li>
<li><img src="images/images/sus-thumb1.jpg" alt="description" /></li>
<li><img src="images/images/sus-thumb2.jpg" alt="description" /></li>
<li><img src="images/images/sus-thumb4.jpg" alt="description" /></li>
<li><img src="images/images/sus-thumb6.jpg" alt="description" /></li>
<li></li>
***For the first list element, where rel="empty" I do not want that thumbnail to light up ever. I tried leaving rel="", but then the thumbnail lit up on any click. The other list elements show examples of my attempts at multiple tags.
gallery.js:
$(".nav li a.produce").click(function(){
$("ul.thumbs").find("span").hide();
$(".nav li a").removeClass("current");
$("ul.thumbs a").css("opacity", "1");
$(this).addClass("current");
$("ul.thumbs a[rel=design], ul.thumbs a[rel=puppet], ul.thumbs a[rel=multimedia]").animate({opacity: ".2"}, "slow").parent().append("<span></span>");
return false;
});
I don't understand why you are using rel for this. Using the class attribute seems like it would be a better match. Is there a reason why you need to use rel? I am not sure that the way you are using it is even valid.
If you use class instead, you can add multiples in the same way that you mentioned (class = "puppet design" would work).
#Chrissi is right (+1). You should rather use classes instead so you can compare what classes from the content matches with the class of the selected nav item.
You basically need two functions :
the first one :
catches the click on nav items
validates what classes match from the content
sets the rel attribute to those items so they will belong to the same gallery selected by the nav item
... so :
$('.nav a').on("click", function() {
var className = $(this).attr("class"); // get class name of nav item
var thisClass = "." + className; // builds a class selector from class name
// get content items that matches the selector class and set the same rel attribute
$(".thumbs a").filter(thisClass).attr({
"rel": className,
"title": className // optional
}).first().trigger("click"); // fires gallery from first item
}); // on
the second one :
binds all selectors from content to fancybox
filters the class="empty" so it doesn't open in fancybox (does nothing)
removes the attribute rel (set by the first function) after close
... so :
$(".thumbs a").fancybox({
beforeLoad: function() {
if ($(this.element).hasClass("empty")) {
return false; // ignores item with class="empty"
}
},
afterClose: function() {
$(this.element).removeAttr("rel title"); // remove rel after close
}
});
since the last function binds all content's items to fancybox, they will be opened in fancybox out of any gallery if they are clicked individually, except that with class="empty"
See JSFIDDLE
NOTES :
.on() requires jQuery v1.7+
this demo uses fancybox v2.1.3+
I would like to create a tab view for my php application using Mootools. I have n number of tabs created from php script. My view is as follows.
<div>
<ul id="1">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
<div>
<ul id="2">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
...
<div>
<ul id="n">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
How can apply style class active according to the clicks on Populalar or New Addition under each tabs.
Thanks
var tabs = document.getElements('li');
tabs.addEvent('click', function() {
tabs.removeClass('active');
this.addClass('active');
});
Try an example.
Here's how to do it in MooTools:
var activeElement = null;
$$('div ul li'
/* you probably want a better selector,
how about giving a parent element an id? */
).each(function(item){
item.addEvent('click',function(event){
$(event.target).addClass('active');
if(activeElement != event.target){
if(activeElement!=null)
$(activeElement).removeClass('active');
activeElement = event.target;
}
});
});
Update: Here's an improved version, thanks #steweb, source:
$$('#containerID li').each(function(item){
item.addEvent('click',function(event){
// minor improvement to steweb's code,
// restrict to .active inside container
$$('#containerID .active').removeClass('active');
this.addClass('active');
});
});
It requires the root div to have the id "containerId":
<div id="containerId">
<ul id="1">
<!-- etc -->
object.className = 'active';
( Where object is what you want to highlight )