It's a stupid question, I'll give you that. For the life of me I can't figure out how to align the text and my colorpicker. How do I get everything to be on one line, rather than the two lines it is now. See my fiddle. I've tried getting rid of display:block and clear:both but that didn't seem to work. Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" />
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#color_picker").colorpicker();
});
</script>
</head>
<body>
<span>Select a color: <input id="color_picker" value="#92cddc"/></span>
</body>
</html>
Please see my fiddle for the css and js (I don't want to clutter everything up by posting everything here)
Try using this way: http://jsfiddle.net/C7hAY/6/
html:
<span style='display:block; width:320px;'>
Select a color: <input id="color_picker" value="#92cddc"/>
</span>
jquery:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css('float','right');
});
Although i suggest you to do it with css.
What happened there:
When you bind the colorpicker to the input element jQuery wraps it with div so if you don't style that div it will always be in the second line and i styled it dynamically with use of jQuery, using .parent().
Here is the simplest solution:
$("span > div").css("display","inline-block");
Demo: http://jsfiddle.net/C7hAY/12/
The issue:
When you create the color picker, it wraps your <input> element inside a div. The generated code will look like this:
<span>Select a color:
<div style="width:181px;">
<input id="color_picker" value="#92cddc" class="colorPicker evo-cp0">
<div class="evo-colorind" style="background-color:#92cddc"></div>
</div>
</span>
That's why there is a newline in there.
Solution: Live Demo
Just set the style of the div to display:inline-block;.
Code:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css("display", "inline-block");
});
Related
I am using a JavaScript editor in www.sololearn.com/Codes/
when I put $ sign for a jQuery it says that $ is undefined.
How can I add a jQuery to my code so it will work but keep the code separated like in the editor: one slot for HTML, another slot for CSS, another for JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
</head>
<body>
<div id="mainScreen">
<p id="instructions">Insert a sum to turn it into coins</p>
<button class='Button' id="btn1">Button</button>
<button class='Button' id="btn2">Button</button>
<button class='Button' id="btn3">Button</button>
<br>
<p id="resultField">The coins are: </p>
<p id="matrixField"> </p>
</div>
<div id="pickCoinsScreen">
<script src="jquery-3.1.1.min.js"></script>
</div>
</body>
CSS:
.Button:active, .active {
background-color:red;
color: white;
}
JavaScript:
$('.Button').click(function(
$(this).toggleClass('active');
e.preventDefault();
});
Firstly, your Javascript code has few errors so i have solved that and also implemented some best practices of using jQuery's "DOMReady" function.
$(function(){
$('.Button').click(function(){
$(this).toggleClass('active');
});
});
within the <head> tag I have inserted the link to google hosted library of jQuery. Now your <head> element contains this code.
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Side note: I have removed e.preventdefault() because it's not necessary in this case.
I have tested it on solo-learn, it seems its working.
I'm getting started with JQuery by trying to get a hidden message to show up.
However when I load it, the message is still hidden.
The message has two classes "error" and "hidden", I want to remove the class "hidden" with javascript/JQuery.
<head>
<title>Title</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<span class="error hidden" id="error">This field is required.</span>
<script>
$("error").removeClass("hidden");
</script>
</body>
My css
.hidden {
visibility:hidden;
}
What am I missing? Thanks for any help!
$("error") will not work because error is not a valid selector. You need to use a valid CSS id selector to select the element:
$("#error").removeClass("hidden");
I have spent HOURS trying to get any new timepicker to work (previously used https://github.com/weareoutman/clockpicker which was great but always went off screen on mobile phones).
Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got https://github.com/Eonasdan/bootstrap-datetimepicker going (not great on a mobile but...)
My problem is I have lots of tiny input fields for dates so I need to get rid of the glyphicon and just onclick on the input field itself.
I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<form class="form">
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false, minuteStepping:5,
});
});
</script>
</div>
</div>
</html>
EDIT: This is beyond weird. Got rid of the glyphicon. Put the other span around the input. Works but with a big ugly border. Tried disabling the input-group-addon class by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that class and it stopped working. So looks like some sort of regex within span is going on.
I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.
It's easy. Just refer to the documentation :)
http://eonasdan.github.io/bootstrap-datetimepicker/#example6
According to the documentation this should be no big deal.
Just use one property in javascript as below
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false,
minuteStepping:5,
allowInputToggle: true
});
});
</script>
allowInputToggle: true //if this property is set true, this will allow opening
of datetimepicker dropdown on both icon click as well
as on input field click.
Use
allowInputToggle : true;
Default: false
If true, the picker will show on textbox focus and icon click when
used in a button group.
I have tried using JavaScript and jQuery with my HTML file, but it is not working properly. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {white-space: nowrap;}
h1 {white-space: nowrap;}
</style>
<script src="jquery.js"type="text/javascript"></script>
<title>SolicitueCotizaciones</title>
</head>
<body>
<script>
function myFunction() {
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>")};
</script>
<br/> Descripcion:
<br/>
<textarea id="improve" rows="3" cols="20"></textarea>
</p>
<div class="divider"/>
<div style="align-items:left"></div>
<p>
</p>
<p>
<input type="button" value="+Agregar Pieza" onclick="myFunction()">
</p>
</body>
</html>
I have also tried copying code from tutorial websites that work properly but when I run them in my computer, they stop working. Can anyone help me figure out what's happening and what I should do to solve it?
EDIT: What I'm trying to achieve is to add the new text above the "+agregar pieza" button and below the text input box labeled "descripcion" once you press the "+agregar pieza" button, but this never happens. I have tried the corrections that were posted in the comments, and I edited the code above to include them. However, as of this edit, it is still not working at all. I would like to use the .before command from jquery to achieve the desired result, but if there is a better way to do this, I would like to know.
First, jQuery is not native to your browser, you need to load it before using it. The tutorials should help you here.
Second, your code is not correct, it should be something closer to this:
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>");
Live demo: http://jsfiddle.net/wKhap/
It isn't working because you need to import jQuery before using it. In order to do so, you need to add this tag:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Add this before any other references to scripts that use jQuery.
I'm working with a blog and I wanted to place a JQuery scroll bar into my div box for the main content area. I'm kind of new to JS but I think I missed something. The devs provided a script but I don't believe its correct. Just a side note: all the libraries are loaded before the script so I don't believe that's where the problem is. Here is what I current have (MINUS all the Sql crap):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../css/Styles.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="BKlayer2">
<img src="../Images/BKlayer2.png" />
<div class="InnerContent1">
<img src="../Images/innerContent1.png" />
</div>
<div class="innerContent2">
<img src="../Images/innerContent2.png" />
</div>
<div class="Feedback">
<img src="../Images/Feedblockbk.png" />
</div>
<div id="blog_Posts">
<?php do { ?> Updated on: <?php echo $row_displayBehaviors['formatted']; ?><br />
<br />
<?php echo $row_displayBehaviors['title']; ?>
<br />
<br />
<?php echo $row_displayBehaviors['blog_entry']; ?>
<p> </p>
<?php } while ($row_displayBehaviors = mysql_fetch_assoc($displayBehaviors)); ?>
</div>
<?php
mysql_free_result($getArchives);
mysql_free_result($displayBehaviors);
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".blog_Posts").mCustomScrollbar();
theme:"light"
});
})(jQuery);
</script>
</body>
</html>
I changed .content to .blog_Posts because that's the div box I'm trying to apply this too. I checked all other css and additional info to make sure .content was not referenced anywhere else.
After uploading scripts and all other relevant information to my server, I checked in firebug to find out the problem.
Now firebug is giving me this error:
TypeError: $(...).mCustomScrollbar is not a function
[Break On This Error]
$(".blog_Posts").mCustomScrollbar();
I think firebug said it better than I could. I didn't see a function defined here. I'm not exactly sure what the function would be if it has to be included.
It sounds to me like you haven't included the jQuery plugin script.
mCustomScrollbar is not a part of jQuery, you'll need to reference the plugin.
This sounds like the plugin you are talking about, include the script reference from there:
http://manos.malihu.gr/jquery-custom-content-scroller/
I figured it out. Just if anyone wants to know:
I did it by working backwards on the demo script and figuring it out. Basically what I didn't do was have the CSS lined up and I also didn't have the scripts in the correct directories.
As for the proper script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".body,.content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
basically I added in the .body in and changed .content so it corresponded to my main styles sheet. You really don't need any css on your page other than this:
<style>
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;}
</style>
That's the key I was missing.