jQuery ladder slide out list effect - javascript

I know this should be fairly easy but I can't quite figure it out by myself. facepalm.
I have a site that I'm building at this address and as you can see by looking at it, after the picture loads the menu list items come out of the left side. I just wanted to know how I could make them come out one at a time starting with the top one and working their way down.
Here is the code that makes the slide out effects:
$(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the list of soclial links
var $socialLinks = $(".social_links");
//the download link
var $download = $("a.st_img_download");
//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$currImage.fadeIn(3000);
$download.attr("href",$currImage.attr("src"));
//slide out the menu
setTimeout(function(){
$loader.hide();
$list.animate({'left':'0px'},1000);
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element
//where the thumbs are going to be displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
Although I think that's more than you need...
And here is the HTML structure for the menu:
<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">Photo Album<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/slide1.jpg" alt="images/album/slide1.jpg" />
<img src="images/album/thumbs/slide2.jpg" alt="images/album/slide2.jpg" />
<img src="images/album/thumbs/slide3.jpg" alt="images/album/slide3.jpg" />
<img src="images/album/thumbs/slide4.jpg" alt="images/album/slide4.jpg" />
</div>
</div>
</li>
<li class="album">
<span class="st_link">Videos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/EelyyqU-ce0/0.jpg" alt="videos/SkyscraperCover.mp4" />
<span class="caption">Skyscraper Cover</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/KNlwqFWiNaU/0.jpg" alt="videos/DontBreakMyHeartSlow.mp4" />
<span class="caption">Don't Break My Heart Slow</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/VwYyRmgutx4/0.jpg" alt="videos/BattleCover.mp4" />
<span class="caption">Battle Cover</span>
</span>
</div>
</div>
</li>
<li>
<span class="st_link">Bio<span class="st_modal"></span></span>
<div class="modal">
<div style="width:600px;">
<h2>Bio</h2>
I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine. I am
so happy, my dear friend, so absorbed in the exquisite sense
of mere tranquil existence, that I neglect my talents.
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_modal"></span></span>
<div class="modal">
<h2>Contact</h2>
<form id="contact_form" method="POST" action="#">
<label>Name:</label><br />
<input type="text" name="name" /><br />
<label>Email:</label><br />
<input type="text" name="email" /><br />
<label>Reason:</label>
<label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br />
<label>Message:</label><br />
<textarea name="name"></textarea><br />
<input type="submit" value="Submit" name="submit" /> <span class="status_message"></span>
</form>
</div>
</li>
</ul>
And the css:
ul.st_navigation{
position:absolute;
width:100%;
top:140px;
left:-300px;
list-style:none;
}
ul.st_navigation li {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
width:100%;
}
ul.st_navigation li span.st_link{
background: rgba(0,0,0,.8);
float:left;
position:relative;
line-height:50px;
padding:0px 20px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center;
}
ul.st_navigation li span.st_modal{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center;
}

Try this:
$('<img>').load(function(){
$currImage.fadeIn(3000);
$download.attr("href",$currImage.attr("src"));
//slide out the menu
setTimeout(function(){
$loader.hide();
$list.children().each(function(i,el) { // loop through the LI elements within $list
$(el).delay(500*i).animate({'left':'0px'},1000);
});
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
}).attr('src',$currImage.attr('src'));

When you use animate() you can specify a callback as the last parameter, you could chain the slide in of the elements:
setTimeout(function(){
$loader.hide();
$firstElement.animate({'left':'0px'},1000, function(){
$secondElement.animate({'left':'0px'},1000, function(){
//and so on
});
});
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
if you provide something on jsfiddle.net or post here your html code and full js it's easier to help

Related

Create a Tag with an input

I have an input for writing tags. My problem is that I wanted to write in the input any name of tag and by pressing enter or clicking the button, the tag was created in the box below as shown in the image.
What I have
What I want when I press enter key or button plus
Final
.TagInput {
width: 400px;
height: 32px;
background: #FAFAFB 0% 0% no-repeat padding-box;
border-radius: 16px;
background: url(https://cdn0.iconfinder.com/data/icons/social- messaging-ui-color-shapes/128/add-circle-blue-512.png) no-repeat scroll 370px 3px;
}
.card {
width: 435px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
}
<div class="card">
<div class="card-header header">
<h1> Tags </h1>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control TagInput" placeholder="Tag your product...">
</div>
</div>
</div>
I'm not so familiar with bootstrap to be honest. But maybe you can try out an Angular solution. This could be a starting point:
CSS
.your-class{
list-style-type: none;
display:inline-block;
position:relative;
background:#eee;
padding:5px;
min-width:50px;
text-align: center;
border-radius:30px;
margin-right:10px;
}
HTML
<ul>
<li *ngFor="let tag of tags" class="your-class">
{{tag}} <span class="delete-entry" (click)="deleteTagFromProduct(tag)">x</span>
</li>
</ul>
<input (change)="addTagToProduct($event)" class="form-control TagInput"/>
Typescript
private tags:string[] = [];
private addTagToProduct( $event ):void {
this.tags.push($event.target.value);
$event.target.value = "";
}
private deleteTagFromProduct( tag:string ):void {
this.tags = this.tags.filter( (a) => a!==tag );
}

How to update a odometer value with a button click in Javascript?

<style>
body {
font-family: "Helvetica Neue"
}
#wrapper .counter {
display:inline-block;
font-size:2em;
line-height:1.2em;
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:inline-block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
<div id="sidebar" class="sidebar" style="float:left;">
<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>
<span class="counter"><span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="separator">
<span title=",">,</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="4">4</span>
<hr>
</span>
</span>
<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>
</div>
<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><span class="ssbp-text">Facebook</span><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><span class="ssbp-text">Twitter</span><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><span class="ssbp-text">Linkedin</span><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><span class="ssbp-text">Email</span></div></div> <div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>
<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
</div>
I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.
The following is the script:
<script>
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
// Remove comments to animate odometer
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.
In jquery, binding an event to a click event on a button can be done like so:
HTML:
<button id="mybuttonID">Click me to increment odometer!</button>
JS:
$(document).ready(function() {
// wait for the dom to initialize before binding events
$('body').on('click', '#mybuttonID', animateDigit);
});
Hope this helps!
if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output

Dropdown menu always collapse on click

Usually for a DropDown menu you would expect that when you chose an option the menu collapse, however this is not my case. I don't want to collapse the dropdown menu if the user tries to login and click on Username and Password:
http://www.filmgratuiti.org/streamingembed2.php?nome=jobs
I remember it worked a while ago probably it's about the CSS, which I have cleaned up in the meantime.
Is there an easy way of doing it?
P.S: I don't know why but it looks like i can't share clickable link ...
try this
HTML
<div class="signup" >
LOGIN
</div>
<div class="login_form ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" >Login</span> </p>
</form>
</div><!-- login_form -->
CSS
.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;
}
.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}
.login_form
{
width:50%;
height:auto;
padding:10px 0 0 0;
position:absolute !important;
}
.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;
}
.email, .password
{border:1px solid #D9D8D7;
width:96%;
}
.login_btn
{
display:block;
width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;
text-align:center;
margin-bottom:2px;
}
.login_btn a
{color:#fff;
}
JS
$(".login_form").hide();
$(".signup, .login_form").click(function(e) {
$(".login_form").show();
e.stopPropagation();
return true;
});
$(document).click(function(){
$('.login_form').hide(); //hide the form
});
here is the working fiddle

Resizable div puts textbox on new line?

I have this code here which allows you to resize the DIV and Textbox which stays at 100%.
However the textbox goes onto a new line - how can I keep the label and Textbox on the same line? So resizing the DIV around the label will reduce the textbox size?
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<div style="display:table-cell"><label>Test </label> </div>
<input type='text' style='width:100%;' id='inputBox'/>
</div>
$("div").resizable({
handles: "w, sw, ne, nw, se"
});
Working example here:
http://jsfiddle.net/XPUuj/1/
Thanks!
Here is what you want http://jsfiddle.net/xDHHM/
Your code had minor positioning problems and a unwanted div.
HTML:
<div class="container">
<lable>Text</lable>
<input type="text" />
</div>
CSS:
.container {
width:300px;
border:#000 dashed 1px;
display:table-cell;
white-space:nowrap;
padding:10px 50px 10px 10px;
}
input {
width:100%;
margin-left:10px;
}
Jquery
$(".container").resizable({
handles: "w, sw, ne, nw, se"
});
Remove the div around the label:
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<label>Test </label>
<input type='text' style='width:100%;' id='inputBox'/>
</div>
Jsfiddle: http://jsfiddle.net/XPUuj/2/
You should have your input inside the div
http://jsfiddle.net/XPUuj/3/
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<div style="display:table-cell">$
<label>Test </label>
<input type='text' style='width:100%;' id='inputBox'/></div>
</div>
</div>

Value of margin padding and width properties

Consider the following html code snippet:
<div id="parent" class="parent">
<form id="child" class="child">
<input id="textForDim" type="text" />
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>
and corresponding css styles
.parent{
position: absolute;
text-align: center;
width: 350px;
height: 450px;
background-color: #f7f7f7;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.childd{
width:200px;
height:180px;
background: grey;
}
.cchild{
background:aqua;
width:20px;
height:10px;
}
JSFIDDLE. How i can do that after submit button click we have margin-left,margin-right,width,padding-left,padding-right in the textForDim input as the follow:
margin-left: _Margin-Left_Value_px, margin-right: _Margin-Right_Value_px, etcetera...
Is it possible to apply JS for this needs or it's a bad practice?
Where _Margin-Right_Value_px is the value of margin-right property of divchild div element.
<script>
function doThis()
{
var k = document.getElementById('textForDim');
k.style.marginLeft = _Margin_Left_Value_px + "px";
k.style.marginRight = _Margin_Right_Value_px + "px";
}
</script>
<div id="parent" class="parent">
<form id="child" class="child">
<input type="text" id="textForDim" onclick="doThis()"/>
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>

Categories