I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits.
I can bring up the JS and do the same, but...
If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?
Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.
If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".
In this case, you can click on three horizontal dots which will appear on the left side of the same line where you will click once( just single click and enjoy ). A single click on the line to edit and then single click on three dots which will appe
I had the same issue and a search got me to here.
For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.
Related
I have a LiveCycle form in Designer that has a flowable menu page with checkboxes. When a checkbox is checked, certain pages are 'shown' in the document. The pages are subforms containing an image.
This functionality works fine. What I want to do is add a button to the front page that will remove the front page, open a 'saveas' window and then close. I can get the saveas and the close function to work but the front page gets cleared and is left blank in the document. If there is nothing on the page then surely it should realise it is not required as per the workflow?
Any workarounds would be greatly appreciated, this has been doing my head in for weeks! I know I can't delete the page using the acrobat model as there aren't the correct permissions. I'm hoping a bit of javascript on the button will do the trick.
At the moment I have:
this.resolveNode ("indexSub").presence = "hidden"; //indexSub is the subform
app.execMenuItem("SaveAs");
app.execMenuItem("Close");
I will look at forcing a filename at save another time!
Thanks
It is quite strange behaviour. I've checked that you can set presence either to invisible or inactive and it works fine then.
this.resolveNode ("indexSub").presence = "invisible"; // or "inactive"
Differences between invisible and inactive you can fnd here: http://blogs.adobe.com/formfeed/2009/03/xfa_30_presenceinactive.html
Actually "inactive" did play a part in the solution, not entirely sure if it was intentional!
The main change was to alter the first page from flowable to positioned. When the button was pressed, the page cleared, the SaveAs dialogue opened and then the document closed. When the saved document was reopened the menu page had disappeared as required. I'll add a comment to this if anything changes. Thanks all.
I am trying to make this box so that when you click read more it gets larger and shows text below it. Also would like to make a button that closes the text up again.
So far I tried the toggletext javascript command,
(found on: http://www.ehow.com/how_12006269_make-expandable-text-dreamweaver.html )
but it only puts text below the read more it doesnt affect the box below it, so all the sentences are running behind the next div element.
Also tried the spry collapsible panel in dreamweaver and it does the same thing, hides behind and doesn't move open again.
The other thing is that the expand function I made only can be customized once and if I copy it, the second one opens the text of the first one.
I need to make this easy to hand off to someone at the office who has no experience with web design to manage this part later.
I am a newbie designer, would really appreciate some help or new ideas how to do this. Thanks!!
Link:
http://gregorydesignbuild.net/projects/projectlist.php
It's a styling thing. You have the height property declared on your div.plistobtxtbox that contains the read more buttons. If you remove that declaration in your home.css file the content beneath the read more content should be pushed down when the read more button is clicked.
I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.
How can I achieve this? Is it impossible without having actual <a> tags?
I'm currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.
EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.
I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.
e.g.
<div title='www.google.co.uk' style='cursor:pointer'>
This is my div!
</div>
Using anchor links (as Google does), you can do something like:
<a href="http://www.mwhahaha.com"
onmouseover="this.href='http://www.test.com';"
onmouseout="this.href='http://www.mwhahaha.com';"
onclick="this.href='http://www.mwhahaha.com';">Link</a>
This will show a link that looks like it's going to www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...
If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.
I'm answering from my phone or else I'd check it myself. They may be doing it differently now.
Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.com)?
(see video at 0:15)
http://www.youtube.com/watch?v=oy89HnIJsE4&feature=plcp
Basically, what I wish is to be able to:
take a copy of a web page, (that part is ok),
somehow enable edit mode (as would be done in any text editor),
click on the element I wish to edit, and be able to modify the selected element
Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer.com) in a visual way.
You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos.com/contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!
1 - use google chrome.
2 - hit ctrl + shift + i
3 - go to elements tab
4 - right click on the html you want to edit and select "edit as html" or double click in the text you want to change in that tab
You can try using Jelliphy. Jelliphy is a tool that allows any users to edit any text of a web page, to move and resize elements in the page, to draw on the page, to edit the images and much more.
Jelliphy Lite and Jelliphy Extended are bookmarklets that you can use with any browser for free: just go to the page to change and click the Jelliphy link from your favorites.
Here is what you need, enjoy: http://myedit.io
I have created a simple website, now when I dubble click on my text on the website I want to show a 'tinymce box' that's able to edit my current text. Is that possible and how can I do that with javascript/jquery?
Check out TinyMCE's own documentation page, which is full of resources.
For example if you want to show a TinyMCE on button click, you need something like this:
http://tinymce.moxiecode.com/tryit/load_on_demand.php
First you might want to turn you div or whatever into a textarea, and then call the appropriate TinyMCE method.
Sorry for the not too detailed answer, but the question was not too detailed either...
Another easier solution might be to use functionylity that is there already. Seems like you are looking for the code plugin. On Click a box opens and the user can edit the html source of the editor content.
One of the optional buttons has 'html' written on it and can be used to go into HTML editing mode. You can see it in this full featured example - 6 places left of the top-right corner. In order to enable it on your own website you will need to add "code" to the list of plugins and "code" to the list of buttons.