I am having issue regarding the showing tooltip on the ajax loaded content, I am adding the tooltip to ul with a function, and trying to bind it with mouse over event as it works.
str += '<li><a href="#" class="tooltip-1" data-placement="top" data-original-title="' + _icon_list[2] + ':' + obj[_icon_list[1]] + '">' +
'<i class="' + _icon_list[0] + '"></i></a></li>';
after adding the data I am trying to bind it
$('a.tooltip-1').on({
"mouseover": function() {
tool_tip();
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
function tool_tip() {
$('[data-toggle="tooltip"]').tooltip()
}
it's getting callback but not showing the tooltip? here is the link of theme which has the tooltip and i am using it with my dynamic content.
http://www.soaptheme.net/wordpress/citytours/shortcodes/
Where is your ajax function?
Just add a title="your tooltip text here" in your href and in you ajax callback call this command.
$('a.tooltip-1').tooltip( );
Related
So i'd like to zoom on my dynamically displayed image when I click on it. I'm using cordova and materializecss. I'd like to use the materialbox function. (materialbox here) I've tried many ways but didn't manage to figure it out. Here's my simplified code :
Displaying images :
function createHtmlGall(imgTab) {
let htmlGall = ""
imgTab.forEach(function(element) {
htmlGall += '<div class="col s12 m4 l3">'
htmlGall += '<img src="' + element + '" class="materialbox responsive-img card">'
htmlGall += '</div>'
})
$( "#imagesDiv" ).html(htmlGall)
}
trying to set a zoom effect on click :
$(document).on( "click", ".materialbox").materialbox()
I'd like to use jquery if possible.
I am new at jQuery/javascript. I tried some suggestions I found on this forum but so far it did not help.
THis is what I am trying:
When loading categories from a database ( using ajax) this HTML statement is added for each category:
$("#Links ul").append('<li id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');
Using F12 I see that the lines are correctly added.
E.g. <li id="cat3" data-catid="3">Seafood </li>
Next step is selecting a category in the screen and retrieve the products of this category using the value set for data-catid.
I have been told that I could "this.id" but so far no luck. Displaying the value of this.id with alert returns the correct value but for some reason I can't use it.
When I add (#cat3).attr(“data-catid”) in the code it works. But different options like these did not work:
("#cat"+ this.id).attr(“data-catid”)
(this).attr(“data-catid”)
var x = $(this).id();
var rest = x.substr(4, 1);
Everything with "this" creates error : Uncaught TypeError: ("#cat" + this.id).attr is not a function...
Trying to display any of these options does not give any output (not even a popup when I set an alert)
Any help would be appreciated!
You are loading dynamic values. Please use Event Delegation. And the $.one() binds the event once.
You need to add this in your ready function.
$(document).ready(function () {
$("#Links ul").one("click", ".cat", function(){
alert($(this).data('catid'))
});
});
To get the IDs of the elements, use $(this).attr("id") or $(this).prop("id") (latest jQuery) instead of this.id, as sometimes, it might return the jQuery object.
As you are creating elements like
$("#Links ul").append('<li class="cat" id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');
create elements using jQuery
$("#Links ul").append( $('<li></li>', {
class: "cat",
id: "cat" + i,
data-catid: i,
text: categorie_tekst[1]
});
As you are creating elements dynamically use Event Delegation. You have to use .on() using delegated-events approach.
$(document).ready(function () {
$("#Links ul").on(event, ".cat", function(){
alert($(this).data('catid'))
});
});
My jQuery code runs when I click a link. However, if I click the link multiple times, the code will repeat itself and appear under the previous code, which I don't want it to do.
Also, if I click the "close" option, and reopen it, it will have repeated. How do I stop it from doing this? Here is the code, by the way:
$("#pop").click(function() {
$("#overlay_form").fadeIn(1000);
$("#statsStr").append('<br />' + strOne).fadeIn(1000);
$("#statsCun").append('<br />' + cunOne).fadeIn(1000);
$("#statsAgil").append('<br />' + agilOne).fadeIn(1000);
$("#statsWis").append('<br />' + wisOne).fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
$("#statsStr").fadeOut("slow");
$("#statsCun").fadeOut("slow");
$("#statsAgil").fadeOut("slow");
$("#statsWis").fadeOut("slow");
});
Thanks for the help!
EDIT: I have taken the suggestion to change my code to this:
// append the strings only once on load
$(function() {
$("#statsStr").append('<br />' + strOne);
$("#statsCun").append('<br />' + cunOne);
$("#statsAgil").append('<br />' + agilOne);
$("#statsWis").append('<br />' + wisOne);
});
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
And while it works great, there is one problem. The game I am making requires the "#pop" function to update every once in a while to display what your "stats" are. Is there any way to refresh the code so that it will display the updated variables?
EDIT try this for your solution:
//call this method whenever you want to update your stats
//passing in the variables
var updateStats = function(str, cun, agil, wis) {
$("#statsStr").html('<br />' + str);
$("#statsCun").html('<br />' + cun);
$("#statsAgil").html('<br />' + agil);
$("#statsWis").html('<br />' + wis);
};
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
$(document).ready(function() {
// assuming you have set these variables in the current scope.
updateStats(strOne, cunOne, agilOne, wisOne);
});
Consider using one() instead, which only triggers the event once.
It sounds like what you really want to do is show the #overlay_form on pop and hide it on close.
You could add the html to the page when it is rendered but use display none. That way you can simply show / hide when you click pop or close.
See if this example has the behavior you would like.
http://jsfiddle.net/qh4eN/1/
<style>
#overlay_form {
display: none;
}
</style>
<div>
<span id="pop">pop</span>
<span id="close">close</span>
<div id="overlay_form">
<div id="statsStr">statsStr</div>
<div id="statsCun">statsCun</div>
<div id="statsAgil">statsAgil</div>
<div id="statsWis">statsWis</div>
</div>
</div>
<script>
var strOne = "strength";
var cunOne = "constitution";
var agilOne = "agility";
var wisOne = "wisdom";
$("#pop").click(function() {
$("#statsStr").text(strOne);
$("#statsCun").text(cunOne);
$("#statsAgil").text(agilOne);
$("#statsWis").text(wisOne);
$("#overlay_form").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
});
</script>
Trying to use the .append to add a second level (breadcrumb) to a tag dynamically inserted into a page.
Here is the current behavior, when I click on a genre in the menu the books appear in the dynamic div. It then shows "recommend in" followed by the level 1 span + the name of the genre.
When I click on a subgenre, the genre is removed completely and the subgenre added in with the "/"
So instead of seeing "Recommended In Genre / Subgenre"
I'm just getting "Recommended in / Subgenre"
I think something in this function is wiping it. Any hints you could give me would be great.
$("#genreList a").click( function(event){
$("#genreList a").removeClass('current');
$(this).addClass('current');
event.preventDefault();
var self = $(this);
if ( self.attr('data-link') !== undefined ) {
slideGenreList(self.attr('data-link'), self.attr('data-title'), $('#' + self.attr('data-link')));
}
// Draw and display the selected genre or the regular page if all genres is selected
if ( self.attr('data-link') == 'all_genres' ) {
$('#genreContainer .dynamic').hide();
$('#genreContainer .default').fadeIn();
//$('.breadcrumb').html('Genres');
}
else {
$('#genreContainer .default').hide();
$('#genreContainer .dynamic').html( '<h3 class="no-margin-top breadcrumb">Recommended in' + ' See All</h3><div class="genre no-margin-top" data-context="/genreList/' + self.attr('data-genreId') + '"></div>').fadeIn();
if (self.parents('ul#all_genres').length > 0) {
$('.breadcrumb .level1').remove();
$('.breadcrumb').append('<span class="level1 black"> ' + self.attr('data-title') + '</span>');
} else {
$('.breadcrumb .level2').remove();
$('.breadcrumb').append('<span class="level2 black"> / ' + self.attr('data-title') + '</span>');
}
// Rig any genre displays
$('#genreContainer .dynamic').find(".genre").each( function(){
new Genre(this);
});
}
});
.html() removes everything in the div and writes new content to the recieving div.
. Append adds to the content.
So use append() or preprend() instead of HTML()
Im using a jquery snippet to pull in a wordpress rss feed to my site. Im new to coding and pulled this together with some luck.
my question is how can I pass an href class="iframe" for code that looks like this?
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
thank you!
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"100%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#fff", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
Just add the class attribute to the string
rssoutput+="<li><a href='" + thefeeds[i].link + "' class='iframe'>" + thefeeds[i].title + "</a></li>"
EDIT
where the ID of your iframe is myFrame
rssoutput += "<li><a href='" + thefeeds[i].link + "' class='iframe' target='myFrame'>" + thefeeds[i].title + "</a></li>"
Learn to do the less "stringy" code (the code where everything is done with string manipulation), but to use structured objects. If you use jQuery, you can as well use jquery-mochikit-tags project from github.com (finding it left as an exercise to the reader :-) ) and create html programmatically and using jQuery constructs like append or appendTo like this:
$.LI(
$.A(
{'href': thefeeds[i].link, 'class': 'iframe'},
thefeeds[i].title
)
).appendTo('#containerOfRssOutput');