I'm playing around with masonry.js for a gallery/album view.
I've succesfully used the script to display a thumbnail of albums. When the user clicks the thumbnail I want the album thumbnails to be removed and then replaced with the thumbnails of the images within the album.
The album images are passed to the script via ajax and are in html format
I can remove the items using this code $container is a jquery object of the masonry container:
var obj = $('.item');
$container.masonry('remove',obj);
$container.masonry('reloadItems');
$container.masonry('layout');
I then append the new thumbnails using this script - data is the html of the new elements.
var $newItems = $(data);
$container.append($newItems).masonry('appended', $newItems);
$container.masonry('reloadItems');
$container.masonry('layout');
This loads the new thumbnail elements and organises the layout. However because of the append it places them at the bottom of where the removed thumbnails were.
If I use prepend the images are placed at the top of the element as expected but I'm then left with loads of white space where the removed items were.
I've also tried html() to insert the new items - a layout is applied but the height of the container becomes inconsistent and some items overlap the bottom of the container.
So:
How can I remove items and clean up the layout
How can I add new items and clean up the layout
Thanks
Having the same issue, and saw a related issue here https://github.com/desandro/masonry/issues/381:
$container.masonry('remove',obj);
$container.masonry();
This seemed to work a little bit better for me.
The issue is solved in the new version. Following code snippet worked for me (I'm using Masonry version 4.1.1).
var $newItems = $(data);
var $obj = $('.item');
$grid.masonry( 'remove', $obj);
$grid.append($newItems);
$grid.masonry( 'appended', $newItems ).masonry('layout');
Even here, calling layout method is mandatory. Not calling layout method will append new items in the bottom of the page.
Related
I'm trying to write a Greasemonkey script that will hide images in Google Image Search that I've already seen (so that I won't be shown the same image in search results twice, when making multiple searches.) Is there any way to obtain a list of images from search results using a Greasemonkey script so that I can prevent the images from loading after they are viewed? In order to do this, I'll need to find a way to prevent images from loading after they've previously been viewed.
var blockedImageList = new Array();
function blockImages(imageList){
//prevent images from loading if they are on the blocked image list,
//which is an array of image URLs
}
function getAllImagesFromPage(){
//add all of the images on the current page to the blocked image list.
}
I'm using the default playlist object from the JS-Spotify library and constructing a playlist.
Then I use this Code:
var playlistList = new views.List(pl);
playlistList.node.classList.add('sp-light');
$(".favAlbums").append(playlistList.node);
But for the first time when I load the page with this view the tracks don't show in the playlist DIV. The playlist DIV itself does. What could cause that? (I'm using exactly the same code at a different place where it works just perfectly)
Update:/
It seems to be a rendering issue because when I resize the Spotify application the track entries appear. But before resizing the DIV is empty in the inspector.
I am building a Spotify App with four tab pages. The content of all tabs are loaded on initial load of the app. Each tab contain one or more playlists that are being populated with data from 3rd party web apis that are resolved into spotify tracks.
The selected tab works fine. the playlist show up a expected. The problem is with tabs that are initially hidden but later selected. Here the playlist looks like this when selected:
not fully rendered playlist
Looking in the Inspector I can see that the content has not yet rendered:
<div class="sp-list sp-light" tabindex="0">
<div style="height: 100px; ">
</div>
</div>
When I do a resize of the Spotify desktop app, the playlist is finally rendered:
rendered playlist after resize
To populate the playlist I use the 'standard' spotify models and views:
var playlist = new views.List(tempPlaylist);
//where tempPlaylist is a new models.Playlist();
//that has been populated with tempPlaylist.add(search.tracks[0].uri);
playerPlaylistDiv.append(playlist.node);
I am only seing this issue when using tabs. When displaying all content on one long page all playlists are fully rendered. I wonder if it has to do with timing: that I am hiding content that has not yet fully rendered? Any thoughts much appreciated.
I handle tab changes this way:
/* Handle URI arguments */
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);
/* Handle tab changes */
function tabs() {
var args = models.application.arguments;
// Hide all sections
$('section').hide();
// Show current section
$("#" + args[0]).show();
}
FYI I am using the Spotify preview 0.8.10.3.
I am not sure this is the same thing, but I ran into similar issues trying to create tracklistings from playlist-uris on the fly; also couldn't track it down any closer (the containing DOM was certainly rendered and ready); and it only happened on certain playlists, never e.g. on albums.
I was able to circumentvent this problem by "cloning" playlist - obviously there's a "performance" hit ...
// assuming uri is the playlist's URI
models.Playlist.fromURI( uri, function(originalPlaylist) {
var tempPlaylist = new model.Playlist();
$.each(originalPlaylist.tracks, function(t) { tempPlaylist.add(t); });
var tracklist = new views.List(tempPlaylist);
// etc...
}
I am not sure what's on here, but maybe that helps you along :)
PS. Also - make sure you have a doctype-declaration in index.html (), the spotify client does some weird things if you don't.
The solution I've found is this:
I arrowed it down to being an issue with showing/hiding the content since showing the full content without tabs never causes issues. So instead of using .show()/.hide() I now hide and show the content by setting the height of the sections to 100%/0:
// Hide all other sections
$("section#" + args).siblings().height('0');
// Show current section
$("section#" + args).height('100%');
Not sure why this works, but it does (for me at least).
I had the same problem (see Spotify List objects created from localStorage data come up blank) and fixed it by doing the hide()/show() of divs before any processing. Previously I was constructing the playlist and then show()ing the div after which led to a blank list.
I think I've actually managed to solve this and I think it's bulletproof.
Basically I was trying to solve this by trying to convince the API that it needed to redraw the playlist by hiding things/scrolling things/moving things which worked occasionally but never consistently. It never occurred to me to change the playlist itself. Or at least make the API think the playlist has changed.
You can do so by firing an event on the Playlist object.
var models = sp.require('$api/models');
...
// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);
These are just standard Spotify functions and the list updates because it thinks something has changed in the playlist. Hope this helps someone!
I am using Linear Layout to display image view and text view.
I am getting the response from server by using XML parsing.
When i am getting the new response from server the second image view and related text will be displayed in the bottom of the new Layout and so on.
but i want to display the image with related text in the above of the previous Layout.
if any one see this question, please help me.
Thanks in advance.
You can add it programmatically with:
LinearLayout layout = findViewById(R.id.layout);
layout .addView(newView, index);
You just have to add always with index = 0
I'm trying to display ListItems in a GridView.
I am able to access the list items but my image is getting displayed as url .
I am using:
dr["Category"] = SPEncode.HtmlEncode(Convert.ToString(oListItem["Category"]));
The above line of code displays the list items, but when I try to display the images, it renders as http://server/images/xyz.jpg in the gridview.
Please help me in accessing the list images.
Update:
With regard to Alan's answer:
I have tried this:
foreach (SPListItem oListItem in collListItems) {
dr["Category"] =
SPEncode.HtmlEncode(Convert.ToString(oListItem["Category"]));
}
But when i try to display the images:
dr["ProductImage"] =
SPEncode.HtmlEncode(Convert.ToString(oListItem["ProductImage"]));
It still renders as: http://server/images/xyz.jpg in the gridview.
This question could use a few more details. It would help to know what oListItem[key] and dr[key] were arrays of. Whatever it is, it looks like oListItem[].ToString() method just returns a URL.
Couldn't you just new up an Image control, set the ImageSrc propery, and then add it into the GridView? You need to instantiate a new Image with each row (don't reuse an Image).
Are you using the ASP.NET GridView?
In that case you can set the filed property to your image column to Image Field.
Then you can assign the value of your converted oListItem["ProductImage"] field to the PictureUrl field.
Here's an example to get you started:
http://msdn.microsoft.com/en-us/library/aa479350.aspx
You can try the solution provided here:
http://cipriangrosu.blogspot.com/2009/05/display-item-type-icon-in-spgridview.html