Response title
This is preview!
- Screen name: maxelcat
maxelcat's Profile
3 Posts
4 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 01-Jun-2018 10:07 AM
- Forum: Using jQuery Plugins
HiTablesorter was working fine until I tried to add in a custom parser as per the help page.Now what happens is that you can't sort any column ONCE - after this everything freezes. (So if you click the same column again you don't get the opposite sort like you should )I am something of a newbie so i wasn't sure where to put this code... so I put it at the end of my jQuery file.Can anyone help please?- $.tablesorter.addParser({
// set a unique id
id: 'mlevels',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/m1c/,0).replace(/m1b/,1).replace(/m1a/,2).replace(/m2c/,3).replace(/m2b/,4).replace(/m2a/,5).replace(/m3c/,6).replace(/m3b/,7).replace(/m3a/,8).replace(/m4c/,9).replace(/m4b/,10).replace(/m4a/,11).replace(/m5c/,12).replace(/m5b/,13).replace(/m5a/,14).replace(/m6c/,15).replace(/m6b/,16).replace(/m6a/,17).replace(/m7c/,18).replace(/m7b/,19).replace(/m7a/,20).replace(/m8c/,21).replace(/m8b/,22).replace(/m8a/,23).replace(/m9c/,24).replace(/m9b/,25).replace(/m9a/,26).replace(/m10c/,27).replace(/m10b/,28).replace(/m10a/,29).replace(/m11c/,30).replace(/m11b/,31).replace(/m11a/,32).replace(/m12c/,33).replace(/m12b/,34).replace(/m12a/,35).replace(/m13c/,36).replace(/m13b/,37).replace(/m13a/,38).replace(/m14c/,39).replace(/m14b/,40).replace(/m14a/,41).replace(/m15c/,42).replace(/m15b/,43).replace(/m15a/,44).replace(/-1/,-1);
},
// set type, eiahe2 numeric or text
type: 'numeric'
});
$(function() {
$("table").tablesorter({
headers: {
4: {
sorter:'mlevels'
}
}
});
});
- HiI have been asked to make a site mobile friendly, and so am making it responsive - no problems there.however, the site has an image rotator on the front page that's made with flash, so I figured I'd replace that with a jquery affair. The site is coded in xhtml4.1 trans with css2.I am not sure what the best way to proceed for the image rotator is - I was hoping to get one jquery solution that works on iPhones, android etc as well as desktop. However, when I start my googling I discover that there is a very of jquery that is for mobiles. Does this mean that I wont be able to find one solution that works on all (or most) of the platforms?Thanks in advanceE
- HiI am new to jQuery - and I am stuck. I have made a simple slide show - you can see it here http://www.en2krew.com/clothing.htmlIn just about everything it looks nice and smooth. However, in IE 7 and 8 (but not 9 apparently) it kind of jitters as the photos move. Maybe this is as good as I can expect - but I doubt it! I wohndered if it was sometihng to do with margins/padding. I tried removing them all, but the transitions still didn't look smooth to me.I wouldn't normally post all the code - but I am really quite lost!ANy help greatfully received.thanksEdwardHere's html
- <div id="slideShowWindow">
<div id="slideShowInner">
<img src="images/clothes001.gif" alt="" width="350" height="350" />
<img src="images/clothes002.gif" alt="" width="350" height="350" />
<img src="images/clothes003.gif" alt="" width="350" height="350" />
<img src="images/clothes004.gif" alt="" width="350" height="350" />
</div>
<div id="buttons">
<img id="clickPrev" src="images/prevButton.jpg" height="17" width="15" />
<img id="clickNext" src="images/nextButton.jpg" height="17" width="15" />
<div id="pauseHolder">
<img class="clickMe" id="clickPause" src="images/pauseButton.jpg" height="17" width="15" />
</div>
<div class="clearer"></div>
<!-- buttons--></div>
</div>
Here's the css:- #slideShowWindow {
/* this has a width of one photo */
width: 350px;
position:relative;
margin:100px auto;
padding:10px 10px 20px 10px;
overflow:hidden;
border:1px solid #aaa;
} - #slideShowInner {
/*this is a long, strip containing all the images slide by side*/
height:350px;
position:relative;
top:0; left:0;
} - #slideShowInner img {
float:left;
margin-right:20px; /*sum of slideShowWindow padding left and right*/
}
Here's the jQuery// JavaScript Document- $(document).ready(function() {
// set the slideShowInner stip to the width of all the images in a line
// width of image
var slidetime = 3000;
var imageWidth = parseInt($('#slideShowInner img:first').css('width'));
var imageMargin = parseInt($('#slideShowInner img:first').css('margin-right'));
var totalWidth=$('#slideShowInner img').length*(imageWidth+imageMargin);
var oneImageTotalWidth =imageWidth+imageMargin; - $('#slideShowInner').css('width',totalWidth);
// this is the width of one image with its margin - and the visible window
var widthOfDisplay = imageMargin+parseInt($('#slideShowWindow').css('width'));
var autoSlide= setTimeout(fred, slidetime);
$('#clickNext').click(function() {
showPauseButton();
var currentPos = Math.abs(parseInt($('#slideShowInner').css('left') ));
// pxToMove is the how much of the stip left that we WANT to move. So if its 0 it means we are on the last slide so we whizz back to the start and we need to pass to the moveSlide back to start.
var pxToMove = totalWidth - currentPos - (imageWidth+imageMargin);
moveSlide(widthOfDisplay, pxToMove, this.id);
}
) -
$('#clickPrev').click(function() {
showPauseButton();
var currentPos = Math.abs(parseInt($('#slideShowInner').css('left') ));
var pxToMove = currentPos;
moveSlide(-1*widthOfDisplay, pxToMove, this.id);
}
) - $('#clickPause').click(function(){
if ($(this).is(':visible')){
$(this).hide();
clearTimeout(autoSlide);
}
}
)
function showPauseButton(){
$('#clickPause').show();
}-
function moveSlide(wod, pxTM, btnClicked){
clearTimeout(autoSlide);
if (pxTM>0){ // then its a one step move
$('#slideShowInner').stop(true,true).animate({'left':'-=' + wod}, 'slow', function (){ autoSlide = setTimeout(fred, slidetime) });
} - if (pxTM<=imageWidth && btnClicked=="clickNext"){
// move back to start
$('#slideShowInner').stop(true,true).animate({'left':0}, 'slow', function() { autoSlide = setTimeout(fred, slidetime) });
} - if (pxTM<=imageWidth && btnClicked=="clickPrev"){
// need to whizz to show the very last slide - ie move the
var toMove = totalWidth + wod; // its + and not negative due to the -1 in the ('#clickPrev').click function
$('#slideShowInner').stop(true,true).animate({'left':-toMove}, 'slow', function() { autoSlide = setTimeout(fred, slidetime) });
}
} - function fred(){
clearTimeout(autoSlide);
// find distance left to move
var dlto = totalWidth-Math.abs(parseInt($('#slideShowInner').css('left') ))
if (dlto>oneImageTotalWidth){ // ok to move one picture forwards
$('#slideShowInner').stop(true,true).animate({'left':'-=' + widthOfDisplay}, 'slow');
}else{ // need to whizz back to the start
$('#slideShowInner').stop(true,true).animate({'left':0}, 'slow');
}
autoSlide = setTimeout(fred, slidetime);
} - }) // document ready function
- «Prev
- Next »
- <div id="slideShowWindow">
Moderate user : maxelcat
© 2013 jQuery Foundation
Sponsored by and others.
