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");
Related
Im trying to do a simple dropzone file uploader. Im not interested in the server side as Im not doing this seriously, just trying the js for the front end. Everything seems ok, the load bar works fine, but then it always show the X image and then I get this insanely long message that contains html.
This confuses me because from the examples ive seen, if there is an error it will display the string from the js. I dont know why it's showing this long message.
Does it have anything to do with the "action" or "file" type?
A screenshot is here
https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0
Edit:
My HTML is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="assets/js/dropzone.js"></script>
<script src="assets/js/dropzone-amd-module.js"></script>
<link href="assets/css/dropzone.css" type="text/css" rel="stylesheet" />
<link href="assets/css/basic.css" type="text/css" rel="stylesheet" />
<link href="assets/css/Style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="dropzone">
<form action="/file-upload" class="dropzone dz-clickable" id="demo-upload">
<div class="dz-default">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
</div>
</body>
</html>
My bad, didn't know you were using the default Dropzone.js. I'd remove the downvote if I could but it's locked in now.
Try
<form action="UploadImages" class="dropzone">
</form>
Remove the <div id="dropzone"> too. You already specify dropzone for the form, so wrapping it in a div with id of dropzone makes no sense.
jsFiddle: http://jsfiddle.net/3zhyg73u/85/ so you can compare your code and see why it's not working.
sorry, Im pretty new to this but i think it's because the errorMessage from the error event receive's a string containing HTML when a failed post request is sent out. you can change the message by doing this. this isn't the best method but it works :/ ohh and i was using jquery for this particular project
var myDropzone = new Dropzone('#icDropZone', {
url: "/file/post",
error: function(response, errorMessage, xhrObj) {
if(response.status === "error") {
$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});
$('.dropzone .dz-preview .dz-error-message').attr('style','display:block;opacity:1;top: 150px;background:#D44F4F;');
$('.dropzone .dz-preview .dz-error-message span').html('Error uploading image')
}
}
});
I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.
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'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.
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");
});