I have a basic function that when no answer is clicked it shows an error message in
the div id "error". this works fine but when i have a background colour and image is shows the style on the div. i'm using jquery and moo tools,
Is there a way to hide this style until the answer is set.
<style type="text/css>
#error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
</style>
<div id="error"></div>
<script type="text/javascript>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>')
}
function clearErrorBox() {
$('error').set('html','');
}
</script>
Hide the div initially and show in showAnswerAlert or where ever you need
<div id="error" style="display:none"></div>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>');
$('error').show();
}
or hide error div on document ready
$(function(){
$('error').hide();
});
the reason why hide() and show() dont work is because those ase jQuery functions, if you're using mootools, and would like to use "hide()" and "show()" you need to write functions like so:
window.addEvent('domready', function() {
Element.implement({
//implement show
show: function() {
this.setStyle('display','');
},
hide: function() {
this.setStyle('display','none');
}
});
});
or you can do this to show:
$('error').setStyle('display','block');
and this to hide:
$('error').setStyle('display','none');
Sounds like this is a validation on a select item.
Validation can be done in many ways buti suggest you look t HTML5 valiations, this might be all you need:
http://diveintohtml5.info/forms.html
Related
I have a program which allows the user to select some images and i gave them the pseudo class
.my_image_clas:hover{
border:3px solid blue;
-webkit-box-sizing: border-box; }
to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :
How can i achieve this? (With javascript)
CSS-only "hack"
At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:
img {
margin: 3px;
width: 100px;
}
img:hover, img:target {
border: 3px solid green;
margin: 0;
}
<img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.
Note that this way you can select only one image.
Pure JavaScript
If you want to do it with JavaScript though, you can use below code:
function select(element) {
element.onclick = function() {
element.classList.toggle('selected');
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
img {
margin: 3px;
}
.selected {
border: 3px solid green;
margin: 0;
}
<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.
If you want to limit the user to selecting only one element though, change the above JavaScript to:
function select(element) {
element.onclick = function() {
var selected = document.getElementsByClassName('selected')[0];
if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
if (element !== selected) { element.classList.add('selected'); }
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:
$(document).ready(function() {
$(".my_image_clas").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
.my_image_clas.Hover { border: 3px solid blue; }
#Francesco Monti I've read your comment.
for working with jquery you may add jquery.js under the head tag of your html
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
or adding online would be
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
and you can use $(document).ready(function() under the script tags.
If you want you can separate js & css files and includes those files accordingly.
Your approx CSS:
.item {
box-sizing: border-box;
border: 2px solid transparent;
}
.item.selected,
.item:hover,
.item:focus {
border: 2px solid blue;
}
Some basic jQuery:
$('.item').on('click', function (event) {
event.preventDefault(); // Prevent default behavior if .item is a link or button
$(this).toggleClass('selected');
})
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
Help! :)
So,
I have been trying to add a slide-in cookiebox with jquery,
it works perfectly on jsfiddle,
but i can't make it work on local,
it acts as if the library wasn't loaded and it just shows the box right away and the buttons dont do anything.
Fiddle: http://jsfiddle.net/u2zz4/1/
How i load the scripts in the header(already checked that both paths are working correctly)
<script type="text/javascript" src="js/jquery.min2-0.js"></script>
<script type="text/javascript" src="js/cookiebox.js"></script>
The used Jquery lib is from https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
(added the 2-0 behind it to remember its version, tested without 2-0 and it acted the same so i assume that aint the issue)
Cookiebox.js
var slideWidth = 250;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
width: slideWidth,
height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
width: 1,
height: slides.height(),
overflow: 'hidden',
display: 'none'
});
$('#show').click(function() {
if(wrapper.is(':visible'))
return;
wrapper.show().animate({
width: '+=' + slideWidth
}, 'slow');
});
$('#hide').click(function() {
wrapper.animate({
width: 1
}, 'slow', function() {
wrapper.hide();
});
});
HTML (added right under the body tag)
<div id="cookiebox">
Cookies
<div id="aboutbox">
<p>We have placed cookies on your computer to make sure this website functions properly.</p>
<p>You can change your cookie settings at any time in your browser settings.</p>
<p>We'll assume you're OK to continue.</p>
<h2>OK</h2>
</div>
</div>
CSS
#cookiebox {
margin-top:25px;
float:left;
}
#aboutBox {
padding: 0px 15px;
max-width:200px;
float:left;
background: rgba( 200, 200, 200, 0.8);
border:1px solid rgb(0,0,0);
}
#aboutBox h1{
margin-bottom: 15px;
}
#aboutBox p {
margin: 15px 0;
}
#aboutBox h2 {
padding: 10px 0;
}
FYI, i have no idea who made the original jquery code, but it wasn't me.
I have already looked around for over one and a half hour for a fix with no luck.
PS, if anyone knows how to make the bottom border show aswell i'd be very happy :)
Could the use of ajax for another item be the issue?
Hope someone can see the issue and help me out :)
You just need to put your code inside a doc.ready function, like this:
$(document).ready(function(){
// your code here
});
That is basically what the onLoad option in your jsFiddle is doing for you.
You could also do this:
$(window).load(function(){
// your code here
});
but .ready will be faster and work fine
You trying to register to events before DOM is ready
You should wrap your code in $(documnet).ready
I'm experiencing some problems with jQuery's slideUp and slideDown functions. If you go to this site
www.confide.re/confide
and click on one of the boxes, it normally works fine, but after you scroll the page and it loads some more boxes, then the slide function bugs and does it twice for no reason, if you get what I mean.
Is this something I've done wrong somewhere or is this a known bug?
Thanks
Here is the code:
var state = 'down';
$('.overlay').click(function() {
if(state == 'down') {
$(this).next().slideDown(155);
state = 'up';
} else {
$(this).next().slideUp(150);
state = 'down';
}
.overlay is a transparent div on top of each of the boxes.
Define your click event outside your ajax success callback like this (Use a better selector that body, it is just for the example)
$("body").on("click", ".overlay", function(e){
$(this).next().slideToggle(150);
$(this).css('background-color', 'rgba(0,0,0,0)');
});
you should do something like this: http://jsfiddle.net/chanckjh/Jak6Q/
html:
<div class="something">
<div class="bar">
</div>
</div>
jquery:
$(function() {
$('.something').click(function() {
$('.bar').slideToggle();
});
});
css:
.something{
width: 500px;
height: 500px;
border: 1px solid red;
}
.bar{
display: none;
width: 500px;
height: 50px;
background: blue;
}
or like this for the child: http://jsfiddle.net/chanckjh/Jak6Q/1/
$(function() {
$('.something').click(function() {
$(this).find('.bar').slideToggle();
});
});
You can not share a single variable state amongst many elements which need to record their specific status. Instead, you have to keep state for each of the elements.
I would like to use an add-in like simple-modal or the dialog add-in in the UI kit. However, how do I use these or any other and get a result back. Basically I want the modal to do some AJAX interaction with the server and return the result for the calling code to do some stuff with.
Here is how the confirm window works on simpleModal:
$(document).ready(function () {
$('#confirmDialog input:eq(0)').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close: false,
overlayId: 'confirmModalOverlay',
containerId: 'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
If your HTML is like the following, and you are trying to avoid bootstrap, then you try it like the following. You can also apply AJAX on this structure since this just like any other part of the HTML of your page. Or you try the same using Bootstrap and your work will be easier. Here is a code, please give it a try. It still can be enhanced and modified:
$("button.try-it").on("click", function() {
$(".modal-container").removeClass("hide");
});
$(".close-btn").on("click", function() {
$(".modal-container").addClass("hide");
});
.modal-container {
position: absolute;
background-color: rgba(35, 35, 35, 0.41);
top: 0;
bottom: 0;
height: 300px;
width: 100%;
}
.modal-body {
width: 100px;
height: 100px;
margin: 0 auto;
background: white;
}
.close-btn {
float: right;
}
.hide {
display: none;
}
.body-container {
position: relative;
box-sizing: border-box;
}
.close-btn {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-container">
<div class="button">
<button class="try-it">Try It!!</button>
</div>
<div class="modal-container hide">
<div class="modal-body">
<span class="close-btn">x</span>
<p>Here is the content of the modal</p>
<!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->
<!--Or you can use Bootstrap modal instead of this one.-->
</div>
</div>
</div>
Hope this was helpful.
Here is the link to a fiddle.
Since the modal dialog is on the page, you're free to set any document variable you want. However all of the modal dialog scripts I've seen included a demo using the return value, so it's likely on that page.
(the site is blocked for me otherwise I'd look)