How to update a odometer value with a button click in Javascript? - 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

Related

Using javascript, how do I duplicate the behavior of a div acting as a select element when clicking outside the element?

I needed to create a pseudo-select element that displays columns for each row in the select. Since HTML does not allow the <option> tag to contain HTML, I had to take this approach.
One of the features of a normal select element is that it folds up when you click outside the element, no matter where the user clicks. It can be within the document, it can be in the address bar, or wherever. I am having trouble duplicating that behavior. Controlling inside the document is easy. But clicking in the address bar or even in the developer/console window, it doesn't work.
Please find my code below and a working fiddle.
<style>
.selectedOrder {
height: 30px;
display:none;
}
/* class applies to select element itself, not a wrapper element */
.select-css {
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
/* width: 100%; */
max-width: 100%; /* useful when width is set to anything other than 100% */
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
*/
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
display: none;
}
/* Hover style */
.select-css:hover {
border-color: #888;
}
/* Focus style */
.select-css:focus {
border-color: #aaa;
/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
/* Set options to normal weight */
.select-css option {
font-weight:normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}
/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}
</style>
<div id="orderSelectContainer">
<div id="selectedOrder" class="selectedOrder select-css" style="width: 533px; display: block;">
<div class="currentSelectedOrder" data-value="45628" style="float: left;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div id="orderSelect" class="select-css" style="position: absolute; z-index: 1000; background-image: none; display: none;">
<div class="orderContainer">
<div class="order" data-value="45628" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45536" style="float: left; background: lightblue;">
<span style="float:left; min-width:200px;">Store 2</span>
<span style="float:left; min-width:50px"> 55536</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45682" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 3</span><span style="float:left; min-width:50px"> 55682</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45625" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 4</span>
<span style="float:left; min-width:50px"> 55625</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45556" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 5</span>
<span style="float:left; min-width:50px"> 55556</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
</div>
<br style="clear:both"><br>
</div>
<script>
$(document).on(`click`, `.order`, function() {
if ($(this).data(`value`) !== $(`#selectedOrder >.currentSelectedOrder`).data(`value`)) {
$(`#orderContainer`).html(``);
}
$(`#selectedOrder`).html($(this).prop(`outerHTML`)).find(`.order`).removeClass(`order`).css(`background`, ``).addClass(`currentSelectedOrder`);
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
$(`#selectedOrder`).show();
$(`#orderSelect`).hide();
});
$(document).on(`click`, `#selectedOrder`, function(e) {
console.log(`selected order click`);
e.stopPropagation();
e.preventDefault();
$(`#orderSelect`).toggle();
});
$(document).on(`mouseenter`, `.order`, function() {
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
});
$(document).on(`mouseexit`, `.order`, function() {
$(this).css(`background`, `white`);
});
$(document).on(`click`, function(e) {
console.log(e.target.id);
$(`#orderSelect`).hide();
});
<script>
Fiddle: https://jsfiddle.net/schmidtc63/xu8zgpc9/
The Window: blur event can be used as it will fire any time the window loses focus.
$(window).on(`blur`, function(e) {
$(`#orderSelect`).hide();
});

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 );
}

Javascript button did not work if i scroll the page / elements from page messes up if i resize the window

So, first of all i have a webpage with the "Parallax" effect, that effect with scrolling pages.
I have 2 problems:
1) I have a button that shows/hides a menu bar with javascript.
$(".show").click(function(){
$("nav").fadeToggle();
});
The button works perfectly till i scroll the page. At this moment it stops working. I have the button position fixed so i want it to be always on the screen. And the menu bar fades in/out when i scroll. So when i scroll down to the next page i want to have that button to show/hide the menu, but it doesn't work. It works only when the page is scrolled all the way top.
2) Today i tried to open my project on another computer with a monitor with a lower resolution, and i noticed that everything is messed up. As messed up as when i try to resize the window if you know what i mean. The elements from the first page goes down to the seconds.. and so on. How can i solve this problem?
body,
html {
height: 100%;
}
.parallax {
background-image: url('http://www.uniwallpaper.com/static/images/238870_q1e05Ar.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-image: url('http://www.uniwallpaper.com/static/images/eiffel-tower-wallpaper-18_fRZLW4V.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
background-image: url('http://www.uniwallpaper.com/static/images/eWtfMME_jJm8t1k.png');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax3 {
background-image: url('http://www.uniwallpaper.com/static/images/HD-Wallpapers-89_FxDoTt7.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax4 {
background-image: url('http://www.uniwallpaper.com/static/images/pexels-photo_vF03DpP.jpeg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax5 {
background-image: url('http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.slide1 {
height: 100px;
background-color: blue;
font-size: 36px;
}
nav {
display: none;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 17px auto;
max-width: 1200px;
position: fixed;
align: middle;
width: 100%;
}
nav ul {
text-align: right;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.7);
}
body,
html,
.main {
height: 100%;
}
.text1 {
position: relative;
top: 250px;
}
.p1 {
color: white;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
}
.style1 {}
.style2 {
float: left;
padding-top: 100px;
padding-left: 100px;
}
.style3 {}
.style4 {}
.style5 {}
button {
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed {
position: fixed;
}
.htmljscss {
float: right;
width: 100px;
height: 100px;
}
.textbackground {
position: absolute;
left: 0px;
top: 150px;
}
.textbackgroundbar {
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right, rgba(255, 255, 255, 30), rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
margin-left: 160px;
display: block;
}
.dropdown-content {
display: none;
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: inline-block;
}
.desc {
padding: 15px;
text-align: center;
}
/* Make sure that padding behaves as expected */
* {
box-sizing: border-box
}
/* Container for skill bars */
.container {
width: 100%;
/* Full width */
background-color: #ddd;
/* Grey background */
}
.skills {
text-align: right;
/* Right-align text */
padding-right: 20px;
/* Add some right padding */
line-height: 30px;
/* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
color: white;
/* White text color */
}
.html {
width: 70%;
background: linear-gradient(to right, #34e893, #0f3443);
}
/* Green */
.css {
width: 70%;
background: linear-gradient(to right, #000046, #1cb5e0);
}
/* Blue */
.js {
width: 45%;
background: linear-gradient(to right, #cb356b, #bd3f32);
}
/* Red */
.php {
width: 30%;
background: linear-gradient(to right, #141e30, #243b55);
}
/* Dark Grey */
.skillbars {
width: 550px;
height: 350px;
float: right;
margin-top: 603px;
}
body {
background-color: #f1f1f1;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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>
$(function() {
$("#draggable").draggable();
});
</script>
<script>
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
$(document).ready(function() {
$(".show").click(function() {
$("nav").fadeToggle();
});
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.hidescroll').fadeOut();
} else {
$('.hidescroll').fadeIn();
}
});
var images = new Array()
images[0] = "../images/html5.png";
images[1] = "../images/javascript.png";
images[2] = "../images/css.png";
setInterval("changeImage()", 900);
var x = 0;
function changeImage() {
document.getElementById("img").src = images[x]
x++;
if (images.length == x) {
x = 0;
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}
</script>
<style>
#draggable {
width: 1px;
float: right;
height: 1px;
padding: 15px;
border-style: none;
background-color: transparent;
}
body,
html,
.main {
margin: 0px;
height: 100%;
}
section {
min-height: 100%;
}
</style>
<body>
<div class="hidescroll">
<nav>
<ul>
<li>
Multiplayer online battle arena
</li>
<li>
League of Legends
</li>
<li>
Defence of the Ancients 2
</li>
<li>
Riot
</li>
<li>
Valve
</li>
</ul>
</nav>
</div>
<div class="parallax">
<div class="fixed"><button class="show"> Show menu</button></div>
<div id="draggable" class="ui-widget-content">
<div class="htmljscss">
<img id="img" width="110px" height="160px" src="../images/html5.png">
</div>
</div>
<div class="skillbars">
<p class="p1">HTML</p>
<div class="container">
<div class="skills html">70%</div>
</div>
<p class="p1">CSS</p>
<div class="container">
<div class="skills css">70%</div>
</div>
<p class="p1">JavaScript</p>
<div class="container">
<div class="skills js">45%</div>
</div>
<p class="p1">PHP</p>
<div class="container">
<div class="skills php">30%</div>
</div>
</div>
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Despre mine</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
<button onclick="myFunction('myDropdown3', event)" class="dropbtn">Dropdown3</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
<p class="p1">
</p>
</div>
<div id="myDropdown2" class="dropdown-content">
a
b
c
</div>
<div id="myDropdown3" class="dropdown-content">
asda
asdasd
adasda
</div>
</div>
</div>
<div class="parallax1">
<div class="main" id="section1">
<section class="style1">
<div class="text1">
<p class="p1">Multiplayer online battle arena (MOBA), cunoscut ca și strategie și acțiune în timp real este un sub gen al jocurilor video de strategie în timp real, în care jucătorul controlează un singur caracter din una dintre cele două echipe. Obiectivul
este distrugerea structurilor inamice cu ajutorul unităților generate periodic care au drum prestabilit. Jucătorii au în general abilități și avantaje variabile care se îmbunătățesc odată cu trecerea timpului și care contribuie la strategia
echipei per ansamblu. MOBA este o fuziune între un joc de acțiune și un joc de strategie în timp real, jucătorii nu pot construii clădiri sau unități.</p>
<p class="p1">Genul a pornit cu Aeon of Strife (AoS) o hartă personalizată pentru StarCraft unde patru jucători fiecare controlând o singură unitate puternică și asistați de unități mai slabe controlate de computer sunt puși împotriva unei echipe mai puternice
controlată de computer.</p>
<p class="p1">Defense of the Ancients (DotA), este o hartă bazată pe Aeon of Strife pentru Warcraft III: Reign of Chaos și The Frozen Throne. DotA a fost primul titlu major al genului și primul MOBA în care au fost organizate turnee sponsorizate.</p>
<p class="p1">DotA a stat la baza jocurilor League of Legends și Heroes of Newerth, urmând o continuare: Dota 2.</p>
<p class="p1">Blizzard Entertainment anunțând deja că lucrează la propriul MOBA - Heroes of the Storm</p>
</div>
</section>
</div>
</div>
<div class="parallax2">
<div class="main" id="section2">
<section class="style2">
<!--azirrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr-->
<div class="dropdown">
<img src="../images/Azir.jpg" alt="Azir" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Azir.jpg" alt="Azir" width="829" height="400">
<div class="desc">Azir</div>
</div>
</div>
<!--fizzzzzzzzzzzzzzzzzzzz-->
<div class="dropdown">
<img src="../images/Fizz.jpg" alt="Fizz" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Fizz.jpg" alt="Fizz" width="829" height="400">
<div class="desc">Fizz</div>
</div>
</div>
<!--zedddddddddddddddddddddddd-->
<div class="dropdown">
<img src="../images/Zed.jpg" alt="Zed" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Zed.jpg" alt="Zed" width="829" height="400">
<div class="desc">Zed</div>
</div>
</div>
<!--dianaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
<div class="dropdown">
<img src="../images/Diana.jpg" alt="Diana" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Diana.jpg" alt="Diana" width="829" height="400">
<div class="desc">Diana</div>
</div>
</div>
<!--katarinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
<div class="dropdown">
<img src="../images/Project Katarina.jpg" alt="Katarina" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Project Katarina.jpg" alt="Katarina" width="829" height="400">
<div class="desc">Katarina</div>
</div>
</div>
<!--Yasuooooooooooooooooooooooooooooooo-->
<div class="dropdown">
<img src="../images/Yasuo.jpg" alt="Yasuo" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Yasuo.jpg" alt="Yasuo" width="829" height="400">
<div class="desc">Yasuo</div>
</div>
</div>
<!--Leblancccccccccccccccccccccccccccccccc-->
<div class="dropdown">
<img src="../images/Leblanc.jpg" alt="Leblanc" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Leblanc.jpg" alt="Leblanc" width="829" height="400">
<div class="desc">Leblanc</div>
</div>
</div>
<!--Taaaaaaaaaaaaaaaaaaalon-->
<div class="dropdown">
<img src="../images/Talon.jpg" alt="Talon" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Talon.jpg" alt="Talon" width="829" height="400">
<div class="desc">Talon</div>
</div>
</div>
</section>
</div>
</div>
<div class="parallax3">
<div class="main" id="section3">
<section class="style3"></section>
</div>
</div>
<div class="parallax4">
<div class="main" id="section4">
<section class="style4"></section>
</div>
</div>
<div class="parallax5">
<div class="main" id="section5">
<section class="style5"></section>
</div>
</div>
<div class="parallax"></div>
Ok, i put here my entire code and i added some random images so u can make an ideea about it.
Maybe a lot of things are wrong and messed up here, BUT i'm just a beginner, so please take me easy.
Thank you a lot for your time spent reading all this. I know it's a lot.
P.S: Sorry for my bad english, i'm still learning it.

InvalidArgumentError: Failed due to illegal value in property: 0

I am trying to program a geography quiz and it doesn't seem to work. Whenever I try to click the 'Submit' button, it prints out InvalidArgumentError: Failed due to illegal value in property: 0. do you have any ideas why this might be? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function send() {
var q1 = document.getElementById("q1").value;
var q2 = document.getElementById("q2").value;
var q3 = document.getElementById("q3").value;
var q4 = document.getElementById("q4").value;
var q5 = document.getElementById("q5").value;
var q6 = document.getElementById("q6").value;
var q7 = document.getElementById("q7").value;
var q8 = document.getElementById("q8").value;
var Email = document.getElementById("EmailAddress");
var Result = ("Results: 1. " + q1 + " 2. " + q2 + " 3. " + q3 + " 4. " + q4 + " 5. " + q5 + " 6. " + q6 + " 7. " + q7 + " 8. " + q8);
google.script.run.send(Email, Result);
}
</script>
<script src="https://ws.sharethis.com/button/buttons.js">
</script>
<script>
stLight.options({
publisher: "a788dcd1-6dfb-49ee-ba6c-3b6822d69fd8",
doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<style>
.myButton {
-moz-box-shadow: inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow: inset 0px 39px 0px -24px #e67a73;
box-shadow: inset 0px 39px 0px -24px #e67a73;
background-color: #e4685d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 0px 1px 0px #b23e35;
}
.myButton:hover {
background-color: #eb675e;
}
.myButton:active {
position: relative;
top: 1px;
}
.myButton2 {
-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
box-shadow: inset 0px -3px 7px 0px #29bbff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
background-color: #2dabf9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #9591ff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 23px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
}
.myButton2:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
background-color: #0688fa;
}
.myButton2:active {
position: relative;
top: 1px;
}
</style>
</head>
<body>
<font face="Verdana">
<h1>
Geography Quiz
</h1>
<br/>
<br/>
Your teacher's email address:
<input type="text" id="EmailAddress"/>
<br/>
<br/>
<b>
Questions
</b>
<br/>
<br/>
Q (1): Which state has a climate suitable for growing citrus fruits—California or Maine?
<br/>
A:
<input type="text" id="q1"/>
<br/>
<br/>
Q (2): The North Atlantic current brings warm waters from the tropics to the west coast of which continent?
<br/>
A:
<input type="text" id="q2"/>
<br/>
<br/>
Q (3): Which Canadian province produces more than half of the country's manufactured goods?
<br/>
A:
<input type="text" id="q3"/>
<br/>
<br/>
Q (4): To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?
<br/>
A:
<input type="text" id="q4"/>
<br/>
<br/>
Q (5): What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?
<br/>
A:
<input type="text" id="q5"/>
<br/>
<br/>
Q (6): Which country has the world's largest Muslim population—Indonesia or Mexico?
<br/>
A:
<input type="text" id="q6"/>
<br/>
<br/>
Q (7): The Rio Hondo forms a boundary between Mexico and which other country?
<br/>
A:
<input type="text" id="q7"/>
<br/>
<br/>
Q (8): Which lake is on the border between Chad and Cameroon?
<br/>
A:
<input type="text" id="q8"/>
<br/>
<br/>
<button onclick="send(); document.write('Thanks! Your teacher will receive your results in an email.')" class="myButton">
Submit
</button>
<br/>
<br/>
<br/>
<br/>
<span class='st_facebook_hcount'>
</span>
<span class='st_twitter_hcount'>
</span>
<span class='st_googleplus_hcount'>
</span>
<br/>
<br/>
<footer>
<font size="1px">
Posted by: Yona Klatchko | Contact information:
<a href="mailto:yona.klatchko#gmail.com">
yona.klatchko#gmail.com
</a>
</font>
</footer>
</font>
</body>
</html>
Google-Apps-Script doGet() function:
function doGet() {
return(HtmlService.createTemplateFromFile('Index.html').evaluate().setTitle('Geography Quiz').setSandboxMode(HtmlService.SandboxMode.IFRAME));
}
Google-Apps-Script send() function:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}
In your send() function, you are extracting and sending email dom element instead of the string value:
var Email = document.getElementById("EmailAddress"); returns the dom element.
Change this to:
var Email = document.getElementById("EmailAddress").value;
will solve the problem of invalidArgumentError.
The next problem will be you will not receive the email.
That is because in your code:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}
You are passing two parameters but as you see in the documentation, third parameter is not optional and you need to pass the third parameter as body.
MailApp.sendEmail(Email, Result, "");
Will send the email with empty body.

If A Radio Button is Checked Call Function Handler

http://liveweave.com/rFqNTl
Fixed by using the property selector, and triggering change on the element - http://liveweave.com/ZTirGp
I have a few radio buttons that act as a menu. When design is checked a designer div is shown, when code is checked, a textarea is shown.
One problem I ran into is when I click New I want the on function declared for #designer so that when it's checked to show that div, and hide the others.
I've added the code below along with a demo to show what I'm having trouble with.
HTML
<div id='header'>
<center>
<div class="menubtn" id='newdoc'>
<input name="opt" id="opt-1" checked="checked" type="radio">
<label for="opt-1">New</label>
</div>
<div class="menubtn" style='display:none;' id='openload'>
<input name="opt" id="opt-2" type="radio">
<label for="opt-2">Browse</label>
</div>
<div class="menubtn" onclick='saveTextAsFile()'>
<input name="opt" id="opt-3" type="radio">
<label for="opt-3">Save</label>
</div>
<div class="menubtn" id='dropbox'>
<input name="opt" id="opt-4" type="radio">
<label for="opt-4">Dropbox</label>
</div>
<div class="menubtn" id='designer'>
<input name="opt" id="opt-5" type="radio">
<label for="opt-5">Design</label>
</div>
<div class="menubtn" id='settings'>
<input name="opt" id="opt-6" type="radio">
<label for="opt-6">Settings</label>
</div>
<div class="menubtn" id='codecanvasdisplay'>
<input name="opt" id="opt-7" type="radio">
<label for="opt-7">Code</label>
</div>
<div class="menubtn" id='fullcode'>
<input name="opt" id="opt-8" type="radio">
<label for="opt-8">Full Code</label>
</div>
<div class="menubtn" style='display:none;' id='intcolorpick'>
<input name="opt" id="opt-9" type="radio">
<label for="opt-9">Color Picker</label>
</div>
</center>
</div>
CSS
#header {
color: #2234cb;
text-shadow: 0px 0px 2em #fff;
background:#e0e2f9; /* Old browsers */
background:-moz-linear-gradient(top, #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
background:linear-gradient(to bottom, #e0e2f9 0%,#d7dbf8 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#header input[type="radio"] { display:none; }
#header div { display:inline-block; margin:0; }
#header label {
cursor: pointer;
display: inline-block;
margin:.25em;
padding:.7em;
border-radius:50em;
font: 12px arial, sans-serif;
color: #444;
text-shadow: 0px 0px .25em #fff;
background:#f6f7fd; /* Old browsers */
background:-moz-linear-gradient(top, #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
background:linear-gradient(to bottom, #f6f7fd 0%,#e0e2f9 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
}
#header label:hover { color: #111; background: #f6f7fd; }
#header label:active { color: #111; background: #c1c5f6;}
#header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }
JQuery/JavaScript
// Call New
$('#newdoc').click(function() {
$("#designer")[0].click();
code.val('');
preview.html(code.val());
});
$('#opt-1').click(function(){
if($('#opt-1').attr('checked')=="checked"){
$(this).attr('checked', false);
$('input#opt-5').attr('checked', true);
}else{
$('input#opt-5').attr('checked', false);
}
});
// Call Designer UI
$('#designer').on('change',function() {
$('#canvasbg, #canvas').show();
$('#settingsdisplay').hide();
$("#fullwebsitecode").hide();
$("#bottom, #code").hide();
return false;
});
// Call Settings
$('#settings').on('change',function() {
$('#settingsdisplay').show();
$('#canvasbg, #canvas, #bottom, #code').hide();
$("#fullwebsitecode").hide();
return false;
});
// Call Show Code
$('#codecanvasdisplay').on('change',function() {
$("#bottom, #code").show();
$('#settingsdisplay').hide();
$('#canvasbg, #canvas').hide();
$("#fullwebsitecode").hide();
return false;
});
This is what you want: $("#designer").trigger('change');
Change your "New Doc" handler to:
// Call New
$('#newdoc').click(function() {
code.val('');
preview.html(code.val());
$("#designer").trigger('change');
});
You can use trigger to trigger events bound to a given element.
$("#designer").trigger('click');
Also, much of your code uses the "change" event on a div that contains a radio element. So the change event bubbles up from the input, and you're handling it at the div level. Unless you have a good reason for it, the inputs are not really needed, and you can go with a click event on a div element. Much more straightforward.
Here is your code with the modifications to the events I mentioned:
http://liveweave.com/Lsmg7B
Documentation & Related Reading
jQuery.trigger - http://api.jquery.com/trigger/
Event bubbling on javascripter.net - http://www.javascripter.net/faq/eventbubbling.htm

Categories