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.
Related
and thank you for reading this question. Let me preface this by saying that I am not a programmer and only have tried to learn javascript to make my own websites look and function the way I want.
I have a page with several hidden divs. I'm using elements with the same class and different targets to trigger this Jquery
jQuery(function () {
jQuery('.nav').click(function () {
var index = $(this).index(),
newTarget = jQuery('.targetDiv').eq(index);
jQuery('.targetDiv').not(newTarget).slideUp('fast')
newTarget.delay('fast').slideToggle('fast')
return false;
})
});
So my ".targetDiv"s look like this:
<div class=".targetDiv" style="display:none">div1</div>
<div class=".targetDiv" style="display:none">div2</div>
<div class=".targetDiv" style="display:none">div3</div>
And the "navigation" would look something like this
link1
link2
link3
This is not my code, and I got it from here: http://forum.jquery.com/topic/slidetoggle-multiple-divs-31-5-2013
It works exactly as it is supposed to and I have no complaints about that. When you click on a link, the corresponding div toggles, but when you click the same div again right afterwards, it toggles again and slides up (which is how the code is written). I want to stop that from happening, and since I am new to Javascript and Jquery I can't figure out how to do it. My non programmer mind assumes that there should be some kind of if else clause, where you would say:
if .targetDiv is :visible, then do not toggle newTarget. However when I tried to do that, it did not work.
if($(".targetDiv").is(":hidden")) { jQuery(function () {
jQuery('.nav').click(function () {
var index = $(this).index(),
newTarget = jQuery('.targetDiv').eq(index);
jQuery('.targetDiv').not(newTarget).slideUp('fast')
newTarget.delay('fast').slideToggle('fast')
return false;
})
});}
else {alert("already open")}
I don't know how else I should handle this, but it must be possible and I am probably just thinking of how to achieve what I want in entirely the wrong way. I understand very little about javascript, but I am not asking for someone to write this for me, I'd rather have someone tell me what it is that I am doing that is incorrect, then explain what it is I should be trying to do. Then I can use google to search for the way to achieve that.
Again, thank you for taking the time to read this and hopefully I've been detailed enough for some answers.
You just need to wrap the two 'slide' lines in the if statement, like so:
if (!newTarget.is(':visible'))
{
jQuery('.targetDiv').not(newTarget).slideUp('fast');
newTarget.delay('fast').slideToggle('fast');
}
You may also want to fix a few issues with the html, e.g. take the periods out of your class names. When querying for DOM elements, the "." means, "Find the things that have a class called _[whatever follows the dot]". Don't put dots in the classes themselves.
You may also want to take out the href attributes of the <a> tags. They aren't necessary.
Here's a working JSFiddle. Cheers!
Change of plans, can someone please advice me on adding a function with hidden divs for each column that blends one to another when a user presses the button?
I used a function but at the end it only caused more gaps and more complications making the page and its other elements a mess, then I found another function in a jsfiddle that
would be great to use instead and it seems to be much simpler.
Can someone please help me replace the current function for the other function for the columns?
**This function would be ideal to replace the current function, giving the slide
effect with hidden column extra divs (a,b,c) all on one column
(marked as Column1) for example**
**Instead of the current function that expands the column by pressing "more",
replace it by having all on one column just like a picture
slideshow ----> the column has (divbox) slides with different content on it**
Ideal function for each column
JSFiddle
Current Function with the 4 columns
JSFiddle
**Please I beg you I really need help, I would deeply appreciate it.Please, I know there are talented people here who can do this in a minute, I wish I knew this but no matter how I try and trust me I really tried , can't learn it, it doesn't go through :(
Please
Angie, I hope this is what you are looking for.
Modified jsfiddle
function slideonlyone(thechosenone) {
$('div[name|=box]').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
} else {
$(this).slideUp(600);
}
});
}
Just basically placed your articles in the slides. You will have to adjust the img urls and work on CSS styling.
Hope that works out for you.
I'm banging my head against the wall using the highlight feature, for which i use quite often.
In the console when I run:
$('.2').effect('highlight', {}, 3000);
It returns:
[…]
Which is the element i'd like to highlight. However it doesn't highlight it and I get no errors.
Funny story, because when this it works; but what I like about highlight, it natively has a duration it removes the highlight.
$(".2").css({ backgroundColor: "#FFFF88" });
Any ideas are welcome!
http://jsfiddle.net/XxyjE/1/
What else do you have setting the background color on that element? On those elements above it?
E.g. I'm noticing this issue occurs with the dark colors on Twitter Bootstrap's .table-striped class. It looks like they are coloring the TDs, which means you can highlight the dark TRs until you're blue in the face, and you still aren't going to see a color change.
Try a:
$('.2 *').effect('highlight', {}, 3000)
if you want to confirm if that's the issue or not. Then try to find a more specific selector from there.
$.fn.highlight = function(){
this.css("background", "#ffff99")
var self = this;
setTimeout(function(){
self.css("background", "inherit");
}, 500);
};
This ia an old question I know, but I encountered a similar problem just recently, and wanted to share the fix for any others who are having similar issues.
The problem was that the element I was trying to highlight had the transition CSS property set, and this apparently interfered with the highlight effect (making it completely invisible).
I had a style="background:white;" attached to my element. When I removed that, the highlight worked.
Community!
I really need your help now. I wanted to make an accordion in which I can open all Tabs. By searching the Web I found a good solution:
http://jsbin.com/eqape/968/edit
The first Div-Container of each Section is the one who closes/opens up. I want to define 3 div-Containers. One at the top (always displayed), one in the center (with the toggle-functionality) and one on the bottom (always displayed). Is this possible ? And how can I do this ? I'm new to jQuery so this drives me crazy.
Thank you, guys!
I think you're trying too hard. If I understand correctly, you simply want any .top to toggle the adjacent .content. Since I'm more familiar working in JSFiddle, I've set the code up there:
http://jsfiddle.net/SuyS2/1/
$('.top').click(function () {
$(this).next('.content').slideToggle();
});
Let me know if I'm missing something.
UPDATE:
If you had wanted the sections and the inner content to toggle, you could do this:
http://jsfiddle.net/SuyS2/5/
$('.section-heading').click(function () {
$(this).next('.section-wrapper').slideToggle();
});
$('.top').click(function () {
$(this).next('.content').slideToggle();
});
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.