We Keep Coding

JQuery on click <li> interference

Ok, the problem is a little hard to explain but I'll do my best.
when I click on one <li> element everyone else inside him is clicked.
I try to create categories and subcategories.but whenever I click on a category a subcategory is also called!
<li class="has-sub product_type" id="category1"> <a>Lorem1</a>
<ul>
<li class="product_sub_type" id="subcategory1"><a>Lorem2</a></li>
<li class="product_sub_type" id="subcategory2"><a>Lorem2</a></li>
<li class="product_sub_type" id="subcategory3"><a>Lorem2</a></li>
<li class="product_sub_type" id="subcategory4"><a>Lorem2</a></li>
</ul>
</li>
$(document).ready(function(){
var type_id = '';
$(".all_products").fadeOut("fast");
$(".product_type").on("click", function(event) {
alert("Dbg");
type_id = event.currentTarget.id;
$(".big_categoryes").fadeOut("fast");
$(".all_products").fadeIn("smooth");
sortProducts(type_id);
});
var type_sub_id = '';
$(".product_sub_type").on("click", function(event) {
type_sub_id = event.currentTarget.id;
sortSubProducts(type_sub_id);
});
});

How can I change the .load method into direct usage of a variable from the html file in jQuery, for the schedule-template of CodyHouse?

I want to use the schedule-template(https://github.com/CodyHouse/schedule-template) to create a schedule. During this process we run into one error, when clicking on a specific activity in the schedule op pop-up window containing information about the event should appear, but the information text is missing. Reason for this is a CORS error, as the information is loaded from a file (line 119):
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
An example of the content of a file that is loaded is something like this:
<div class="event-info">
<div>Abs Circuit. </div>
</div>
As loading data from a file results in a CORS error in chrome, it works properly in firefox, and a decent amount of other people should be able to access this schedule, my thoughts where to edit the line that loads the data from a file and instead directly load a string value from the html file. The data-content that is now loaded from the html file can be found in the lines like 69 of the provided html file.
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
This data-content is now extracted and used as the basis for the file-name of the file that is loaded, but in my opinion it would be way more useful in our case to just modify the data-content variable and directly use this data for the event-info. This would mean editing the
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
to a line that changes the .load to simply an event.parent().attr('data-content') to get the data-content string and then input this into the self.element.addClass(data-content string), so that that the event-info is loaded without using a file. As I am someone who has only programmed in python, I took a few stabs at the problem and tried several ways to change the code but mostly broke more than that I fixed.
All in all, I am of the opinion that through changing the earlier shown code fragment, we should be able to directly use the data from the data-content <li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1"> to get the "event-abs-circuit" info, but I am stumped on how to do this. The original html file and js script have also been added to the question, in case I might be completely wrong in my assumption the solution should be in those lines.
jQuery(document).ready(function($){
var transitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
var transitionsSupported = ( $('.csstransitions').length > 0 );
//if browser does not support transitions - use a different event to trigger them
if( !transitionsSupported ) transitionEnd = 'noTransition';
//should add a loading while the events are organized
function SchedulePlan( element ) {
this.element = element;
this.timeline = this.element.find('.timeline');
this.timelineItems = this.timeline.find('li');
this.timelineItemsNumber = this.timelineItems.length;
this.timelineStart = getScheduleTimestamp(this.timelineItems.eq(0).text());
//need to store delta (in our case half hour) timestamp
this.timelineUnitDuration = getScheduleTimestamp(this.timelineItems.eq(1).text()) - getScheduleTimestamp(this.timelineItems.eq(0).text());
this.eventsWrapper = this.element.find('.events');
this.eventsGroup = this.eventsWrapper.find('.events-group');
this.singleEvents = this.eventsGroup.find('.single-event');
this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();
this.modal = this.element.find('.event-modal');
this.modalHeader = this.modal.find('.header');
this.modalHeaderBg = this.modal.find('.header-bg');
this.modalBody = this.modal.find('.body');
this.modalBodyBg = this.modal.find('.body-bg');
this.modalMaxWidth = 800;
this.modalMaxHeight = 480;
this.animating = false;
this.initSchedule();
}
SchedulePlan.prototype.initSchedule = function() {
this.scheduleReset();
this.initEvents();
};
SchedulePlan.prototype.scheduleReset = function() {
var mq = this.mq();
if( mq == 'desktop' && !this.element.hasClass('js-full') ) {
//in this case you are on a desktop version (first load or resize from mobile)
this.eventSlotHeight = this.eventsGroup.eq(0).children('.top-info').outerHeight();
this.element.addClass('js-full');
this.placeEvents();
this.element.hasClass('modal-is-open') && this.checkEventModal();
} else if( mq == 'mobile' && this.element.hasClass('js-full') ) {
//in this case you are on a mobile version (first load or resize from desktop)
this.element.removeClass('js-full loading');
this.eventsGroup.children('ul').add(this.singleEvents).removeAttr('style');
this.eventsWrapper.children('.grid-line').remove();
this.element.hasClass('modal-is-open') && this.checkEventModal();
} else if( mq == 'desktop' && this.element.hasClass('modal-is-open')){
//on a mobile version with modal open - need to resize/move modal window
this.checkEventModal('desktop');
this.element.removeClass('loading');
} else {
this.element.removeClass('loading');
}
};
SchedulePlan.prototype.initEvents = function() {
var self = this;
this.singleEvents.each(function(){
//create the .event-date element for each event
var durationLabel = '<span class="event-date">'+$(this).data('start')+' - '+$(this).data('end')+'</span>';
$(this).children('a').prepend($(durationLabel));
//detect click on the event and open the modal
$(this).on('click', 'a', function(event){
event.preventDefault();
if( !self.animating ) self.openModal($(this));
});
});
//close modal window
this.modal.on('click', '.close', function(event){
event.preventDefault();
if( !self.animating ) self.closeModal(self.eventsGroup.find('.selected-event'));
});
this.element.on('click', '.cover-layer', function(event){
if( !self.animating && self.element.hasClass('modal-is-open') ) self.closeModal(self.eventsGroup.find('.selected-event'));
});
};
SchedulePlan.prototype.placeEvents = function() {
var self = this;
this.singleEvents.each(function(){
//place each event in the grid -> need to set top position and height
var start = getScheduleTimestamp($(this).attr('data-start')),
duration = getScheduleTimestamp($(this).attr('data-end')) - start;
var eventTop = self.eventSlotHeight*(start - self.timelineStart)/self.timelineUnitDuration,
eventHeight = self.eventSlotHeight*duration/self.timelineUnitDuration;
$(this).css({
top: (eventTop -1) +'px',
height: (eventHeight+1)+'px'
});
});
this.element.removeClass('loading');
};
SchedulePlan.prototype.openModal = function(event) {
var self = this;
var mq = self.mq();
this.animating = true;
//update event name and time
this.modalHeader.find('.event-name').text(event.find('.event-name').text());
this.modalHeader.find('.event-date').text(event.find('.event-date').text());
this.modal.attr('data-event', event.parent().attr('data-event'));
//update event content
this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
//once the event content has been loaded
self.element.addClass('content-loaded');
});
this.element.addClass('modal-is-open');
setTimeout(function(){
//fixes a flash when an event is selected - desktop version only
event.parent('li').addClass('selected-event');
}, 10);
if( mq == 'mobile' ) {
self.modal.one(transitionEnd, function(){
self.modal.off(transitionEnd);
self.animating = false;
});
} else {
var eventTop = event.offset().top - $(window).scrollTop(),
eventLeft = event.offset().left,
eventHeight = event.innerHeight(),
eventWidth = event.innerWidth();
var windowWidth = $(window).width(),
windowHeight = $(window).height();
var modalWidth = ( windowWidth*.8 > self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8,
modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8;
var modalTranslateX = parseInt((windowWidth - modalWidth)/2 - eventLeft),
modalTranslateY = parseInt((windowHeight - modalHeight)/2 - eventTop);
var HeaderBgScaleY = modalHeight/eventHeight,
BodyBgScaleX = (modalWidth - eventWidth);
//change modal height/width and translate it
self.modal.css({
top: eventTop+'px',
left: eventLeft+'px',
height: modalHeight+'px',
width: modalWidth+'px',
});
transformElement(self.modal, 'translateY('+modalTranslateY+'px) translateX('+modalTranslateX+'px)');
//set modalHeader width
self.modalHeader.css({
width: eventWidth+'px',
});
//set modalBody left margin
self.modalBody.css({
marginLeft: eventWidth+'px',
});
//change modalBodyBg height/width ans scale it
self.modalBodyBg.css({
height: eventHeight+'px',
width: '1px',
});
transformElement(self.modalBodyBg, 'scaleY('+HeaderBgScaleY+') scaleX('+BodyBgScaleX+')');
//change modal modalHeaderBg height/width and scale it
self.modalHeaderBg.css({
height: eventHeight+'px',
width: eventWidth+'px',
});
transformElement(self.modalHeaderBg, 'scaleY('+HeaderBgScaleY+')');
self.modalHeaderBg.one(transitionEnd, function(){
//wait for the end of the modalHeaderBg transformation and show the modal content
self.modalHeaderBg.off(transitionEnd);
self.animating = false;
self.element.addClass('animation-completed');
});
}
//if browser do not support transitions -> no need to wait for the end of it
if( !transitionsSupported ) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
};
SchedulePlan.prototype.closeModal = function(event) {
var self = this;
var mq = self.mq();
this.animating = true;
if( mq == 'mobile' ) {
this.element.removeClass('modal-is-open');
this.modal.one(transitionEnd, function(){
self.modal.off(transitionEnd);
self.animating = false;
self.element.removeClass('content-loaded');
event.removeClass('selected-event');
});
} else {
var eventTop = event.offset().top - $(window).scrollTop(),
eventLeft = event.offset().left,
eventHeight = event.innerHeight(),
eventWidth = event.innerWidth();
var modalTop = Number(self.modal.css('top').replace('px', '')),
modalLeft = Number(self.modal.css('left').replace('px', ''));
var modalTranslateX = eventLeft - modalLeft,
modalTranslateY = eventTop - modalTop;
self.element.removeClass('animation-completed modal-is-open');
//change modal width/height and translate it
this.modal.css({
width: eventWidth+'px',
height: eventHeight+'px'
});
transformElement(self.modal, 'translateX('+modalTranslateX+'px) translateY('+modalTranslateY+'px)');
//scale down modalBodyBg element
transformElement(self.modalBodyBg, 'scaleX(0) scaleY(1)');
//scale down modalHeaderBg element
transformElement(self.modalHeaderBg, 'scaleY(1)');
this.modalHeaderBg.one(transitionEnd, function(){
//wait for the end of the modalHeaderBg transformation and reset modal style
self.modalHeaderBg.off(transitionEnd);
self.modal.addClass('no-transition');
setTimeout(function(){
self.modal.add(self.modalHeader).add(self.modalBody).add(self.modalHeaderBg).add(self.modalBodyBg).attr('style', '');
}, 10);
setTimeout(function(){
self.modal.removeClass('no-transition');
}, 20);
self.animating = false;
self.element.removeClass('content-loaded');
event.removeClass('selected-event');
});
}
//browser do not support transitions -> no need to wait for the end of it
if( !transitionsSupported ) self.modal.add(self.modalHeaderBg).trigger(transitionEnd);
}
SchedulePlan.prototype.mq = function(){
//get MQ value ('desktop' or 'mobile')
var self = this;
return window.getComputedStyle(this.element.get(0), '::before').getPropertyValue('content').replace(/["']/g, '');
};
SchedulePlan.prototype.checkEventModal = function(device) {
this.animating = true;
var self = this;
var mq = this.mq();
if( mq == 'mobile' ) {
//reset modal style on mobile
self.modal.add(self.modalHeader).add(self.modalHeaderBg).add(self.modalBody).add(self.modalBodyBg).attr('style', '');
self.modal.removeClass('no-transition');
self.animating = false;
} else if( mq == 'desktop' && self.element.hasClass('modal-is-open') ) {
self.modal.addClass('no-transition');
self.element.addClass('animation-completed');
var event = self.eventsGroup.find('.selected-event');
var eventTop = event.offset().top - $(window).scrollTop(),
eventLeft = event.offset().left,
eventHeight = event.innerHeight(),
eventWidth = event.innerWidth();
var windowWidth = $(window).width(),
windowHeight = $(window).height();
var modalWidth = ( windowWidth*.8 > self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8,
modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8;
var HeaderBgScaleY = modalHeight/eventHeight,
BodyBgScaleX = (modalWidth - eventWidth);
setTimeout(function(){
self.modal.css({
width: modalWidth+'px',
height: modalHeight+'px',
top: (windowHeight/2 - modalHeight/2)+'px',
left: (windowWidth/2 - modalWidth/2)+'px',
});
transformElement(self.modal, 'translateY(0) translateX(0)');
//change modal modalBodyBg height/width
self.modalBodyBg.css({
height: modalHeight+'px',
width: '1px',
});
transformElement(self.modalBodyBg, 'scaleX('+BodyBgScaleX+')');
//set modalHeader width
self.modalHeader.css({
width: eventWidth+'px',
});
//set modalBody left margin
self.modalBody.css({
marginLeft: eventWidth+'px',
});
//change modal modalHeaderBg height/width and scale it
self.modalHeaderBg.css({
height: eventHeight+'px',
width: eventWidth+'px',
});
transformElement(self.modalHeaderBg, 'scaleY('+HeaderBgScaleY+')');
}, 10);
setTimeout(function(){
self.modal.removeClass('no-transition');
self.animating = false;
}, 20);
}
};
var schedules = $('.cd-schedule');
var objSchedulesPlan = [],
windowResize = false;
if( schedules.length > 0 ) {
schedules.each(function(){
//create SchedulePlan objects
objSchedulesPlan.push(new SchedulePlan($(this)));
});
}
$(window).on('resize', function(){
if( !windowResize ) {
windowResize = true;
(!window.requestAnimationFrame) ? setTimeout(checkResize) : window.requestAnimationFrame(checkResize);
}
});
$(window).keyup(function(event) {
if (event.keyCode == 27) {
objSchedulesPlan.forEach(function(element){
element.closeModal(element.eventsGroup.find('.selected-event'));
});
}
});
function checkResize(){
objSchedulesPlan.forEach(function(element){
element.scheduleReset();
});
windowResize = false;
}
function getScheduleTimestamp(time) {
//accepts hh:mm format - convert hh:mm to timestamp
time = time.replace(/ /g,'');
var timeArray = time.split(':');
var timeStamp = parseInt(timeArray[0])*60 + parseInt(timeArray[1]);
return timeStamp;
}
function transformElement(element, value) {
element.css({
'-moz-transform': value,
'-webkit-transform': value,
'-ms-transform': value,
'-o-transform': value,
'transform': value
});
}
});
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<title>Schedule Template | CodyHouse</title>
</head>
<body>
<div class="cd-schedule loading">
<div class="timeline">
<ul>
<li><span>09:00</span></li>
<li><span>09:30</span></li>
<li><span>10:00</span></li>
<li><span>10:30</span></li>
<li><span>11:00</span></li>
<li><span>11:30</span></li>
<li><span>12:00</span></li>
<li><span>12:30</span></li>
<li><span>13:00</span></li>
<li><span>13:30</span></li>
<li><span>14:00</span></li>
<li><span>14:30</span></li>
<li><span>15:00</span></li>
<li><span>15:30</span></li>
<li><span>16:00</span></li>
<li><span>16:30</span></li>
<li><span>17:00</span></li>
<li><span>17:30</span></li>
<li><span>18:00</span></li>
</ul>
</div> <!-- .timeline -->
<div class="events">
<ul>
<li class="events-group">
<div class="top-info"><span>Monday</span></div>
<ul>
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>
<li class="single-event" data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2">
<a href="#0">
<em class="event-name">Rowing Workout</em>
</a>
</li>
<li class="single-event" data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3">
<a href="#0">
<em class="event-name">Yoga Level 1</em>
</a>
</li>
</ul>
</li>
<li class="events-group">
<div class="top-info"><span>Tuesday</span></div>
<ul>
<li class="single-event" data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2">
<a href="#0">
<em class="event-name">Rowing Workout</em>
</a>
</li>
<li class="single-event" data-start="11:30" data-end="13:00" data-content="event-restorative-yoga" data-event="event-4">
<a href="#0">
<em class="event-name">Restorative Yoga</em>
</a>
</li>
<li class="single-event" data-start="13:30" data-end="15:00" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>
<li class="single-event" data-start="15:45" data-end="16:45" data-content="event-yoga-1" data-event="event-3">
<a href="#0">
<em class="event-name">Yoga Level 1</em>
</a>
</li>
</ul>
</li>
<li class="events-group">
<div class="top-info"><span>Wednesday</span></div>
<ul>
<li class="single-event" data-start="09:00" data-end="10:15" data-content="event-restorative-yoga" data-event="event-4">
<a href="#0">
<em class="event-name">Restorative Yoga</em>
</a>
</li>
<li class="single-event" data-start="10:45" data-end="11:45" data-content="event-yoga-1" data-event="event-3">
<a href="#0">
<em class="event-name">Yoga Level 1</em>
</a>
</li>
<li class="single-event" data-start="12:00" data-end="13:45" data-content="event-rowing-workout" data-event="event-2">
<a href="#0">
<em class="event-name">Rowing Workout</em>
</a>
</li>
<li class="single-event" data-start="13:45" data-end="15:00" data-content="event-yoga-1" data-event="event-3">
<a href="#0">
<em class="event-name">Yoga Level 1</em>
</a>
</li>
</ul>
</li>
<li class="events-group">
<div class="top-info"><span>Thursday</span></div>
<ul>
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>
<li class="single-event" data-start="12:00" data-end="13:45" data-content="event-restorative-yoga" data-event="event-4">
<a href="#0">
<em class="event-name">Restorative Yoga</em>
</a>
</li>
<li class="single-event" data-start="15:30" data-end="16:30" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>
<li class="single-event" data-start="17:00" data-end="18:30" data-content="event-rowing-workout" data-event="event-2">
<a href="#0">
<em class="event-name">Rowing Workout</em>
</a>
</li>
</ul>
</li>
<li class="events-group">
<div class="top-info"><span>Friday</span></div>
<ul>
<li class="single-event" data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2">
<a href="#0">
<em class="event-name">Rowing Workout</em>
</a>
</li>
<li class="single-event" data-start="12:30" data-end="14:00" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>
<li class="single-event" data-start="15:45" data-end="16:45" data-content="event-yoga-1" data-event="event-3">
<a href="#0">
<em class="event-name">Yoga Level 1</em>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="event-modal">
<header class="header">
<div class="content">
<span class="event-date"></span>
<h3 class="event-name"></h3>
</div>
<div class="header-bg"></div>
</header>
<div class="body">
<div class="event-info"></div>
<div class="body-bg"></div>
</div>
Close
</div>
<div class="cover-layer"></div>
</div> <!-- .cd-schedule -->
<script src="js/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
if( !window.jQuery ) document.write('<script src="js/jquery-3.0.0.min.js"><\/script>');
</script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

extracting value of unordered list list item value

Dear all I have used the below codes to extract the value of <li> in which image is displayed horizontally. The HTML code is as
<div id="layoutInnerOptions">
<ul id="navigationItemsContainer" class="layouts_list">
<li class="layout_container" rel="0" value="temp1">
<img src="resources/Images/layout_bottom2.png" alt="bottom" rel="0" />
</li>
<li class="layout_container" rel="1" value="temp4">
<img src="resources/Images/layout_top2.png" alt="top" rel="1" />
</li>
<li class="layout_container" rel="2" value="temp3">
<img src="resources/Images/layout_menu2.png" alt="menu" rel="2" />
<li class="layout_container" rel="3" value="temp2">
<img src="resources/Images/layout_buttons2.png" alt="buttons" rel="3" />
</li>
</ul>
</div>
I have used jQuery to get the value of <li> like temp1,temp2 but could not get the value by using the below code.
if (confirm('Are you sure you want to save this thing into the database?')==true) {
var Apptxt = $("#AppNametxt").val();
var Appdesc=$("#txtdesc").val();
var Applayout=$("#navigationItemsContainer").val();
$.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:Appdesc, Apptxt:Apptxt, Applayout:Applayout},
function(data) {
$('#message').html("Content Saved");
});
}
I hope that you all will help to solve this problem.
Thank you all.

Please change value=... to data-value=.... and use code similar to that below:
var Applayout= $("#navigationItemsContainer").find('li').map(function() { return $(this).data('value'); }).get().join(',');
SEE DEMO
EDIT
User has changed his requirements to include a trigger - a click of the li item - which changes the code to the following:
$(function() {
$("#navigationItemsContainer").children( 'li' ).on( 'click', function() {
if (confirm('Are you sure you want to save this thing into the database?')) {
var Apptxt = .....;
var Appdesc = ......;
var Applayout = $( this ).data( 'value' );
$.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:Appdesc, Apptxt:Apptxt, Applayout:Applayout}, function(data) {
$('#message').html("Content Saved");
});
}
});
});

How can I remove the div has the same url and keep only value?

For example, I have HTML like :
<ul id='myul'>
<li>
Link1
<span>something1</span>
</li>
<li>
Link2
<span>something1</span>
</li>
<li>
Link4
<span>something1</span>
</li>
<li>
Link1
<span>something1</span>
</li>
</ul>
You can see href = http://domain.com/link1 is repeated. So, I want remove one of theme, and keep only one. That mean I have HTML like :
<ul id='myul'>
<li>
Link1
<span>something1</span>
</li>
<li>
Link2
<span>something1</span>
</li>
<li>
Link4
<span>something1</span>
</li>
</ul>
How can I do that with jquery?

Here's the first way that came to mind:
$(document).ready(function(){
var urls = {};
$("#myul a").each(function() {
if (this.href in urls)
$(this).closest("li").remove();
else
urls[this.href] = true;
});
});
Demo: http://jsfiddle.net/CBhF6/
That is, loop over all of the anchor elements within the ul, and test if the current one has an href that you've already seen - if so delete it, otherwise make a note of the href.

You can use $( "li" ).get( -1 )
as long as it is the last one

Try this:
var lnkHash = {};
$('li > a').each(function(){
if(lnkHash[this.href])
{
$(this).closest('li').remove();
} else
{
lnkHash[this.href] = 1;
}
});
http://jsfiddle.net/c4zVk/1/

Try:
var url = [];
$("#myul").find("li").each(function(){
var href = $(this).find("a").attr("href");
if(url.indexOf(href) >= 0){
$(this).remove();
}
else{
url.push(href);
}
});
Fiddle here.

Try this:
$(function(){
$('#myul a').each(function(){
var currHref = $(this).attr('href');
$('#myul').find('a[href="' +currHref +'"]').each(function(index){
if(index > 0) {
$(this).closest('li').remove();
}
});
});
});
http://jsfiddle.net/rKpaK/2/

set the focus on the scroller when button is clicked

window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 560;
var maxRightIncrement = increment*(-6);
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrementmaxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
in mootools v1.1
it makes a scroller function at the bottom of my html page.
but when i click the next button the page's focus moves to the top of the page. how do i keep it on the scroller?
this is the html fragment:
<h3>Our Pastas</h3>
<div id="slider-buttons">
Previous | <a href="#" id="next">Next</a>
</div>
<div id="slider-stage">
<ul id="slider-list">
<li class="list_item">
<div id="thumbnail"><img src="xxx/images/stories/products/_thumb1/bucatini.gif"></div><h4>Rustichella d'Abruzzo Bucatini</h4>
</li>
<li class="list_item">
<div id="thumbnail"><img src="xxx/images/stories/products/_thumb1/calamarata.jpg"></div><h4>Rustichella d'Abruzzo Calamarata</h4>
</li>
<li class="list_item">
<div id="thumbnail"><img src="xxx/images/stories/products/_thumb1/cannolicchi.jpg"></div><h4>Rustichella d'Abruzzo Cannolicchi</h4>
</li>
</ul></div>

this is mootools 1.11, mod your next and previous functions like so:
$('next').addEvents({
'click' : function(event){
// add this to stop the default click event.
new Event(event).stop();
// continue as usual.
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
});
in mootools 1.2+, all you need is event.stop(); or event.preventDefault();