I'm tinkering around using Chrome DevTools on someone's site to clean up their code and make things look the way they've requested.
So far I've been unable to delete an HTML element without also deleting its child elements (I right click on the <div> I want to delete and click 'delete element' - but this also removes all child element inside it).
However, I only want to remove the outer <div> wrapping because it's redundant and unnecessary (the code is a mess with divs inside of divs inside of divs for no reason). When I double click on the <div> and use the delete key to erase it, I'm unable to remove the outer carrots and when I click back out, the <div> reappears.
I'm almost sure I'm missing a simple step - can someone point me in the right direction?
Right-click on the div you want to remove and choose 'edit as html'. Remove the lines you don't want and then click outside the editable area to close it.
Right-click the element, choose Edit as HTML, delete the start and end tags, and save. That should move the child elements out of it and into its parent automatically. Deleting the element will always also delete its children; double-clicking it only lets you edit its tag name and not its entire markup.
Related
I search editor/plugin for editor with such html specific features:
remove node
remove only node content
navigation to next/prev node, and also parent/child node
navigation to next/prev node attribute
navigation between opening and closing tags
I love and use Vim and JetBrains IDEs, but I haven't found plugins with similar funcitonality for them. Can anybody suggest such editor/plugin?
Most of this is present by default in WebStorm / PHPStorm:
remove node
Remove a node and all descendants with:
move cursor into node
Expand Selection (Ctrl+W) until the whole node is selected
Del
remove only node content
move cursor into node content
Expand Selection (Ctrl+W) until all content is selected
Del
Remove a specific enclosing parent node with Remove Enclosing Tag (Ctrl+Shift+Del)
navigation to next/prev node, and also parent/child node
Next/previous node is Next method (Alt+↓) / Previous method (Alt+↓)
Jump to the start of the parent node with Move Caret To Code Block Start (Ctrl+[), and to the end with Move Caret To Code Block End (Ctrl+]). May have to press that twice, depending on where the cursor was.
(I don't see a good way to jump directly to child nodes)
navigation to next/prev node attribute
(would like to know one for this too!)
navigation between opening and closing tags
Just like moving to parent node above: Move Caret To Code Block Start (Ctrl+[), and Move Caret To Code Block End (Ctrl+]).
Take a look at https://github.com/mattn/emmet-vim. It seems to be fulfilling most of your requirements.
I must have tried a hundred time by now to select an html element and then create a snippet with Chrome SnappySnippet, but each time I get the error
Error! DOM snapshot could not be created. Make sure that you have inspected some element.
In this video it looks easy, but out of those 100 times, I have been able to make it work once with something random.
Question
Is the selection somehow time based, so I have to click on SnappySnippet in e.h. less than a second?
How do you keep the selected element, so when moving the mouse to the SnappySnippet button other elements are not selected from hovering them?
Use the tree-DOM menu, left click on a div so it becomes dark blue. Now it is selected even thought hovering the mouse over other div's it will remain selected.
The problem you have is probably because SnappySnippet can't handle large div's. Try with a very small one first.
I have a registration form on my website, which forms a basic user employment resume. To save space on the page some of the form elements have the option to add more fields, now all of these work fine except for the Employment History section.
When you click on the add more button the form appears directly underneath as it should except for the first four fields:
Job Title
Company Name
From
To
which shift to the left.
I had this issue with all of the add more sections but fixed them as the person who built the page had made some mistakes. However i can not seem to find the issue, It feels like i have changed everything nut nothing makes a difference.
http://goo.gl/w4WYJm
You are missing to add the row class where you generate new elements in your javascript.
<div id='jobtitle"+intTextBox+"'>
should be
<div class="row" id='jobtitle"+intTextBox+"'>
You also have a problem which you will find after fixing this, that the descriptionbox has the row class. Fix this by removing it from the job-description and just apply it to the wrapper div as shown above.
I just checked your website and found the following things.
1) You are trying to show one div#jobtitle1 on clicking add more. I suggest that please add class="row" to that ( this is the class which you people are using for margin )
2) In the same div block which you are showing one more field called Job Description which is again inside a div which has class="row" ( which will again add margin because it is the child div of div#jobtitle ) . Please remove that class here.
Try these things then it will be fine.
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
I have a div element containing some text. When the user clicks a word inside that div I'd like to highlight just that word.
In order to do this I need to know what character position in the text the click occurred at, so I can then locate nearby whitespace and insert some formatting around the word.
Finding out where the click occurred within the text is the trick here. Is that kind of thing possible?
If your page is auto-generated, you might consider pre-processing the page by putting a <span class = 'word'> around every word in every selectable div. You might be able to this with javascript after the fact, and I think that would be your solution regardless, but pre-processing would make it easier.
The problem with relying on the absolute position of the word is that users can scale their fonts, which makes this task especially hard. By wrapping a span around every individual word, you can easily select which word was clicked by applying the click event to the span elements.