I have recently been using sitecake, I like the drag and drop interface of it for the content editor. Try the demo on their site for the visual editor.
I am wondering how can I build a 'local' script like this for my managing and creating articles for my site.
What I need is the drag and drop options like this and a button which onClick outputs the html of the current display.
I have been looking into jQuery DND, draggable and droppable, HTML5 contentEditable and edit-inplace.
But unfortunately, nothing yet.
Can someone help me with this? Or altest point me in the right direction?
Thanks in advance.
I am the developer behind SiteCake. The first version of SiteCake was developed based on GWT and jQuery/jQueryUI Droppable and Draggable. The current version is powered by GWT and GWT-DnD library.
I am not sure I understand clearly your question about getting the html code.
Check out jQueryUI Droppable and maybe even Draggable.
Droppable is certainly capable of what you're asking. All you would need to do is specify drop points, which is what sitecake does.
Related
I'm working on a new version of my business site at http://bigriverwebdesign.com. I'm trying to implement a Photosphere background (http://photo-sphere-viewer.js.org/). I've contacted the plugin author, but he's been unresponsive and I'd like to see if anyone on StackOverflow has an insight.
I almost have things working the way I want them, but are two hangups I can't figure out.
1) The cursor displays as a grabbed hand. I would like to change it to all-scroll. I don't think this has to do with my implementation because it is the same way on the plugin site. I am unable to change the cursor with CSS and I'm not sure that it is being set with CSS in the first place. Does anyone know why the browser displays things this way and how I might go about overriding it?
2) I can't select text to copy and paste from pages like http://www.bigriverwebdesign.com/services. If I remove the photosphere, I'm able to select text just fine. I'm having trouble finding any information on this.
thank you!
I am trying to find library/module which can be used to create draggable web page in angular JS. Currently there are modules in angular which does that for drag and drop boxes within the list. Please do share if anyone had caught into similar problem and has found solution.
I'm not sure exactly what you are looking for, but it kind of reads like you're looking for a library that will help you with drag and drop in Angular.
There was a great post on the this topic before on stackoverflow: How to Create simple drag and Drop in angularjs
I have written a little drag and drop script (HTML5/Javascript) which functions correctly in a stand-alone page. However when I integrate it into a web page it doesn't allow dragging (Black circle with diagonal stripe when attempting to drag).
I have simulated the web-page's additional javascript in the stand-alone to rule out javascript conflict. I'm just not seeing why this happens! Any help will be appreciated. Thanks in advance...
You are using two jQuery versions :
v1.3.2
v1.9.1
Remove the v1.3.2 and it will work
I'm currently using the WebPartManager to make my content a drag n drop kinda work using the " WebPartManager.DesignDisplayMode " ,this would make the content drag n dropable , but the alignment of my user controls would not be proper. On other hand have already tried with " BrowseDisplayMode " , bt no drag - drop for it. So wanted to know if there is any combination with the jquery, so that I dont have to re-work on my whole thing. Or is there a way to make the alignment of contents in DesignMode, proper as in the Browse Mode.
Try to use widgets from jQuery - probably this is what you need
Take a look at JQuery Ui Draggable and Droppable, there are Demos and code available at he following link.
http://jqueryui.com/demos/
I recently took on a website project that another developer left off. It's built using bootstrap and ColdFusion and I need to revise the visual components (turn dropdown into hover in nav, fix padding/margin, drop shadow around image etc...). I am having a hard time because there are so many css/js and other links in the the <head> already. It's hard to figure out what elements are controlled by what files.
Do you have any recommendation in the first steps when starting to work on an existing site? I am thinking maybe I should make a document to list out how all the css/js are connected to the html files before starting, but must I do this manually? Any suggestion is welcome.
Thank you!
Just use Firebug or Developer Tools in Chrome. When you inspect any element on website (just by right-click->inspect element) you can easily get information about files where particular rule for styling is.
I would suggest to use the Chrome developers tool, it's very powerful and doesn't just helps with the styling of the elements but also with js events. I recommend you to check out this video: http://vimeo.com/53073654 it helped me a lot.