html5 custom control not work if multiple video

html5 custom control not work if multiple video - javascript

I'm trying to make a custom video player. Unfortunately, I have an issue to set the control to all videos. The control button is working well, but only on the first video. I would like to make it without adding all video unique IDs. Is that even possible?
Here is my code:
const video = document.querySelector('.video');
const btn = document.getElementById('play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
btn.addEventListener('click', ()=>{
video.paused ? video.play() : video.pause();
btn.classList.toggle('pause');
});
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn #play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn #play-pause.play:before {
content:'\f144';
}
.mst-video-btn #play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>
Thanks for the advice.
Best regards

Use a class .play-pause instead than #play-pause and attach a listener to all the buttons. Furthermore, when a button is clicked you have to select the video and you have to navigate and I used closest() to select the container of the btn clicked and querySelector not on the document but on this container to select the .video child. e.target return the btn clicked, in this case you can't use this because you are using an arrow function. I modified the css too transforming the id #play-pause in a class.
const video = document.querySelector('.video');
const btns = document.querySelectorAll('.play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
for(const btn of btns){
btn.addEventListener('click', (e)=>{
const currentBtn = e.target;
const videoContainer = currentBtn.closest(".mst-video-container")
const videoParent = videoContainer.querySelector(".video");
videoParent.paused ? videoParent.play() : videoParent.pause();
currentBtn.classList.toggle('pause');
});
}
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn .play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn .play-pause.play:before {
content:'\f144';
}
.mst-video-btn .play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>

Related

Divs not showing on clicking the ellipsis

Well there are two cards and an ellipsis within it , onclicking the ellipsis it should show the div i.e. div with id = report.But it is not working for me. i tried the following as mentioned below in the code but it didn't work for me. Please have a glance and hope experts will help me in this regard.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.querySelector("#report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag #report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag #report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
#report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div id="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>

The currentTarget in the event handler will hold the .ellipsis button and the subsequent querySelector searches for the “report” div underneath the button (when it is actually a sibling).
MDN on Element.querySelector():
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Quick and dirty fix would be invoking parentElement.querySelector instead.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.parentElement.querySelector(".report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div class="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
I also changed “report” from being an ID to being a class as already noted since there is more than one instance.

You have a few bugs.
<div id="report"> you can't use the same id more than one time.
Javascript should be fired after page is loaded.
Read about function https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling
Try this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
</style>
</head>
<body>
<script>
window.addEventListener ( 'DOMContentLoaded', ()=>{
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) => {
console.log ( el );
el.addEventListener("click", (event) => {
const report = event.target.nextElementSibling;
report.classList.toggle("show");
console.log ( report );
});
});
} );
</script>
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">&#8942</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
</body>
</html>

Your snippet leaves an opened .report visible until the user clicks .ellipsis again. It might be advantageous to use the MDN: The Details disclosure element as this element has a built-in 'open'/'close' mechanism, whithout the need for extra Javascript manipulation.
The pseudo code for your .card:
<card>
<details>
<summary></summary>
<report></report>
</details>
<content></content>
</card>
card { position : relative }
details { position : absolute; z-index: 1 }
summary { list-style: none } /* remove default marker */
summary::after { content : '\22ee' } /* custom ellipsis marker */
content { /* whatever fits the card*/ }
All you have to do is position the report (absolute) over the content (z-index: 1) when opened, while the browser handles the 'open/close' toggling. All <details> will retain their current [open] state until the user toggles it again by clicking the summary.
No specific Javascript required, however, should you decide that only one .report can be open at a time, you will need to implement Javascript to handle the closure of already opened .report. Below snippet shows how that could be implemented (with a checkbox to toggle the behavior on/off).
FYI, I removed the duplicate ID mentioned by others...
Here's how I would implement the above, using your example:
/*
When only one .report can be open at a time use
below Javascript, otherwise it can be safely removed.
*/
var currentDetail;
document.querySelectorAll('.card .flag summary').forEach(el => {
// this event triggers before <details> 'toggle' event
el.addEventListener("click", event => {
// if only one can be open, close the currently opened details
if (getComputedStyle(document.body).getPropertyValue('--only-one') == '1') {
const closest = event.currentTarget.closest('.card details');
if (closest.open) {
currentDetail = null; // all summaries closed
}
else { // not null and a different summary
if ((currentDetail) && (currentDetail != closest)) {
currentDetail.removeAttribute('open'); // close current open summary
};
currentDetail = closest; // save new opened summary
};
};
});
});
/* Just for checkbox operation: simply remove all 'open' attributes */
function collapseDetails() { document.querySelectorAll('.card details').forEach(el => { el.removeAttribute('open') }) };
body {
cursor: default; /* just the default arrow everywhere */
--only-one: 0; /* default false: all <details> can be [open] */
}
.main {
display: flex; flex-flow: row wrap; justify-content: center;
gap: 20px;
}
.card {
position: relative; /* new stacking context for '.report' */
/* For easy centering of content */
display: grid; place-items: center;
width: 150px; height: 200px;
background-color: coral; color: #fff;
border: 1px solid #000;
}
.flag { /* details */
position: absolute; z-index: 1; /* inside .card, on top of content */
inset: 0 10px auto 55px; /* shorthand for top/right/bottm/left */
/* .report 80px wide (given the .card width, margin, etc.) */
}
.flag[open] { /* details 'open' specific styling */ }
.ellipsis { /* summary */
list-style: none; /* remove HTML default triangle marker */
width: max-content; /* HTML default is equal to <details> width */
margin-left: auto; /* force to right side of .flag */
margin-right: -5px;
font-size: 25px;
text-align: right; /* only relevant when width is set to a value */
cursor: pointer;
}
.ellipsis::after { content: '\22ee' } /* the vertical 'ellipsis' */
/* hex unicode as dec shows an Asian character */
.report { /* disclosed details content */
background-color: #fff; color: #000;
padding: 5px 0;
}
.report p {
margin: 0; /* remove HTML default margin */
padding: 2px 5px;
font-size: 10px; line-height: 1.1;
cursor: pointer;
}
/* demo stuff */
label {
display: inline-block;
margin: 1rem;
cursor: pointer;
}
/* All these still get overridden by Firefox */
summary:where(::before, ::after, ::marker, :active, :focus, :focus-visible),
::-moz-focus-inner, ::-moz-focus-outer {
outline: none !important;
border : 0 !important;
outline-color: transparent !important
}
<label>only one 'report' open at a time <input type="checkbox"
oninput="document.body.style.setProperty('--only-one', (this.checked) ? '1' : '0');
collapseDetails();">
</label>
<div class="main">
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
</div>

Overlay button able to start the video only on clicking center of the video alone but on clicking at any part of the video stop is happening

$(".video")
.parent()
.click(function () {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
$("video").attr("controls", true);
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
$("video").attr("controls", false);
}
});
.video {
width: 100%;
border: 1px solid black;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
background-repeat:no-repeat;
width:50px;
height:50px;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
Video should play on clicking any part of the overlay, but now it is playing only on clicking at the center of the overlay. But pause is working fine as expected as by clicking on any part of the video while it is playing, the video gets paused

What about making the "play" button cover the whole video? Is that what you need?
$(".video")
.parent()
.click(function () {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
$("video").attr("controls", true);
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
$("video").attr("controls", false);
}
});
.video {
width: 100%;
border: 1px solid black;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
background-repeat:no-repeat;
width:100%;
height:100%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:20%;
background-position: center;
border : green dashed 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>

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>

.hide() is hiding too much

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.

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.

html5 custom control not work if multiple video - javascript

Related

Divs not showing on clicking the ellipsis

Overlay button able to start the video only on clicking center of the video alone but on clicking at any part of the video stop is happening

Range slider with text box Jquery and CSS

.hide() is hiding too much

How to implement scroll feature using iscroll javascript

Categories

Resources