Ok I am new in this site and even new in html ,css and javascript.
Like the title says I need help with switching between style sheets.
I did everything I need but there is one thing, switching between style sheets works in internet explorer perfectly, but not in chrome.
What is happening in chrome? I can switch in chrome too and everything works perfectly but not the whole background color changes , only the viewed section become black , then you need to scroll down to change the color of the rest of the page.
It will be nice to get some help.
This is the code.
function darkTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetDarkTheme.css";
}
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
#option_list {
height: 40px;
width: 500px;
margin: auto;
}
#option1 {
position: relative;
display: inline-block;
height: 40px;
width: 100px;
margin-left: 0.7291666666666666em;
margin-right: 0.7291666666666666em;
background-clip: content-box;
text-align: center;
cursor: pointer;
font: bold 19px serif;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.themes {
display: block;
padding: 20px;
transition: 0.2s;
}
#option1:hover {
background-color: rgb(84, 84, 84);
color: white;
}
#dropDownMenu {
position: fixed;
padding-left: 0px;
background-color: rgb(84, 84, 84);
width: 190px;
margin-top: 17px;
display: none;
color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#option1:hover #dropDownMenu {
display: block;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.themes:hover {
background-color: rgba(3, 3, 3, 0.51);
}
<head>
<link id="lightTheme" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css">
</head>
<body>
<div id="option_list">
<div id="option1">
Theme
<ul id="dropDownMenu">
<li onclick="darkTheme()" class="themes">Dark the</li>
<li onclick="lightTheme()" class="themes">Light theme</li>
</ul>
</div>
</div>
</body>
Mistake in your lightTheme:
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
In the lighttheme funtion, change the variable theme
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
The lighttheme function isn't doing anything.
function lightTheme() {
var theme = document.getElementById('lightTheme');
theme.href = "styleSheetLightTheme.css";
}
function darkTheme() {
var theme = document.getElementById('darkTheme');
theme.href = "styleSheetDarkTheme.css";
}
This one with set cookie valid for 1 day, so it will checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it use default style.
<head>
<link rel="stylesheet" type="text/css" title="light" href="styleLightTheme.css">
<link rel="alternate stylesheet" type="text/css" title="dark" href="styleDarkTheme.css">
</head>
<body onload="set_style_from_cookie()">
<div id="option_list">
<div id="option1">
Theme
<ul id="dropDownMenu">
<li onclick="switch_style('dark'); return false;" class="themes" id="dark">Dark Theme</li>
<li onclick="switch_style('light'); return false;" class="themes" id="light">Light Theme</li>
</ul>
</div>
</div>
</body>
Script:
var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
function switch_style ( css_title )
{
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link") ;
i < link_tag.length ; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
link_tag[i].title) {
link_tag[i].disabled = true ;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false ;
}
}
set_cookie( style_cookie_name, css_title,
style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )
{
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
//
var cookie_string = document.cookie ;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match (
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)' );
return decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
Related
I am trying to count the number of times each value occurs for 'classtext' which is in data.items
However, by adding a function below to do that for each new inputted classtext on button click, I get 0 returned, even if I previously input several 'test' in the classtext field. I am very new in vuejs so obviously I am doing something wrong.
The code looks like this:
<!DOCTYPE html>
<html>
<script src="https://vuejs.org/js/vue.js"></script>
<style>
/* Vue List Item transition */
.list-item-enter-active,
.list-item-leave-active {
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: left center;
transform-origin: left center;
}
.list-item-enter,
.list-item-leave-to {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
/* //////////////////////////////////////// */
/* Basic Styles */
html {
background: #eee;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list {
background: #FFF;
margin: auto;
padding: 1em 1em 1em;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.list :last-child {
margin-bottom: 0;
}
.list__ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.list__input {
display: flex;
margin-bottom: 0.5em;
}
.list__item {
display: block;
margin-bottom: 0.25em;
}
</style>
</head>
<body>
<div id="example-1" class="list">
<div class="list__input" #keydown.enter="add">
<button v-on:click="count">+</button>
<input v-model="newBeneficiary" placeholder="Add beneficiary" />
<input v-model="newClass" placeholder="Add new task topic" />
<input v-model="newItem" placeholder="Add new task text" />
</div>
<transition-group name="list-item" tag="ul" class="list__ul">
<li class="list__item" v-for="item in items" :key="item">
Timestamp: {{ item.timestamp }} <br />
Beneficiary: {{ item.beneficiarytext }} <br />
Topic: {{ item.classtext }} <br />
Task: {{ item.message }}
</li>
</transition-group>
</div>
</body>
<script>
/**
* Return a timestamp with the format "m/d/yy h:MM:ss TT"
* #type {Date}
*/
function timeStamp() {
var now = new Date();
var date = [ now.getMonth() + 1, now.getDate(), now.getFullYear() ];
var time = [ now.getHours(), now.getMinutes(), now.getSeconds() ];
var suffix = ( time[0] < 12 ) ? "AM" : "PM";
time[0] = ( time[0] < 12 ) ? time[0] : time[0] - 12;
time[0] = time[0] || 12;
for ( var i = 1; i < 3; i++ ) {
if ( time[i] < 10 ) {
time[i] = "0" + time[i];
}
}
return date.join("/") + " " + time.join(":") + " " + suffix;
}
var app = new Vue({
el: '#example-1',
data: {
items: [
/*{ timestamp:'testdate', beneficiarytext: 'TestBeneficiary', classtext: 'TestTopic', message: 'TestMessage' }*/
]
},
methods: {
/* MIGHT BE USED LATER TO DELETE TASKS
remove: function(item){
this.items.splice( this.items.indexOf(item), 1 );
},
*/
add: function(){
this.items.unshift({ timestamp: timeStamp(), beneficiarytext: this.newBeneficiary, classtext: this.newClass, message: this.newItem });
this.newItem = '';
console.log(this.items);
},
count: function() {
var counting = this.items.reduce(function (n, class1) {
return n + (class1.classtext == this.newClass);
}, 0)}
}
})
</script>
</body>
</html>
You didn't bind this to the reducer function. Use
this.items.reduce((n, class1) => { ... })
or
this.items.reduce(function (n, class1) { ... }.bind(this))
See How does the “this” keyword work?.
The compute the counts for each classtext in the array:
this.items.reduce((map, item) => {
map.set(item.classtext, (map.get(item.classtext) || 0) + 1)
return map
}, new Map())
// Returns Map of (classtext, count) pairs:
// {
// apple => 2,
// banana => 6,
// }
I made a button in HTML that work fine on Google Chrome but does not react at all on Firefox.
My code:
function fbs_click() {
var u = location.href;
var t = document.title;
window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t) + '&s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
function rSign() {
var test = Math.random();
return test > 0.5 ? 1 : -1;
}
var CQuote = "",
CAuthor = "";
function getQuote() {
$.ajax({
jsonp: "jsonp",
dataType: "jsonp",
contentType: "application/jsonp",
url: "https://api.forismatic.com/api/1.0/?",
data: {
method: "getQuote",
lang: "en",
format: "jsonp",
},
success: function(quote) {
// document.getElementById("quote").innerHTML =
CQuote = quote.quoteText;
// document.getElementById("author").innerHTML =
CAuthor = quote.quoteAuthor;
document.getElementById("author").innerHTML = CAuthor;
document.getElementById("quote").innerHTML = CQuote;
}
});
}
$(document).ready(function() {
getQuote();
})
var background = document.getElementById('backimg');
var huetarget = 0;
var huecurrent = 0;
var bright = 1;
function abyssmal() {
background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
if (huecurrent < huetarget) {
huecurrent += Math.abs(huetarget - huecurrent) / 20
}
if (huecurrent >= huetarget) {
huecurrent -= Math.abs(huetarget - huecurrent) / 20
}
}
var interval = setInterval(abyssmal, 25);
$("#btnAnimate").on("click", function() {
huetarget += (Math.random() * 50 + 50) * rSign();
getQuote();
});
$('#tweet').on("click", function() {
window.open("https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + CQuote + '" -' + CAuthor), "_blank")
});
$('#facebook').on("click", function() {
fbs_click();
});
/*#myDiv{
background-color: green;
transition : background-color 2s,opacity 2s;
}
#myDiv:hover{
background-color : red;
opacity : 0.5
} */
#quotebox {
font-size: 30px;
height: auto;
}
#authorbox {
text-align: right;
}
.box {
height: auto;
margin: auto;
}
#btnAnimate {
width: 150px;
}
.share {
width: 50px;
float: right;
}
.button {
height: 50px;
padding: 0px;
vertical-align: middle;
margin-top: 40px;
color: white;
background-color: #333c5b;
border-radius: 3px;
border: none;
}
button:hover {
opacity: .8;
}
.background-tile {
background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
background-size: 1500px 900px;
height: 900px;
width: 1515px;
padding-top: 270px;
z-index: -1;
}
#backimg {
filter: hue-rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="background-tile" id="backimg">
<div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870">
<div id="quotebox">
<i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "></i>
<span id="quote"></span>
<p id=a uthorbox>-<span id="author"></span>
<p>
</div>
<button class="button quotebutton" id="btnAnimate">get quote</button>
<button class=" share button fa fa-facebook" id="facebook"></button>
<button class=" share button fa fa-twitter" id="tweet" style=" margin-right: 25px;"></button>
</div>
</div>
I doublechecked that only phrasing elements were nested inside the button.
Question: Why does the button not react on Firefox.
Some HTML methodologies are not supported via crossed-browsers.
For example, some features can work on Mozilla and Internet Explorer, but not on Chrome.
However, in this case it's demonstrating the BODY tag is overlapping your content. It may be an error with Mozilla in particular with Codepen.io, as W3schools validated that the button feature works on this browser.
You placed everything inside #backimg, which has z-index: -1, thus sending all its contents below its parent, which is <body>. This means that, even though visible, your contents sit below an invisible click-catcher (<body>).
Firefox seems to apply the z-index, although, AFAIK, the element should be position-ed (have a position value set to anything except static, which is default) for z-index to apply. Chrome doesn't apply it, because #backimg has the implicit position:static.
Closing #backimg before opening #mydiv fixes the problem and makes your HTML valid. It's not really clear how your layout is supposed to look, but here's my attempt at fixing it: https://codepen.io/anon/pen/ZvXXqP
Another problem with your pen had was that it was loading jQuery after Bootstrap's JavaScript, which requires jQuery.
I want to create/use an add-remove box like this in HTML using angularJS where you have a list of some objects on the left and you select the objects to put them on under the headings listed on the right. Any idea what do we call such tables/lists and can I create/find them?
I don't know what is the accurate title to call it :)
but I tried to implement a sample of 'add/remove box' to achieve the concept you want with AngularJS!
the main part consists of three sections:
left section which is going to be added
middle section which contains the buttons
right section which is going to be removed
The code below applies the above section which aforesaid:
<div class="box leftBox">
<div>
<div id="{{left.name}}" ng-click="clicked($event, 0)" data-ng-repeat="left in lefts">{{left.name}}</div>
</div>
</div>
<div class="box button_holder">
<button ng-click="add()" class="button button-blue">ADD ></button>
<button ng-click="remove()" class="button button-red">< REMOVE</button>
<button ng-click="addAll()" class="button button-blue button-dark">ADD ALL >></button>
<button ng-click="removeAll()" class="button button-red button-dark"><< REMOVE ALL</button>
<button ng-click="deleteChoice()" class="button delete">X</button>
</div>
<div class="box rightBox">
<div>
<div ng-click="clicked($event, 1)" data-ng-repeat="right in rights">{{right.name}}</div>
</div>
</div>
by using angularjs directives including data-ng-repeat you can control the procedure of adding or removing
here is the implemented overview.
here is the completed code on the "codepen".
you can also check my github.
try to run the snippet in a fullscreen window!
/**
* Created by ALIREZA on 8/30/2017.
*/
var app = angular.module('Add_Remove_Box', []);
app.controller('Ctrl', function($scope) {
var i;
var isRepeated = false;
var actionLicense = true;
var prevElement = null;
var currentElement = null;
var positionSide = null;
$scope.choices = ["left", "right"];
$scope.lefts = [{
id: 'left1'
}, {
id: 'left2'
}, {
id: 'left3'
}, {
id: 'left4'
}];
for (i = 0; i < $scope.lefts.length; i++) {
$scope.lefts[i].name = "left" + (i + 1).toString();
}
$scope.rights = [{
id: 'right1'
}, {
id: 'right2'
}];
for (i = 0; i < $scope.rights.length; i++) {
$scope.rights[i].name = "right" + (i + 1).toString();
}
$scope.insert = function($event) {
var side = $scope.selectedSide;
if (side == null || side == "left") {
var leftItemNo = $scope.lefts.length + 1;
$scope.lefts.push({
'id': 'left' + leftItemNo
});
$scope.lefts[leftItemNo - 1].name = $scope.choice.name;
} else {
var rightItemNo = $scope.rights.length + 1;
$scope.rights.push({
'id': 'right' + rightItemNo
});
$scope.rights[rightItemNo - 1].name = $scope.choice.name;
}
};
$scope.deleteChoice = function() {
if (positionSide === 0) {
var ItemNo = -1;
$scope.lefts.forEach(function(i, j) {
if (i.name === currentElement.textContent) {
ItemNo = j;
return;
}
});
$scope.lefts.splice(ItemNo, 1);
}
};
$scope.add = function() {
if (actionLicense && positionSide === 0) {
actionLicense = false;
var leftItemNo = -1;
$scope.lefts.forEach(function(i, j) {
if (i.name === currentElement.textContent) {
leftItemNo = j;
return;
}
});
$scope.lefts.splice(leftItemNo, 1);
var rightItemNo = $scope.rights.length + 1;
$scope.rights.push({
'id': 'right' + rightItemNo
});
$scope.rights[rightItemNo - 1].name = currentElement.textContent;
}
};
$scope.remove = function() {
if (actionLicense && positionSide === 1) {
actionLicense = false;
var rightItemNo = -1;
$scope.rights.forEach(function(i, j) {
if (i.name === currentElement.textContent) {
rightItemNo = j;
return;
}
});
$scope.rights.splice(rightItemNo, 1);
var leftItemNo = $scope.lefts.length + 1;
$scope.lefts.push({
'id': 'left' + leftItemNo
});
$scope.lefts[leftItemNo - 1].name = currentElement.textContent;
}
};
$scope.addAll = function() {
$scope.lefts.forEach(function(i) {
var rightItemNo = $scope.rights.length + 1;
$scope.rights.push({
'id': 'right' + rightItemNo
});
$scope.rights[rightItemNo - 1].name = i.name;
});
$scope.lefts.splice(0, $scope.lefts.length);
};
$scope.removeAll = function() {
$scope.rights.forEach(function(i) {
var leftItemNo = $scope.lefts.length + 1;
$scope.lefts.push({
'id': 'left' + leftItemNo
});
$scope.lefts[leftItemNo - 1].name = i.name;
});
$scope.rights.splice(0, $scope.rights.length);
};
$scope.clicked = function($event, pos) {
actionLicense = true;
positionSide = pos;
currentElement = $event.currentTarget;
var deleteButton = document.getElementsByClassName("delete")[0];
if (pos === 1) {
if (deleteButton.className.indexOf("button-deactive") === -1) {
deleteButton.className += " button-deactive";
}
} else {
deleteButton.className = deleteButton.className.replace(" button-deactive", "");
}
if (prevElement === null) {
prevElement = currentElement;
} else {
if (prevElement === currentElement) {
isRepeated = !isRepeated;
} else {
if (isRepeated) {
isRepeated = false;
}
}
}
if (prevElement.className.indexOf("active") !== -1) {
prevElement.className = prevElement.className.replace(" active", "");
}
if (!isRepeated && currentElement.className.indexOf("active") === -1) {
currentElement.className += " active";
}
prevElement = currentElement;
};
});
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
width: 100%;
padding: 10px;
height: 100vh;
border: #E64A19 inset .7vh;
background: #616161;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #9bc5c3, #616161);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #9bc5c3, #616161);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.addItems {
height: 10vh;
margin-bottom: 5vh;
}
.box {
float: left;
display: inline-block;
margin: 0;
padding: 10px;
height: 80vh;
border: #cfcfcf outset 2px;
color: #eee;
font-size: medium;
}
.box>div {
border: #FFF59D ridge 2px;
border-bottom: none;
border-radius: 5px;
}
.box>div>div {
padding: 7px;
border-bottom: #FFF59D ridge 2px;
}
.box>div>div:hover {
background-color: rgba(100, 150, 220, .5);
transition: background-color .4s ease;
}
.box>button {
display: inline-block;
width: 70%;
margin: 5% 15%;
}
.button {
padding: 10px 24px;
border-radius: 3px;
border: none;
box-shadow: 2px 5px 10px rgba(22, 22, 22, .1);
}
.button:hover {
transition: all 60ms ease;
opacity: .95;
box-shadow: #444 0 3px 3px 0;
}
.button-blue {
color: #FFFFFF;
background: #416dea;
}
.button-red {
color: #FFFFFF;
background: #F32C52;
}
.button-dark {
filter: brightness(85%) contrast(110%);
}
.leftBox {
width: 40%;
}
.button_holder {
width: 20%;
}
.rightBox {
width: 40%;
}
input[type="text"],
select {
padding: 5px;
}
.active {
transition: all .1s ease;
background-color: #888;
color: #000;
;
border: dotted 1px black;
box-shadow: 0 2px 2px 0 rgba(97, 97, 97, .5);
margin-bottom: 1px;
}
.button-deactive {
opacity: .5;
box-shadow: none;
}
.button-deactive:hover {
opacity: .5;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AddRemoveBox</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!--include angularJs-->
<script src="index.js"></script>
</head>
<body>
<div class="container" ng-app="Add_Remove_Box" ng-controller="Ctrl">
<fieldset class="addItems">
<legend>Insert Items</legend>
<select ng-model="selectedSide">
<option ng-repeat="choice in choices">{{choice}}</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter The Item Name">
<button class="button insert" value="insert" ng-click="insert($event)">Insert</button>
</fieldset>
<div class="box leftBox">
<div>
<div id="{{left.name}}" ng-click="clicked($event, 0)" data-ng-repeat="left in lefts">{{left.name}}</div>
</div>
</div>
<div class="box button_holder">
<button ng-click="add()" class="button button-blue">ADD ></button>
<button ng-click="remove()" class="button button-red">< REMOVE</button>
<button ng-click="addAll()" class="button button-blue button-dark">ADD ALL >></button>
<button ng-click="removeAll()" class="button button-red button-dark"><< REMOVE ALL</button>
<button ng-click="deleteChoice()" class="button delete">X</button>
</div>
<div class="box rightBox">
<div>
<div ng-click="clicked($event, 1)" data-ng-repeat="right in rights">{{right.name}}</div>
</div>
</div>
</div>
</body>
</html>
here i am trying to achieve infinite scrolling but what happens when i am scrolling too fast it fire multiple ajax request with same parameter , which cause same data again n again. i have doubt in scroll function of scrollpagination.js here i am giving you whole content so if any body can help me pls.
index.php
`<?php $actual_row_count = 400; ?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scrollpagination.js"></script>
<script type="text/javascript">
$(function(){
var actual_count = "<?php echo $actual_row_count; ?>";
$('#quepanel').scrollPagination({
'contentPage': 'loadmore.php', // the url you are fetching the results
'contentData': {},// { AlbumName: "Dirty Deeds", Entered: "5/1/2012" },// these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loadMore').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loadMore').fadeOut();
//var i = 0;
//$(elementsLoaded).fadeIn(1000);
if ($('#quepanel').children().size() > actual_count ){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#loadMoreComments').fadeIn();
$('#quepanel').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
</head>
<body>
<div class = "maindiv">
<div id = "quepanel" class = "middle">
<?php
$qno = 0;
$limit = 30;
for($i=0 ; $i< $limit ; $i++)
{ ?><div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div>
<?php }?>
</div>
<div id = "loadMore" class = "loadmorediv">
<center><img src = "https://www.google.com/images/loading.gif" /></center>
</div>
<div id = "loadMoreComments" class = "loadmorediv">
<center><span>No More Records</span></center>
</div>
</div>
</body>
</html>
`
loadmore.php
`<?php
$requested_page = $_GET['iteration'];
$limit = 20;
$from = (($requested_page - 1) * $limit);
$qno = $from ;
for($i=0 ; $i< $limit ; $i++)
{ ?>
<div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div>
<?php }?>
`
scrollpagination.js
(function( $ ){
$.fn.scrollPagination = function(options) {
var opts = $.extend($.fn.scrollPagination.defaults, options);
var target = opts.scrollTarget;
if (target == null){
target = obj;
}
opts.scrollTarget = target;
return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
});
};
$.fn.stopScrollPagination = function(){
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
});
};
var itr = 2;
$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.contentPage+"?iteration="+itr,
data: opts.contentData,
success: function(data){
itr++;
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
}
});
}
};
$.fn.scrollPagination.init = function(obj, opts){
var target = opts.scrollTarget;
$(obj).attr('scrollPagination', 'enabled');
$(target).scroll(function(event){
if ($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj, opts);
//alert(event.isPropagationStopped());
}
//event.stopPropagation();
//console.log(event.isPropagationStopped());
event.preventDefault();
});
//$.fn.scrollPagination.loadContent(obj, opts);
};
$.fn.scrollPagination.defaults = {
'contentPage' : null,
'contentData' : {},
'beforeLoad': null,
'afterLoad': null ,
'scrollTarget': null,
'heightOffset': 0
};
})( jQuery );`
style.css
`#CHARSET "ISO-8859-1";
body{
font-family:Segoe UI Light,Segoe UI,Tahoma,Arial,Verdana,sans-serif;
font-style: normal;
color: #C76A6A;
color: #0099D2;
color : black ;
}
#loadMoreComments{
background-color : white;
font-weight: bold;
color : black;
border : solid 1px gray;
padding : 5px;
-webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
width : 500px;
margin : 10px auto;
display : none;
}
#loadMore{
margin-left: auto;
margin-right: auto;
display:none;
z-index:2;
}
#quepanel{
padding-top : 10px;
margin-left : auto;
margin-right : auto ;
width: 600px;
}
.maindiv{
width: 960px;
height: auto;
border : red 2px;
margin-left: auto;
margin-right: auto;
background-color: #F8F8F8;
padding : 1px 10px 10px 10px ;
}
.middle{
margin-right : auto;
margin-left : auto;
}
.srno{
width : 30px;
display : inline-block;
text-align: center;
-webkit-border-radius: 45px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 45px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
background-color: rgb(180, 180, 180);
color: #15CFA3;
vertical-align: top;
padding : 5px 0 ;
color : white;
border : 1px gray;
margin-top: 5px;
}
`
How about using async: false in your ajax call .. The AJAX call in your loadcontent would be --
$.ajax({
type: 'POST',
url: opts.contentPage+"?iteration="+itr,
data: opts.contentData,
async: false,
success: function(data){
itr++;
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
}
});
In my PhoneGap Eclipse project I am using jQuery for visual effects by referencing jQuery libraries:
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
and I am also making remote domain requests in order to display some information from the remote server.
1: When I make requests to multiple servers, I get an error saying:
DroidGap: TIMEOUT ERROR! - calling webViewClient
I read that I must alter my Phonegaps whitelist by doing:
<phonegap>
<access origin="\*\" />
</phonegap>
Source: GitHub call-back
But I get some error, so I have decided to approach same results from the different ways:
2: <script type="text/javascript" src="file:///android_asset/js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
Why? - because i would like to avoid getting errors with multiple-domain requests
In these cases I get an error
SyntaxError: Parse error at file:///... in logcat
I have no idea why this is happening, because the specified file location supposed to be right in both cases.
So my questions are:
Why I cannot include .js file in this way?
Which solution I should continue trying to approach (1 or 2)?
<html>
<head>
<title></title>
<script src="phonegap-1.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0.css" />
<script type="text/javascript" src="jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<!--
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="lib/touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
<!-- <script type="text/javascript" src="lib/touch/index.js"></script> -->
<script>
var alreadyrunflag = 0 //flag to indicate whether target function has already been run
var url = "http://www.norwegian.no/";
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
//on page loaded
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function() {
//alreadyrunflag = 1;
initGet(url);
}, false)
else if (document.all && !window.opera) {
//page load error?
}
function applyChangeEvent() {
//on selection changed
var selectDepart = document.getElementById("depart");
var selectArrive = document.getElementById("arrive");
selectDepart.onchange = function() { //run some code when "onchange" event fires
if (document.getElementsByTagName("select")[1].options[document
.getElementsByTagName("select")[1].options.selectedIndex].value != ""
&& document.getElementsByTagName("select")[0].options[document
.getElementsByTagName("select")[0].options.selectedIndex].value != "") {
for ( var monthsCount = 1; monthsCount < 13; monthsCount++) {
//alert(monthsCount);
get("http://www.norwegian.no/fly/lavpris/", monthsCount);
}
}
}
selectArrive.onchange = function() { //run some code when "onchange" event fires
if (document.getElementsByTagName("select")[1].options[document
.getElementsByTagName("select")[1].options.selectedIndex].value != ""
&& document.getElementsByTagName("select")[0].options[document
.getElementsByTagName("select")[0].options.selectedIndex].value != "") {
for ( var monthsCount = 1; monthsCount < 13; monthsCount++) {
//alert(monthsCount);
get("http://www.norwegian.no/fly/lavpris/", monthsCount);
}
}
}
}
function initGet(url) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
//request.responseText
getObjs(request.responseText);
}
}
}
request.send();
}
function get(url, month) {
//alert(month);
url += "?D_City="
+ document.getElementsByTagName("select")[0].options[document
.getElementsByTagName("select")[0].options.selectedIndex].value;
url += "&A_City="
+ document.getElementsByTagName("select")[1].options[document
.getElementsByTagName("select")[1].options.selectedIndex].value;
url += "&TripType=1";
url += "&D_Day=1";
url += "&D_Month=" + getMonth(month);
/* url += "&R_Day=1";
url += "&R_Month=201201"; */
url += "&AdultCount=1";
url += "&ChildCount=0";
url += "&InfantCount=0";
//alert(url);
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
//request.responseText
parse(request.responseText, month);
}
}
}
request.send();
}
function getMonth(month) {
//alert(month.toString.length + " | " + month);
if (month.toString().length == 1) {
var tempMonth = "0" + month.toString();
//alert(tempMonth);
return year.toString() + tempMonth;
} else
return year.toString() + month;
}
function getSimpleMonth() {
return month;
}
function getObjs(mainPageHtml) {
var mainDoc = (new DOMParser()).parseFromString(mainPageHtml,
"application/xhtml+xml");
var select = mainDoc.getElementsByTagName("select")[1];
var options = select.getElementsByTagName("option");
var citiesArray = [];
for ( var i = 0; i < options.length; i++) {
cityObj = new Object();
cityObj.name = options[i].text;
cityObj.value = options[i].value;
citiesArray.push(cityObj);
}
for ( var city = 0; city < citiesArray.length; city++) {
document.getElementById("depart").innerHTML += "<option value='"+citiesArray[city].value+"'>"
+ citiesArray[city].name + "</option>";
document.getElementById("arrive").innerHTML += "<option value='"+citiesArray[city].value+"'>"
+ citiesArray[city].name + "</option>";
}
applyChangeEvent();
}
function parse(html, id) {
var pricesArray = [];
//alert(id);
var resultDoc = (new DOMParser()).parseFromString(html,
"application/xhtml+xml");
var divs = resultDoc.getElementsByTagName("table");
for ( var div = 0; div < divs.length; div++) {
if (divs[div].className == "fareCalendarTable") {
//alert("found!");
// TODO: find out how many to open!!
document.getElementById(id).style.display = "block";
document.getElementById("nav_").style.display = "block";
var table = resultDoc.getElementsByTagName("table")[div];
var divs = table.getElementsByTagName("div");
//var tbodyTrs = tbody.getElementsByTagName("tr");
//alert(document.getElementById("month-one").innerHTML);
for ( var price = 0; price < divs.length; price++) {
if (divs[price].title != "") {
/* document.getElementById("month-one-results").innerHTML += divs[price].id
.replace("OutboundFareCal", "")
+ " : " + divs[price].title + "<br>"; */
priceObj = new Object();
priceObj.date = divs[price].id.replace(
"OutboundFareCal", "");
priceObj.price = divs[price].title.replace(" NOK", "");
priceObj.price.replace(/\s/g, '');
pricesArray.push(priceObj);
}
}
/* pricesArray.sort(function sortNumber(a, b) {
return parseInt(b) - parseInt(a);
}); */
for ( var priceUnit = 0; priceUnit < pricesArray.length; priceUnit++) {
document.getElementById("month-results-" + id).innerHTML += "<table><tr><td>"
+ pricesArray[priceUnit].date
+ "</td><td>"
+ pricesArray[priceUnit].price
+ "</td></tr></table>";
}
}
document.getElementById("depart").disabled = "disabled";
document.getElementById("arrive").disabled = "disabled";
}
// document.getElementById("results").innerHTML = bodybox.item(0).innerHTML;
//holy grail!
var month = document.getElementById("month-" + id);
var spans = month.getElementsByTagName("span");
for ( var span = 0; span < spans.length; span++) {
if (spans[span].className == "ui-btn-text") {
spans[span].innerHTML += "<p>" + getCheapest(pricesArray)
+ "</p>";
}
}
}
function getCheapest(pricesArray) {
pricesArray.sort(sort);
return pricesArray[1].price;
}
function sort(a, b) {
if (a.price < b.price)
return -1;
if (a.price > b.price)
return 1;
return 0;
}
function restart() {
window.location.reload();
return false;
document.getElementById("depart").removeAttribute("disabled");
document.getElementById("arrive").removeAttribute("disabled");
}
</script>
<style>
body {
display: block;
padding: 20px;
color: #3D3C2F;
font-family: Arial, Sans-Serif, Helvetica;
font-size: 12px;
font-weight: normal;
}
div#content {
margin-left: auto;
margin-right: auto;
background: #fff;
height: 100%;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
display: block;
color: #3D3C2F;
font-family: Arial, Sans-Serif, Helvetica;
font-size: 12px;
font-weight: normal;
background-image:
url(http://www.norwegian.no/Global/backgrounds/background_no.gif);
background-repeat: repeat-x;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-position-x: 0%;
background-position-y: 0%;
width: 100%;
padding-top: 20px;
padding-bottom: 30px;
}
div#navigation {
margin-left: auto;
margin-right: auto;
padding: 20px;
position: block;
width: 80%;
background: #CCCC00;
-webkit-border-radius: 8px;
}
select {
position: block;
width: 100%;
text-color: #000;
overflow: hidden;
}
</style>
</head>
<body>
<div id="nav_" data-role="header" data-position="inline" data-theme="e"
style="display: none;">
<a href="#" data-icon="back" data-theme="c"
onClick="window.location.reload();return false;">Start</a>
<h1>Ticket Prices</h1>
</div>
<div id="content">
<div id="navigation">
Fra/From: <select id="depart">
</select> Til/To: <select id="arrive">
</select>
</div>
<div data-role="collapsible" id="1"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-1">January</h3>
<p id="month-results-1"></p>
</div>
<div data-role="collapsible" id="2"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-2">February</h3>
<p id="month-results-2"></p>
</div>
<div data-role="collapsible" id="3"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-3">March</h3>
<p id="month-results-3"></p>
</div>
<div data-role="collapsible" id="4"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-4">April</h3>
<p id="month-results-4"></p>
</div>
<div data-role="collapsible" id="5"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-5">May</h3>
<p id="month-results-5"></p>
</div>
<div data-role="collapsible" id="6"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-6">June</h3>
<p id="month-results-6"></p>
</div>
<div data-role="collapsible" id="7"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-7">July</h3>
<p id="month-results-7"></p>
</div>
<div data-role="collapsible" id="8"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-8">August</h3>
<p id="month-results-8"></p>
</div>
<div data-role="collapsible" id="9"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-9">September</h3>
<p id="month-results-9"></p>
</div>
<div data-role="collapsible" id="10"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-10">October</h3>
<p id="month-results-10"></p>
</div>
<div data-role="collapsible" id="11"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-11">November</h3>
<p id="month-results-11"></p>
</div>
<div data-role="collapsible" id="12"
style="display: none; background: #fff; width: 97%; margin-left: auto; margin-right: auto;">
<h3 id="month-12">December</h3>
<p id="month-results-12"></p>
</div>
</div>
<!-- <div id="results"></div> -->
</body>
</html>
If your directory structure is assets/www/js/jquery.js use :
<script type="text/javascript" src="js/jquery.js"></script>