I created a jquery cycle slideshow with next/prev buttons, but in addition to that, I want the slideshow to advance when the image is clicked. I don't know javascript well enough yet to code it myself. Is this possible? Here's what I have so far:
$('#illustration .slides').cycle({
speed: 1,
timeout: 0,
prev: '#illustration .prev',
next: '#illustration .next',
pager: '#illustration-thumbs',
pagerAnchorBuilder: function(idx, slide) {
return '#illustration-thumbs li:eq(' + (idx) + ') a';
}
});
$('#illustration img').cycle('next');
you can use your container for the images as a next button if you add swap your next code you have at the moment to this
next: '#illustration .next, #container_div_name',
Hopefully that should achieve what you are after
Related
I need an on click event on image overlays.
According to the documentation Leaflet documentation imageOverlay (as far as I understand it correctly)
I can use the interactivity option to receive mouse events.
If true, the image overlay will emit mouse events when clicked or hovered.
I thought it would work something like that:
let newOverlay = L.imageOverlay(imageUrl, imageBounds, {opacity:0.5, interactive: true});
newOverlay.on('click', function(d) {alert('I have been clicked ' # this)});
My final goal is to get the pixel coordinates of the click event, relative to the image on which the click event happened.
Can someone spot my error or is there another approach?
I tried for hours, but I did not succeed :(
I am thankful for every help.
Kind regards
Niklas
Just a little mistake
Change # to + so you will get alert message: I have been clicked [object Object]
alert('I have been clicked ' # this)
to
alert('I have been clicked ' + this)
let newOverlay = L.imageOverlay(imageUrl, imageBounds, {opacity:0.5, interactive: true});
newOverlay.on('click', function(d) {alert('I have been clicked ' + this)});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
When you have a responsive table in Bootstrap 3, when you are below the 767px break point, the dropdown-menus are not accessible because they add content and the content at that size has an overflow:auto or something, so depending on the location of the menu -- if the table itself doesn't have enough height -- the menu shows up and people won't see it. Plus scrollbars are not visible until you scroll on touch.
As a work around, which I need help with, I fudged together another toggle that doesn't close when clicked off and adds a class to the parent (to add height) when the menu is toggled (you must size the output http://jsbin.com/APuCOwa/3 down below 767px) to see this. The problem is that when the user clicks another toggle while one is open the class added to the parent is removed, tried toggleClass and this thing (which is the same) and it's the same result.
Essentially, when you click a toggle, it opens, adds height to the parent "table-responsive" div wrapper, and when you toggle off it undoes that, so far that's good, but if you click another menu while one is open, that is where I can't figure it out. Since they are all isolated menus, this is confusing to me.
I am not so hot with jQuery.
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
BTW: Firefox, at least mine, has issues with jsbin, Chrome does not.
Close all on click and only (re)open it when it wasn't open only:
$(document).ready(function() {
$('.table-responsive .dropdown-toggle').click(function(event){
var open = $(this).hasClass('open');
$('.table-responsive .dropdown-menu').hide('fast');
$(".table-responsive").removeClass("res-drop");
$('.table-responsive .dropdown-toggle').removeClass('open');
if(!open)
{
$(this).siblings('.dropdown-menu').slideToggle('fast');
$(this).parents(".table-responsive").addClass("res-drop");
$(this).addClass('open');
}
});
});
In my case I had dynamic heights so Bass Jobsen solution didn't work properly.
I decided to rely on data attributes to store the current height of parent div e then restore on dropdown close.
Here is my code:
var isOpen = !($(this).parent().hasClass("open"));
var menuHeight = $(this).siblings(".dropdown-menu").height();
var increaseHeightBy = menuHeight * 1.3;
var originalHeight = $(this).closest(".table-responsive").attr('data-original-height');
if (isOpen && !originalHeight) {
originalHeight = $(this).closest(".table-responsive").height();
$(this).closest(".table-responsive").attr('data-original-height', originalHeight);
$(this).closest(".table-responsive").height(originalHeight + increaseHeightBy);
}
if (!isOpen && originalHeight) {
$(this).closest(".table-responsive").height(originalHeight);
$(this).closest(".table-responsive").removeAttr('data-original-height');
}
You can set the dropdown menu to fixed position and close it when the window's resized. Not a perfect solution but it works.
// Responsive tables with dropdown buttons
$('.table-responsive .dropdown-toggle').on('click', function() {
var button = $(this),
menu = button.next('.dropdown-menu');
menu.css({
position: 'fixed',
top: button.offset().top + button.outerHeight() - $(window).scrollTop(),
right: $(window).width() - (button.offset().left + button.outerWidth())
});
$(window).on('scroll', function() {
menu.css({
top: button.offset().top + button.outerHeight() - $(window).scrollTop()
});
});
$(window).on('resize', function() {
$('.dropdown-backdrop').trigger('click');
button.blur();
$(window).off('resize scroll');
});
});
I have the following jQuery to load status to a profile page using a ul with li status items.
The each() takes items from a JSON callback and the load() is supposed to ensure that the image is available before the li is created:
(showpic() gives me a well-formed url to use.)
function showStatus(data){
var jsondata = $.parseJSON(data);
var testText = "";
$('#doNews').empty();
$('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"}));
$.each(jsondata, function(i, item){
$('<img src="' + showpic(item[3]) + '" class="newsImage">')
.load(function(){
$(this)
.appendTo($('#theNews'))
.wrap($('<li>', {"class": "newsItem"}))
.closest('li')
.append(item[5])
});
});
$("#statustext").val('');
}
the problem is that the status feed now seems to be written to the page in the order the images load. i.e., instead of being written according to the JSON item order, the li s are written in the order of loaded images (this has the effect of grouping status by user, not writing it out by date, as in the JSON).
So...
how would I both write items in the JSON order and still wait for the img to load?
By the way, I looked at this qn:
jQuery each() and load() ordering
and it seems to be on the right track, but when I tried using hide() and then show()inside the load() function, it never seemed to be called, and the img remained hidden. Please give me a simple example if this is the solution you suggest.
Thanks!
Either:
1) Maintain a counter & timeout, count the # of images to load at start, create the items as "hidden", countdown the number of unloaded as they load, then (when counter hits 0 or timer times out) display everything;
or:
2) Create the items as hidden, and show them in the 'load' event. Items will appear in arbitrary order, but will end up being correctly ordered.
Here's a possible example: your code isn't very clear as to what structure is being built & where appended, so this is just a rough (but clearly coded) outline.
Try using intermediate variables more, rather than vast fabulous jQuery constructions, in your own. It will help you debug it.
console.log('loading news items');
$.each( jsondata, function(i, item){
console.log(' item', showpic(item[3]), item[5]);
var img = $('<img src="' + showpic(item[3]) + '" class="newsImage" >');
var element = img.wrap($('<li>', {"class": "newsItem", "style": "display:none;"}))
.closest('li')
.append(item[5]);
element.appendTo( $('#theNews'));
// when the IMG loads, find it's surrounding LI.. and show it.
img.load( function(){
console.log(' loaded', $(this).attr('src'));
$(this).closest('li').show();
});
// put a timer & show it anyway after 8s, if img still hasn't loaded.
element.delay( 8000).show(0);
});
You will also notice logging in the code. Logging is good software practice. Console.log is not available on IE, so you should eventually shim it or use a small library function of your own.
Fundamentally, you have to get away from adding to the DOM inside the 'load' event. That's what's causing the mis-ordering. Add to the DOM in the jsondata each() function, or in a separate well-structured bit of code that guarantees correct ordering.
I have FullCalendar up and running and it is very nice. My question here is how best to go about implementing timeslot hover functionality. It would be very nice if the user could have a visual cue for any given timeslot they are hovering over.
I found the following link http://code.google.com/p/fullcalendar/issues/detail?id=269 that gives a solution that adds a new structure in agenda cell row in order to provide access to individual cells. However, it is indicated that this solution will cause FullCalendar to become sluggish.
Before I start looking into the FullCalendar code, I thought I would ask if anyone else has any ideas or a solution.
My thoughts about approaching this are as follows:
Add placeholder events to each timeslot. The user would not see these events but these invisible events could be used to allow "hover" marking. My concern here is that adding the extra events would cause FullCalander to become sluggish. Also, the drag and drop functionality could be impacted.
FullCalender can determine what timeslot the user clicked in. Would it be possible to use the code that gets the timeslot clicked on in order to provide a reference for hover highlighting?
Other?
I am considering option 2 as a place to start. However, if anyone has another idea for a workable solution, I would be glad to hear it.
If I come up with a solution, I will post it here.
Thanks,
Jim
Here is a link to the FullCalendar site: http://fullcalendar.io/
I have found it very nice to work with.
The following code did the trick for me.
$('.ui-widget-content').hover(function(){
if(!$(this).html()){
for(i=0;i<7;i++){
$(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>');
}
$(this).children('td').each(function(){
$(this).hover(function(){
$(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'});
},function(){
$(this).prop('style').removeProperty( 'background-color' );
});
});
}
},function(){
$(this).children('.temp_cell').remove();
});
Make sure to add it after the code that instantiates the calendar and, it should work AS IS if the defaultView property of the JQuery calendar is 'AgendaWeekly'.
Cheers,
M
I had the same problem since it's sometimes hard to see which timeslot you're actually clicking on. To fix this I wrote a line to alter fullcalendar.js. Not the ideal solution, but it's a quick fix.
This is the line:
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
And placed it inside (around code line 3080):
"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : ' ') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'> </div>" +
"</td>" +
Now you can just place a tooltip hover on all fc-slots that have the .ui-widget-content class (the <td> you see above in the code). And get the hidden input value to display in that tooltip.
If jQuery, you can use the live event and get the corresponding first child and grab its value.
If extJS
Ext.onReady(function(){
Ext.QuickTips.init();
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'your-calendar-id',
width: 140,
minHeight: 30,
delegate: '.ui-widget-content',
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
}
}
});
});
I realize this isn't actually an answer but a comment on a previous answer but I've yet to reach the reputation to comment on answers.
W.R.T to the answer by #user4243287 one extra step I had to take was to put this logic in the 'viewRender' option when initializing my calendar in order to make sure that this continued to work when moving between weeks.
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.