In Chrome I have a simple contenteditable="true" span, and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it.
Example: http://jsbin.com/oyamab/edit#javascript,html,live
Html below...
<body>
<span id="hello" contenteditable="true">Hello World</span>
</body>
If you visit that link in Chrome, click anywhere in the rendered html box (the far right column in jsbin), and you can start editing. In Firefox on the other hand, you have to click on the actual span to edit it (yay!).
Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.
I strongly suspect it's just a WebKit thing. You can work around it though by making the span contenteditable only when it's clicked
Demo: http://jsfiddle.net/timdown/nV4gp/
HTML:
<body>
<span id="hello">Hello World</span>
</body>
JS:
document.getElementById("hello").onclick = function(evt) {
if (!this.isContentEditable) {
this.contentEditable = "true";
this.focus();
}
};
Related
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
I currently have a div with some information in it. See the example below:
<div class="verstuurd" onclick="alert('clicked!');">
<div class="titel"><span>Title</span><img src="imageurl"/></div>
<div class="image"><img src="imageurl"/></div>
<div class="tekst"><p>some text</p></div>
<div class="hover">
VISIBLE TEXT
</div>
<div class="delen">
VISIBLE AFTER HOVER
</div>
</div>
</div>
The :hover function works perfectly and the "delen" part is shown and the "hover" part is hidden. I only got a problem on mobile devices. If I scroll down the page on a mobile device and I touch the div, the hover will be triggered.
The answer I am looking for is; how am I able to use :hover on PC's and some sort of click event on mobile devices? So that I have to click in order to change the content and a second click will trigger the onclick of the div.
As an example of my inspiration see the website.
If you hover an item it will show the heart icons. PC uses this with hover and mobile needs a click to be shown. Unfortunately I can't find the source code which triggers this.
Are you talking about, you want an onClick="theFunctionNameToBeCalled()" fired when a div is touched (specifically on a mobile device?)
if you want that, you can use
$( "#divIdToBeTouced" ).click(function() {
//do something with a function here
});
or you could use plain ol' JavaScript to do the task.
<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>
<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>
<script>
var i = 0;
function theFunctionToBeCalled(){
i++;
if(i == 2) {
//do what you wanted once the onClick event was fired
alert("i == 2");
//now make sure to reset the flag that was made so it will work next time
i = 0;
}
else {
//change the content
alert("i == 1");
}
//do something interesting here if you want to
}
</script>
</body>
</html>
paste that code on this page http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default? and you can try it out on a browser computer
and try it on a mobile device and it should work
I tested it
Now make the hover event also call this function and it'll cover both evens
Extra info:
I've heard arguments with two possible paths to go from here and some say one way is "dangerous", I'll list the sides below If you wanted to know...
cont'd
the other argument is there needs to be an event listener added instead of a direct function call
This seems more safe. I think because it can help hide the function call its self..? I'm not sure.
Hope this helps
For my curiosity, given a CSS-only button markup like this one: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043, one can create a button visually using:
<div class="button">Click</div>
But how can we actually make it functional? For example, make it link to some other page, so when user clicks on it, she gets redirected.
I've tried wrapping a <a href> inside the <div>, but the button text shows up as a link, which is undesirable. I also tried the opposite - wrapping the <div> inside a <a href>, which seems to work but I was told this is not valid html code.
Any other suggestion?
P.S. The targeted browsers would be IE8+, chrome 14+, Firefox 11+, Safari 5+ and Opera 11+, if this makes any difference.
Have you tried changing the
<div class="button">Click</div>
into <a class="button" href="#your_link">Click</a>?
It should work as a normal link, and have the css buttons stylings and expected behavior.
Use JavaScript to bind an action to the button.
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
document.location.href = "newpage.html";
});
Add to the css:
a.button { text-decoration: none; }
To create button links:
<a class="button" href="/somewhere.html">Somewhere</a>
Using JavaScript, specifically jQuery, you can do
<div class="button" id="myButton">Click</div>
$("#myButton").click(function()
{
location.href = "mypage.htm";
});
I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).
How do I avoid this behaviour?
Demo (hover over one of the product images to see the checkbox):
http://livedemo07571.prestatrend.com/category.php?id_category=9
And here’s the code in question:
<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
<img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />
<span class="new">New</span>
<div class="right_block large">
<h3 class="large">Crew Neck Jumper</h3>
<span class="product_arrow"></span>
<p class="availability_container"><span class="availability">Available</span></p>
<span class="slash">/</span>
<p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>
<p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
</div>
</a>
This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.
If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.
I think this happen because you have the Div (block element) is inside the A (inline element) tag and by default the event will bubble up soon as you click the checkbox.
Even if HTML 5 has made the exception for the A tag and now allow a block element to be nested within that inline element. To get that working the same accross all browser you'll have to wait they all support the html 5 features
1) try with a different doctype
2) build the div outside the A has the link is not required to be executed
Can anyone shed some light to this situation: I have a link that opens in a modal, i add a link and a button that are set to go to the same url. If i click the link, the modal goes to the link, and shows the article properly. If i click the button, it shows the article embedded on the page.
Here's the url, click on newtest2
http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=category&id=1&Itemid=2
Here's the code
<head>
<script type="text/javascript">
function change_url(){
window.location.href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2"
}
</script>
next
</head>
<body>
<button onclick="location.href='http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2'">Next</button>
</body>
</html>
There is a apparent difference, being that the link calls window.location, while the button just sets location, but this is semantically the same.
That popup you got is created by JavaScript. So the link is just used for its url, but when you click it, a script gets executed that loads the content asynchronously and shows it in a popup.
This script does not affect the button (though it could). Find the script that does this and apply it to the button too.
A workaround could be:
<a href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2">
<button></button>
</a>
Edit: Although it's working, is not a recommended code, as HTML spec clearly says that using tag for item is invalid, so treat this ONLY as a workaround.
P.S. Why are you using <a></a> in section head?