We Keep Coding

Must a button have a button tag?

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.

Making a JS toggle div close when another is opened, and change image on click

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.

jQuery String selector add string from file

I have a line that creates a simple box like so:
var box = $('<button>').addClass('box');
With using the css:
.box {
border-radius: 0.7vw;
width: 40vw;
height: 50vw;
margin: 30px;
display: inline-block;
background-color: #d87c2d;
}
All fine, I get those boxes, I can even click on them.
But what I really need is generating some usable elements.
For that, I usually like to keep components separate (hope I use the correct terminology), so I made a text file with the following content:
<div>
<div class="tile" id="eventName"> Event name</div><br/>
<div class="tile" id="eventDate">2017.01.01. </div>
<div class="tile" id="eventTime">12.00</div><br/>
<div class="tile" id="description">Some boring example description about the meaningless </div>
</div>
My goal is to put this inside the $(-here-) instead of the simple <button> I have there.
To get that I tried
var box = $('/html/tileInside').addClass('box');
but didn't work, I believe JS thinks I want just the string /html/tileInside there which obviously doesn't mean anything.
So is there a way to add a string from a txt file inside the jQuery string selector?

Use ajax here.
$('<div></div>').load('/html/tileInside');
http://api.jquery.com/load/
http://api.jquery.com/jQuery.ajax/

Break Text automaticly, justification behind username?

I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497

There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...

You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/

Open jQuery generated links in a pop up

I am remaking the old website for my school. Please do not mind all of the css and html mess, since I'm busy doing that. Also, I'm not an expert in javascript, so...
Now, for my problem.
The website uses a Google Calendar for their events, etc. On the homepage, there is a little sidebar with the upcoming events. I'm not planning on changing this every other day, so I came across this jQuery thing that pulls the upcoming events from the calendar directly.
This is loaded on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script>
<script src="/jquery.gcal_flow.js"></script>
<script src="/jquery.popupWindow.js"></script>
This is how it looks:
<div id="gcf-custom-template">
<div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;">
<div class="gcf-title-block">
Agenda
</div>
</div>
<div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;">
<div class="gcf-item-block">
<div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;">
<div class="gcf-item-title-block">
<a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a>
<strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event
</strong>
<div style="display: block; clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
With the above stuff comes this script:
<script type="text/javascript">
$('#gcf-custom-template').gCalFlow({
calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com',
maxitem: 4,
mode: 'upcoming',
daterange_formatter: function (start_date, allday_p) {
function pad(n) { return n < 10 ? "0"+n : n; }
return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":";
}
});
</script>
Now, I'm trying to get the links that are produced in the "Item Titel Of Your Event" to open in a new tab.
I tried to use this script:
<script type="text/javascript">
$('#link').popupWindow({
height:500,
width:800,
top:50,
left:50
});
</script>
I modified the jquery.gcal_flow.js file to add 'id="link"' to the links,
but it won't work.
If I try it with another link not generated, it works just fine.
Any help would be welcome!
PS: A page with everything: http://www.sint-jozefscollege.be/calendar1.html
EDIT: the implemented solution is available at http://www.sint-jozefscollege.be

I'd say your problem is that the links haven't been generated when your script to bind the popupWindows runs. Therefore, the event never gets bound. That plugin doesn't seem to support delegated events, but you could always create the popup window manually, delegating the event by using .on().
$(function() {
$('body').on('click', '.link', function(e) {
e.preventDefault();
new_window = window.open($(this).attr('href'),'','height=500,width=800');
});
});
You'll also notice 2 things here. First, is that I put the code in the jQuery ready function. You should always put all jQuery related code in the ready function. Secondly, I used .link instead of #link. IDs should only be used once in a document, if you need to use them multiple times, use classes instead.