In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons?
Isn't there supposed to be a click event listener?
When I click on a star it turns blue. How can this work?
And which part of the code is exactly the button? Is it this line?
<i class="svi-star ratingicon-full"></i>
<div class="subject-answer">
<div class="ratingbar-container" steps="5">
<div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
<div class="rating" rel="1">
<i class="svi-star ratingicon-full"></i>
<i class="svi-star-o ratingicon-outline">
</i>
</div>
<div class="rating" rel="2">
<div class="rating" rel="3">
<div class="rating" rel="4">
<div class="rating" rel="5">
</div>
<div class="input-wrapper">...</div>
</div>
</div>
(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)
On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):
![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]
You can have click event on every html element there is. Therefore anything can be a button.
document.querySelector('.div').onclick = () => {
console.log('clicked on a div');
}
document.querySelector('.span').onclick = () => {
console.log('clicked on a span');
}
.div {
background-color: red;
width: 100px;
height: 100px;
}
.span {
background-color: blue;
color: white;
}
<div class="div">
<span class="span">this is a clickable span</span>
</div>
It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.
Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).
Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.
every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>.
Everything is normal don't worry ;)
Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)
Comment for more UX questions.
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I am creating popups with popover bootstrap option in creating an interactive html. I first used the following tag:
<a class="btn popoverOption"
data-content="A group of people with a shared characteristic. It is an object of observation in epidemiological studies."
data-original-title="cohort"
data-placement="bottom"
href="#"
rel="popover"
style="font-size: inherit; vertical-align: baseline; padding: 0; font: inherit;">
cohort
</a>
I have purposely made spces to show the syntax. The popup is below the text, so I tried adding data-container='body', but in this way when I zoom in the popup is frequently outside the screen. How can I make the popup always stay within my screen (without fixing the size in any way, if possible)?
Thanks in advance! Please tel me if I need to show more code, I didn't do it for brevity.
I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!
A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.
Is it possible to wrap an <a> tag around <div>s like so:
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
Eclipse is telling me the div's are in the wrong place?
If this is not allowed. How can I make the entire 'layout' class become a link?
That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).
Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.
Three options for HTML4 - use all inline elements:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Then style with display: block
Use JavaScript and :hover:
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
And (assuming jQuery)
$('.layout').click(function(){
// Do something
}):
And
.layout:hover {
// Hover effect
}
Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
And CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
This won't work with older versions of IE, of course.
While the <a> tag is not allowed to contain <div> element, it is allowed to contain other inline elements such as <span>.
When I encountered the problem i swapped the div tag with a <span>. Since the span tag is an inline element, you need to apply a display:block to the css of your <span> element, in order to make it behave like the <div> block element.
This should be valid xhtml and does not require any javascript.
Here's an example:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Another simple solution - just add an onclick event handler to the div thusly:
<div class="layout" onclick="location.href='somewhere'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
This works great for me but there is one small gotcha. I'm not sure how search engine friendly this is. I fear that google's web crawlers might not find this link so I also tend to include a traditional A HREF link somewhere in the block like this:
<div class="layout" onclick="location.href='destination_url'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
This is a link
</div>
Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class='div_class'></div>
HTML provides two general elements, where div is a natural block element, and span is a natural inline element. All other elements are similarly assigned to be a natural block or inline.
Now, while both can be made by css display to be any of inline, inline-block or block, they are still treated for enclosure purposes as their natural selves, hence the warning messages. Leopards and spots sort of thing.
However, css is only meant to be for making what an element looks like (presentation), but not actually be like (functionality), so it doesn't change an element's basic nature, though that gets very fuzzy in practice. A span made block becomes a bully that kicks everything else off the line, which is very un-inline sort of behaviour.
So, to mitigate against possible conflicts between their natural and css-induced behaviours, it is better to allow:
div or any natural block tag to only ever be block or inline-block.
span or any natural inline tag to only ever be inline or inline-block.
This will also mitigate against tending to build page structures that will likely end up churning out error and warning messages.
Basically, NEVER embed a natural block tag inside a natural inline tag, at any depth.
Why there is a really a distinction is perhaps due to a simplistic idea of what HTML was going to be used for when it was first dreamed up.
Certainly, framework makers got around a lot of these what-to-embed-where problems by just using myriads of divs everywhere, and 'divitis' was born, and still alive and well in every framework. Just have to press F12 in a browser on almost any commercial web page and drill down through a dozen divs. This very page has 15 unbroken levels of divs.
It is not hard to see why just settling on divs made sense. For example, a p tag may have a bunch of links to various sites, and that is ok because inline links are allowed in a block p. However, if not wanting to have query variables visible in those urls, then buttons are required. If only one, then the p can be put inside a form, as a p cannot contain a form.
The formaction attribute on a button can be used to target a url other than the form default, but it still does not allow independent forms, each with their own set of hidden inputs. A button can use the form attribute to use it with a form that isn't an ancestor, but it can get messy to keep track of.
For multiple links to different sites to appear as part of one paragraph though, the only way is to use a div instead of the p and then wrap each button in its own form set to inline. Most frameworks have to cope with so much more complex scenarios that nested divs are the only way to go.
It meant that they really only had to manage one tag per purpose and manage it as if it was an isolated environment. So what was meant to be an occasionally-used functional grouping tag became the web's Lego block. And none of them are going to risk breaking their frameworks by converting to HTML5 semantic tags in a hurry. In the end, semantic tags only really work for fairly static content rather than rich interactive sites.
I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.
DEMO:
https://jsfiddle.net/kutec/m9vxhcke/
As per W3C standard, you cannot do this:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
You must follow this:
<div class="boxes">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
But by following above code, you wouldn't get the whole DIV clickable :).
Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
Simple Solution:
$(function() {
$('.boxes a').each(function(){
var aTag = $(this).attr('href');
$(this).parent().attr('data-href',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Dynamic Solution:
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find('a');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr('href');
$(this).parent().attr('data-href',this);
aTarget = $(this).attr('target');
$(this).parent().attr('data-target',aTarget);
});
// imitation - default attributes' behavior on "data-" attributes
$(el).delegate('[data-href]','click', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr('data-target');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr('data-href');
el.removeAttr('data-target');
// css
$('[data-href]').css('cursor','pointer');
};
}( jQuery ));
Final call:
<script>
$('.boxes').dataURL();
</script>
Hope this would be helpful :)
You would just want to style the "a" tag as display: block;
Eclipse is appropriately telling you that your HTML is not to spec (as a div tag is not allowed in an anchor tag).
But, since you seem to want to be visually making the anchor look like a big-ol-box, then simply style it as such :)
One easy way to make the div a link/clickable is by using html javascript onclick attribute:
<div class="clickable-div" onclick="location.href='#';"><div> ... </div></div>