I am using wordpress and on some of my pages I'd like to get some nice bootstrap forms up and running but the style messes up. If I paste my code and try it locally it all works fine. I think the stylesheets are colliding or something? How can I fix it?
Here's my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://192.3.88.113/bootstrap-select.css">
<style>
body {
padding-top: 70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://192.3.88.113/bootstrap-select.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="col-md-1 control-label" for="lunchBegins">Lunch (Begins search):</label>
</div>
<div class="form-group">
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
</div>
<script>
$(document).ready(function () {
var mySelect = $('#first-disabled2');
$('#special').on('click', function () {
mySelect.find('option:selected').prop('disabled', true);
mySelect.selectpicker('refresh');
});
$('#special2').on('click', function () {
mySelect.find('option:disabled').prop('disabled', false);
mySelect.selectpicker('refresh');
});
$('#basic2').selectpicker({
liveSearch: true,
maxOptions: 1
});
});
</script>
How it SHOULD look:
How it ends up looking on my wordpress page:
Please try this and let me know if this working. Regards.
HTML
<select data-live-search="true" title="Please select a lunch" class="selectpicker show-menu-arrow test">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
JS
$('.selectpicker').selectpicker();
DEMO
I will update my answer if it not working.
Related
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I'm trying to create a range slider using HTML and CSS.
I want the range to be between two dates.
I looked up the code for a range slider and found this,
<form method="post" action="/action_page_post.php">
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
</form>
This is perfect in terms of what I want, but I want the minimum and maximum values to be dates. Lets say I want the slider to range from 2018-05-29 and 2018-06-25.
I'm not sure how to make this happen...
You can use this sample in CodePen provided by Rod Reyes. It's using jquery-ui plugin.
$(function () {
$("#slider-range").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2014.01.01').getTime() / 1000,
step: 86400,
values: [new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function (event, ui) {
$("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<p>
<label for="amount">Date range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
</p>
<div id="slider-range"></div>
See it in action also here: https://codepen.io/2rod/pen/JtIki
You should try this plugin. I think this does exactly what you need.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script src="jquery.js"></script>
<script src="jquery-ui.custom.js"></script>
<script src="jQDateRangeSlider-min.js"></script>
<script>
//<!--
$("#slider").dateRangeSlider();
//-->
</script>
</body>
</html>
This is the basic usage of the plugin. Unfortunately it's a 3rd party plugin if the link went not accessible you may lose the plugin as well.
In the below jquery mobile html code, onchange function (onchangeInDropDown();) is called whenever there is a change in multi-select option in drop down. I'm doing some time consuming operation (updating the UI, based on item selected) whenever there is a change. I'm seeing some strange behaviour if I select more than one options quickly (one after another). Could you please suggest me a better way to handle this.
Thought of implementing the following solution, but do not know how to implement it.
Removing the onchange function and put the OK button in the overlay menu. On selecting the OK button, will call a function to get all the item selected and update the UI with respect to the item selected, ie., update all together instead of every change. The problem here is I do not know how to put OK button in the overlay menu. Is there a way to put ok button in overlay menu
Please help me!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Multiselect item </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- below three tags , link and script are for showing pop up toast dialogs -->
<link href="css/toastr.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/toastr.js"></script>
<link href="css/toastr-responsive.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
function onchangeInDropDown (){
//Performing some time consuming operation and updating the ui based on item selected
}
function getDropDownValue() {
var inputElems = document.getElementById("item_drop_select");
count = 0;
for (var i=1; i<inputElems.length; i++) {
if (inputElems[i].selected == true) {
count++;
alert (inputElems[i].value);
// Update the UI based on item inputElems[i].value
}
}
}
</script>
</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >
<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
<option >Multi-select list of item to buy</option>
<option value="milk" id="milk" >Milk</option>
<option value="oil" id="oil" >Oil</option>
<option value="rice" id="rice" >Rice</option>
<option value="softdrinks" id="softdrinks" >Softdrinks</option>
<option value="detergent" id="detergent" >Detergent</option>
</select>
<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>
</div>
</form>
</body>
</html>
Can you please replace this data-native-menu="true". It will open Select menu as native control.
<input type="text" name="q" placeholder="Search..." />
<input type="image" src="images/searchBtn.png" name="q" />
<div id="searchResult"></div>
css...
#searchResult{width: 1000px; height: 200px;}
How to do????
This is a sample which I have tried. try this.
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load('search', '1');
function DoSearch()
{
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(document.getElementById("secrchBox").value);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
EDIT
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load("search", "1", { "nocss": true });
function DoSearch()
{
var ss = document.getElementById("secrchBox").value;
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(ss);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
Now default css will not load. You can customize as your wish.
you put the <iframe>, <script>, or whatever Google gives you inside your div!
<div id="searchResult">Google code here!</div>
You may have three options.
-The hardest one is to parse google result page. This could be done with php and some regular expressions work. If you are an experienced developer, this is the best.
-Second is to use googlesearch API. This one is very easy to implement. You can see how to do it here. It supports REST calls, which are super easy to use. Pros: Relatively easy to implement, lots of documentation and examples. Cons are that you have an usage quota of 100 queries per day. Also remember that you need to get your API-KEY and register to use it.
-Third one, Include an Iframe. This is super easy to implement, just one line of code, but it's not clean and probably you don't want to have google's page inside yours.
Probably there's another one mixing a lot of javascript and Iframes, but, I don't see the point of doing that since there are many better options.
Let me know if you have any questions..
Thanks!,
#leo.
I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.
It is working fine in other browsers.
I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.
My simple code is here:
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').bgiframe();
});
</script>
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
</head>
<body>
<h1>Autocomplete using YUI !</h1>
<label for="myInput">Search names in our database:</label>
<div id="myAutoComplete" class="yui-skin-sam">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<br>
<div>
<form action="#" method="get" accept-charset="utf-8">
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</form>
</div>
</body>
Here select is displayed over myContainer (myContainer displays populated suggestions).
I know I am making some blunder.
Please help me to figure it out.
One thing you can do is hide the <select> (use visibility:hidden as not to mess up the layout) at the beginning of the process and show it at the end.
BTW: The likelihood of finding another StackOverflow user using YUI + jQuery + bgiframe + ie6 is quite low. Most users like to help with debugging code, not plug-ins.
jQuery and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?
Could use jQuery autocomplete instead?
Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.
Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.
Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="myAutoComplete">
<label for="myInput">Enter a state:</label><br/>
<input id="myInput" type="text"/>
<div id="myContainer"></div>
</div>
<div>
<form action="#" method="get" accept-charset="utf-8">
<p>
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</p>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#myContainer').bgiframe();
});
YAHOO.example.Data = {
arrayStates: [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'Wyoming'
]
}
YAHOO.example.BasicLocal = function() {
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
var restoreHeight = function(sType, aArgs) {
$('#myContainer').css({height:'auto'});
};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
// oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
oAC.doBeforeExpandContainer = function () {
$('#myContainer').css({height:'50px'}); // might need to play around with this value
return true;
}
// restore height
oAC.containerCollapseEvent.subscribe(restoreHeight);
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
</body>
</html>