I am working on a CMS project where users can drag and drop different components(such as button, div, etc) from components menu on canvas area. Once they are happy about their layout then they click on button finish. What I want is when finish button is clicked then in popup they should see html and its appropriate CSS code.
How can I parse through those components and generate html, css and Javascript if necessary?
Are there any solutions available? I could not find any after googling.
maybe this approach is different but.
can you use of svg element? because with svg you can get positions for every element and then use for whatever you want (like get positions for example).
here some useful tutorials:
http://www.tutorialspoint.com/html5/html5_svg.htm
http://www.w3schools.com/html/html5_svg.asp (for some reason some people don't like this site)
Related
I'm working on a CMS system where the user has the ability to select between a number of different templates for their site. When they select from the list of templates on the left I want the middle of the page to show the preview of the template and the right side to show a property inspector for manipulating things like colors, font sizes, sections, etc. Clicking on an element inside the preview changes what is focused and thus changes the property inspector.
The big challenge is that the templates are designed by 3rd party designers and the CSS is designed with the expectation that there is no other CSS (like the CSS for the CMS). I might force them to restrict everything their design to work on any page and to always have a top level DIV that I can just inject into the page.
I could IFRAME it but that is not ideal because DOM manipulation becomes more complicated.
Ultimately I have full control over the template structure and how they are made but I'd like to keep it as simple as possible for designers.
What's the best way to go about structuring this kind of setup?
Given the requirements of no iframe (which would be the right way), I see 2 solutions:
Put the template in a div with a certain class/id and preprocess the CSS to prefix every selector with that class.
Use the Shadow DOM, but then you would only target Chrome.
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I'm trying to create the effect of zooming in on a webpage but focusing on one particular element and allowing navigating / scrolling to be present.
I found a few plugins online but none do what I'm really looking for and I've found nothing else. Fancybox, Zoomooz etc are great but I need to be able to scroll.
The element in question is a PDF document. I need the user to be able to zoom in and still navigate up/down the page.
Possible?
Here is an example of what you could do... http://www.sitepoint.com/html5-javascript-mouse-wheel/ and http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
However I would consider the above as a secondary option. There are many other ways to present the presentation and embed it onto your page. A slider is limited to "slide" only. You can for example use a presentation software and embed it onto your page as a widget e.g. http://prezi.com/ as freeware.
Hope that helps.
I want to build a Web page (in Asp.Net) containing a Dynamic Menu where the user can Move the Icons or the Menu contents, like a grid menu in android for example...
What should I use? CSS, Javascript, HTML5 or JQuery, anything to start with.
All what I want is a Large icons Menu that icons can be Moved dynamically...
Thanks all...
Pretty broad question, but you definitely will need Javascript/jQuery to get this done.
I would look into the jQuery UI library and especially into http://jqueryui.com/demos/draggable/ for draggable elements.
Since you're aiming for an Asp.Net site with, I'm assuming, dynamic content to feed the menu; I would start by building a static version of the kind of menu you want, using Html, CSS and jQuery. Once you get that part working right, you can look into building an Asp.NET user control or a configurable custom control that will render the entire html/JS/css markup based on dynamic content.
I have some scanned news paper and i want to dynamically generate div above the image. So when users click on specific DIV they are redirected to detail of that news.
How is it possible ?
One way of doing is to create Absoulute positioned div in front of the Image. But i dont want to create DIV for all scanned images. I am searching for some dynamic way. Plus! I am not looking for image Maps.
Example : http://www.express.com.pk/epaper/
This is an e-paper and they are using a single image on their background. Of course they are not creating static html pages each day and redefine their div positions
Edit: For my case i found my solution using Facebook Like Tagging jQuery Plugin.
Have one absolutely positioned <div> and move it around to whatever image is focused. Change the click effect of the div accordingly.
You will have a div containing the image, like this:
<div id="imageDiv">
<img ... />
</div>
And you will use jquery to create a div before the img in your click event:
$("#imageDiv").prepend("<div>created div before image</div>");
Unfortunately, for a variable layout such as a newspaper image, absolutely positioned divs are probably your best bet.
In this case, Javascript would likely cause more problems than it would solve: it isn't a necessity for what you want to achieve, and people with Javascript disabled will be unable to use your site.
One other possibility is to use a server-sided language to read a xml file that says where the divs should be placed over an image. This would allow for a dynamic html page, as only a xml (or similar) file would need to be altered to change content.
I can generate an example if you're interested in this solution.
A slightly easier way may be to use an image map. Here's a good resource with working examples.