.hide() is hiding too much

.hide() is hiding too much - javascript

I want to hide the div "loginArea" and then fade in the div "newAccArea". Whenever I try to activate it, it shows the div "newAccArea" for only a moment and then hides it too. I know it sounds like an obvious solution, that I have an extra div or forgot a closing div tag, but I couldn't find any. Please help me out, thank you. Summarized Code HTML:
<div class="backarea">
<div class="loginArea">
<!--Random Stuff-->
</div>
<div class="newAccArea">
<!--More Random Stuff-->
</div>
</div>
JQuery:
$(document).ready(function(){
$('.createone').click(function(){ //".createone" is nothing you have to //worry about
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
**FULL CODE JUST INCASE**
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Log in box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div><Br><Br><Br>
<h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
<!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
<div class="loginArea">
<input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
<input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
<button class="login">Log In</button>
<p class="createacc">Don't have an account? <span class="createone">Create one.</span></p>
<p class="error">Sorry but that username or password is incorrect.</p>
</div>
<div class="newAccArea">
<h1 class="newAccText">Create New Account</h1>
<h2 class="newUsername" id="position">Username:</h2>
<input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<h2 class="confNewPassword" id="position">Confirm Password:</h2>
<input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
<button class="createAccButt">Create Account</button>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#F0F0F0;
}
.successLog {
background-color:#8A8A8A;
height:450px;
width:700px;
z-index:1;
opacity:0;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
position:relative;
bottom:500px;
opacity:0;
z-index:-5;
}
.newUsername {
position:relative;
top:80px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newUser {
position:relative;
top:60px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.newPassword {
position:relative;
top:42px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newPass {
position:relative;
top:23px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.confNewPassword {
position:relative;
bottom:50px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.confNewPass {
position:relative;
bottom:70px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.createAccButt {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:77;
left:78;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.createAccButt:hover {
background-color:#A81919;
}
.newAccText {
position:relative;
top:100px;
font-family: 'Oswald', sans-serif;
font-size:30px;
text-align:center;
color:red;
}
/*LOG IN AREA*/
.backarea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
position:relative;
top:67px;
left:230px;
position:fixed;
}
.loginArea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
}
.userInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:50px;
left:35px;
border:1px solid white;
}
.userInput:hover {
border:2px solid #60BF68;
}
.username {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:50px;
left:75px;
}
.passInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:20px;
left:35px;
border:1px solid white;
}
.passInput:hover {
border:2px solid #60BF68;
}
.password {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:80px;
left:75px;
}
.login {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:60;
left:71;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.login:hover {
background-color:#B81414;
border:1px solid black;
}
.createacc {
position:relative;
bottom:73px;
font-family: 'Roboto Condensed', sans-serif;
padding:8
}
.createone {
text-decoration:none;
color:#4548E6;
font-size:13px;
}
.createone:hover {
color:purple;
}
.error {
color:red;
font-family: 'Merriweather', serif;
font-size:10;
position:relative;
bottom:93px;
text-align:center;
opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
color:#fff;
}
.invis {
opacity:0;
}
/*HTML CLASSES*/
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:10;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:27px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:14px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:255px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:507px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
.welcomeBack {
font-family: 'Oswald', sans-serif;
color:blue;
text-align:center;
}
.logOut {
position:relative;
top:130px;
left:312px;
padding:5px;
border:none;
background-color:red;
color:white;
width:100px;
height:40px;
font-size:20px;
font-family: 'Oswald', sans-serif;
}
.logOut:hover {
background-color:#B51919;
border-top:1px solid #F7A3A3;
border-left:1px solid #F7A3A3;
}
JavaScript:
$(document).ready(function(){
$('.createone').click(function(){
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('.login').click(function(){
var userResult = $('input[name=userInput]').val();
var passResult = $('input[name=passInput]').val();
if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
$('.backarea').fadeOut('fast');
$('.successLog').fadeTo('fast',1);
}
else {
$('.passInput').css('border-color','red');
$('.userInput').css('border-color','red');
$('.error').fadeTo('fast',1);
$('.error').effect( "bounce",{ times: 3 },"slow" );
};
});
});
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
$('.dropdownHome').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#dashboard').click(function(){
$('.dropdownDashboard').slideToggle('slow');
$('.dropdownDashboard').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#contactUs').click(function(){
$('.dropdownContactUs').slideToggle('slow');
$('.dropdownContactUs').fadeTo('fast',1);
});
});

The reason you don't see the newAccArea is because you have it relatively positioned 500 pixels from the bottom, which ends up putting all of the content off screen, above the top of the viewport. The reason you're able to see it while the loginArea is fading out is because as long as the loginArea is still visible, the starting point of the newAccArea is lower (300 pixels lower, since the height of loginArea is 300px), so the 500 pixels from the bottom of that starting point is low enough to still see it.
You just need to set the position to what it needs to be, when loginArea isn't displayed, and you should see it fine.

You said I want to hide the div "loginArea" and then fade in the div "newAccArea". In this case, you may use a callback function to show the newAccArea div after the hiding has finished:
$(document).ready(function() {
$('.createone').click(function() {
$('.loginArea').hide('slow', function() {
// It'll fade in after hiding the .loginArea
$('.newAccArea').fadeTo('fast', 1);
});
});
});
Regarding the problem you mentioned, it should not happen according to your code. The newAccArea div should not be hidden because it's out side of the loginArea div.

Related

Range slider with text box Jquery and CSS

I would like to create a range slider along with a text box. I while using the range slider, I want the ranger value automatically update in the text box and vice versa. Also, I need to change the color of slider lower part (left side of slider thumb). I am using below code to for this
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.setProperty?d[i].style.setProperty("display","block","important"):d[i].style.cssText+=";display: block !important",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(a){return a.charAt(0).toUpperCase()+a.substr(1)}function j(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},n,e),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=o.orientation[this.orientation].dimension,this.DIRECTION=o.orientation[this.orientation].direction,this.DIRECTION_STYLE=o.orientation[this.orientation].directionStyle,this.COORDINATE=o.orientation[this.orientation].coordinate,this.polyfill&&m)return!1;this.identifier="js-"+k+"-"+l++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('<div class="'+this.options.fillClass+'" />'),this.$handle=a('<div class="'+this.options.handleClass+'" />'),this.$range=a('<div class="'+this.options.rangeClass+" "+this.options[this.orientation+"Class"]+'" id="'+this.identifier+'" />').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update(!1,!1)},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var k="rangeslider",l=0,m=b(),n={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},o={orientation:{horizontal:{dimension:"width",direction:"left",directionStyle:"left",coordinate:"x"},vertical:{dimension:"height",direction:"top",directionStyle:"bottom",coordinate:"y"}}};return j.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a,b){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleDimension=g(this.$handle[0],"offset"+i(this.DIMENSION)),this.rangeDimension=g(this.$range[0],"offset"+i(this.DIMENSION)),this.maxHandlePos=this.rangeDimension-this.handleDimension,this.grabPos=this.handleDimension/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position,b)},j.prototype.handleDown=function(a){if(this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=this.getPositionFromNode(this.$handle[0])-c,e="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(e),b>=d&&b<d+this.handleDimension&&(this.grabPos=b-d)}},j.prototype.handleMove=function(a){a.preventDefault();var b=this.getRelativePosition(a),c="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(c)},j.prototype.handleEnd=function(a){a.preventDefault(),this.$document.off(this.moveEvent,this.handleMove),this.$document.off(this.endEvent,this.handleEnd),this.$element.trigger("change",{origin:this.identifier}),this.onSlideEnd&&"function"==typeof this.onSlideEnd&&this.onSlideEnd(this.position,this.value)},j.prototype.cap=function(a,b,c){return b>a?b:a>c?c:a},j.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},j.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},j.prototype.getRelativePosition=function(a){var b=i(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"undefined"!=typeof a["page"+b]?d=a["client"+b]:"undefined"!=typeof a.originalEvent["client"+b]?d=a.originalEvent["client"+b]:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0]["client"+b]?d=a.originalEvent.touches[0]["client"+b]:a.currentPoint&&"undefined"!=typeof a.currentPoint[this.COORDINATE]&&(d=a.currentPoint[this.COORDINATE]),d-c},j.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},j.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandlePos||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},j.prototype.setValue=function(a){(a!==this.value||""===this.$element[0].value)&&this.$element.val(a).trigger("input",{origin:this.identifier})},j.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+k),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[k]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+k);e||d.data("plugin_"+k,e=new j(this,b)),"string"==typeof b&&e[b].apply(e,c)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"});
$(function(){
$('input[type="range"]').rangeslider({
polyfill:false,
onInit:function(){
},
onSlideEnd:function(position, value){
//console.log('onSlideEnd');
//console.log('position: ' + position, 'value: ' + value);
}
});
});
var $range = $(".js-range-slider"),
$input = $(".js-input"),
instance,
min = 1,
max = 1000;
$range.ionRangeSlider({
type: "single",
min: min,
max: max,
from: 500,
onStart: function (data) {
$input.prop("value", data.from);
},
onChange: function (data) {
$input.prop("value", data.from);
}
});
instance = $range.data("ionRangeSlider");
$input.on("change keyup", function () {
var val = $(this).prop("value");
// validate
if (val < min) {
val = min;
} else if (val > max) {
val = max;
}
instance.update({
from: val
});
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/wordpress/wp-content/themes/insido/insido/style_sbi_mg.css" />
</head>
<body>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/anoopcr/ojLxhfp7/18/
The issue I am facing is here is the text box and range slider are not respnding each other.

You could give the slider its own ID as well as the textbox.
Then using jQuery, it is simple to attach events to each one of them.
$('#slider').on('input change',function(){
$('#textbox').val($(this).val());
});
$('#textbox').keyup(function(e){
if (e.keyCode==13) { //only activates after pressing Enter key
var val = $(this).val().replace(/\D/g,''); // check only for digits
$('#slider').val(val);
}
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input id="textbox" type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input id="slider" type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>

Check multiple input empty value wont work

I am trying to make a survey system using jquery. I need to detect if any input value is empty then get error function. I did it but it is working just one time. How to work my code multiple times?
I have created this
$(document).ready(function(){
$("body").on("click",".createnew", function(){
if ($(".myinput").val().length !== 0) {
if($('.input').length !== 4){
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
} else {
alert("You can not leave it blank input field!");
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>
In this demo, you can see the create a new input button. So if you click it then you get the alert. Because you didn't write any text from an input. But if you create second input than if it is empty the alert is not working at that time. What I am missing here any one can tell me?

The jQuery val method takes the value of the first matched element only, so it wont work for the second input as it still returns the content of the first.
Solve this by adding :last to the selector:
$(document).ready(function(){
$("body").on("click",".createnew", function(){
if ($(".myinput:last").val().length !== 0) {
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
if($('.input').length >= 4){
$(".createnew").remove();
}
} else {
alert("You can not leave an input field blank!");
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>
If you want to check that all inputs are non-blank (to cover the case where a user has cleared a non-blank input), then you can use this if instead:
if ($('.myinput').get().every(s => $(s).val() !== '')) {
NB: See also how in the above snippet, the button is removed as soon as you have four inputs, not later when you click it.

In your original code you used $(".myinput").val().length which only takes first element's value. you need to check for all inputs before appending a new input, not just the first or the last one. This way even if the last input is not empty and some input above is empty, you still need to show the alert.
$(document).ready(function(){
$("body").on("click",".createnew", function(){
var inputs = $(".myinput");
var emptyFields = false;
for (var i=0; i<inputs.length; i++){
if ($(inputs[i]).val().length === 0)
emptyFields = true;
}
if (emptyFields) {
alert("You can not leave it blank input field!");
} else {
if(inputs.length !== 4){
$('.inputs').append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>

When you select the $('.myinput') it will return an array and if you try and run .val() with the array it will only do it for the first element in the array, you will want to use the .each JQuery function
You could do something like:
function checkInputs(inputs) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
return false
}
});
return true
}
if (checkInputs($(".myinput"))) {
if($('.input').length !== 4){
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
} else {
alert("You can not leave it blank input field!");
}
Documentation: https://api.jquery.com/each/

Cannot change some elements style following scrolling

Can someone please help me to fix what I'm doing wrong here? I just want the styles to be applied to the divs after scrolling down from the top. Funny enough only the header-wrap id changes, but nothing else changes. Why is this? e.g. t1, slogan and navmenus don't change following scrolling, but header-wrap does.
Would really appreciate any help here. Thank you
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
var navMenuLink = $('ul.nav-menu a:link');
var navMenuVisited = $('ul.nav-menu a:visited');
var navMenuHover = $('ul.nav-menu a:hover');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('ul.nav-menu');
navMenuLink.addClass('ul.nav-menu a:link');
navMenuVisited.addClass('ul.nav-menu a:visited');
navMenuHover.addClass('ul.nav-menu a:hover');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('ul.nav-menu-on-scroll');
navMenuLink.removeClass('ul.nav-menu-on-scroll a:link');
navMenuVisited.removeClass('ul.nav-menu-on-scroll a:visited');
navMenuHover.removeClass('ul.nav-menu-on-scroll a:hover');
}
});
});
body{height:1000px;width:auto;}
#header-wrap{
background:#4E6273;
width:100%;
height:auto;
border-bottom: 2px solid #f4fafe;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
opacity:0.9;
}
.scroll-opacity-change{
opacity:0.9;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background:#f4fafe !important;
border-bottom: 2px solid #94C8F2 !important;
}
#t1{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:none;
color:#E6E8EB;
font-size:24px;
}
#t1.t1-on-scroll{
color:#f00;
}
#slogan{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:uppercase;
font-size:12px;
color:#E6E8EB;
}
#slogan.slogan-on-scroll{
color:#f00;
}
ul.nav-menu{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#E6E8EB;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu a:link{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:visited{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:hover{
color:#B4E9FF;
}
ul.nav-menu-on-scroll{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#f0f;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu-on-scroll li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<header id="header-wrap">
<div id="header-top">
<div id="header-left-wrap">
<div id="header-text-wrap">
<div id="header-title-wrap">
<span id="t1">title<span id="t1-emphasis">acronym</span></span>
</div>
<div id="header-slogan-wrap">
<span id="slogan">slogan</span>
</div>
</div>
</div>
<div id="header-right-wrap">
<nav class="wrap">
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>

Your code is totally wrong!! You added the wrong classes to your nav-menus, and some of your code doesn't even make sense like addClass('ul.nav-menu a:link')or var navMenuVisited = $('ul.nav-menu a:visited');
navMenu.addClass('nav-menu-on-scroll');
...
navMenu.removeClass('nav-menu-on-scroll');
is all you need.
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('nav-menu-on-scroll');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('nav-menu-on-scroll');
}
});
});
body{height:1000px;width:auto;}
#header-wrap{
background:#4E6273;
width:100%;
height:auto;
border-bottom: 2px solid #f4fafe;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
opacity:0.9;
}
.scroll-opacity-change{
opacity:0.9;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background:#f4fafe !important;
border-bottom: 2px solid #94C8F2 !important;
}
#t1{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:none;
color:#E6E8EB;
font-size:24px;
}
#t1.t1-on-scroll{
color:#f00;
}
#slogan{
font-family:'Open Sans', sans-serif;
font-weight:100;
text-transform:uppercase;
font-size:12px;
color:#E6E8EB;
}
#slogan.slogan-on-scroll{
color:#f00;
}
ul.nav-menu{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#E6E8EB;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu a:link{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:visited{
color:#E6E8EB;
text-decoration:none;
}
ul.nav-menu a:hover{
color:#B4E9FF;
}
ul.nav-menu-on-scroll{
list-style-type:none;
margin-left: 50px;
font-size:20px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#f0f;
padding:0;
margin:0 0 0 0;
text-decoration:none;
}
ul.nav-menu-on-scroll li{
display:inline-block;
margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
color:#f0f;
text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<header id="header-wrap">
<div id="header-top">
<div id="header-left-wrap">
<div id="header-text-wrap">
<div id="header-title-wrap">
<span id="t1">title<span id="t1-emphasis">acronym</span></span>
</div>
<div id="header-slogan-wrap">
<span id="slogan">slogan</span>
</div>
</div>
</div>
<div id="header-right-wrap">
<nav class="wrap">
<ul class="nav-menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>

You need to load the jQuery library first, then your Javascript code must be in a function that ensures both jQuery and the document are present. Easiest way:
(function ready() {
if (!document.body || !window.$) {setTimeout(ready, 50); return;}
// Your Javascript code here
})();

Ok, I'm guessing your problem is, that you didn't wrap your code in document ready.
Your JS code should look like this:
$(document).ready(function() {
var headerWrap = $('#header-wrap');
var t1 = $('#t1');
var slogan = $('#slogan');
var navMenu = $('ul.nav-menu');
var navMenuLink = $('ul.nav-menu a:link');
var navMenuVisited = $('ul.nav-menu a:visited');
var navMenuHover = $('ul.nav-menu a:hover');
$(window).scroll(function () {
headerWrap.addClass('scroll-opacity-change');
t1.addClass('t1-on-scroll');
slogan.addClass('slogan-on-scroll');
navMenu.addClass('ul.nav-menu');
navMenuLink.addClass('ul.nav-menu a:link');
navMenuVisited.addClass('ul.nav-menu a:visited');
navMenuHover.addClass('ul.nav-menu a:hover');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
t1.removeClass('t1-on-scroll');
slogan.removeClass('slogan-on-scroll');
navMenu.removeClass('ul.nav-menu-on-scroll');
navMenuLink.removeClass('ul.nav-menu-on-scroll a:link');
navMenuVisited.removeClass('ul.nav-menu-on-scroll a:visited');
navMenuHover.removeClass('ul.nav-menu-on-scroll a:hover');
}
});
});

Trying to make a responsive nav hide the options by default in each page

I made a responsive nav that hides all of the pages for mobile view. It is toggled and appears when the user clicks the menu nav. The thing is when you go to another page then the nav stays open. I want the nav to stay closed when visiting any page.
jsfiddle - http://jsfiddle.net/mw59vvcm/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taffies Cupakes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
<aside class="sidebar">
<nav>
<div class="menu"></div>
<ul class="main_nav">
<li>home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav> <!-- end of nav -->
<div class="company_info">
<p>Taffies cupcakes</p>
<p>111 x drive road</p>
<p>milton keynes</p>
<p>l0002</p><br>
<p>telephone: 078 878-8888</p>
</div> <!-- end of compnay info text -->
</aside> <!-- end of aside -->
<section class="first_article">
<article>
<p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
<p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
<img src="images/contact-button.png" alt="contact_button" class="contact_button">
<img src="images/cupcake.png" alt="cupcake" class="cupcake">
</article>
</section> <!-- end of section -->
<footer>
<p>Taffie's Cupcakes © copyright 2014</p>
<ul>
<li>contact us</li>
<li>gallery</li>
<li>orders</li>
<li>about us</li>
<li>home</li>
</ul>
</footer> <!-- end of footer -->
</div> <!-- end of container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".menu").click(function(){
$(".main_nav").toggle();
});
</script>
</body>
</html>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
body{
background-color:#e8d4cb;
}
header img{
padding:43px;
display:block;
margin:0 auto;
box-sizing:border-box;
}
.first_article{
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph{
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button{
float:left;
margin-top:165px;
}
.first_article .cupcake{
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar{
float:left;
margin:30px;
}
nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a{
color:#e8d5cc;
}
nav ul li{
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover{
background-color: #3D2316;
}
.company_info{
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section{
float:left;
width:500px;
margin:25px;
}
.about_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section{
float:left;
width:500px;
margin:25px;
}
.orders_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order{
margin-top:50px;
}
.order_text{
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers{
color:#3D2316;
}
.gallery_section{
float:left;
width:600px;
margin:25px;
}
.gallery_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section{
float:left;
width:500px;
margin:25px;
}
.contact_title{
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text{
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer{
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p{
color:#784f3d;
margin:10px;
float:left;
}
footer ul li a{
text-decoration:none;
font-size:13px;
color:#784f3d;
margin:10px;
float:left;
}
footer ul li{
float:right;
}
footer ul li a:hover{
color:#3d2316;
}
figure{
float:left;
margin:25px;
}
figcaption{
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span{
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
mobile responsive code:
#media screen and (max-width:640px){
.container{
width:100%;
}
.sidebar{
width:100%;
margin:0;
}
.main_nav{
display:none;
}
.company_info{
display:none;
}
.first_article{
width:90%;
margin-top:50px;
}
footer p{
display:none;
}
.about_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.orders_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.contact_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.gallery_section{
width:80%;
margin-top:50px;
margin-bottom:100px;
}
.menu:before{
content:"Menu";
}
.menu{
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
background-color: #CBAFA2;
margin-bottom:3px;
cursor:pointer;
width:100%;
}
}

You have to cancel the default action with http://api.jquery.com/event.preventDefault/
If it's not enough, hide the element on DOM ready.

How to implement scroll feature using iscroll javascript

I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!

This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!

Develop Reference

JavaScript is the programming language of the Web.

.hide() is hiding too much - javascript

Related

Range slider with text box Jquery and CSS

Check multiple input empty value wont work

Cannot change some elements style following scrolling

Trying to make a responsive nav hide the options by default in each page

How to implement scroll feature using iscroll javascript

Categories

Resources