Hi i have looked every where for this but cant find a good way of doing it :/
I have a dynamically populated list on my website that looks like this:
<li>
name: blue<br/>
procesor: blue<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short">
</li>
I have been looking for a way to have a small popup show with the contents of the hiddent text field in the list.
I have tried many free modal javascript code but they all seem to either stop working or destroy my template.
Dose anyone know how I could do this. I have no working javascript code as from now and am looking for the best way todo this. It doesn't need to be fancy. Just a white boc with the popup
The easiest way is to add title property to li:
<li title="Some short desc">
...
</li>
This should work on all desktop browsers, but not on mobiles.
Another way is to use excellent hint.css from http://kushagragour.in/lab/hint/
It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. You can fine tune orientation, colours, and even animations.
Try this one
$(function() {
$(".list li input[type=hidden]").each(function(index, obj) {
$(".popup").append($(obj).val() + "<br/>");
});
$(".popup").show();
});
.popup {
position: relative;
top: 10px;
border: solid 2px #E5988A;
width: 200px;
text-align: left;
margin: 0px auto;
z-index: 2;
background-color: #FFF;
padding: 10px;
}
.disabled {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
display: block;
background-color: #333;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
<li>
name: blue
<br/>procesor: blue
<br/>
<div class="right top">2001</div>
<input type="hidden" name="Description" value="short" />
</li>
<li>
name: green
<br/>procesor: gree
<br/>
<div class="right top">2002</div>
<input type="hidden" name="Description" value="anothershort">
</li>
</ul>
<div class="popup"></div>
<div class="disabled"></div>
Html Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<div>
Select <select id = "MyList"></select>
</div>
<input type="hidden" name="Description" value="short" id="hiddendiv">
</body>
</html>
Javascript
$(document).ready(function(){
var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
$('#MyList').hover(
function(){
var value=$('input').val();
alert(value);
}, function() {
}
)
});
Related
I want when i click in each one of them to pop the span element with class color but only for that button.
[![enter image description here][1]][1]
I only achieved when i click on one of them to change the visibility to visible on all elements with class colors.
my Code : https://jsbin.com/govowakasa/edit?js
document.getElementById("btn-apple").addEventListener("click", function(e) {
showColor()
});
function showColor() {
const colors = document.getElementsByClassName("color");
for (let i=0; i<colors.length; i++) {
colors[i].style.visibility = 'visible';
}};
You can simply add this line
fruits[i].style.backgroundColor = 'red'
You can not use the same ID for more than 1 element.
I replaced the IDs of buttons with a new class name fruit-btn.
Then I made an array in JS of both buttons and color spans.
Then I looped through each button to add an EventListener.
In the event I added another loop that hides every color span and then makes the i span visible. There is no need for a function.
const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");
for (let i = 0; i < fruit_btn.length; i++) {
fruit_btn[i].addEventListener("click", function(e) {
for (let i = 0; i < fruit_btn.length; i++) {
color_spans[i].style.visibility = "hidden";
}
color_spans[i].style.visibility = "visible";
});
}
body {
font-size: 2rem;
}
li {
margin: 20px;
list-style: none;
}
button i {
cursor: pointer;
font-size: 3rem;
}
.color {
margin: 10px;
border: 1px solid black;
background-color: blanchedalmond;
display: inline-block;
padding: 10px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<link rel="stylesheet" href="list.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<p>
FRUITS
</p>
<ul>
<li class="items">
<button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
<span class="color">red and yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-carrot"></i></button>
<span class="color">orange</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-lemon"></i></button>
<span class="color">yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
<span class="color">red and green</span>
</li>
</ul>
<script src="/week-4/index.js"></script>
</body>
</html>
I would suggest to add/remove a Class instead of adding/removing directly CSS styling.
I have three tooltip buttons on a page. I can close any open tooltip by clicking anywhere outside buttons. And this is what I came across:
In the code below, when I click on any place on the page, the handler of this part of code is activated $(document).on('click', (event) => this.closeOnOutsideClick(event));
I can see in inspector, that function closeOnOutsideClick is fired three times - it makes three checks for each tooltip button present on the page. I cannot figure out what mechanism is responsible for that and why the check if (!$(event.target).closest(this.$elem)) is not performed only once? My code can be found here and also below: https://jsfiddle.net/bakrall/786cz40L/
This is a simplified version of a more complex code just to give example of my issue:
const selectors = {
tooltip: '.tooltip-container',
tooltipButton: '.tooltip-button',
tooltipMessage: '.tooltip-message'
}
class Tooltip {
constructor(tooltip) {
this.$elem = $(tooltip);
this.$tooltipButton = this.$elem.find(selectors.tooltipButton);
this.$tooltipMessage = this.$elem.find(selectors.tooltipMessage);
this.$tooltipMessageText = this.$tooltipButton.attr('data-tooltip-content');
this.bindUiEvents();
}
bindUiEvents() {
$(document).on('click', (event) => this.closeOnOutsideClick(event));
this.$tooltipButton.on('click', () => this.showTooltipMessage());
this.$tooltipButton.on('blur', () => this.hideTooltip());
}
showTooltipMessage() {
this.$tooltipMessage
.text(this.$tooltipMessageText)
.addClass('shown-message');
}
hideTooltip() {
this.$tooltipMessage
.text('')
.removeClass('shown-message');
}
closeOnOutsideClick(event) {
if (!$(event.target).closest(this.$elem)) {
this.hideTooltip();
}
}
}
//class in another file
const tooltip = $('.tooltip-container');
tooltip.each(function(index, item) {
new Tooltip(item);
})
.input-wrapper {
margin-bottom: 2em;
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-message {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 10em;
padding: 0.5rem;
background: #000;
color: #fff;
}
.tooltip-message.shown-message {
display: inline-block;
}
button {
width: 1.2em;
height: 1.2em;
border-radius: 50%;
border: 0;
background: #000;
font-family: serif;
font-weight: bold;
color: #fff;
}
button:focus {
outline: none;
box-shadow: 0 0 0 0.25rem skyBlue;
}
input {
display: block;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tooltip.css">
</head>
<body>
<div class="input-wrapper">
<label for="name">
What's your name?
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="This clarifies whatever needs clarifying">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="name" type="text"/>
</div>
<div class="input-wrapper">
<label for="age">
What's your age?
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="This is to know how old you are">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="age" type="text"/>
</div>
<div class="input-wrapper">
<label for="nationality">
What's your nationality
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="What country are you from?">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="nationality" type="text"/>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="tooltip.js" async defer></script>
</body>
</html>
tooltip.each(function(index, item) {
new Tooltip(item);
})
Since you instantiate 3 Tooltips, you bind a separate event listener to the document each time. Each listener is getting triggered with each click. However, each of those listeners has a different this which is what allows each listener to tell if its Tooltip was clicked and if not, hide it.
If you want a single listener you could store a list of all your Tooltips and have the event listener iterate through the list of Tooltips, closing all Tooltips that were not clicked.
Your click event is firing on mutliple elements, because you specified just (document). Maybe you can be more specific:
$(document).on('click', '.input-wrapper', (event) => this.closeOnOutsideClick(event));
I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
margin: 0 auto;
}
#newElement {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: red;
position: absolute;
}
</style>
</head>
<div id= "parent"></div>
<br><br>
<!-- Script to insert div element -->
<script>
function insert() {
$("#parent").append('<div id = "newElement">A '
+ newdiv </div>');
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>First Name:</b> <input type="text" name="positionX">
<br><br>
<b>Last Name: </b><input type="text" name="positionY">
<input type="submit" value="Submit">
</body>
</html>
Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent
i.e. something like
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
}
#newElement {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="parent"></div>
<!-- Script to insert div element -->
<script>
function insert() {
// Get the X and Y from the form elements
var x = parseInt($("[name='positionX'").val());
var y = parseInt($("[name='positionY'").val());
var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
$("#parent").append(newElement);
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>X:</b><input type="text" name="positionX" />
<br />
<b>Y:</b><input type="text" name="positionY" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
I am working on an app where I need an input with the autocomplete function provided by jQuery. Everything is okay, until I add some more elements into the <ul> where the options are actually added.
What I need, is some 'contextual help' where I can show to the user some basic queries he can enter there.
They appear and they seem to work, until you press the UP arrow key multiple times. If you are on the first element and press the up arrow key, the focus moves to the input. If I press the up arrow key again, an error appears and my app crashes:
uncaught TypeError: Cannot read property 'value' of undefined
at $.(fiddle.jshell.net/_display/anonymous function).(anonymous function).menufocus (https://code.jquery.com/ui/1.12.1/jquery-ui.js:5831:25)
at HTMLUListElement.handlerProxy (jquery-ui.js:606)
........
The down arrow key is working without problems.
You can check a jsfiddle here or the one below.
How to replicate the error:
Focus on the input box and write COM; a dummy autocomplete will apear
Use the down arrow key to move down 1-2 elements; then, use the up arrow key to move back to the first element;
Press the up arrow key to move the focus onto the input box
Press the up arrow key again
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
open: function(e, ui) {
var autocompleteElement = $('.ui-autocomplete');
contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]
autocompleteElement.append('<li class="ch">Contextual Help</li>');
for (var i = 0; i < contextualItems.length; i++) {
autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
console.log(contextualItems[i]);
}
},
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
}
});
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
I tried changing the Contextual Help in a div, I tried to use categories, but I did not succeed. Can you please give me a hint or an idea on how I might solve this?
Thanks!
Jquery-UI's autocomplete always will create a menu with an items option that accepts all children as menu items. Unfortunately, it's hardcoded in the autocomplete class. You can change the option to avoid selecting elements that aren't proper items, but JQuery recommends against changing it after the menu is already created. Still, you can still do it, and it seems to work for me. To change the items option in the ui-menu that is created after the autocorrect input, I did:
$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)" );
In my example, I used the sibling selector so that you can have it particular to the autocomplete id (assuming there's only at most one autocomplete per container) if you want to. Whatever is the best way for you to select the ui-menu is what you should use; this was just an example.
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
open: function(e, ui) {
var autocompleteElement = $('.ui-autocomplete');
contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]
autocompleteElement.append('<li class="ch">Contextual Help</li>');
for (var i = 0; i < contextualItems.length; i++) {
autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
console.log(contextualItems[i]);
}
},
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
}
});
$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)");
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
</body>
</html>
JSFiddle at:
https://jsfiddle.net/p1y2587a/7/
As mentioned in the comments, I doubt you're supposed to manually change the contents of .ui-autocomplete.
What you can do instead is add a contextual help element outside of the dropdown and position it dynamically upon focus (or any other event, depending):
var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
},
focus: function(event, ui) {
$('[data-context-help]')
.css({
top: $('.ui-autocomplete').position().top + $('.ui-autocomplete').outerHeight(true),
left: $('.ui-autocomplete').position().left,
width: $('.ui-autocomplete').outerWidth(true)
})
.text('Help for ' + ui.item.value)
.show()
},
close: function(event, ui) {
$('[data-context-help]').hide();
}
});
.ch {
background-color: #EEE;
border-top: solid 1px grey;
padding-top: 5px;
text-align: center;
font-weight: bold;
position: absolute;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<div data-context-help class="ch" style="display:none">Help goes here</div>
</body>
</html>
I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?
I'm using the following code in a custom code module for Joomla.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p>More</p>
</body>
</html>
This is my article:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
IDs must be unique identifiers. For multiple elements, use class names.
Id's should be unique on a page.
You could wrap your slider divs in a wrapper div and use that as basis for iterating through your sliders something like this.
HTML:
<div id="sliders">
<div class="boxVisible"></div>
<div class="boxHidden"></div>
</div>
Javascript:
function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");
for (s in sliders) {
if (sliders.hasOwnProperty(s)) {
if (sliders[s].className == "boxVisible") {
sliders[s].className = "boxHidden";
alert('changed visible');
} else if (sliders[s].className == "boxHidden") {
sliders[s].className = "boxVisible";
alert('changed hidden');
}
}
}
}
showHide2("sliders");
the dom elements can't have the same id's! if you give the same id to the multiple dom elements, javascript will take only the first one.