I'm using a Magento 1.4.1.1 install that I'm having issues with the javascript on a custom themed store.
For example, going to any product page (e.g. http://www.papakuraeducation.co.nz/index.php/teachers/magic-caterpillar-handwriting-casey-caterpillar-small-book.html) loads a Javascript file, which contains code which is supposed to scale down the .jpg file to fit the 'product-image' container it sits inside.
The relevent code seems to be around line #10279, which is causing a exception that $(imageEl).parentNode = null
Product.Zoom.prototype = {
initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl){
this.containerEl = $(imageEl).parentNode;
this.imageEl = $(imageEl);
this.handleEl = $(handleEl);
this.trackEl = $(trackEl);
this.hintEl = $(hintEl);
(snipped...)
I've tried debugging it in Chrome and adding breakpoints, but tbh I'm not actually sure how to use this information to find the solution.
Any help in pointing me in the right direction would be greatly appreciated.
You have to add an ID to the <IMG> in question. This ID should than be fed into the following code-space:
product_zoom = new Product.Zoom('IMAGE_ID', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
Related
Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.
The same images are going to be rendered on 2 other views.
What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.
How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.
I would appreciate any advise.
Thank you.
Have you tried this?
https://github.com/VideoSpike/nativescript-web-image-cache
You will likely want to use a community plugin for this. You can also take a look at this:
https://docs.nativescript.org/cookbook/ui/image-cache
So after some research I came up with a solution that works for me. Here is what I did:
When the app start I created a global variable that contained a list of observable objects
then I made the http call to get all the objects and load them into the global variable
In the view I displayed the image as (the image is part of a Repeater item template):
<Image loaded="imageLoaded" />
in the js file I handled the imageLoaded events as:
var imageSource = require("image-source");
function imageLoaded(args) {
var img = args.object;
var bc = img.bindingContext;
if (bc.Loaded) {
img.imageSource = bc.ImageSource;
} else {
imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
img.imageSource = iSource;
bc.set('ImageSource', iSource);
bc.set('Loaded', true);
});
}
}
So, after the initial load I am saving the imageSource as part of the global variable and on every other page I am getting it from there with the fallback of loading it from the URL is the image source is not available for this item.
I know this may raise some concerns about the amount of memory I am using to store the images, but since in my case, I am talking about no more than 2-3 images, I thought that this approach would not cause any memory issues.
I would love to hear any feedback on how to make this approach more efficient or if there is a better approach altogether.
You could use the nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful events that you can use to add custom logic when images are being retrieved from remote source.
In order to use the plugin simply initialize it in the onLaunch event of the application and call the .initialize() function:
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
after that simply place the FrescoDrawee somewhere in your page and set its imageUri:
<Page
xmlns="http://www.nativescript.org/tns.xsd"
xmlns:nativescript-fresco="nativescript-fresco">
<nativescript-fresco:FrescoDrawee width="250" height="250"
imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>
I have an aspx page with a calendar control on it. When I try to print this page to PDF none of my images or calendar gridlines are showing up. However when I go directly to the page everything is fine. Also I had this working on our dev server but once it was moved to a new server all the images and the gridlines stopped appearing. I have tried a few suggestions on here such as using full file paths for images with no success. Has anyone run into a similar issue? I put my code for creating the PDF below though I don't think that's the issue since I had it working on a different server before.
string url = HttpContext.Current.Request.Url.AbsoluteUri;
int lastDash = url.LastIndexOf('/');
url = url.Remove(lastDash + 1);
url += "print.aspx";
theDoc.AddImageUrl(url, true, width , true);
theDoc.Flatten();
theDoc.Clear();
I added the line of code below and the images and lines are now appearing. Though this answered my question the printed pages is very screwed now and needs to be fixed.
Doc theDoc = new Doc();
theDoc.HtmlOptions.Engine = EngineType.Gecko;
So I'm working on a text editor to better learn wxPython (and to make a text editor that I really like :P). I have been having trouble finding much info on the wx.aui.AuiNotebook class. One thing I would like to know is how to interact with its pages. For example, I would really like to know how to change the title of a page (so that I can update the page title when a user saves or to mark it when there is unsaved changes). Any assistance on this matter would be most appreciated!
The method is called SetPageText, so you would do something like:
current_page = notebook.GetCurrentPage()
current_page_index = notebook.GetPageIndex(current_page)
current_label = notebook.GetPageText(current_page_index)
if not current_label.endswith(' (*)':
notebook.SetPageText(current_page_index, current_label + ' (*)')
Apparently, in wxPython version 2.8 does not include wx.aui.AuiNotebook.GetCurrentPage(). What I apparently didn't realize is that a "page" in the wx.aui.AuiNotebook is equivalent to the panel that is being added to it. Thus the following code will work,
self.panelBox = []
newPanel = wx.Panel(self, wx.ID_ANY)
#YADA YADA STUFF!
self.nb.AddPage(newPanel, "Untitled Document "+str(self.untitledDocCount))
currPageIndex = self.nb.GetPageIndex(newPanel)
currLabel = self.nb.GetPageText(currPageIndex)
if not currLabel.endswith(' (*)'):
self.nb.SetPageText(currPageIndex, currLabel+' (*)')
self.panelBox.append(newPanel)
It's up to the programmer to ensure that the pages (panels) are accessible. I do this by storing the panel references in a "panel box" and then switching between them accordingly in conditions such as a "change tab" event. I don't know if this is the best way to do this, but it appears to work so far.
I am working on an application which needs to load fonts dynamically based upon the fonts used in a given document that the user opens. The fonts are used in a RichEditableTextControl so need to be CFF format.
If I add the code:
[Embed(source="/assets/fonts/AvenirLTStd Book.otf",
fontFamily="EmbedAvenir LT Std 45 Book",
mimeType="application/x-font",
embedAsCFF="true")]
public const embeddedFont:Class;
to the main SWF then the text displays correctly with the embedded font but moving the code to a separate file and adding a loader as per the information I found at the following link does not load the font - http://www.scottgmorgan.com/blog/index.php/2007/06/18/runtime-font-embedding-in-as3-there-is-no-need-to-embed-the-entire-fontset-anymore/
The loader code is:
private function loadFont(url:String):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);
loader.load(new URLRequest(url));
}
private function fontLoaded(event:Event):void {
var FontLibrary:Class = event.target.applicationDomain.getDefinition("FontAvenirLTStd") as Class;
Font.registerFont(FontLibrary.embeddedFont);
}
There is an error thrown at the Font.registerFont line to say that the parameter being passed cannot be null. I have checked in debug mode and the issue seems to be that the class exists but does not have any content. The FontLibrary class is instantiated but the only child entry in the debugger is _prototype so trying to access the embeddedFont property does return undefined.
At the moment the font SWF is in the assets folder of the main project so I don't believe there should be any security restrictions and, as I said, the SWF loading part appears to work.
One thing which is hampering my diagnostics is that I am not sure if the problem is the font SWF not being created correctly and having no content or if the main app is unable to load it. Any help on at least being able to narrow that down would be appreciated.
I would appreciate all the help I can get on this as I have been stuck at this problem for some time and it is a key part of the application.
Thanks in advance to everyone.
Just a quick note for anyone who ends up here from Google, the problem was that I had managed to lose the static keyword from the embeddedFont constant definition in the top block. It should have been public static const embeddedFont:Class;
Hope this helps someone.
I'm working on a website where the homepage has a rotating banner. When the page is loaded, an AJAX request is performed to retrieve the rest of the banners (each of which has a 960-pixel wide image). I toyed with the idea of loading the page normally with all the banner HTML loaded, but the target audience of the website are not always guaranteed to be on a blazing connection, and I wanted the homepage to load quickly. Plus, I didn't want conflicting H1 tags. The page in question is the landing page at http://www.gosihanoukville.com/
If you're on a slowish connection, the banners will load and start moving (rotating) before the background images are finished loading. I'm wondering if there is a way to detect if an image has fully downloaded before I have the script start moving the banners.
I'm not including code here, as it is best seen on the website mentioned above. The JS file used is 'landing.js'
Thanks for any help - this is driving me crazy.
I would normally do this:
var imagesToLoad = [];
var imagesLoaded = 0;
// Register this handler using whatever framework you like
var whenImageLoaded = function(){
if (++imagesLoaded == imagesToLoad.length){
// Start moving the banners.
}
}