I am looking for a implementation for the following image of a component. It runs through each header and text and scrolls up the associated image periodically. The user may also select a text block and the image on the right will scroll to the associated image, much like a carousel. Is there a library or package that may help me create this?
(I'm not sure what the best term for such an interface is)
Try to check components from this collection of JavaScript UI frameworks.
Related
I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!
I'm working on Electron app and I'm aiming to let people edit html content while viewing it in app. For example edit that header and button text. Then all changes should be saved.
Application
So in my opinion I should:
Give special id's or class names to that object and manipulate with js to display edit window instead of button for example, change text, press ok and it should save it. Is there any way to do that? Maybe a library or something?
Hard to answer, as your project is in such an early stage, maybe content editable is what you want to use, but this would mean you have to develop it all from scratch
But yeah your idea sounds ok too, have a button to switch the page into a kind of edit mode, let the user change elements of the page and finally save the modified version before turning it back to view mode
Or you use a library like react and use plugins like this content editable plugin or use a wysiwyg editor like draft
I'm working on this webapp here http://dogeify.me/ and I have completely redone it as Flask app (not hosted at that URL, yet).
Essentially, you drag the text that you create using jQuery in order to make the doge meme.
I am trying to figure out the best python solution for taking a screenshot within the web app so that the user will be able to save their picture. Is a screenshot even the best option, or is there any way to select all of the DOM elements and save them as a file? Maybe it isn't even a python solution, as I had previously tried http://html2canvas.hertzen.com/ but I wasn't too happy with the results.
If I had to summarize my question: How can I save an image that has draggable jQuery text overlayed onto it so that the saved image contains both the background and the draggable text?
As discussed in this answer, you can render the html (you can create a page with just your doge and jQuery-overlaid text) to image using QtWebKit. You would need to install Qt (PyQt4 or PySide) on your server in that case.
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
Twitter recently added hoverable multi-media "tooltips" -- when you hover over a username or avatar on your feed, it pops up (in-place) more details on the user (tweets sent/received, location, last tweet). It also includes a "Follow" button. There's a 'more-info' link which will load some more details on-demand.
I'd like to emulate how they're doing this-- which I think is a very elegant solution. There's a single empty/hidden div on the page, and on hover, that div is relocated to the appropriate place, display is set to "block" and populated with information (on-demand).
If I'm on the prototype/scriptaculous framework, is there a straightforward way of doing this same implementation? I don't have the ability to use other frameworks. Thank you in advance!
Screenshot:
You should check out Prototip - It offers an AJAX solution that does exactly what you want
Opentip is an awesome and free opensource toolkit, which also allows AJAX pulling.