I want to display images in dropdown... I'm using tag for this purpose, but it won't show the images...
HTML Code:-
<label for="event_icon">Choose Icon: </label>
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg"><img src="icons/vaisakhi.jpg" width="20px" height="20px"/></option>
<option value="cake.png"><img src="icons/cake.png" width="20px" height="20px"/></option>
<option value="game.png"><img src="icons/game.png" width="20px" height="20px"/></option>
</select>
html:
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
<option value="cake.png" data-style="background-image: url('icons/cake.png');"></option>
<option value="game.png" data-style="background-image: url('icons/game.png');"></option>
</select>
script:
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", {text: item.label});
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#event_icon")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
</script>
You can try this
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Related
I want to set attribute name & show select option if the selected text is not "Super Admin" and unset the attribute name & hide the select option if the selected text is "Super Admin".
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
The element that I want to show & hide:
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
#foreach ($company as $cp)
<option value="{{ $cp->id }}">{{ $cp->name }}</option>
#endforeach
</select>
</div>
JQuery code:
$(document).ready(function() {
$('#role_user').change(function() {
if ($('#role_user option:selected').text() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else if ($('#role_user option:selected').text() == "Super Admin") {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
I have tried it using the code above, but only the set & remove name attribute are working. The show & hide not working.
$(document).ready(function () {
$('#role_user').change(function () {
if ($(this).val() != "Super Admin") {
$('#company').show();
$('#company_i').attr('name', 'company_id');
} else {
$('#company').hide();
$('#company_i').removeAttr("name");
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<select id="role_user" name="role" class="form-control" required>
<option value="">Select role user</option>
<option value="Admin">Admin</option>
<option value="Supervisor">Supervisor</option>
<option value="Super Admin">Super Admin</option>
</select>
</div>
<div class="form-group" id="company" style="display: none">
<label>Company</label>
<select id="company_i" class="form-control">
<option value="">Select Company</option>
</select>
</div>
I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
I have a problem trying an excercise so I need help for this:
Index:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>My first servlet page </h1>
</body>
Servlet:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet primerservlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>" + request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
}
JSP:
</form>
<h1>Server hour: <%= new java.util.Date() %> </h1>
<h3>Background color</h3>
<select>
<option value="">Select background color</option>
<option value="1"> Blue</option>
<option value="2">Red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<h3> Select font color</h3>
<select>
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<input type="Submit" value="Change">
So I want to change background color and text of server hour with select tag, pressing button "change" like this
Your help is very appreciated,
i hope you are looking for this
$( "#select-background" ).change(function() {
$("h1").css('background-color',this.options[this.value].text);
});
$( "#select-color" ).change(function() {
$("h1").css('color',this.options[this.value].text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Server hour</h1>
<h3>Background color</h3>
<select id="select-background">
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
<h3> Select font color</h3>
<select id="select-color">
<option value="">Select an option</option>
<option value="1">blue</option>
<option value="2">red</option>
<option value="3">green</option>
<option value="4">pink</option>
</select>
Change
<input type="Submit" value="Change">
to
<input type="button" value="Change" onClick="changeColor();">
Change
<select> to <select id="myID">
Add to javascript code
function changeColor()
{
$('h1').css({'color' : $("#myId option:selected").html()});
$('h3').css('background-color', $("#myId option:selected").html());
}
This solution is just with one jsp:
<form method="post">
<h1 style="color:${param.color};background:${param.bg};">Server Time:<%=new java.util.Date()%></h1>
<h3>Background color</h3>
<select name="bg">
<option value="">Select background color</option>
<option>Blue</option>
<option>Red</option>
<option>green</option>
<option>pink</option>
</select>
<h3>Select font color</h3>
<select name="color">
<option value="">Select an option</option>
<option>blue</option>
<option>red</option>
<option>green</option>
<option>pink</option>
</select>
<input type="Submit" value="Change" />
</form>
I'm trying to link to other html pages via dropdown, and I've tried various codes but can't seem to get it to work. I'm using this code:
<form name="dropdown">
<select name="list" accesskey="target">
<option selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
<select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
I have different html pages laid out differently to alternate between layouts, how can I get this to work?
You may try this
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
JS: (Put this code into your <head>...</head> secion)
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
I have a elemetn in my page. I don't control all javascripts used in this page, and seems that in some place my "select" element is being parsed by dojo and changed to a dijit element (dijit.form.select).
This element does not have an attribute "data-dojo-type", so I don't know why it is being changed.
Is there someway to avoid dojo parse this element?
<tr>
<th scope="row"><div dojoType="dijit.InlineEditBox">Stuff</div></th>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
I can't see the problem you have in this jsfiddle. The InlineEditBox becomes a dijit, but the <select> does not. The example can try both Dojo 1.6.0 and Dojo 1.8.3:
HTML:
<script>
var dojoConfig = {
parseOnLoad: false
};
</script>
<script>
var v16 = "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js";
var v18 = "https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js";
var dojoUrl = v18;
document.writeln("<script src='" + dojoUrl + "'></scr" + "ipt>");
</script>
<table border="1">
<tr>
<th scope="row">
<div id="inlineEditBox1" dojoType="dijit.InlineEditBox">Stuff</div>
</th>
<td>
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>
JS:
function dojo16ready() {
if (!(dojoConfig && dojoConfig.parseOnLoad)) {
dojo.parser.parse();
}
}
function dojo18ready(parser, registry) {
function go() {
console.log("inlineEditBox1", registry.byId("inlineEditBox1"));
console.log("select1", registry.byId("select1"));
}
if (!(dojoConfig && dojoConfig.parseOnLoad)) {
parser.parse().then(go);
}
}
function init() {
console.log("dojo.version", dojo.version);
if ("function" !== typeof require) {
// Must require before onload
dojo.require("dijit.InlineEditBox");
dojo.addOnLoad(dojo16ready);
} else {
require(["dojo/parser", "dijit/registry", "dijit/InlineEditBox"], dojo18ready);
}
}
init();