I'm a beginner web designer, and though I would try my hand at JavaScript and jQuery. After looking around W3Schools for a bit, I tried to make a simple jQuery animation, but it doesn't seem to work.
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(document).ready(function(){
$("#name").blur(funtion(){
if(value==null || value==""){
$("#name").animate({background:#D23E42}, "slow");
}
});
});
</script>
<style type="text/css">
body
{
font-family: Arial;
}
#name
{
background:#6BAA64;
color: #FFFFFF;
border:2px none;
padding:5px;
-webkit-border-radius:8px 8px;
-moz-border-radius:8px 8px;
border-radius:8px 8px;
text-align: center;
}
</style>
</head>
<body style="text-align: center;">
Name:
<br />
<input id="name" type="text" value="Your Name" />
</body>
</html>
I was just trying to setup a simple contact/registration form model, so when the name field was left empty, or wasn't changed, would turn red (on blur).
You got many mistakes in that code:
$("#name").blur(function() {
if (!this.value) {
$(this).css('background-color', '#D23E42');
}
});
Mistakes:
funtion => function
value => this.value.
The value of an input can never be null, it can be only an empty string.
animate => css, and the reason is that you can't animate background-color changes without a plugin.
the color needs to be a string #D23E42 => '#D23E42'
background => background-color.
$("#name") => $(this)
It might be a good idea to stop learning at w3school as it doesn't seem to pay off...
Sorry but you can't animate background, unless you use jColor
From the docs:
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
jQuery.animate cannot animate background colours, but only properties like width, height, left, top etc. To animate background colours, you'll have to use a plugin like https://github.com/jquery/jquery-color
You have two mistakes:
The color value is a string, so you need quotes around "#D23E42". Otherwise you're probably seeing a syntax error.
JQuery doesn't actually animate colors anyway. There's a plugin that claims to add this feature though I haven't tried it out:
http://www.bitstorm.org/jquery/color-animation/
jsBin demo
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
In this demo I used the jQuery UI library to achieve the background fade color.
Use .focusout()
Use $.trim() to prevent empty spaces being accepted as valid input
Always use === to compare values
EDIT
Hede is a demo without the UI
You surely need to redo the color if the user reenter some text:
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).css({background:'#D23E42'});
}else{
$(this).css({background:'#6BAA64'});
}
});
Demo without the UI library
Related
My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.
Note : I don't want to use any kind of Plugin, to do changes only in html (title)tooltip.
Html
<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>
CSS
.sam{
width:200px;
margin-left:120px;
margin-top:25px;
}
.sam[title] {
position:fixed;
top:100px;
left:50px;
}
Here I have attached the link that i have tried
JsFiddle Link
This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.
By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]
As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.
First, make your tooltip in CSS. For example:
#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
}
After that, you'll need to put it in HTML using a DIV.
<div id="tooltipbox">yourcontent</div>
Next you'll need to make a small jquery script.
$(document).ready(function(){
function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
$(myToolTip).hide();
$(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
$(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
}
toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}
Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.
The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.
In this sentence, chicken is bold.
Chicken is the object with a unique class of ".chickentooloject".
Next you make a unique tool tip div.
<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.
Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.
toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);
The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.
When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}
I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...
I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:
HTML:
<div class="contribute_buttons">
<img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>
CSS:
.contribute_buttons {
width: 300px;
height: 39px;
float: left;
background-color: #393839;
margin-top: 5px;
margin-bottom: 15px;
}
JAVASCRIPT:
$(document).ready(function() {
var colorOrig=$(".contribute_buttons").css('background');
$(".contribute_buttons").hover(
function() {
//mouse over
$(this).css('background', '#AAEE00')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
http://jsfiddle.net/EQeMs/
Thanks in advance for the help!
You can do this with just CSS using the :hover pseudo-class:
.contribute_buttons:hover {
background-color: #AAEE00;
}
Working Demo
Otherwise, your jQuery is fine. It looks like you just forgot to import jQuery in your jsFiddle example.
Load jQuery in the Frameworks & Extensions menu on the left and this fiddle works fine. $ is the jQuery function and when you see it it means that jQuery is required.
However, unless you're targeting IE below version 7 I would just use the pure CSS solution with :hover
I have a need to collapse/expand the width of a div (rather that hide/show), and for some reason this code that I wrote only seems to start working with the second click. If it put an alert in to check the variable it seems that the variable is not picking up the style initially. Any thoughts? Here is a js fiddle:
http://jsfiddle.net/JKxHw/4/
Here is my css, html, and script
#left_nav {width:200px; border: 1px solid red; height: 300px;}
<div id="left_nav_collapser">
collapse width of left nav
</div>
<div id="left_nav">
<div id="left_nav_navlinks">
<ul><li>Apples<ul><li>Macintosh</li><li>Styrofoam</li></ul>
</li><li>Oranges</li><li>Bananas</li></ul>
</div>
</div>
<script>
function hideNav(){
var myLayer = document.getElementById('left_nav').style.width;
//alert(myLayer);
if(myLayer=="200px"){
document.getElementById('left_nav').style.width="0px";
document.getElementById('left_nav_navlinks').style.display="none";
} else {
document.getElementById('left_nav').style.width="200px";
document.getElementById('left_nav_navlinks').style.display="block";
};
}
</script>
More info: as much as I would love to I can not use jQuery for this.
.style only gets information from the style attribute rather than computed styles. You could use window.getComputedStyle instead, but it seems inflexible to me. Instead you should just have a variable that keeps track of the visibility state that the element is in.
You can even use .dataset (assuming you don't need to support IE) on the element itself, although any variable would do.
http://jsfiddle.net/JKxHw/6/
I'm using Jorn Zaefferer's Autocomplete query plugin, http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ and I wanted to add a button that will load all the elements the same as combobox.
So, I created a method that puts a div with image as background next to an input text:
var createDownArrow = function (input, request, options) {
var defaults = {
downArrowClass: 'autocomplete_DownArrow'
};
options = $.extend({}, defaults, options);
var offset = $(input).offset();
var width = typeof options.width == 'string' || options.width > 0 ? options.width : $(input).width();
var element = $('<div/>').addClass(options.downArrowClass).appendTo(document.body).
css({ position: 'absolute', top: offset.top, left: offset.left + width}).click(function () {
if (request && typeof request == 'function') {
request();
}
});
};
the input text has the following css:
border: 1px solid #888888;
height:15px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
padding:0px;
margin:0xp;
this is the div css:
background-image:url(drop.jpg);
background-position:top right;
height:17px;
width:17px;
cursor:pointer;
and using this function on the input in the html:
<br /><br /><br /><br />
<input type="text" id="test" />
I get the result:
Which you can see is not the desire result.
How can I align the div next to the input? (I am using direction:rtl)
try enclosing in label tag
<label for="in"><img src=" " /><input name="in" /></label>
Write up your example that statically includes the arrow at all times in the html. When that works, replace the arrow's html by javascript that can generate it, and you'll be fine.
In more detail, I think you've got a problematic approach; you should use the right tool for the right job. So while it's possible to do what you want by manual positioning, you really don't want to be getting into this quagmire: Javascript is a poor tool for this. You probably can't get around using some javascript, but your life will be much easier if you do as much as possible in HTML+CSS - tools explicitly made for layout. In particular, that means making your arrow button statically first, and then adding exactly the html that works to the DOM-tree, rather that trying to manually control layout by computing width+height+position of the input; which you're almost certainly going to get wrong (not to mention when things get tricky, e.g. with overflow:scroll and the like).
Oh, and you could get rid of the <br/> tags and simply make the input display:block with a margin-top.
One possible CSS approach would be to follow the button by width-0 span (inline element) containing a position absolute (don't affect layout) block that shows whatever you want. E.g.: http://jsfiddle.net/emn13/nvY2F/
To get this to work as a plugin, you'd write javascript to create the span and div in the html; preferably the css would be in a linked stylesheet, but you could use inline styles too, of course. The CSS transitions are just for fun, of course.
In order to solve this, I canceled the absolute position and added display:inline-block to the div. Then I just inserted in before the input and thats all.