I have a jcarousel with 3 elements inside with unique id (1,2,3).
On load, the jcarouselPagination items work perfectly and they got the right targeter ("data-item=1,2,3").
But when I resize my screen to small or tiny media, the jcarouselPagination items don't target correctly. They start at 2 resulting in ("data-item=2,3,4").
Here is my jquery part where pagination items are created:
if ($(".ce_jcarousel").length == 0) {
return;
}
$('.ce_jcarousel').jcarousel();
$('.cejcarousel-pagination')
.on('cejcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('cejcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination({
'item': function (page, carouselItems) {
return '<a data-item="'+ page +'" class="slider_ce_text ' + (page == 1 ? "active" : "") + '" href="#' + page + '"><div class="grey_dot"></div></a>';
}
}
);
I only call this function on page load, never on resize, so i have trouble getting what is happening!
Thanks!
Ok, so i didn t really figured out why it didn t work out or why my carousel kept generating pagination items on resize..
But it seems that I had to unbind the resize.jcarousel function
so here is my new (and working) code if anyone is interested!
if ($(".ce_jcarousel").length == 0) {
return;
}
jcarousel.jcarousel({
wrap: 'circular'
});
$(window).unbind('resize.jcarousel');
$('.cejcarousel-pagination')
.on('jcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination({
perPage: 1,
item: function (page) {
return '<a data-item="' + page + '" class="slider_ce_text" href="#' + page + '"><div class="grey_dot"></div></a>';
},
});
window.onload = $("[data-item = '1']").addClass("active");
Not sure that it's the absolute answer but it works!
Related
I am using the jquery ui tooltip extension. Given a link (level 1) of class "tooltips" it generates a tooltip whose content is a link (level 2), and since that link (level 2) also has class tooltips, it generates another tooltip (level 3) whose content is a link whose text is link= and the href of the original level 1 link.
So far so good. That much I want. (the original hrefs are very long, so I don't want them to appear in level 2)
What I want to do is not have that level 3 link generate another tooltip. How can I stop propagation at that level. I tried a variety of selectors, but nothing worked.
// modified from https://stackoverflow.com/a/15014759https://stackoverflow.com/a/15014759
$( document ).tooltip({
show: null, // null = show immediately
items: '.tooltips',
tooltipClass: 'tooltipstyle',
content: function () {
return "<a class='tooltips' target='_blank' href='" + $(this).prop('href')+ "' title='link=" + $(this).prop('href') + "' >" + $(this).prop('title') + "</a>" ;
},
hide: {
effect: "", // fadeOut
},
open: function( event, ui ) {
ui.tooltip.animate({ left: ui.tooltip.position().left - 25 }, "slow" );
},
close: function( event, ui ) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(1600, 3);
//.fadeIn("slow"); // doesn't work because of stop()
},
function () {
$(this).fadeOut("1600", function(){ $(this).remove(); })
}
);
}
});
I have the this jsfiddle. I am trying to create an autocomplete with images and when the user selects an image then I want to capture that event but for some reason it doesn't work with images:
$("#input").autocomplete({
//source: tags,
source: images,
minLength: 1,
delay: 0,
open: function(){
$('.ui-menu .ui-menu-item a').css('word-wrap','break-word');
},
close: function () { $('.ui-autocomplete').show() },
focus: function(event, ui) {
return false;
},
select: function(event, ui){
alert("here there");
return false;
}
}).data("uiAutocomplete")._renderItem = function(ul, item){
//return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a>hi there</a>').appendTo(ul);
return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);
};
If I instead return just plain text (just uncomment that part in the above code) I can capture the select event but it doesn't work with images? I have also set the z-index with no luck.
EDIT: I corrected the jsfiddle link
You need some text inside the list:
return $('<li style="margin-bottom:2px;">'+item.label+'</li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);
Then, You can hide the text by setting:
li {
font-size: 0;
}
and adjust the .ui-state-active by setting:
a {
display: block;
}
I would advise the following:
.data("uiAutocomplete")._renderItem = function(ul, item) {
return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<div><img src="' + item.label + '" style="width:215px;"/></div>').appendTo(ul);
});
Since you're using <a>, it's click event is bubbling up first and this does not allow the click to target the <li> and thus not trigger select.
Example using DIV: https://jsfiddle.net/Twisty/napvj856/28/
I have a problem with the bootstrap Popover. It works sometime but other times it doesn't. I use it to generate a popover with a users information when a visitor hovers over the users name. The page is generated by ajax so at first I thought that it simply was an issue of content being loaded after but the issue is that it works sometimes.
$(document).on('mouseenter', '.postusername', function(e){
var userid = this.parentElement.parentElement.children[0].innerHTML;
var te = this;
if(userid)
{
$.get('/Requests/getuinfo.php', {id : userid})
.done(function(data){
var uinfo = JSON.parse(data);
boo = uinfo;
$(te).popover({
html : true,
template : '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
content : '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name
+ '</div>',
placement: 'auto'
});
$(te).popover('show');
});
}
});
$(document).on('mouseleave', '.postusername', function(e){
$(this).popover('hide');
});
That is the Javascript I used.
As you've found, the problem was the fact that you were trying to create a new popover for something when it had already been done. Removing the popover after hiding it has fixed that problem.
However, this should fix the problem without removing it, and will mean you will also only get user information once per user...
var userids = [];
$(document).on('mouseenter', '.postusername', function(e){
var userid = this.parentElement.parentElement.children[0].innerHTML;
var te = this;
if(userid)
{
if (userids.indexOf(userid) === -1) {
$.get('/Requests/getuinfo.php', {id : userid})
.done(function(data){
var uinfo = JSON.parse(data);
boo = uinfo;
$(te).popover({
html : true,
template : '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
content : '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name
+ '</div>',
placement: 'auto'
});
$(te).popover('show');
userids.push(userid);
});
}
else {
$(te).popover('show');
}
}
});
$(document).on('mouseleave', '.postusername', function(e){
$(this).popover('hide');
});
It keeps an array of the user ids that you've got info for, and only gets the info if you've not already done it.
Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.
I have tabs within a dynamic page. The tabs works great when pressed but I would like to add a swipe function to it so that users can also swipe to next tab.
Here is my attempt of trying to make the swipe function work
function goToMatchDetailPage(matchHome, matchAway){
first_part_id = matchHome.substring(0,2);
sec_part_id = matchAway.substring(0,2);
var id = first_part_id.concat(sec_part_id);
//create the html template
var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
+ matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
+ "<div data-role='navbar'>"
+ "<ul>"
+ "<li><a href='#fragment-1'>" + matchHome + "</a></li>"
+ "<li><a href='#fragment-2'>" + matchAway + "</a></li>"
+ "</ul>"
+ "</div>"
+ "<div id='fragment-1'>"
+ "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
+ "</div>"
+ "<div id='fragment-2'>"
+ "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
+ "</div></div></div>");
//append the new page to the page contanier
matchPage.appendTo($.mobile.pageContainer);
//go to the newly created page
$.mobile.changePage(matchPage);
Here is the ppart that doesn't work
$(function(){
// Bind the swipeleftHandler callback function to the swipe event on div.box
$( "div" ).on( "swipeleft", swipeleftHandler );
// Callback function references the event target and adds the 'swipeleft' class to it
function swipeleftHandler( event ){
//go to the newly created page
$.mobile.changePage('#fragment-2');
}
});
}
!
Try using event delegation:
Because fragment-1 does not exist at the time you are creating the handler, you assign the handler to the document and delegate it to any child elements called fragment-1 that exist now or will exist in the future.
To make it more generic, you can assign classes to the div and delegate to the class instead of an id...
UPDATE
You can't use changepage to go between tabs, instead use the tabs widget active property(http://api.jqueryui.com/tabs/#option-active):
$(document).on("pagecreate", "#page1", function () {
$("#btngo").on("click", function(){
goToMatchDetailPage('Liverpool', 'Southhampton');
});
$(document).on("swipeleft", "#fragment-1", function(){
$(this).parents("div [data-role=tabs]").tabs( "option", "active", 1 );
} );
$(document).on("swiperight", "#fragment-2", function(){
$(this).parents("div [data-role=tabs]").tabs( "option", "active", 0 );
} );
});
Here is a DEMO
The swipe code is assigned to the document and then delegated to the dynamic div. When you swipe on a tab div, we find its parent that is the tab widget container and then set its active tab option to change tabs.
try this simple code
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I'm easier than the others.. It's not the whole solution, but you can get my point.
Option 1
$(document).on("swipeleft", '#page1', function () {
$('#fragment-2').trigger('click');
});
Option 2
$(document).on("swipeleft", '#page1', function () {
$(this).find("div [data-role=tabs]").tabs( "option", "active", 1 );
});
Not sure about which one is better thought :)