Develop Reference

prevent tabbing on the icon when filling some input-fields in blazor

I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the
<input type="time">
I want that the tabbing only hits the input area, not the icon next to it.
This is the current state:
example input field:
<div class="text-section">
<label for="startTime"
class="text label without-margin">#((MarkupString)loc["StartTime"].ToString())</label>
<div class="property-container-three">
<div class="property-icon">
<div class="icon solid start" tabIndex="-2">#Icons.Startzeit</div>
</div>
<input class="input-text nomargin centerInputContentVertical"
type="time"
id="startTime"
#ref="startTimeElement"
#bind-value="blazorStartTime"
#onblur="HandleStartTimeSet">
</div>
</div>
I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
padding: 8px 12px;
height: 38px;
width: 100%;
}
I do not have any more ideas or approaches...

After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.
I can only replicate this bug on Edge. And it seems MS won't solve it...
You can target it with CSS: idea from here
input[type="time"]::-webkit-calendar-picker-indicator` {
display: none:
}
Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?
Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.
The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.
Maybe in future this sort of feature will be introduced and there will be a working answer for it....

When using the data-list element is there a way to show tool-tips for each option

So I currently Have a data list full of different abilities for a game is there any way to make it so when you hover over each ability it will give a tooltip saying what the ability is? It doesn't have to be a tooltip just something that functions similarly, a iframe would work if you have a smart idea on how to do it!
here is the website: https://mindweavedmstation.hunterscott1.repl.co/
if you click the edit button(right under ability), then it will show up with three + buttons press the one under abilities, this will create a new box if you click in this box it will show the data list of abilities. I would like for as you hover over a ability a box will pop up to the right explaining the ability.
here is a link to the code: https://repl.it/#HunterScott1/MindWeaveDMStation#index.html
The data list can be found at script.js line 108
If you have any clarifying questions feel free to ask!
Thank you!

The question is how to add some onhover action to an HTML option tag in a datalist element.
The immediate answer is that you can't. You can't even style the individual options (though some browsers let you a little this is not standardised), let alone instigate some action onhover.
There are some workarounds:
Automatically replace all such elements
You can introduce some Javascript which scans through your document, finds e.g. droplist or select elements, sets them not to display, and adds alongside them 'standard' elements like divs which emulate them. You can see further discussion on this for example at How to style the option of an html "select" element?
Although this might be useful, for example if you do not have complete control of all the source code, it adds a layer of complexity which isn't necessary if you can implement the HTML yourself.
If you control the HTML, implementing your own options drop down is not very complex and has the added advantage that you can style things the way you want them to match the rest of your site, not rely on the (inconsistent) styling of such lists across browsers.
Here's some code to get you started. Add CSS to the elements as you like:
<head>
<style>
.select {
background-color: white;
width: 300px;
height: auto;
font-size: 16px;
border-style: solid;
padding: 10px;
}
.options {
display: none;
}
.option {
width: 100%;
height: 40px;
background-color: white;
}
.hoverinfo {
display: none;
float: right;
background-color: #eeeeee;;
}
ul {
list-style: none;
}
</style>
</head>
<body onclick="document.getElementById('select').firstElementChild.style.display='none';">
<div id="select" class="select" onclick="event.preventDefault();event.stopPropagation();this. firstElementChild.style.display='block';">
Select from this list
<ul class="options">
<li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
Option 1
<div class="hoverinfo">info about this option</div>
</li>
<li class="option" <li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
Option 2
<div class="hoverinfo">info about this option</div>
</li>
</ul>
</div>
<script>
function userhaschosen(el) {
event.preventDefault();
event.stopPropagation();
el.parentElement.style.display='none';
alert("user has chosen option "+el.firstChild.textContent);//instead of this alert, do whatever it is you want to do when the user has clicked an option
}
</script>
</div>

Force hover state secondary element on click

quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.

Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.

load some content from txt and add to html markup

Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.

Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.

JavaScript - tooltip div on hover

I'd like to implement this situation: user hovers link and on his screen appears div with additional information.
There is no problem, to generate div with absolute position, populate data and display it with jQuery, but the problem is with maintainability. I want to separate logic and view. What if I'd like to change page layout in the future? How programmer will know, that some part of page exist in JavaScript file?
Is it some elegant way to separate view (in my case HTML structure) and logic (data obtained from server in JSON using JS script) and combine them? Is it any ... templating engine or something like that in JavaScript?

You can generate your HTML entries like this
<a>
My Cool Link
<div class="tooltip">
This link is awesome!
</div>
</a>
And use CSS to style the tooltip:
(The important part is a:hover .tooltip and everything except background on .tooltip
a {
display: inline-block;
}
a:hover .tooltip {
visibility: visible;
}
.tooltip {
position: relative;
top: 20px;
left: -50%;
display: inline;
visibility: hidden;
background: #eee;
}
Example: http://jsfiddle.net/4K7sB/
Then you just need to populate the elements with the correct text using JS.

Bootstrap does all this and more: http://getbootstrap.com/javascript/#tooltips
To put it in:
$('#example').tooltip(options)
And the markup being:
<div class="tooltip">
<div class="tooltip-inner">
Tooltip text here!
</div>
<div class="tooltip-arrow"></div>
</div>
Go to the link for a more detailed explanation on how to implement it

You can alter the Title="information" dynamicaly by some program or script and use the following code to display it as a tool tip,found it on net
http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Just add title attribute in div tag like below code....
<div title="First Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
<br /><br />
<div title="Second Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
just copy paste and check.