I am new to javascript and web design in general. I am having issues with sorting my picasa pictures so that they are shown with the newest photos first. This is my current code:
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('#galleria').galleria({
picasa: 'useralbum:galleriajs/Demo',
picasaOptions: {
sort: 'date-posted-desc',
imageSize: 800,
thumbSize: 280
},
imageCrop: false,
fullscreenCrop: false,
thumbCrop: false,
width: 377,
height: 300,
autoplay: true,
imageTimeout: 60000,
});
No matter what I put for the sort: value, it comes up in the same order (what seems like oldest first).
I have been looking all over online for a solution but I have not been able to find one. Any suggestions or sample code is appreciated.
Thanks
If I look into the Picasa API docs, where the actual call is made, it doesn’t seem to be a sort parameter:
http://code.google.com/apis/picasaweb/docs/2.0/reference.html#Parameters
So, they either changed their API or the sort option has never been available. I’m sure you can sort them using JavaScript though, or sort them at Picasa.
Related
I am new to working with ag-grid. I am working through some of the documentation, and ran across something I am unclear on. In the Column Filtering section, I see the examples, and I put together some code that I believe duplicates what is done in the example. The code works, and I can filter, but the filter popup I see is not the same as what I see in the examples on the page. Specifically, I see a filter that has a text entry area, and, once text has been entered, an area that shows And/Or buttons (with the buttons on top of the text) and a second text entry area. In the examples in the documentation, I see clear popups with a dropdown starting with "Contains" (and having other options) and a text entry area below. What am I doing wrongly/missing? Is this expected behavior?
My column defs look like:
var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];
And my grid options are:
var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};
I am getting the rows from fetch, so rowData is not defined.
The images (first is the one I see in the demo, the second is what I see in my app):
The filter I see in the demo app
The filter I see in my app
From the comments:
I see your screenshots, and I don't have a clue what's happening. At a
guess, I would say you have some strange CSS that's affecting the
ag-grid filter. Try temporarily removing all CSS that isn't native to
ag-grid. If you need more help, you'll have to provide a demo that
reproduces the problem.
It seems that materialize.css was the source of the problem:
#thirtydot spot on. the "select" elements had been undisplayed in some
other css, and the inputs had been resized. The culprit here seems to be materialize.css.
You probably need some CSS like this:
.ag-root-wrapper select {
display: inline-block !important; /* might not need !important */
/* and any other needed CSS to make selects display normally */
}
I have embedded a video into my site using the Ziggeo API. I am using Handlebars to populate the token to the ziggeo player:
<ziggeo id="zideo_player" ziggeo-width="560" ziggeo-height="315" ziggeo-playonclick="true" ziggeo-video={{this.token}}>
</ziggeo>
I know that the token is getting there because I can see it in the inspector.
The weird thing is, when I go into the inspector and change from ziggeo to ziggeoplayer, the video will show, but when I push those changes to Heroku, it again doesn't show.
It's as if the player is loading before the token is received and only by changing the name can I re-send the token.
This turned out to be an asynch (asynchronization) issue. The video was trying to load before it could send and receive information from Ziggeo's API. To solve this, I used a separate js file and then appended the video information after the document loaded.
After some more thought, I might have also been able to fix this by placing the Ziggeo API information at the bottom of the body in the index.handlebars file instead of in the head. I didn't have a chance to try this since the above trick worked, but it would probably look cleaner if it did.
v1 and v2 should both work on Heroku.
Benjamin, can you try replacing that HTML embedding code with JS code, which could then be delayed if really needed.
For example of same code in JS:
<script>
//ZiggeoAPI will work only with v1-rXY/ziggeo.js v2- will require v2 app to be created and code would look just a bit different
ZiggeoApi.Events.on("system_ready", function() {
var player = new ZiggeoApi.V2.Player({
element: document.getElementById("your_element_ID"),
attrs: {
width: 560,
height: 315,
theme: "modern",
themecolor: "red",
playonclick: true,
video: "{{this.token}}"
}
});
player.activate();
});
</script>
This would only fire once the Ziggeo system is loaded and ready. This means that it fires after the DOM is ready and page loaded so it should be before the {{this.video}} is available.
We have a rich UI application developed using sproutcore. We are trying to automate the pages using Selenium webdriver in Ruby. With dynamically generated id's and hidden items we are finding it difficult to identify some of the elements. Application is complex. Developers are saying they cannot add unique layer-id's for hidden items or frames. For static pages, they added unique layer-id or class names.
I want to understand from my friends here about what automation they are using for their sproutcore applications?
How are they tackling these issues?
Any pointers are appreciated.
Even if the web elements are
dynamically generated id's and hidden items we are finding it difficult to identify some
One solution is to ask if developers can add naming pattern for them, so just last chars to be generated on-the-fly. By doing this you can use some of these location approaches:
what-is-the-way-to-locate-an-element-which-has-dynamic-id-even-if-xpath-css
selecting-webelements-with-dynamically-generated-ids-by-xpath-selenium-java
appendix_locating_techniques
An approach that will work with SproutCore is to use the SproutCore view tree to identify elements rather than by layer ID or class. For example, consider this basic main page,
MyApp.mainPage = SC.Page.create({
mainPane: SC.MainPane.extend({
childViews: ['header', 'mainContent', 'footer'],
header: SC.ToolbarView.extend({
layout: { height: 44 },
childViews: ['headerButton'],
headerButton: SC.ButtonView.extend({
layout: { centerX: 0, centerY: 0, height: 40, width: 100 },
title: "Click Here"
})
}),
mainContent: SC.View.extend({
layout: { top: 44, bottom: 33 },
// etc.
While we don't know the layer ids of these elements beforehand, we do know their parent child relationship in JavaScript. For instance, if I needed certain elements from the page, I'd probably grab them in advance like so,
// Retrieve target views for the current page.
var mainPane = MyApp.mainPage.get('mainPane'),
header = mainPane.get('header'),
headerButton = header.get('headerButton'),
// … etc.
// Then retrieve an element for acting upon.
var buttonLayer = headerButton.get('layer'); // returns a DOM node
// Or retrieve an element id for acting upon.
var buttonLayerId = headerButton.get('layerId'); // returns the auto-generated id
Although I don't have firsthand experience with Selenium, it appears that you can use the execute_script WebDriver instance method to run some simple lookups that return either the element you need or the id of the element you need.
Finally, bear in mind that some views may have dynamically changing children, in particular SC.CollectionView subclasses like SC.ListView. In this case, once you target the parent view, you can access the child that you need easily enough using methods particular to that parent view, such as itemViewForContentIndex(idx) to get item views of a list.
I use selenium to automate (via Jenkins) some QA testing for a Sproutcore app and in my experience it is usually enough to add specific class names to the Sproutcore objects and then use xpath expression in Selenium to target those classes.
Example:
bottomRightView: SC.View.design({
classNames: ["bottomRightView"],
layout: { top: 60, width: 299, bottom:50, right: 15, zIndex: Maps.RIGHT_TOOL_BOX_PANE_ZINDEX },
childViews: "resultsView noResultsView buttons featureView".w(),
Xpath expression:
xpath=//div[contains(#class,'bottomRightView')]
It is always possible to use //#if(debug) statements to exclude those classNames from production builds.
Example Selenium IDE scripts for above mentioned app: https://github.com/unicolet/mappu/tree/master/tests/selenium
There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.
I'm in the process of deciding how to implement "selects" on a site, and am strongly considering mobiscroll, there's just one little thing that's annoying me, and that's the "extra click" (compared to an old-fashioned dropdown) of the "set" button that's required after choosing an option.
My question is, is there a way to close the scroller and set the value when an option is chosen via click or touch, but not if a new option is "chosen" because of dragging the scroller or using the mousewheel?
This is my code:
<script type="text/javascript">
$('#myScroller').mobiscroll({
preset: 'select',
theme: 'android-ics',
mode: 'mixed',
display: 'bubble',
rows: 7,
inputClass: 'subtleDropdown',
onChange: function(val, inst) {
//I would think this is where it's supposed to go, no luck thus far though!
console.log(this);
},
});
</script>
Cheers!
In the end, we decided not to use mobiScroll (too little info on it available), so I'm closing this question.