I have a site, which uses paging.
I use the following plugin for tooltips: http://plugins.jquery.com/project/tooltip
I use AJAX to update a div container. This is the code:
$(".page-number").live("click", function ()
{
var page = parseInt($(this).html());
var progressbarValue = ((page / $("#NumberOfPages").val()) * 100);
var catId = $("#CategoryID").val();
$.ajax({
url: '#Url.Action("QuestionList")',
data: { "categoryId": catId, "page": page },
success: function (data) {
$("#question-list").html(data);
$("#progressbar").progressbar("value", progressbarValue);
$("#progresstext").html("<p>" + Math.round(progressbarValue) + "% gennemgået</p>");
EnableDisableToolTip();
}
});
});
This is the function to enable/disable tooltips:
<script type="text/javascript">
function EnableDisableToolTip() {
var help_text = $("#helptext_checkbox").is(':checked:');
if (help_text) {
alert("true");
$(".tooltip").qtip("enable")
}
else if (!help_text) {
alert("false");
$(".tooltip").qtip("disable");
}
}
</script>
When i load a new page, i cannot see any tooltips when i hover the mouse over an element with class="tooltip". Also, when i view the source code, the dynamically added code isnt there. It works on the first page, and the source code with class="tooltip" is there. But not with the dynamic stuff.
How can i solve this issue?
[EDIT]
The tooltip code:
$(".tooltip").each(function()
{
$(this).qtip({
show: 'mouseover',
hide: 'mouseout',
style: {
name: 'light', // Inherit from preset style
width: {
min: 0,
max: 250
},
},
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomLeft'
},
adjust: {
screen: true,
scroll: false
}
}
});
});
Viewing the page source shows what was delivered to the client when the page was originally requested. It does not show the current DOM.
When you add the new content to the page, it does not know what has been run. You need to rescan the page for tooltips when the content is added.
In EnableDisableToolTip there is a condition to enable/disable the tooltip ($("#helptext_checkbox").is(':checked:')). Are you sure it is checked when you make a ajax call? I think it is not checked due to which the tooltip is not enabled.
Related
OK, so I'm trying to create a template that will be used for providing information for multiple scenarios in the same format. To do this, I have a table set up that will show the information, and when you click on one of the cells ('s specifically), it will place the inner HTML into a text area that comes up in a jQuery modal dialog box. This text area is then turned into a TinyMCE instance for editing (using Tiny MCE javascript version 4.3.2). However, with my current code, this only works the first time. After that, no matter what cell is clicked, I get a popup that shows as empty, though it has the proper HTML inside when I run inspect element.
I have seen similar things in previous questions, but one of them only wanted to use jQuery to have the popup work, which I've done, and the other was not using the jQuery version, and the solution code did not work with this version, but it seems that it simply closed out the instance when the dialog was closed so that it could be redone on the next text area. Also, I'm using a custom CSS for looks, but the jQuery Start scheme is the closest available scheme, if you want it to look pretty while you troubleshoot.
Edit: To clarify, I am not trying to open multiple runs simultaneously, they should open one at a time.
Code:
<head>
<script src="assetts/jquery-1.10.2.js"></script>
<script src="assetts/jquery-ui.min.js"></script>
<script src="tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
}
}
});
})
$('#editmodal-diag').append("<textarea id=\"editmodal-diag-text\">" + currentHTML + "</textarea>");
$('#editmodal-diag-text').empty;
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
});
</script>
</head>
<body>
<table width="75%>
<tr>
<th>Header text</th>
</tr>
<tr>
<td>Information panel 1</td>
<td>Information panel 2</td>
</tr>
</table>
</body>
Thanks in advance.
After more digging, I found TinyMCE 4 - remove() or destroy(), in which I found that the tinymce control needed to be removed with:
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
to completely remove the current editor, before being reinitialized by:
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link'});
This only needed to be done after the first box came up. I used a Boolean variable to check this. Complete function:
var tinyRun = false;
$(window).load(function () {
setTimeout(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"><textarea id=\"editmodal-diag-text\"></textarea></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
}
}
});
})
setTimeout(function () {
$('#editmodal-diag-text').text(currentHTML);
if (!tinyRun) {
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
tinyRun = true;
}
else {
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
}
}, 250);
});
}, 250);
}
Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);
I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E
I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.
$(function () {
$(document).tooltip({
track: false,
show: {
effect: "slideDown",
delay: 20
},
hide: {
effect: "explode",
delay: 5
}
});
})
Documentation:
http://api.jqueryui.com/tooltip/#option-position
Thanks,
Will
jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeIn(250);
},
function () {
$(this).fadeOut("250", function () {
$(this).remove();
})
}
);
}
This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:
/*hide: {
effect: "explode",
delay: 5
},*/
You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:
content: function () {
return $(this).prop('title');
},
See here for a fiddle
Using JCarousel I currently have a carousel inside another carousel, which I can trigger to start playing slides by clicking on a play button that I created on the outside carousel. These are all loaded dynamically.
I'd like to have the inner carousel stop animating and go back to it's original loaded position when I click to change the slide of the outer carousel.
Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
auto: 0,
wrap: 'circular',
scroll: 1,
initCallback: carousel_initCallBack,
itemVisibleInCallback: {
onBeforeAnimation: gallerycarousel_itemfirst
}
// Info Box
$('.info').click(function() {
var itemid = $(this).attr('id').substring(5);
$.ajax({
url: 'php/get_case_studies.php?item=' + itemid,
dataType: 'json',
success: function(data) {
var infobox = $('#box_info' + data.data[0].id)
infobox.html('');
var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div>';
infobox.append(content);
$('.box_info').animate({left: '0px'}, 200);
}
});
});
function carousel_initCallBack(carousel) {
carousel.clip.hover(function() {
$('.gallery_control').stop().animate({"top": "454px"}, 200);
carousel.stopAuto();
}, function() {
$('.gallery_control').stop().animate({"top": "524px"}, 200);
$('.box_info').animate({left: '-302px'}, 200 );
carousel.startAuto();
});
$('#gallerycarousel_controls .btn_right').click(function() {
carousel.next();
return false;
});
$('#gallerycarousel_controls .btn_left').click(function() {
carousel.prev();
return false;
});
$('.grid').click(function() {
$('.gallery_control').animate({"top": "524px"}, 200);
$('#grid_view').fadeIn('slow');
carousel.stopAuto();
$('#grid_view').mouseleave(function() {
$(this).fadeOut('slow');
carousel.startAuto();
});
});
$('#carousel_slides .btn_item').click(function() {
carousel.scroll($.jcarousel.intval($(this).attr('id')));
$('#grid_view').fadeOut('slow');
$('.gallery_control').animate({"top": "454px"}, 200);
return false;
});
//this is the play button which generates and starts the inner carousel
$('.play').click(function() {
var itemid = $(this).attr('id').substring(5);
$('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
$('#int_carousel' + itemid).jcarousel({
auto: 3,
wrap: 'circular',
scroll: 1
});
});
});
}
I have tried adding a click function within the 'carousel_initCallBack' function to see if I can control the inner carousel like this:
$('#gallerycarousel_controls .btn_right').click(function() {
$('#int_carousel' + itemid).stopAuto();
});
The above doesn't work as I have tried and this would probably not bring the inner carousel back to the original position of the slide.
I have went on multiple different forums and have been searching everywhere I could on the internet and I am still not able to find any solid help or assistance. I am in dire need of assistance on this as I ran out of options. Please if someone can help me, I'd appreciate it so much. I am still new to web development and need guidance.