I have iframe inside div element:
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" width="15px" height="15px" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" style="width:94%%;height:90%%;top:0px; position: absolute;" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en" frameBorder="0"></iframe>
</div>
.toolbarArea{
background-color:#ffffff;
width:450px;
position:relative;
z-index:100;
height:30px;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
I get scroll on the div,
how to make parent element to be the size of the child element to prevent the sccroll appereance.
You can prevent the scroll appearance with this:
width: auto;
height: auto;
overflow: hidden;
You need to use one of float: left/right or display: inline/inline-block for parent to be same width as it's content
#toolbarArea {
background-color: #aaa;
position: relative;
display: inline-block;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}
#toolbarTitle {
width: 15px;
height: 15px;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#frTools {
width:94%;
height:90%;
}
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en"></iframe>
</div>
Please note that your iFrame css is not valid, as 94%% must be 94% and so on.
Removing the width and height from the class toolbarArea should do the trick :
.toolbarArea {
background-color: #ffffff;
position: relative;
z-index: 100;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
I have the following HTML:
<div id="trt" style="position: relative; height: 40px;">
<a href="#" style="text-align: center" class="a_demo_three third_button">
M E N U
</a>
</div>
<div id="tst" style="position: relative; height: 200px; width: 200px; background-color: #FF0000; display: none;">
THIS IS THE INNER MENU
</div>
CSS:
.a_demo_three {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
border-left:solid 1px #2ab7ec;
margin-left:35px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
.a_demo_three:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
.a_demo_three::before {
background-color:#2561b4;
content:"1";
width:35px;
max-height:29px;
height:100%;
position:absolute;
display:block;
padding-top:8px;
top:0px;
left:-36px;
font-size:16px;
font-weight:bold;
color:#8fd1ea;
text-shadow:1px 1px 0px #07526e;
border-right:solid 1px #07526e;
background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(10,94,125)),
color-stop(1, rgb(14,139,184))
);
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
.a_demo_three:active::before {
top:-3px;
-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}
/*
Third button
*/
.third_button::before {
content: url('menu.png');
}
Script:
<script>
$(document).ready(function(){
$('#trt a').click(function(e){ //where menu is the id of your menu item
e.preventDefault();
$('#tst').slideToggle(); // where content is the id of your content div
});
//ORIGINALLY THE MENU should be hidden out of the user's view.
//ON CLICKING ON MENU the `tst` div will slide down, the menu button should be in `active` status.
//ON CLICKING ON MENU again the `tst` div will slide up and out of view and the menu button should be in `normal` status
});
</script>
What I am looking to do is have the tst div out of view when the page loads. When the user clicks on the a link which is a button, the tst div should slide to the right and be placed on right of the link.
Starts with this:
When the user clicks on the menu the tst div should animate and slide to the right and should look like this:
Finally, when the user clicks on the menu link again, the tst div slide to the left and out of the user's view.
How do I achieve that?
Try this fiddle. Added float: left to both the button and menu http://jsfiddle.net/borglinm/sp3ju/3/
JavaScript
$(document).ready(function(){
$('#trt a').click(function(e){
e.preventDefault();
console.log($('#tst').css("left"));
if($('#tst').css("left") === "-350px") {
$('#tst').animate({"left": 0});
}
else
{
$('#tst').animate({"left": -350});
}
});
});
Relevant CSS addition
body {
margin: 0;
}
.a_demo_three {
display: inline-block;
}
Look at this: jsFiddle.
Added float:left to both the divs.
I´m making a recover password page and I have to POST some xml information to an specific API.
My complete code is this:
<!DOCTYPE html>
<html>
<head>
<title> - Renew Password</title>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400italic,600,600italic,700,700italic" />
<style>
body {
margin: 0;
padding: 0;
height: 100%;
background: #F2F2F2; <!--url(http://peoplepowerco.com/img/email/bgBlueLg.png)-->
no-repeat;
background-size: 100%;
color: #333;
text-shadow: #fff 0px 1px 0px;
font-family: Helvetica, Arial, sans-serif;
}
#header {
width: 100%;
height: 45px;
background: #1CC0B1 url(http://wisemx.com.mx/img/logo.png) no-repeat;
background-size: 200px 45px;
}
#logo {
width: 0px;
height: 0px;
}
h1 {
color: #1CC0B1;
text-shadow: #000 0px 0px 0px;
}
.container {
width: 500px;
margin: 0px auto;
text-align: center;
}
.box {
background: #E0E0E0;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9),
to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5;
-o-box-shadow: inset 0px 2px 2px #B2B3B5;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5;
box-shadow: inset 0px 2px 2px #B2B3B5;
-webkit-border-radius: 18px;
-o-border-radius: 18px;
-khtml-border-radius: 18px;
border-radius: 18px;
behavior: url(border-radius.htc);
border: solid 3px #FFFFFF;
}
label {
font-size: 18px;
}
input {
font-size: 18px;
}
input.button-primary {
display: inline-block;
padding: 8px 20px 10px;
text-decoration: none;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #333;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-moz-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-o-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-khtml-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
border: none;
font-size: 18px;
font-family: FuturaHv, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
input.button-primary:hover {
background-color: #026eb2;
background: -webkit-gradient(linear, left top, left bottom, from(#98d7fe),
to(#026eb2));
background: -moz-linear-gradient(top, #98d7fe, #026eb2);
color: #ffffff;
text-shadow: 0px -1px 0px #333333;
}
input.button-primary:active {
background-color: #004b7b;
background: -webkit-gradient(linear, left top, left bottom, from(#026eb2),
to(#004b7b));
background: -moz-linear-gradient(top, #026eb2, #004b7b);
color: #cccccc;
text-shadow: 0px -1px 0px #000000;
}
input.button-primary:disabled {
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #999;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 1px 0 #fff;
-o-box-shadow: inset 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 1px 0 #fff;
box-shadow: inset 0px 1px 0 #fff;
border: none;
}
</style>
<script>
function submitForm()
{
var res = document.URL.split("=");
res[1] =
"XOXc4PKYCIMOMPYstCFZeCGhaeuYbqZZTvl6PwaOOb6rpu2npNhXT2Vr7Js6J2UX";
var request =
"http://developer.peoplepowerco.com/espapi/rest/user/"+res[1];
var frm = document.forms[0];
var pwdElement = frm.elements["pwd"]
var pwdConfirmElement = frm.elements["pwdConfirm"]
if (pwdElement.value.length < 6)
{
alert('La contraseña debe ser de al menos 6
caracteres de largo');
}
else if (pwdElement.value == pwdConfirmElement.value)
{
var user= "<request><user><password>" + pwdElement.value +
"</password></user></request>";
alert('DENTRO ' + request + ' ' + user);
$.ajax({
url:request,
type:"POST",
dataType:"text/xml",
data: user,
async: false,
success:
function(){
alert("Datos modificados exitosamente");
//window.location.href= "inicio.html";
},
error:
function( data, status, byKey ){
alert("Contraseña no modificada, intente
otra vez");
},
cache:false
});
alert("FUERA!");
var sbmButtom = frm.elements["submitButton"];
sbmButtom.disable=true;
frm.submit();
}
else
{
alert("Las contraseñas no coinciden. Favor de corregirlo e
intentar otra vez.")
}
}
</script>
</head>
<body>
<div id="header"></div>
<div id="logo"></div>
<div class="container">
<br clear="all">
<form name="renewPassword" method="post" action="/espapi/rest/newPassword"
onsubmit="return false">
<input type="hidden" name="key" value="tVzRl9fNE2ZAOt6yDx6frFCbsFQt2gyuKWn3wWkJ-
9oTrmiyprssDMWaEDEXylUk"/>
<h1>Escriba su nueva contraseña</h1>
<div class="box">
<p>
<label for="pwd">Nueva contraseña:</label><br>
<input id="pwd" name="pwd" type="password" value="">
</p>
<p>
<label for="pwdConfirm">Confirmar contraseña:</label><br>
<input id="pwdConfirm" name="pwdConfirm" type="password" value="">
</p>
<br>
</div>
<p>
<input type="button" name="submitButton" onclick="javascript:submitForm()"
value="Cambiar contraseña" class="button-primary">
</p>
</form>
</div>
</body>
</html>
And I don´t know what's wrong because when I write a smaller password or the passwords aren't the same; it showed me the alerts that I want but when everything is fine nothing happen. Could you help me??
$.ajax() is a jQuery feature. You have reference the jQuery library if you want to use that feature.
For example, you can add CDN reference to jQuery or download a copy to your server and reference it.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I was trying to figure out how to get a blinking box, and as I did not really find a solution on the net, I was fiddling around a bit.
I came up with the following, this works fine in general. My question is simply a) if there is an easier way to do this, and b) if I can program it in a way that it increases / decreases by gradient, instead of me having to program so many classes and stuff like that.
See this code in action: http://jsfiddle.net/ZUJ5b/7/
html
<div id="test" class="test">Hello</div>
jQuery
$(document).ready(function () {
setInterval(blink, 75);
});
function blink() {
if ($('#test').hasClass("test")) {
$("#test").removeClass('test').addClass('test1');
} else if($('#test').hasClass("test1")) {
$("#test").removeClass('test1').addClass('test2');
} else if($('#test').hasClass("test2")) {
$("#test").removeClass('test2').addClass('test3');
} else if($('#test').hasClass("test3")) {
$("#test").removeClass('test3').addClass('test5');
} else if($('#test').hasClass("test4")) {
$("#test").removeClass('test4').addClass('test5');
} else if($('#test').hasClass("test5")) {
$("#test").removeClass('test5').addClass('test6');
} else if($('#test').hasClass("test6")) {
$("#test").removeClass('test6').addClass('test7');
} else {
$("#test").removeClass('test7').addClass('test');
}
}
CSS
.test {
padding: 20px;
width: 100px;
border: 1px #ED0 outset;
box-shadow: 0px 0px 6px 1px #FE4;
-moz-box-shadow: 0px 0px 6px 1px #FE4;
-webkit-box-shadow: 0px 0px 6px 1px #FE4;
}
.test1 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 6px 1px #FFE544;
-webkit-box-shadow: 0px 0px 6px 1px #FFE544;
}
.test2 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test3 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test4 {
padding: 20px;
width: 100px;
border: 1px #EA0 outset;
box-shadow: 0px 0px 8px 3px #FFCC44;
-moz-box-shadow: 0px 0px 8px 3px #FFCC44;
-webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
}
.test5 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test6 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test7 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 3px 1px #FFE544;
-webkit-box-shadow: 0px 0px 3px 1px #FFE544;
}
Wow! You're dedicated! There are much easier ways to animate with css. Check out CSS transitions (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)
It is pretty easy with css transitions (but only for new versions of browser)
Here is demo fiddle
Just add a transition property to your css class and in that define on which property you want to put transition on (in your case border shadow) and also define for how much time you want to make the transition.
transition: box-shadow 1s;