I am using select2 in my project. As per design, I am removed the search box in selectbox2, but after removed search box, keyboard select option not works. Could any one help me to fix this. - Thanks
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<div>Skills</div>
<select id="skills" style="width: 200px">
<option>html</option>
<option>css</option>
<option>js</option>
</select>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#skills').select2({
minimumResultsForSearch: Infinity
});
});
</script>
</body>
</html>
JS Bin: http://jsbin.com/kipuzet/edit?html,output
Instead of
$('#skills').select2()
use
$('#skills').select()
That should work.
Related
I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?
I have tried this 'it works normally but not on the site i am working on'
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body>
</body>
</html>
Give id to your body and handle via CSS like below.
#yourID {
background-color:rgba(255, 0, 0, 0.4);
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yourID')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body id="yourID">
</body>
</html>
Note: work with id , not with class.
The z-index for toast is given by the toast-container which already got z-index:9999 by default.
You can override this according to your needs (check your sites code for the highest z-index and add 1) by
.ui.toast-container {
z-index: 999999;
}
Every toast inside this container will inherit the z-index. To be even more sure you might add the z-index for every single toast as well
.ui.toast-container .toast-box {
z-index:999999;
}
I am a beginner in JavaScript and HTML. I am trying to prevent buttons from submitting forms. It is not working with my below code. It is working when I remove the type:button and return false in the code but if I remove it is always submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" onclick="myFunction1();return false;" style="font-size:24px">Button <i class="fa fa-info-circle"></i></button>
<script type="text/javascript">
function myFunction1(){
}
</body>
</html>
JQUERY
You should be able to do:
$('#formid').submit(false);
or
$('#formid').submit(function(e){ e.preventDefault(); });
To use the jquery library visit the official website
http://jquery.com/download/
PURE JS
document.getElementById('formid').addEventListener('submit', function(e) {
e.preventDefault();
});
here is your example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
return false;
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Count rabbits"/>
</body>
</html>
First of all, take care about closed pair tags. In your snippet you have unclosed script tag. Don't use button where it isn't necessary, but use the input type button instead.
Im trying to dynamically update the CSS-Stylesheet of my page using jQuery and everything seems to be working fine in Chrome, but sadly in IE11 doesnt seems to do the trick.
The following code shows the HTML and JS Files:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="default-style" content="style-02">
<title>Stylesheet Switcher</title>
<!-- CSS -->
<link rel="stylesheet" href="style-01.css" title="style-01">
<link rel="stylesheet" href="style-02.css" title="style-02">
<link rel="stylesheet" href="style-03.css" title="style-03">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello World</h1>
Change style
<select id="styleChanger">
<option value="style-01">style-01</option>
<option value="style-02">style-02</option>
<option value="style-03">style-03</option>
</select>
<br/>
<img src="icons.gif" alt="Smiley face">
</body>
</html>
And the JS File:
$(document).ready(function()
{
var theme = localStorage.getItem('style');
if (!theme) {
localStorage.setItem('style', 'style-01');
};
updateTheme();
$("#styleChanger").val(theme);
$("#styleChanger").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
localStorage.setItem('style', selectedValue);
updateTheme();
});
});
function updateTheme()
{
currentTheme = localStorage.getItem('style');
$('meta[http-equiv=default-style]')[0].content = currentTheme;
};
Does anybody knows, why after updating the "content" in the META tag IE doesnt loads the new CSS File?
Thanks for your help
I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>
I created few unordered lists and a search bar above them. Now I want that as soon as I enter any letter (which is already existing in my list with the letter begining in it) in the search bar it should highlight the whole word or the line. I wrote code for them but its not working. I am following this tutorial
index.php class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p><input id="search" type="text"/></p>
<ul id="names">
<li>cat girl</li>
<li>dog man</li>
<li>rat kid</li>
<li>bird boy</li>
</ul>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/select.js"></script>
</body>
</html>
select.js class:
$(document).ready(function(){
$('#search').keyup()(function(){
var search=$(this).val();
$("#names li:contains('"+search+ "')").addClass('highlight');
});
});
style.css class
ul{
list-style:none;
margin:0;
padding:0;
}
.highlight{
background-color: blue;
}
You messed up your closure.
.keyup()(function() is wrong.
Try it like this:
$(document).ready(function () {
$('#search').keyup(function () {
var search = $(this).val();
$("#names li:contains('" + search + "')").addClass('highlight');
});
});
Demo: http://jsfiddle.net/qZ7XS/
Update, you should also read this: http://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/