So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
Related
I am creating automated test scripts with Ruby and Watir.
I am trying to call a div class from these lines of codes:
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 500px;">
<div class="modal-body" style="overflow: hidden; width: auto; height: 500px;">
<form id="user-form" class="form-inline" enctype="multipart/form-data" method="POST" novalidate="novalidate">
<fieldset></fieldset>
</form>
</div>
My aim is to use this one
browser.div(:class => '').send_keys :space because I want to scroll the div, for me to be able to send_key "" in some other textfield hidden.
I even try to use browser.scroll.to :bottom, but still it doesn't work.
So I am making some guesses as to what you are really trying to accomplish here. I'll first address your question as originally stated, then address how to do what I think you are trying to accomplish.
Selecting elements inside other elements
The high level answer is that there is nothing special to doing this, in many (most) cases you don't even need to worry about how deeply nested an element is, as long as you have a unique way to identify it, such as a class, name, etc that is unique.. For example in the code you provided, to get the div with class modal-body you would just do
browser.div(:class => 'modal-body)
If there were a lot of divs on the page with that class, then you might want to locate the one you want by looking inside some other container element that is unique so you find the right one.. in the code above that would be something like
browser.div(:class => 'slimScrollDiv').div(:class => 'modal-body)
Usually you only do that sort of thing when it is difficult to find an easy way to identify an element because it has few or no attributes, or non-unique attributes.
Scrolling a custom control
This I think is your real issue. You appear to have a control with a non-standard scrollbox. That is to say that instead of being simple HTML that is defined so that the browser creates and controls a scroll box (which would normally work with the methods you have already tried, or even get scrolled into view auto_magically) you instead have a custom control where the scroll box is driven by javascript code such as jQuery or Bootstrap. Such code usually is event driven, looking for things like mousewheel movement when the mouse is over the control, or manually grabbing and dragging the element that is being rendered to look like a scrollbar. Often such controls do NOT respond to keypresses like space or arrows, EVEN if they have been selected, clicked on, have focus etc.
Still I would first suggest try using .location_once_scrolled_into_view on the sub element you want that is inside the scrollbox. (See example in other answer) If that does not work then try manipulating the controls of the sçroll area.
Based on class values in your code fragment, I think you may be dealing with a jQuery powered 'slimScroll' control similar to those shown on this page. If that is indeed the case, then you can scroll the control by using drag methods on the scrollbar element. In slimScroll the element you want will be inside the div with class 'slimScrollDiv' and is another div with the class 'slimScrollBar'.
As long as the scrollbar is visible, you should be able to do a .drag_and_drop_by on it to scroll the content in the scrollbox. If it is not visible (as can happen in the first example on the linked page) then it may be harder, you might have to try firing mouseover events, or invoking some JS code to change it's style to not be hidden. You will need to experiment to see how many pixels to drag it at a time to scroll the window a 'right' amount based on how much content is in there. (potentially you might be able to figure that out based on the .style 'height' values for the elements, but that would take experimentation with the actual page and only needed if the amount of content in the box is variable)
For the second example on the linked page, I was able to scroll things using the following code
scrollbar = browser.div(:class => 'slimScrollBar', :index => 1)
scrollbar.drag_and_drop_by 0,10
I'm not sure what is inside your scrollbox, but for psuedo-code purposes of we just call it 'thing_I_want' then you might be able to scroll it into view with code something like this
scrollbar = browser.div(:class => 'slimScrollBar')
until thing_I_want.present?
scrollbar.drag_and_drop_by 0,5
end
as I said you might have to play with the drag distance there to get a 'right' amount, but 5 (pixels) seemed a reasonable starting place.
hidden text_field or just not visible in page?
you could try focus:
browser.text_field(:id => 'myid').focus
or if you need to scrolldown until it is visible
unless browser.text_field(:id => 'myid').visible?
browser.div(:class => 'slimScrollDiv').send_keys :arrow_down
end
or if you need to scrolldown to the footer (end of page)
browser.div(:id => 'footer').wd.location_once_scrolled_into_view
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I'm using .changePage
$.mobile.changePage($nextPage.attr('href'), { transition: 'slide', showLoadMsg: false });
Which is working ok. The page changes and slides in. The only problem is that on the new page there is an image at the top of the page that is not shown during the animation and then "pops" in after the animation.
I thought that changePage would get the page via ajax and load the result into the dom and when thats done do the animation?
It seems like changePage is getting the page and inserting it into the dom but NOT waiting tell that "page" is done loading before doing the animation.
Any one have any thoughts as to how to wait tell the new page and its various assets (an image in this case) is done loading before animating?
In the end the only way I was able to solve this was by pre-loading the page using $.mobile.loadpage
I've got sIFR setup to replace a navigation menu (looks pretty slick). It's individually replacing the LIs and their internal links. I have an onRelease tag that throws properly, extracts the actual href link address, all good so far. I want to tie this into an AJAX page loader, with backwards-compatability (+SEO) for the individual pages being able to load themselves. I've tried return false like I would for standard links, no dice.
I'm assuming it doesn't work because it's onRelease, not onClick or something BEFORE it is already changing the page? onClick doesn't seem to be a valid sIFR function, documentation at http://wiki.novemberborn.net/sifr3/JavaScript+Methods says onRollOver, onRollOut, and onRelease. It would be a shame to have to pitch my entire AJAX system, there is hopefully a good workaround!
There isn't really an option to prevent the default behaviour. You can change it in sIFR.as though. Assuming the <li> contains just a <a> remove the following around line 505:
getURL(sIFR.instance.primaryLink, sIFR.instance.primaryLinkTarget);
That will prevent sIFR from following the URL when you click on the link. It'll still work with right-click though, but you might be able to fix that by changing (line 508):
menu.customItems = menuItems;
to
menu.customItems = [];