http://jsfiddle.net/leonwho/98mD2/
HTML
<div id="account-setup-guide">
<div id="account_tour_info">
<ul>
<li class="setup_complete"><strong>1</strong> Sync!</li>
</ul>
</div>
</div>
CSS
#account-setup-guide {
position: relative;
margin: 30px 30px 20px 20px;
padding: 20px;
width: auto;
border: 5px solid orange;
background: orange;
}
jQuery
var animateThis = function() {
console.log('run animateThis');
$('#account-setup-guide').stop().animate({backgroundColor: '#ffffff'}, 500);
$('#account-setup-guide').animate({
background: 'white'
}, 500);
}
animateThis();
Not sure why this isn't working, I've used both examples above of the .animate but it's not working in my current jsfiddle test :(
jQuery doesn't support animation of color, you have to include plugin which support it as jQuery UI or jQuery color:
jQuery color
jsFiddle (thx to kei)
Related
So far I know you can make it statically fade in like this:
$("#element").fadeIn()
I want to make an image fade in in a sliding sideways sort of way like when a curtain at a show get pulled to the side and the background for the performance is revealed (not stretching, but fade-sliding).
Here is a sample example that I can provide. If you have doubt, leave a comment.
$(document).ready(function() {
$("#hide").click(function() {
$("#panel").hide("slide", {
direction: "left"
}, 1000);
});
$("#show").click(function() {
$("#panel").show("slide", {
direction: "left"
}, 1000);
});
});
#panel {
height: 100px;
padding: 50px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#hide {
padding: 20px;
width: 200px;
background: red;
color: white;
}
#show {
padding: 20px;
width: 200px;
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="hide">Click here to Hide the Pannel</div>
<div id="show">Click here to Show Pannel</div>
<div id="panel">This is your pannel</div>
I'm trying to set border radius for an element with animation like this:
$(element).hover(function(){
$(this).animate({borderRadius : 5});
}, function(){
$(this).animate({borderRadius : 0});
});
when I hover on element, the animation will work Properly. But after hovering out, it won't perform with any animation.
In Firefox the animation isn't working on mouseout. Use CSS instead of javascript here.
Ex: https://codepen.io/patdiola/pen/ZyaYdE
button {
background: blue;
border: 0;
color: white;
padding: 10px 20px;
transition: border-radius ease-in-out 500ms;
}
button:hover {
border-radius: 10px;
}
Another solution is to use jQuery-UI:
$(function() {
$('#target').hover(function(){
$(this).addClass('borderIn', 500);
}, function(){
$(this).removeClass('borderIn', 500);
});
});
#target {
width: 100px;
height: 100px;
background-color: lightblue;
}
.borderIn {
border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="target"></div>
I exaggerated your code a little for effect, but it appears to work for me.
$("div").hover(function(){
$(this).animate({borderRadius : 30});
}, function(){
$(this).animate({borderRadius : 0});
});
div{
height: 70px;
border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->
Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.
I am making a simple php chatbox and am starting with the css/javascript first. What I want to do is when I click the header of the chat, the main part of the chat will slide up and show, and when I click the header again, it will go down, similar to the Facebook chat. I have tried things like
$(".chatheader").on("click", function () {
$(".chatcontainer").style.display = 'visible';
}
but none of them work, here are my codes
HTML
<div id="chatbox">
<div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
<div class="chatcontainer">
test
</div>
</div>
CSS
#chatbox {
right: 0;
bottom: 0;
position: absolute;
padding-right: 50px;
}
.chatcontainer {
height: 360px;
width: 320px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
float: right;
top: 100%;
display: none;
}
.chatheader {
font-family:'PT Sans';
background: #00b4ff;
width: 322px;
height: 51px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
bottom: 360;
}
.chatheadertext {
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
DEMO
I have display: hidden; on my .chatcontainer and I would like to use javascript to make the display visible when .chatheader is clicked. Thanks in advance to anyone who can help!
You can use .slideToggle():
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
Updated Fiddle
Final code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
});
</script>
Use the jQuery slideDown() method:
$(".chatcontainer").slideDown();
And use slideUp() to hide it later.
I am new to web development, i have learned basics of Java, JSP, HTML, JS, CSS, JQ. I am stuck at a point in which I am trying to change the border color of a div when mouse hover event occurs, but I am failing in doing so. Below is the related code, please point out the mistakes and point me in a better directions. Thanks alot in advance.
P.S: I have tried almost every stackoverflows questions/answers but I still failed to accomplished it. I thought it would be better if I post my own question with code to get suggestions for future aswell. Thanks is advance.
<div id="navBar" style="height: 50px; width: 480px;">
<div id="homeButton" style="float: left; color: #73C20E; position:relative; width: 160px; height: 50px; border-top: 4px solid #73C20E;">
<p>Home</p>
</div>
<div id="siteAdminButton" style="float: left; color: #73C20E; position: relative; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;" >
<p>Site Administration</p>
</div>
<div id="contactButton" style="float: left; color: #73C20E; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;">
<p>Contact Us</p>
</div>
</div>
Heres JS:
$("document").ready(function (){
$("#homeButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
$("#siteAdminButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
$("#contactButton").mouseenter(function (){
$(this).addClass("mouseOverNav");
}).mouseleave(function (){
$(this).removeClass("mouseOverNav");
});
});
and here is css:
.mouseOverNav {
cursor: pointer;
border-color: #73C20E;
}
Summary: I have created 3 divs with borders, 2 of which have the same border color as background, I want to change border color to my theme whenever mouse hovers, and change it back to the background color when mouse leaves and make the cursor a Pointer.
So far: Pointer Cursor is working but its not changing the border color. Thanks in Advance.
You can shorten your selectors to:
$("document").ready(function () {
$("#homeButton, #siteAdminButton, #contactButton").mouseenter(function () {
$(this).addClass("mouseOverNav");
}).mouseleave(function () {
$(this).removeClass("mouseOverNav");
});
});
You've set inline style border-top: 4px solid #1C1C1C; in your HTML, so you need to use border-top style for .mouseOverNav in your external css as well.
You also need to apply !important property to override the existing style since inline style take precedence over external style:
.mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E !important;
}
Fiddle Demo
Edit: Although above suggestion works, but actually you should avoid to use !important when unnecessary, from MDN docs:
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
In your case, you can move all the inline styles to external css, like this:
#homeButton, #siteAdminButton, #contactButton {
float: left;
color: #73C20E;
position:relative;
width: 160px;
height: 50px;
border-top: 4px solid #73C20E;
}
#siteAdminButton, #contactButton {
border-top: 4px solid #1C1C1C;
}
#navBar .mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E;
}
Fiddle Demo
Also, you can achieve above task using poor CSS by applying :hover selector:
#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
cursor: pointer;
border-top: 4px solid #73C20E;
}
Fiddle Demo
YOU CAN SIMPLY ACHIEVE THIS USING CSS :hover. NO NEED TO USE JAVASCRIPT OR JQUERY
In css, you can use like this
#homeButton:hover, #siteAdminButton:hover, #contactButton:hover{
cursor: pointer;
border-color: #73C20E !important;
}
HERE IS THE FIDDLE DEMO
Your requirement can be done using CSS. No need to use JS at all.
#navBar > div:hover{
cursor: pointer;
border-color: #73C20E!important;
}
Check this fidde working with your example
http://jsfiddle.net/g6Jf2/
.mouseOverNav {
cursor: pointer;
border: 1px solid #73C20E;
}
change your css
.mouseOverNav {
cursor: pointer;
border-top: 4px solid #73C20E !important;
}
Fiddle: http://jsfiddle.net/8sns6/3/
Also I will suggest you to use hover function rather of mouse enter and leave
$("document").ready(function (){
$("#homeButton").hover(function (){
$(this).addClass("mouseOverNav");
},function (){
$(this).removeClass("mouseOverNav");
});
$("#siteAdminButton").hover(function (){
$(this).addClass("mouseOverNav");
}, function (){
$(this).removeClass("mouseOverNav");
});
$("#contactButton").hover(function (){
$(this).addClass("mouseOverNav");
}, function (){
$(this).removeClass("mouseOverNav");
});
});
Fiddle: http://jsfiddle.net/8sns6/5/