EDIT: This is not a problem with the jQuery creating the appropriate markup from SharePoint Announcement List to use jCarouselLite. It seems to be a problem within jCarouselLite. I have done another jsfiddle with just the appropriate markup, not the jQuery/javascript conversion code, and the problem still occurs.
You can see the problem at http://jsfiddle.net/ayatollah/6RKNx/
Again it is only a problem with 1 or 2 list items. 3+ works fine. Should I be changing the markup, our jCarouselLite calling code to fix this?
Bounty will be offered as soon as it's available!
ORIGINAL===============================================================================
I have an Announcement List in a Sharepoint site that I want to convert to a jCarousel. The Announcement List is rendered as a table so I have put together some jQuery code to convert it to the required ul structure.
The jQuery seems to be doing its job but the jCarousel gives some weird behaviour. The first announcement displays as it should, then the second announcement scrolls in as it should. However, for each scroll after this it flashes up the first announcement, then scrolls in the second. When it should just scroll in the first again.
I had it working correctly but it was displaying blank announcements, so I introduced some code to filter out the blank announcements. Here is a jsfiddle to show you the problem.
http://jsfiddle.net/RzeEX/2/
The only change I made from the previous code was to add the extra boolean value:
&& $(listitem).text() != "\xa0"
Seen at: http://jsfiddle.net/RzeEX/3/
However, in the above fiddle the code works exactly as the previous one, but on my server it displays an extra blank announcement. Don't know why I can't replicate it here.
Anyway, anyone have any ideas?
EDIT: Actually just testing it with more than 2 announcements and it seems to work. See http://jsfiddle.net/RzeEX/4/
It is now working as expected, but have 2 announcements and it is still broke, have 1 announcement and nothing shows! It must be something to do with the jQuery as I would believe the jCarouselLite plugin to work.
See http://jsfiddle.net/RzeEX/5/ for the single announcement.
Since it is my understanding that you might have a dynamic list of elements, you can do something like this:
$('.viewport').jCarouselLite({
auto:1000,
speed:1000,
visible: $('#announcementList li').length
});
That way it won't matter if you have 1, 2 or 100 elements. It will always work as it should.
Here's the jsfiddle: http://jsfiddle.net/XS87c/
I think by setting visible:2 may give the desire result.
$('.viewport').jCarouselLite({
auto:5000,
speed:1000,
visible:2
});
let me know if it does not work.
how many do you want to be visible? what behaviour do you want if there is < # visible. I ran into this exact problem, and solved it by not applying the carosel if there was < # visible in the list.
something like this should do the trick:
if ((document.getElementById('viewport') != null) && $('#announcementList').find('li').length >= 3 ) {
$('.viewport').jCarouselLite({
auto: 5000,
speed: 1000
});
}
Complementing the solution of Irfan, you can do:
if(document.getElementById('viewport') != null) {
var options = {auto:5000,speed:1000};
//Here we count the number of items and set it for a better display for 2 and 1 item
if($('#viewport a').length <= 2) {
options.visible = $('#viewport a').length;
}
$('.viewport').jCarouselLite(options);
}
So if you have on or two elements you will see just one or two. But if you have more than two elements you will see just three elements.
Related
The Question and Codes
I am struggling with the below code:
$('.rdsubs-mysubscriptions table tbody tr td a').each(function() {
var subItem = $(this).html();
//console.log(subItem);
var subItemStripped = subItem.substring(12);
console.log(subItemStripped);
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
}); // end of each function
When I check the console for subItemStripped then it shows this:
Framework
Content
Slideshow
Which means (in my head at least ;-)) that for each span that is inside the body it should find one of these subItemStripped and where it finds a match it should add the class hello but this is not happening.
Actually, nothing is happening.
When I change this line:
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
to
$('body').find('span:contains("Framework")').addClass('HELLO');
It works nicely. So am I putting the variable subItemStripped wrongly in there or has it something to do with the .each() function.
I tried the below things to make it work
With the above code I tried a couple of variations before I came here:
$('body').find('span:contains(subItemStripped)').addClass('HELLO');
$('body').find("span:contains('subItemStripped')").addClass('HELLO');
I also tried it with completely different sets of code I gathered from other SO posts but none of those worked. Why I don't know.
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).addClass("hello");
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).css("font-size", "6px");
Why do I need this
I know I don't have to explain why I need this but it could be useful in coming up with other great ideas if the above is not feasible.
I have a webpage and on that page is a menu filled with products that a user can download if he/she has access.
Each menu item has a span with the title in it. Those titles are built up like: Framework Content Slideshow
On this same page is also a component that shows all the users subscriptions.
With the above code, I look to all the subscriptions of the user. Which returns
CompanyName Framework CompanyName Content CompanyName Slideshow
Then I Strip .substring(12) all the parts that I know are not present inside the menu. Which leaves me with Framework Content Slideshow
At this point, I know that some menu titles and the stripped item are the same and for every match, I want to add a class upon which I can then add some CSS or whatnot.
Hopefully, the question is clear and thanks to everyone in advance for helping me out.
#gaetanoM You are completely right. Right after I posted the question I came on this site:
jQuery contains() with a variable syntax
And found the answer which is the same as you are saying!
$('body').find("span:contains('" + subItemStripped + "')").addClass('HELLO');
Thanks so much!
#gaetanoM Can you make your comment in an answer? Then I can select it as the accepted answer. I am answering this question now just to make sure it has an answer. As people get punished for asking questions that don't get answers.
I want to make some jQuery actions on a html page :
The page is : http://download.eclipse.org/jetty/stable-9/xref/org/eclipse/jetty/embedded/HelloHandler.html
my aim is to remove the numbers (represented by the class jxr_linenumber)
What I've tried is :
$(".jxr_linenumber").text("")
However google chrome said : Uncaught TypeError: $(...).text is not a function(…)!!
Even more ... when I tried this command $('a'), it returns with one element only ... however the page contains several "a" tags
Here is two screenshots to explain the issue and my goal
The screenshot of the actual page :
My goal = remove the numbers using jquery ... the numbers are in the red box ....
So the result should be as follow :
Any help ? thanks
The .remove() should do the trick, but my guess is that its causing some issues since jquery isnt available on the page, and injecting it after, might be why its only removing one at a time.
You could use plain javascript like this:
var elements = document.getElementsByClassName("jxr_linenumber");
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
Try the Jquery function .remove( ) instead. Something like
$(".jxr_linenumber").remove( );
You use...
$(".jxr_linenumber").html("")
but in the end, the best answer is to use $(".jxr_linenumber").remove() since you don't want empty 'a' tags on your page. That's just bad design.
I wanna use this carousel :
[http://codepen.io/ScottMarshall/pen/FwxpH][1] on a forum, but when I repeat the code, it doesn't work well.
Can you help me ?
here, it's working, but the second container doesn't want and I don't want to change anything in the HTML...
JSFiddle
Here is working fiddle: http://jsfiddle.net/1x6251wc/2/
This is the key change to get the context "Front" instead of all of them:
var $front = $this.parent().find(".Front");
It's a poorly written plugin, but this change should get it to work across multiple instances.
I have an Problem by showing and hiding consecutively a tooltip.
Have a look at this snippet:http://jsfiddle.net/r7GCJ/
the input-field shows an tooltip if the number in the tooltip is even.
If you fast triple-click the backspace-key (which means '6' is the last char), you will not see the bootstrap tooltip, even though the number is even.
(Maybe you need one or two attempts)
Anyone an idea how to fix this problem, or whats the problem?
PS: In my 'real code' I have to look up via AJAX if the number is already in a DB, and if so I show the tooltip.
That is a curious issue. I have found a solution, although I'll admit it's a bit kludgy. Instead of hiding it, I'm destroying it and recreating it whenever I want to show it. I can't reproduce the issue in fiddle anymore.
$('#fooInput').keyup(function (e) {
var $foo = $(e.target);
if (parseInt($foo.val()) % 2 === 0) {
// create the tooltip
$foo.tooltip({
trigger: 'manual',
title: 'gerade Zahl!',
placement: 'bottom'
});
$foo.tooltip('show');
} else {
$foo.tooltip('destroy');
}
});
FIDDLE
Very interesting thing :D. I don't know why but this is non common situation. You can solve this by writing <input id="fooInput" type="text" /> instead of your code with initial value. You can add another tooltip to say that only numbers are allowed.
I have some jQuery code, which attempts to show the first 6 divs on page load and hide all of the others. It is littered with errors, but ideally I am trying to create a function that shows the next six divs on an event, ultimately when the user scrolls to the bottom. I know my code is not great, but I have done my best to make it as easy to follow as possible.
The code is here, and any help would be much appreciated! Thanks in advance
I think this is what you wanted:
http://jsfiddle.net/gRzPF/8/
If I understand correctly every time you get to the bottom of the window you want to show the next 6 divs. My edit achieves that.
You just needed to use semi-colons in your for statement, wrap a function around it and move your constraintNumber variable inside that function.
replace
for (i = contentNumber, i < constraintNumber, i++;) {
by
for (i = contentNumber; i < constraintNumber; i++) {
in javascript (and C), ; must separate the 3 elements of a for statement
in jsfiddle, you have 'JSLint' button to verify code error !! Use it !
Here http://jsfiddle.net/gRzPF/7/ I modified your code, now it seems to work :)