I want to shift the whole div to left on click of button but I want to fix the size now size changes on shift. I want to click on Sync button and it should move left.
I am using Jquery.
Following is the whole Code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('button').click(function () {
$('.error').stop().fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
});
</script>
<script type="text/javascript">
window.onload=function(){
populatedropdown( "monthdropdown", "yeardropdown")
}
</script>
<script type="text/javascript">
var monthtext=['Month','01','02','03','04','05','06','07','08','09','10','11','12'];
var yeartext=['Year','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005','2004','2003','2002','2001','2000'];
function populatedropdown( monthfield, yearfield){
var today=new Date();
var monthfield=document.getElementById(monthfield);
var yearfield=document.getElementById(yearfield);
for (var m=0; m<=12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
// monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) ;//select today's month
var thisyear=today.getFullYear();
// yearfield.options[0]= Year;
for (var y=0; y<17; y++){
//yearfield.options[y]=new Option(thisyear, thisyear);
yearfield.options[y]=new Option(yeartext[y], yeartext[y]);
thisyear-=1;
}
// yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true); //select today's year
}
</script>
<script type="text/javascript">
$(function () {
$("#drop").change(function () {
selectedText = $(this).find("option:selected").text();
if(selectedText != "RBSK")
{
alert("Test available for RBSK only");
}
msg="";
});
});
$(function () {
$("#monthdropdown").change(function () {
selectedText_month="Month";
selectedText_month = $(this).find("option:selected").text();
if(selectedText_month == "Month")
{
alert("Please Choose Month");
}
console.log("month is--" + selectedText_month);
});
});
$(function () {
$("#yeardropdown").change(function () {
selectedText_year="Year";
selectedText_year = $(this).find("option:selected").text();
if(selectedText_year == "Year")
{
alert("Please Choose Valid Year");
}
console.log("year is--" + selectedText_year);
});
});
console.log("period: "+selectedText_year+selectedText_month);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Submit').click(function () {
$('#content').animate({
'marginLeft': "-=600px" //moves left
});
});
$('#Submit').click(function () {
$('#myHeader').animate({
'marginTop': "-=250px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe2').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe1').animate({
'marginTop': "-=950px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe3').animate({
'marginTop': "-=970px" //moves left
});
});
// $('#Submit').click(function () {
// $('#img').show();
//
// $.ajax({
//
//
//
// success: function (result) {
// $('#img').hide();
// }
//
// });
// });
});
</script>
<style>
h2 {
text-align: center;
}
body {
background-color: lightblue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form id="From1" method="post">
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="js/xmlimg.png" style="width:180px; height:160px"; align="left">
<img src="js/loading.gif" id="img" style="display:none" align="center"/>
</div>
<div id="content"style="display: block">
<h2 >Welcome</h2>
<br>
<p style="font-size:150%;margin-left:39%" > Sources :
<select id="drop" name="drop">
<option value="0">Select Source</option>
<option value="1">RBSK</option>
<option value="2">MIDRS</option>
<option value="3">ATM </option>
<option value="4">RT </option>
</select>
<p style="font-size:150%;margin-left:40%"; >Period :
<form>
<form action="" name="someform">
<select id="monthdropdown"></select>
<select id="yeardropdown"></select>
<br> <br>
<button type="button" class="btn btn-primary btn-lg" style= " margin-left: 13% " id="Submit" name="Submit" onclick="prepareDataValueSet()">SYNC
</button>
</form>
</form>
</div>
<h4 id="myHeader" style="text-align:right; margin-top:10%; margin-right:20%; color: indianred"></h4>
<h4 id="qwe" style="text-align: right; margin-top:15%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe2" style="text-align: right; margin-top:20%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe1" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
<h4 id="qwe3" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
</div>
</form>
</body>
</html>
Related
$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
$('#btn').mousedown(function(){
$('.act').insertBefore($('.act').prev());
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>
Keeping the button pressed I need to continue act to be moved to the top, without clicking again, and again.
How to do that?
Use setInterval on mousedown then clearInterval on mouseup:
$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});
var intervalId;
$('#btn').mousedown(function(){
intervalId = setInterval(function() {
$('.act').insertBefore($('.act').prev());
}, 500);
}).mouseup(function() {
clearInterval(intervalId);
});
.test{
cursor:pointer;
}
.act{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>
$('#btn').mousedown(function () {
var currentIdx = $(".act").index();
while (currentIdx != 0) {
$('.act').insertBefore($('.act').prev());
currentIdx = $(".act").index();
}
});
Iam creating a hangman game and has completed most of it but i cannot understand how to display the words in other form and to apply the letter when it is clicked on the screen keyboard which have been built by me.
heres the code:-
#font-face {
font-family: HeadingFont;
src: url(DeliusUnicase-Bold.ttf);
}
/*body{display:none;}*/
#playerInputOne , #playerInputTwo{
height:30px;
width:550px;
}
h2{font-family:HeadingFont , cursive;}
#playerOne, #playerTwo , #wordOne, #wordHint {
/*float:left;*/
padding:3px;
border:2px #07EBEF solid;
height:20px;
width:300px;
border-radius: 10px 10px ;
}
#error1,#error2,#error3 , #error4 {
color:#FF0004;
/*float:left;*/
}
button , input{outline:none!important;}
button:hover{background-color:#07E1E4;}
button{
box-shadow:none!important;
margin-top:10px;
background-color:#00FFFB;
color:#FFFFFF;
width:150px;
text-align:;
height:35px;
border: none;
font-weight:800;
border-radius:5px;
cursor:pointer;
/*border:solid #00FFFB 2px;*/
}
#mainHeading{
font-size:72px;
}
#keyBoard{margin-left: 80px;}
#enterWord{
margin-top:10px;
}
#logo{width:600px;height:150px;}
#enterButton{
cursor:pointer!important;
/*float:left;*/
}
.NewFont{font-family:HeadingFont , cursive;}
#boxOfInput{width:100%;}
#wrapper{
width:470px;
margin: 0 auto;
margin-top:100px;
}
#lastLine{margin-left:30px;}
#keyBoardKey{
width:26px!important;
font-family:HeadingFont , cursive!important;
background-color:#FF9E00;
}
#keyBoardKey:hover{background-color:#D18200;}
#startTheGame{margin-left:200px;}
.displayNone , .displayNoneTwo , .displayNoneOne , .displayNoneThree {display:none}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>hangman</title>
</head>
<body style="">
<div id="wrapper" class="starting">
<center>
<h2 id="mainHeading">Hangman</h2>
<br>
<h3>Made By Hasan Zain</h3>
</center>
</div>
<div id="wrapper" class="displayNoneOne">
<div id="boxOfInput">
<div id="playerInputOne"><span class="NewFont">Player 1 : </span>
<input type="text" id="playerOne" placeholder=" e.g. John" /><span id="error1"></span>
</div>
<br>
<br>
<div id="playerInputTwo"><span class="NewFont">Player 2 : </span>
<input type="text" id="playerTwo" placeholder=" e.g. Sarah" /><span id="error2"></span>
</div>
<br>
<br>
<button onclick='checkingInput()' id="enterButton">Enter</button>
<button onclick="StartSelector()">Next</button>
</div>
</div>
<div id="wrapper" class="displayNone">
<h2>Enter the word</h2>
<div id="theWordInput">
<input type="text" id="wordOne" placeholder=" e.g. Pakistan" /><span id="error3"></span>
<br>
<button id="enterWord">Enter</button>
</div>
</div>
<div id="wrapper" class="displayNone">
<h2>Enter the Hint</h2>
<input type="text" id="wordHint" placeholder=" e.g. Sport" /><span id="error4"></span>
<br>
<button id="EnterHint">Enter</button>
</div>
<div id="wrapper" class="displayNoneTwo">
<button id="startTheGame">Start</button>
</div>
<div id="wrapper" class="displayNoneThree">
<div id="theWordGameBar">
</div>
<div id="keyBoard">
<button id="keyBoardKey">A</button>
<button id="keyBoardKey">B</button>
<button id="keyBoardKey">C</button>
<button id="keyBoardKey">D</button>
<button id="keyBoardKey">E</button>
<button id="keyBoardKey">F</button>
<button id="keyBoardKey">G</button>
<button id="keyBoardKey">H</button>
<button id="keyBoardKey">I</button>
<br>
<button id="keyBoardKey">J</button>
<button id="keyBoardKey">K</button>
<button id="keyBoardKey">L</button>
<button id="keyBoardKey">M</button>
<button id="keyBoardKey">N</button>
<button id="keyBoardKey">O</button>
<button id="keyBoardKey">Q</button>
<button id="keyBoardKey">R</button>
<button id="keyBoardKey">S</button>
<br>
<div id="lastLine">
<button id="keyBoardKey">T</button>
<button id="keyBoardKey">U</button>
<button id="keyBoardKey">V</button>
<button id="keyBoardKey">W</button>
<button id="keyBoardKey">X</button>
<button id="keyBoardKey">Y</button>
<button id="keyBoardKey">Z</button>
</div>
<br>
</div>
</div>
<script>
setTimeout(function() {
$('.starting').fadeOut(4000, function() {
$('.displayNoneOne').fadeIn(2000);
})
});
var endInputOne;
var endInputTwo;
var playerOne;
var playerTwo;
function checkingInput() {
playerOne = $('#playerOne').val();
playerTwo = $('#playerTwo').val();
if (playerOne == '') {
$('#error1').html('*fill the input fields');
endInputOne = false;
} else {
$('#error1').html('');
endInputOne = true;
}
if (playerTwo == '') {
$('#error2').html('*fill the input fields');
endInputTwo = false;
} else {
$('#error2').html('');
endInputTwo = true;
}
}
var HangmanWord;
var startOne;
var startTwo;
var start;
var Word = $('#wordOne').val();
var Hint = $('#wordHint').val();
function StartSelector() {
if (endInputOne == true) {
var endOne = 1
}
if (endInputTwo == true) {
endOne = endOne + 1;
}
if (endOne == 2) {
$('#boxOfInput').fadeOut();
$('.displayNone').fadeIn(2000);
$('#enterWord').click(function() {
Word = $('#wordOne').val();
if (Word == '') {
$('#error3').html('*Fill in the Word!');
startOne = false;
} else {
$('#error3').html('');
startOne = true;
}
});
}
}
var theGameWord;
$('#EnterHint').click(function() {
Hint = $('#wordHint').val();
if (Hint == '') {
$('#error4').html("*Fill in the Word's Hint!");
startTwo = false;
} else {
$('#error4').html('');
startTwo = true;
}
if (startOne) {
start = 1;
} else {
start = 0
}
if (startTwo) {
start = start + 1;
} else {
start = 0;
}
if (start == 2) {
$('.displayNoneTwo').fadeIn(2000);
}
});
$('#startTheGame').click(function() {
$('.displayNoneTwo').fadeOut((2000, function() {
$('.displayNone').fadeOut(2000, function() {
$('.displayNoneThree').fadeIn(5000);
});
}));
HangmanWord = Word.split("");
theGameWord = HangmanWord.length;
var Letters = ' _';
var i;
$('#theWordGameBar').html(HangmanWord);
alert(HangmanWord)
});
</script>
</body>
</html>
I am stuck in a problem where I have to create text boxes dynamically into the table cell. Along with the data which I am fetching from the DB.
It should be something like:
Number of rows are dynamic and I am able to generate it using Array. I am capturing all values into the array of records for each row and pushing it into the table. But I don't know what to do to add empty text boxes.
I was thinking if I can add "textboxes" to the array and insert along with text to the table cell. I am not sure what other options available.
I am open to answer any queries to you which might help me to get the answer.
EDIT:
Below is the code which I used to generate table:
function generateTable(fundDetails){
var tbody_holder = document.getElementById("tbody_holder");
for(var row = 0; row < fundDetails.length; row++){
var tr = document.createElement("tr");
for(var col = 0; col < fundDetails[row].length; col++){
var td = document.createElement("td");
var tn = document.createTextNode(fundDetails[row][col]);
td.appendChild(tn);
tr.appendChild(td);
}
tbody_holder.appendChild(tr);
}
}
fundDetail is a 2D array. Each element in array contains all the data for the one row of table. Next array element contains data for next row. I want to insert text boxes in each rows.
TIA
I think it will be your answer for creating the records dynamically.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-control" content="no-cache">
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/canvasjs.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<script src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/html2canvas.min.js"></script>
<script type="text/javascript" src="jquery/jquery.plugin.html2canvas.js"></script>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="text"], input[type="number"] {
border: none;
}
tbody tr{
background:#f7f7f7;
}
.navbar{
border-radius:0px !important;
border:none;
}
thead{
background:#8b99a0;
color:white;
}
.navbar{
background:#323E4E;
}
table{
border-radius:4px !important;
}
a.canvasjs-chart-credit {
display: none;
}
#chartContainer{
border-bottom:1px dashed #8b99a0;
border-right:1px dashed #8b99a0;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#bar").addClass('stuck');
} else {
$('#bar').removeClass('stuck');
}
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse" id="bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/records.png" style="width:50px;height:45px;float:left;" class="navbar-logo">
<a class="navbar-brand" href="#" title="calculation">Student Records</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;color: #323E4E;">Student marksheet</h2>
</div>
<div class="col-md-12" style="margin-bottom:2px;">
<div class="col-md-2">
<button class="btn btn-primary" id="addbtn" style="float:left;margin-right:10px;"><i class="fa fa-user-plus" aria-hidden="true"></i> Add Row</button>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="search form-control" id="search" placeholder="What you looking for?" style="box-shadow:5px 5px 5px #f7f7f7;">
</div>
</div>
<div class="col-md-2">
<button class="btn btn-primary" id="btnExport" style="float:right;"><a style="text-decoration:none;color:#fff;"><i class="fa fa-download"></i> Download</span></a></button>
</div>
</div>
<div class="col-md-12" style="margin-bottom:30px !important;">
<div class="col-md-10">
<div id="dvData">
<table class="table table-hover" id="tblData">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Mark1</th>
<th>Mark2</th>
<th>Total</th>
<th>Average</th>
<th>Status</th>
</tr>
</thead>
<tbody id="frm">
</tbody>
</table>
</div>
</div>
<div class="col-md-2">
<label>Result Chart</label>
<hr>
<div id="chartContainer" style="width:100%;height:200px;"></div>
</div>
</div>
</div>
</div>
</body>
<script>
var aa=0, z=1, numb=1, id="ping";
var x, ab ,bc,cd,tr,ty,tg,we ,er;
var id1,id2,id0,stat="mark",num="1";
var mnc="avg",mno="total", abcd=1;
var msg="status",pa=0,fa=0, stanum;
$("#addbtn").click(function(e){
var i=aa;
var zz=z+aa;
for(i;i<zz;i++){
var head= document.createElement("TR");
ab="tear";
bc=zz;
cd=ab.concat(bc);
head.setAttribute("id",cd);
document.getElementById("frm").appendChild(head);
var did= document.createElement("TD");
var pin=id.concat(numb);
did.setAttribute("id",pin);
document.getElementById(cd).appendChild(did);
document.getElementById(pin).innerHTML=numb;
numb++;
for(var p=0;p<6;p++){
if(p<3){
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
document.getElementById(cd).appendChild(lab);
}else if(p==3)
{
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
var ctot=mno.concat(abcd);
lab.setAttribute("id",ctot);
document.getElementById(cd).appendChild(lab);
}else if(p==4)
{
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
var cpo=mnc.concat(abcd);
lab.setAttribute("id",cpo);
document.getElementById(cd).appendChild(lab);
}else if(p==5)
{
var lab= document.createElement("TD");
var meg=msg.concat(i);
lab.setAttribute("id",meg);
document.getElementById(cd).appendChild(lab);
}
if(p==0)
{
x= document.createElement("INPUT");
x.setAttribute("type","text");
id0=stat.concat(num);
num++;
x.setAttribute("id",id0);
document.getElementById(tg).appendChild(x);
}else if(p==1)
{
x= document.createElement("INPUT");
x.setAttribute("type","number");
id1=stat.concat(num);
num++;
x.setAttribute("id",id1);
document.getElementById(tg).appendChild(x);
}else if(p==2)
{
x= document.createElement("INPUT");
x.setAttribute("type","number");
id2=stat.concat(num);
num++;
x.setAttribute("id",id2);
document.getElementById(tg).appendChild(x);
}
}
}
abcd++;
aa++;
});
var xx;
$("#tblData").change(function(e){
var n=1;var qq=0;xx=0;
for(var rr=1;rr<=aa;rr++){
var m0=stat.concat(n);
n++;
var m1=stat.concat(n);
n++;
var m2=stat.concat(n);
n++;
var az=document.getElementById(m0).value;
document.getElementById(m0).innerHTML=az;
var a=document.getElementById(m1).value;
document.getElementById(m1).innerHTML=a;
var b=document.getElementById(m2).value;
document.getElementById(m2).innerHTML=b;
if(a=="")
{
a=0;
}else if(b==""){
b=0;
}
else{}
var c=Number(a)+Number(b);
var d=(Number(a)+Number(b))/2;
var mp=mno.concat(rr);
document.getElementById(mp).innerHTML=c;
var cp=mnc.concat(rr);
document.getElementById(cp).innerHTML=d;
stanum=msg.concat(qq);
if((a<50)||(b<50)){
document.getElementById(stanum).innerHTML="Fail";
qq++;
}else{
document.getElementById(stanum).innerHTML="Pass";
qq++;
}
}
xx=qq;
});
$("#tblData").change(function(e){
fa=0,pa=0;
var county=$('#tblData tr').length;
for(var mob=0;mob<county-1;mob++){
var mom=msg.concat(mob);
if(document.getElementById(mom).innerHTML=="Pass"){
pa++;
}
if(document.getElementById(mom).innerHTML=="Fail"){
fa++;
}
}
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
title:{
text: "students vs pass / fail"
},
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ label: "pass", y: pa },
{ label: "fail", y: fa }
]
}
]
});
chart.render();
});
</script>
<script type="text/javascript">
$("#resbtn").click(function(e){
html2canvas($("#tblData"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
}
});
});
</script>
<script>
$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}
</script>
<Script>
$("#btnExport").click(function (e) {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
var hour = dt.getHours();
var mins = dt.getMinutes();
var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
//getting data from our div that contains the HTML table
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('dvData');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
//just in case, prevent default behaviour
e.preventDefault();
});
</script>
</html>
This is a MVC 3 Razor View Engine Project... I have a notifications window that automatically scrolls to the bottom on page load.. This is shown on the screen as a partial view.. The problem is that when this happens the ENTIRE screen scrolls to the bottom not just the partial screen... I have been in circles with this and can not get just the partial view to scroll to the bottom...
I am using this javascript on the bottom of the parent page in an attempt to force it to scroll to the top but to no avail... <script language="javascript" type="text/javascript">
document.body.scrollTop = document.documentElement.scrollTop = 0;
</script>
This is a sample of the Parent View:
#Code
ViewData("Title") = "Testing Area"
End Code
<link rel="Stylesheet" type="text/css" href="#Url.Content("~/Content/pro_drop/pro_drop_1.css")" />
<script src="#Url.Content("~/Content/pro_drop/stuHover.js")" type="text/javascript"> </script>
<script type="text/javascript">
<script language="javascript" type="text/javascript">
var int = self.setInterval(function () { clock() }, 1000);
function clock() {
$.ajax({
url: '#Url.Action("currentUsers", "Admin")',
type: "GET",
success: function (result) {
$("#CurrUsers").html(result);
}
});
}
</script>
<fieldset>
<table style="border-style: hidden; vertical-align: top">
<tr>
<td>
<table style="border-style: hidden; vertical-align: top">
<tr>
<td>
<div id="CurrUsers" style="font-size: x-small">
#Html.Partial("_CurrentUsers", ViewBag.UserListOnline)
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-style: hidden; vertical-align: top">
<table style="border-style: hidden;">
<tr>
<td>
<div id="chatter">
#Html.Partial("ChatScreen", ViewBag.ClientName)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
document.body.scrollTop = document.documentElement.scrollTop = 0;
</script>
</fieldset>
And then the #Html.Partial("ChatScreen", ViewBag.ClientName) looks like this:
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.signalR-0.5.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/signalR/hubs")" type="text/javascript"></script>
<style>
div.rectangular-area
{
border: 1px solid #999;
margin-top: 5px;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
max-height: 240px;
width: 500px;
overflow : scroll;
}
</style>
#code
Dim xList As List(Of String) = ViewBag.msgHist
End Code
<div style="width:auto;height:400px">
<script type="text/javascript">
$(function () {
var chat = $.connection.chat;
var myClientName = '#ViewBag.ClientName';
var autoScroll = true;
if (autoScroll) {
$('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
};
chat.GetMessage = function (myClientName, message) {
$('#CheckinEvents').append('<br>' + myClientName + ' : ' + message);
if (autoScroll) {
$('#CheckinEvents').animate({ scrollTop: $('#CheckinEvents').prop('scrollHeight') })
}
};
$('#msg').keydown(function (e) {
if (e.which == 13) { //Enter
e.preventDefault();
chat.send(myClientName, $('#msg').val());
$('#msg').val('');
}
});
chat.addMessage = function (myClientName, message) {
if (myClientName.indexOf("System") != -1) {
$('#messages').append('<br><b style="color:red">'+ myClientName + message + '</b>');
}
else
{
$('#messages').append('<br>' + myClientName + ' : '+ '<b style="color:#000000">' + message);
}
if (autoScroll) {
$('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
}
};
$("#broadcast").click(function () {
// Call the chat method on the server
chat.send($('#msg').val());
});
// Start the connection
$.connection.hub.start();
});
</script>
<div id="MessagingDiv" class="rectangular-area" style="width:600px" >
Notify all Admin:
<input type="text" id="msg" style="width: 575px;" maxlength="128" />
</div>
<div id="messages" class="rectangular-area" style="text-align: left; width: 600px;">
<h3>
Latest received events:
</h3>
#For Each item In xList
If item.Contains("System Message") Then
#<br />#<b style="color: Red">#item.Split("-")(0) - <b style="color: Black">#item.Split("-")(1) : <b style="color: #8B6508">#item.Split("-")(3)</b></b> </b>
Else
#<br />#<b style="color:#00CDCD">#item.Split("-")(0) <b style="color: #FFA54F">(#item.Split("-")(1)) <b style="color:Black"> : #item.Split("-")(2)</b></b></b>
End If
Next
</div>
</div>
This was fixed by changing the line document.body.scrollTop = document.documentElement.scrollTop = 0; to
document.scrollTop = 0;
maybe this will help someone else who runs into the same issue...
I'm designing a band website and Reverbnation has a cool music player in the footer which allows music to keep playing while changing pages.
I've looked at the code and I can't see any evidence of using frames. Which is the only way I know of achieving something like this. But that way is no longer supported in HTML5 and is also crap for SEO.
There is some JavaScript in the source code of the player, but I don't know enough JavaScript to tell if it's responsible. Something like this would be very useful to the site I'm building.
I would try a Google search but I have no idea what keywords I would use to look for a how to on the subject.
As the code was pretty long I cut and paste it here if anybody is willing to take a look at it.
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(function($) {
if (!$("body").hasClass("new_sofia_navigation")) {
$("body").addClass("new_sofia_navigation")
}
var $search_el = $('#sofia_header_search input[type=text]')
$search_el.quickSearch({
search_path: 'http://search.reverbnation.com/search/quick.json',
use_jsonp: true
});
$("#sofia_header_search").submit(function(e) {
var $form = $(this);
e.preventDefault();
Reverb.Navigate.go_to_page_url($form.attr('action') + '?' + $form.serialize());
});
var repositionSearchContainer = function() {
$("#global_menu_search").find(".expanded_content").alignTo($("#global_menu_search"), "br-tr")
}
$("#menu_notifications, #global_menu_search, #menu_user_actions").bind("expand", function() {
var $menu = $(this).find(".expanded_content"),
$align_target = $("#global_menu_search"),
align_offset = {
top: 0,
left: 0
}
if ($menu.hasAttr("data-align-target")) {
$align_target = $("#" + $menu.attr("data-align-target"))
}
if ($menu.hasAttr("data-align-offset")) {
var offsets = $menu.attr("data-align-offset").split(":")
align_offset.left = parseInt(offsets[0]) || 0
align_offset.top = parseInt(offsets[1]) || 0
}
$(this).find(".expanded_content").alignTo($align_target, "br-tr", align_offset)
})
$search_el.bind("quicksearch_disable", repositionSearchContainer).bind("quicksearch_enable", repositionSearchContainer)
$("#menu_notifications:not(.no_notices)").bind("expand", function() {
$.get("/page_object/reset_new_notice_count/artist_332065")
$(this).addClass("no_notices")
})
$(window).trigger('user:login', {
"type": "Artist",
"feat_ownapp_apple": "0",
"artist_bes": 5722,
"feat_rpk": "P",
"feat_fr_rap": "P",
"feat_ownapp_push": "0",
"feat_mega": "0",
"feat_distro": "0",
"feat_ownapp": "0",
"feat_distro_p": "0",
"feat_distro_e": "0",
"is_admin": false,
"feat_widg": "0",
"feat_mega_max": "0",
"artist_country": "UK",
"genre": "Metal",
"feat_fr": "P",
"feat_bundle": "0",
"feat_ownapp_droid": "0",
"artist_bought": true,
"control_room": "sofia",
"name": "Soul Sanctuary",
"id": 332065,
"feat_sb": "0",
"feat_fr_360": "0",
"current_layout": "v3"
});
});
</script>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
Reverb.Notification.init('#standard_flash_message');
});
</script>
</div>
<div id="docked_footer">
<style type="text/css">
#sm2-container {
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
overflow: hidden;
}
</style>
<div id="loading_gif">
<img alt="16x16_black" src="http://gp1.wac.edgecastcdn.net/802892/production_static/images/spinners/16x16_black.gif?1357641892" />
<span>Loading...</span>
</div>
<textarea id="template" style="display:none">
<div class="player_queue_item" >
<a href="javascript:trackEvent('V3 Footer Data','Click','Play Item ');" class="play_state" data-command="play" ></a>
<div class="content_wrap">
<div class="content">
<a href='{link}'><img src='{image}' /></a>
<h3 title="{title}">{title_display}</h3>
{artist_display}</h4>
</div>
</div>
<div class="actions" style="text-align:center">
Download
Share
Favorite
Lyrics
Be a fan
</div>
</div>
</textarea>
<div id="sm2-container"></div>
<div class="footer_content clearfix">
<div class="footer_music_player" id="music_player">
<div class="player_queue collapsed" id="player_queue">
<div class="player_queue_content">
<div class="player_queue_header">
</div>
<div class="player_queue_items card" data-card="queue_items">
<div class="card_actions clearfix">
<span data-role="title"></span>
Clear
Share All
Channels
</div>
<div class="player_queue_list"></div>
</div>
<div class=" card" data-card="queue_discover">
<div class="card_actions">
Show Queue
</div>
<div class="player_queue_discover">
<h1>ReverbNation Channels</h1>
<h3>Select a Music Channel to Get Started</h3>
Global Chart Toppers
Local Chart Toppers
Trending Artists
Alt/Rock/Indie
Electro/Pop/Dance
HipHop/Rap/R&B
Featured Artists
My Favorites
Custom Channel
</div>
</div>
<div class="player_queue_custom_channel card" data-card="queue_custom_channel">
<div class="card_actions">
Show Queue
</div>
<form action="/c/audio_player/music_now" id="custom_channel_form" method="post" onsubmit="new Ajax.Request('/c/audio_player/music_now', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;"> <label for="reverb_radio_genres_player_select">Select Genres:</label>
<input id="reverb_radio_channel" name="reverb_radio[channel]" type="hidden" value="reverb_picks" />
<select data-placeholder="Click to select genre(s)" id="reverb_radio_genres_player_select" multiple="multiple" name="reverb_radio[genres][]">
<option value="alternative">Alternative</option>
<option value="ambient">Ambient</option>
<option value="americana">Americana</option>
<option value="bluegrass">Bluegrass</option>
<option value="blues">Blues</option>
<option value="bollywoodtollywood">Bollywood/Tollywood</option>
<option value="celtic">Celtic</option>
<option value="childrens">Childrens</option>
<option value="christianrock">Christian Rock</option>
<option value="christiangospel">Christian/Gospel</option>
<option value="classical">Classical</option>
<option value="comedy">Comedy</option>
<option value="country">Country</option>
<option value="dj">DJ</option>
<option value="dance">Dance</option>
<option value="dubstep">Dubstep</option>
<option value="electronicdancemusic">Electronic Dance Music</option>
<option value="electronica">Electronica</option>
<option value="experimental">Experimental</option>
<option value="folk">Folk</option>
<option value="funk">Funk</option>
<option value="hiphop">Hip Hop</option>
<option value="holiday">Holiday</option>
<option value="house">House</option>
<option value="indie">Indie</option>
<option value="instrumental">Instrumental</option>
<option value="jam">Jam</option>
<option value="jazz">Jazz</option>
<option value="latin">Latin</option>
<option value="metal">Metal</option>
<option value="other">Other</option>
<option value="pop">Pop</option>
<option value="punk">Punk</option>
<option value="rbsoul">R&B/Soul</option>
<option value="rap">Rap</option>
<option value="reggae">Reggae</option>
<option value="rock">Rock</option>
<option value="rockabilly">Rockabilly</option>
<option value="singersongwriter">Singer Songwriter</option>
<option value="ska">Ska</option>
<option value="spiritual">Spiritual</option>
<option value="spokenword">Spoken Word</option>
<option value="world">World</option>
</select>
<input class="standard_button style_primary size_small" name="commit" type="submit" value="Ok" />
Cancel
</form>
</div>
</div>
</div>
<div class="player_about" id="player_about">
<div class="cards">
<div class="song_info card" data-card="song_info">
<div class="song_actions clearfix">
</div>
<img data-role="image" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<h3 data-role="title"></h3>
<a href="#" data-role="link">
<h4 data-role="artist"></h4>
</a>
<div class="progress_slider_wrap">
<div class="player_slider progress_slider">
<div class="progress">
<div class="progress_thumb small"></div>
</div>
<div class="time_progress extra_ui" style="word-break: normal !important;">12:123</div>
</div>
</div>
</div>
<div class="discover_music card" data-card="discover_music">
<p>Not listening to anything?</p>
<p>Try one of the ReverbNation Channels</p>
</div>
<div class="feedback card active" data-card="feedback">
</div>
</div>
</div>
<div class="player_song_control" id="player_control">
<div class="buttons">
</div>
<div class="player_slider volume_slider">
<div class="progress">
<div class="progress_thumb big"></div>
</div>
</div>
</div>
</div>
<div class="footer_content_right" id="docked_footer_content_right">
<div id="rabbit_hole_controls" class="footer_content_right_profile rabbit_hole_enabled">
<center>
Wat
Rabbit Hole
Go deeper <br/>
What's This?
</center>
</div>
<div id="rabbit_hole_tooltip" style="display: none"></div>
<script language="Javascript">
Reverb.playerReady(function() {
var $tooltip = $j('#rabbit_hole_tooltip'),
timeout_id;
$tooltip.bind('display-tooltip', function(e, message) {
$tooltip.html(message);
$tooltip.trigger('tooltip-show');
clearTimeout(timeout_id);
timeout_id = setTimeout(function() {
$tooltip.trigger('tooltip-hide');
}, 10000)
});
$tooltip.bind('tooltip-show', function(e) {
$tooltip.stop(true, true, true).
animate({
bottom: "-=10",
opacity: 'show'
});
});
$tooltip.bind('tooltip-hide', function(e) {
$tooltip.stop(true, true, true).
animate({
bottom: "+=10",
opacity: 'hide'
});
});
$tooltip.click(function(e) {
var info = MusicPlayer.getInstance().getCurrentSong()
if (info && info.link) {
Reverb.Navigate.go_to_page_url(info.link)
}
$tooltip.trigger('tooltip-hide');
})
$j('#rabbit-hole-wat').hover(function(e) {
if ($tooltip.html() != "") {
$tooltip.trigger('tooltip-show');
}
}, function(e) {
$tooltip.trigger('tooltip-hide');
});
function recommendationTextFor(hash, current_song) {
var reason = "Playing <em>" + current_song.artist + "</em> because";
switch (hash.type) {
case 'direct':
reason += " they were recommended by <em>" + $j.escapeHTML(hash.name) + "</em>";
break;
case 'show_bill':
reason += " they played a show with <em>" + $j.escapeHTML(hash.name) + "</em>" +
" on " + $j.escapeHTML(hash.latest_show_date) + ' in ' + $j.escapeHTML(hash.latest_show_location);
break;
case 'featured_artist':
reason += " they're a featured artist";
break;
default:
reason += " it's awesome";
break;
}
if (hash.reason != null) {
return $j.escapeHTML(hash.reason) + ". " + reason;
} else {
return reason;
}
}
MusicPlayer.getInstance().bind('playlist_updated', function(e, player) {
if ($j('#rabbit_hole_controls').hasClass('rabbit_hole_enabled')) {
$j('#music_player .player_queue_item:last').addClass('in_rabbit_hole');
}
});
MusicPlayer.getInstance().bind('song_play', function(e, player) {
var current_song = player && player.getCurrentSong();
if (current_song == null) {
// Hopefully means we got the thing cleared
$j('#rabbit_hole_controls').removeClass('rabbit_hole_enabled');
$j('#rabbit_hole_tooltip').html('');
Reverb.RabbitHoleCache = {};
return;
}
if (Reverb.RabbitHoleCache[parseInt(current_song.id, 10)] != null) {
$tooltip.trigger('display-tooltip', recommendationTextFor(Reverb.RabbitHoleCache[parseInt(current_song.id, 10)], current_song))
}
});
})
$j(function($) {
var goToCurrentArtist = function() {
// wee need a little delay to be sure the playlist is actually loaded before making any redirect
// not the ideal solution, but it doesn't require a beautiful reaper
window.setTimeout(function() {
var info = MusicPlayer.getInstance().getCurrentSong()
if (info && info.link) {
Reverb.Navigate.go_to_page_url(info.link)
}
})
}
$('#engage_rabbit_hole').click(function(e) {
var current_po;
if ((CURRENT_PAGE_OBJECT || '').match(/artist_/)) {
current_po = CURRENT_PAGE_OBJECT;
} else {
current_po = ''
}
trackEvent('V3 Footer Data', 'Click', 'Rabbit Hole');
$.ajax('/c/audio_player/rabbit_hole_now/' + current_po, {
type: 'get',
beforeSend: function() {
$j('#rabbit_hole_tooltip').trigger('display-tooltip', 'Loading…');
},
complete: goToCurrentArtist
});
return false;
});
$('#go_deeper').click(function(e) {
e.preventDefault();
var player = MusicPlayer.getInstance();
trackEvent('V3 Footer Data', 'Click', 'Go Deeper');
if (player.playingIndex < player.playlist.length - 1) {
player.sendCommand('next');
goToCurrentArtist()
}
});
$('#what_is_rabbit_hole').click(function(e) {
e.preventDefault();
modal_open('/audio_player/modal/rabbit_hole_modal')
trackEvent('V3 Footer Data', 'Click', 'What Is Rabbit Hole');
});
Reverb.RabbitHoleCache = Reverb.RabbitHoleCache || {};
});
</script>
</div>
</div>
<div id="footer_marketing_wrap">
<div id="footer_marketing" class="standard_footer_marketing standard_typography"></div>
</div>
<script type="text/javascript">
jQuery(function($) {
$("#player_about").qtip()
var $form = $("#custom_channel_form")
$("#music_player select").chosen().change(function() {
window.setTimeout(function() {
$form.center($form.parent())
}, 0)
})
$form.center($form.parent())
Reverb.playerReady(function() {
var load_timeout;
/* - No longer tied to profile page, will use server-side to check session cookie -
var songs_container = $("#profile_songs_container"), current_song_id, load_timeout
songs_container.delegate(".standard_play_button:not(.playing)","click", function(){
current_song_id = $(this).attr("data-song-id")
window.clearTimeout(load_timeout)
})
*/
MusicPlayer.getInstance().bind("playlist_updated", function fn(ev, player) {
var song = player.getCurrentSong();
/* - No longer tied to profile page, will use server-side to check session cookie -
if(songs_container.is(":not(:visible)")){
// detach the event listener, as the user left the original profile page
player.unbind("playlist_updated", fn)
}else if(song){
// if the current sound might not be the one the user is listening to.
// In order to be sure we're tracking the correct data, we have to check that the current song in the playlist is actually the one the user clicked on
if(current_song_id+"" == song.id+""){
current_song_id = false;
*/
window.clearTimeout(load_timeout);
var check_loaded = function() {
if (song && player.currentSound && player.currentSound.getLoaded()) { // the load percentage is > 0
//alert('before incrementing lp_song_plays');
$.get("/artist/increment_lp_song_plays", {
song_id: song.id
});
} else {
load_timeout = window.setTimeout(check_loaded, 100);
}
}
check_loaded();
/* }
}*/
});
});
})
</script>
</div>
</div>
The page you are refering to, is a single page website. They are not changing pages but change the look of the one page with javascript and ajax requests. That's why the player keeps playing.