I am trying to use jquery animate function to animate boxes but this simple code seems to jerk me off. I am not sure what have I mistaken ? Sometimes the similar code would work perfect and sometime it seems very difficult.
<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<style>
#main{
clear:both;
}
#boxes{
position:absolute;
width:75%;
}
#box1, #box2, #box3{
position:relative;
width:200px;
height:200px;
background-color:#FFD600;
margin:10px;
}
#buttons{
float:right;
}
input{
display:block;
width:150px;
}
</style>
<script>
$('document').ready(function(){
$("#left").bind('click', function(){
console.log('Left');
$('#box1').animate({x:"+=20px"});
});
});
</script>
</head>
<body>
<div id="main">
<div id="boxes">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div>
<div id="buttons">
<input type="button" value="Left" id="left">
<input type="button" value="Right" id="right">
<input type="button" value="Top" id="top">
<input type="button" value="Bottom" id="bottom">
<input type="button" value="Height" id="height">
<input type="button" value="Width" id="width">
</div>
</div>
</body>
</html>
Try it on JSFiddle.
x isn't a CSS property. Try left:
$('#box1').animate({left:"+=20px"});
Try it on JSFiddle.
Try this it works perfectly :
$("#left").click(function(){
console.log('Left');
$('#box1').animate({left: '+=50'});
});
x: "+=20px"
should be:
left: "+=20px"
JSFIDDLE DEMO
Change this line:
$('#box1').animate({x:"+=20px"});
to this:
$('#box1').animate({left:"+=20px"});
The positions in CSS are top and left, not x and y. Works here: http://jsfiddle.net/jfriend00/47vMV/.
Related
I am trying to allow a user to click in a textarea and when they start typing it shows an initially hidden div. Here is my script and html, but this does not work, not sure where I am going wrong.
<head>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</head>
<body>
<textarea name="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
</body>
</html>
Just some minor changes based on what the guys have commented on above.
Added an id to the textarea
Moved JS script so that the the elements exist before you call the JS.
<html>
<head>
</head>
<body>
<textarea name="showPanel" id="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</body>
</html>
So I have this script that I've been using that works nicely for an my purposes but it is built with radio buttons, and I've been asked to do another project with it, but my boss would like the buttons to now be regular, non-radio buttons.
Here is the code I've been using so far. It's a lot harder to change over radio-button code to regular button code than I thought! Any help would be very much appreciated, thanks!
<!DOCTYPE html>
<html>
<head>
<style>
#TFholder{
background-image:url('truefalse.png');
height:84px;
width:576px;
}
button{
height:84px;
width:280px;
color:white;
background-color:black;
margin-top:50px;
text-align:center;
line-height:10px;
border:none;
outline:none;}
button a{
display:block;
color:white;
text-decoration:none;
padding:20px 40px;}
</style>
</head>
<body>
<script type="text/javascript">
function onCheck() {
if (document.getElementById('check1').checked) {
document.getElementById('truebox').style.display = 'block';
}
else document.getElementById('falsebox').style.display = 'block';
}
</script>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check1"><br>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check2"><br>
<div id="TFholder">
<div id="truebox" style="display:none">
<button type="button">CONTINUE!!!</a></div>
</div>
<div id="falsebox" style="display:none">
<button type="button">SECOND BUTTON!!!</a></div>
</div>
</div>
</body>
</html>
change HTML part to:
<input id="Button1" type="button" value="button" onclick="javascript:b1();"/><br />
<br />
<input id="Button2" type="button" value="button" onclick="javascript:b2();"/><br>
change Script part to:
<script type="text/javascript">
function b1() {
document.getElementById('truebox').style.display = 'block';
}
function b2() {
document.getElementById('falsebox').style.display = 'block';
}
</script>
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
How would I modify the JavaScript below using jquery?
It works without jquery, but since we are in fact, using jquery, there must be a simpler way.
<!doctype html>
<html>
<head>
<title>JavaScript CSS Test1</title>
<style type="text/css">
.test{
font-family:Helvetica,sans-serif;
color:navy;
font-size:20px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
border:5px solid lime;
}
</style>
</head>
<body>
<div>
<div class="test">
Test1
</div>
<div class="test">
Test2
</div>
<div class="test">
Test3
</div>
<div class="test">
Test4
</div>
</div>
<script>
window.onload=function(){
var loc=location.href;
if(loc.indexOf("javascript-css-test1")!=-1){
document.getElementsByClassName("test")[3].style.paddingBottom="3px";
}
}
</script>
</body>
</html>
Also, I have to integrate the code into the existing js which has variables for several other urls, and functions as constructors to initialize other functions.
Thanks!
You can done it with css very easily
div:nth-child(4)
{
color:red;
}
Try this jQuery code :
$(window).load(function() {
loc = location.href
if(loc.indexOf("javascript-css-test1")!=-1){
$(".test:nth-child(4)").css({'padding-bottom': '3px'})
}
})
you can use eq selector for jQuery
if(loc.indexOf("javascript-css-test1")!=-1){
$(".test").eq('3').css({paddingBottom : '3px'});
or
$(".test:eq(3)").css({paddingBottom : '3px'});
}
I have seen slideUp and slideDown in jQuery. What about functions/ways for sliding to left and right?
You can do this with the additional effects in jQuery UI: See here for details
Quick example:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
If you don't want something bloated like jQuery UI, try my custom animations: https://github.com/yckart/jquery-custom-animations
For you, blindLeftToggle and blindRightToggle is the appropriate choice.
http://jsfiddle.net/ARTsinn/65QsU/
You can always just use jQuery to add a class, .addClass or .toggleClass. Then you can keep all your styles in your CSS and out of your scripts.
http://jsfiddle.net/B8L3x/1/
This code works well :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var options = {};
$("#c").hide();
$("#d").hide();
$("#a").click(function(){
$("#c").toggle( "slide", options, 500 );
$("#d").hide();
});
$("#b").click(function(){
$("#d").toggle( "slide", options, 500 );
$("#c").hide();
});
});
</script>
<style>
nav{
float:left;
max-width:300px;
width:300px;
margin-top:100px;
}
article{
margin-top:100px;
height:100px;
}
#c,#d{
padding:10px;
border:1px solid olive;
margin-left:100px;
margin-top:100px;
background-color:blue;
}
button{
border:2px solid blue;
background-color:white;
color:black;
padding:10px;
}
</style>
</head>
<body>
<header>
<center>hi</center>
</header>
<nav>
<button id="a">Register 1</button>
<br>
<br>
<br>
<br>
<button id="b">Register 2</button>
</nav>
<article id="c">
<form>
<label>User name:</label>
<input type="text" name="123" value="something"/>
<br>
<br>
<label>Password:</label>
<input type="text" name="456" value="something"/>
</form>
</article>
<article id="d">
<p>Hi</p>
</article>
</body>
</html>
Reference:W3schools.com and jqueryui.com
Note:This is a example code
don't forget to add all the script tags in order to achieve proper functioning of the code.