I got this html
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
When in firefox I am unable to remove the a.tgt using backspace. Gets removed in all other browser except firefox
Whats the problem?
This may be helpful for some. I ran into the same problem.
Instead of this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
You can have this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a><span class="remove"></span> great </div>
You can use javascript (using jquery in this case) to detect the deletion of .remove and remove your uneditable div at the same time:
// you can wrap this in an if statement and only execute in firefox
$('.remove').on("DOMNodeRemoved", function() {
$(this).prev(".tgt").remove();
});
Hope this helps!
try to wrap <a> html into span tag with attribute contenteditable=true
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false"> <span contentEditable="true">harry</span></a> great</div>
Related
<div class="title-area">
<h3><span class="editAttributeInput" id="Name" contenteditable="true" ><%= Name %></span></h3>
</div>
I want to edit this title by clicking it.
This works fine.
But also when I click to the right of this element, I trigger contenteditable. I do not want that.
I do not want to set a width on the element, because I want the editable field to only be as big as the word inside (no fixed size).
Setting a width on the .title-area does not help either.
Does anybody know how to do this?
I've tried your example and it worked. (clicks on other elements are not triggering contenteditable) the fiddle
Below is a solution with jquery. (can be helpful)
<div class="title-area">
<h3>
<span tabindex="999" class="editAttributeInput" id="Name">name</span>
</h3>
</div>
'tabindex="999"' is for focus and blur to work.
$('#Name').focus(function (e) {
$(this).attr('contenteditable', true);
});
$('#Name').blur(function (e) {
$(this).removeAttr('contenteditable');
});
I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.
I have tried adding <div id="bottom">
</div> but nothing is working. It appears to skew the entire section when I add this syntax.
I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.
Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.
Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!
You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/
<div id="bottom">
SHOP NOW
<div id="price">$70.00</div>
</div>
You can wrap the div element in an anchor element to have it link to your chosen url / file.
i.e.
<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>
This should be the code:
https://jsfiddle.net/RreTH/
Edit:
This will make the whole div element link to google for linking just the text the should be enough to link only the text.
Simply change the basket div to <a>:
<a id="basket" href="http://www.google.com">SHOP NOW</a>
This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?
When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.
You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.
Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
i have the code below
<a id="treeSelector" style="cursor:pointer" >
<img src="../../graphics/tree.gif" align="left" style="padding-right:5px;"/>
<span>Root Page</span>
<img src="../../graphics/arrow_down.gif" align="absmiddle"/>
</a>
My Problem is that using the span inside when mouseover the cursor form pointer becomes default arrow moving from arrow_down.gif to Root Pag text.
I know that if i use dislpay:block on will solve my problem BUT this not what i want because link has onmouseover show another div.
Can anyone help me
Thanks
There are 2 really easy solutions.
Use HREF
...
Use CSS
#treeSelector, #treeSelector *{ cursor:pointer }
<span style="cursor:pointer;">