I want to show labels only if the facet has any options. Therefore I tried the following code:
<script>
(function($) {
$(document).on('facetwp-loaded', function() {
$('.facetwp-facet').each(function() {
var facet_name = $(this).attr('data-name');
var facet_label = FWP.settings.labels[facet_name];
if ($('.facet-label[data-for="' + facet_name + '"]').length < 1 && $(this).children()
.length > 0) {
$(this).before('<p class="h5 facet-label" data-for="' + facet_name + '">' + facet_label + '</p>');
}
});
});
})(jQuery);
</script>
It works but only if I reload the page with active filters.
If I change the filter, the labels stay.
Is there any option to ask if the are a new filters after a click?
The plugin author gave me an hint for a solution:
<script>
(function($) {
$(document).on('facetwp-loaded', function() {
$('.facetwp-facet').each(function() {
var facet_name = $(this).attr('data-name');
var facet_label = FWP.settings.labels[facet_name];
if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {
$(this).before('<h3 class="facet-label" data-for="' + facet_name + '">' + facet_label + '</h3>');
} else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
$('.facet-label[data-for="' + facet_name + '"]').remove();
}
});
});
})(jQuery);
</script>
Related
I have a jQuery loop that iterates over specifics elements of an HTML page. For every element, I do a switch over a variable and append HTML code in specific places.
The problem is that, one of those appends is an import to another Javascript file. This file uses a variable from the first one but, for some reason, that variable doesn't always have the correct value, depending on the order of the HTML elements in the page.
UPDATE
As requested, I created a Plunker so it's easy to see code:
http://plnkr.co/edit/mrEhgbZhhvu0Z4iniXGl?p=preview
Note: For this to work, you need to have correct pageId and appId for Instagram.
I'll put the code to be more clear:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<section id="rrss">
<!-- If I put this article block as the last one, it works -->
<article id="instagram">
<div data-rrss="instagram"></div>
</article>
<br/>
<article id="facebook">
<div data-rrss="facebook"></div>
</article>
<br/>
<article id="twitter">
<div data-rrss="twitter"></div>
</article>
</section>
<!-- SCRIPTS -->
<script src='scripts/data.js'></script>
<script src='scripts/jquery.js'></script>
<script>var customJquery = $.noConflict(true);</script>
<script src='../magic.js'></script>
</body>
</html>
data.js
var data = {
"facebook": {
"id": "facebook",
"width": 0,
"height": 0,
"custom_style": "border:none;overflow:hidden",
"hide_cover": false,
"show_facepile": true,
"small_header": false,
"adapt_container_width": true
},
"twitter": {
"id": "twitter",
"width": 0,
"height": 0,
"chrome": "nofooter noscrollbar noheader", // noborders transparent
"tweet_limit": 0,
"lang": "es",
"theme": "dark",
"link_color": "#0084b4"
},
"instagram": {
"id": "123456798123467/9876543219876543",
"hidecaption": false,
"custom_style": "overflow:auto;",
"max_width": 0,
"max_height": 500
},
"defaults": {
"width": 380,
"height": 500
}
}
magic.js
var rrss = customJquery('div[data-rrss]');
var conf = undefined;
var defaults = undefined;
var node = document.querySelectorAll('[data-rrss="instagram"]')[0];
customJquery.each(rrss, function(ix, it) {
var html = '';
var network = customJquery(it).data('rrss');
if (network === undefined || network == null || network.length <= 0)
return;
conf = data[network];
if (conf === undefined ||conf === null || conf.length <= 0)
return;
defaults = data['defaults'];
//Comprobamos si existe el key y si el value tiene texto
if(conf.id === undefined || conf.id === null || conf.id.length === 0)
return;
switch(network) {
case 'facebook':
html = '<iframe id="iFB" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F' + conf.id +
'&tabs=timeline' +
'&width=' + (conf.width <= 0 ? defaults.width : conf.width) +
'&height=' + (conf.height <= 0 ? defaults.height : conf.height) +
'&small_header=' + conf.small_header +
'&adapt_container_width=' + conf.adapt_container_width +
'&hide_cover=' + conf.hide_cover +
'&show_facepile=' + conf.show_facepile + '"' +
'width="' + (conf.width <= 0 ? defaults.width : conf.width) + '" ' +
'height="' + (conf.height <= 0 ? defaults.height : conf.height) + '" ' +
'style="' + conf.custom_style + '" ' +
'scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>\n' +
'<script type="text/javascript">\n' +
' setInterval(() => {\n' +
' customJquery("#iFB")[0].src = customJquery("#iFB")[0].src\n' +
' }, 5 * 60 * 1000);\n'
'</script>';
break;
case 'twitter':
html = '<a class="twitter-timeline" '+
'href="https://twitter.com/' + conf.id + '" ' +
'data-width="' + (conf.width <= 0 ? defaults.width : conf.width) + '" ' +
'data-height="' + (conf.height <= 0 ? defaults.height : conf.height) + '" ';
if (conf.chrome !== undefined && conf.chrome !== '') {
html += 'data-chrome="' + conf.chrome + '" ';
}
if (conf.tweet_limit > 0) {
html += 'data-tweet-limit="' + conf.tweet_limit + '" ';
}
html += 'data-lang="' + conf.lang + '" ' +
'data-theme="' + conf.theme + '" ' +
'data-link-color="' + conf.link_color + '"' +
'>Tweets by ' + conf.id + '</a>\n' +
'<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>';
break;
case 'instagram':
node = node.parentElement;
html = '<script async src="https://connect.facebook.net/es_ES/sdk.js"></script>\n' +
'<script src="../insta.js"></script>\n' +
'<script async defer src="https://www.instagram.com/embed.js"></script>\n' +
'<script>\n'+
' setInterval(() => {\n' +
' if (document.readyState === "complete") {\n' +
' window.instgrm.Embeds.process();\n' +
' }\n' +
' }, 100);\n' +
' setInterval(() => {\n' +
' fbAsyncInit();\n' +
' }, 5 * 60 * 1000);\n'
'</script>';
break;
default:
html = '';
}
if (html != '') {
customJquery(it).replaceWith(html);
}
});
insta.js
window.fbAsyncInit = function () {
var html = '';
var style = '';
// When the Instagram's article bloke in HTML isn't the last one, this shows data from Twitter bloke
console.log(conf);
if (node !== undefined) {
if (document.getElementById('instagram') !== null) {
document.getElementById('instagram').innerHTML = '';
}
if (conf !== undefined && conf !== '') {
if (conf.max_width !== undefined && conf.max_width > 0) {
style += 'max-width: ' + conf.max_width + 'px;';
} else {
style += 'max-width: ' + defaults.width + 'px;';
}
if (conf.max_height !== undefined && conf.max_height > 0) {
style += 'max-height: ' + conf.max_height + 'px;';
} else {
style += 'max-height: ' + defaults.height + 'px;';
}
style += conf.custom_style;
}
var div = document.createElement('div');
div.id = 'instagram';
if (style !== '') {
div.style = style;
}
node.appendChild(div);
}
var pageId = conf.id.substring(0, conf.id.indexOf('/'));
var appId = conf.id.substring(conf.id.indexOf('/') + 1);
FB.init({
appId: appId,
autoLogAppEvents: true,
xfbml: true,
version: "v3.1"
});
FB.getLoginStatus(function (response) {
if (response.status === "connected") {
FB.api(
"/" + pageId + "/",
"GET", { "fields": "instagram_business_account" },
function (response) {
if (response.error && response.error !== '') {
console.log("Error recovering 'instagram_business_account': " + response.error.message);
} else {
FB.api(
"/" + response.instagram_business_account.id + "/media",
"GET", { "fields": "shortcode" },
function (response) {
for (var i = 0; i < response.data.length; i++) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
html = JSON.parse(this.response).html;
document.getElementById("instagram").innerHTML += html;
}
};
xhttp.open("GET", "https://api.instagram.com/oembed/?url=http://instagr.am/p/" + response.data[i].shortcode + "&omitscript=true&hidecaption=" + conf.hidecaption, true);
xhttp.send();
}
}
);
}
}
);
} else {
console.log("Error recovering access token: Not connected.")
console.log(response)
}
});
};
Well, I've solved with some ugly lonely line:
case 'instagram':
node = node.parentElement;
instaconf = conf; // ***** Saved the conf here *****
html = '<script async src="https://connect.facebook.net/es_ES/sdk.js"></script>\n' +
'<script src="../tecInsta.js"></script>\n' +
'<script async defer src="https://www.instagram.com/embed.js"></script>\n' +
'<script>\n'+
' setInterval(() => {\n' +
' if (document.readyState === "complete") {\n' +
' window.instgrm.Embeds.process();\n' +
' }\n' +
' }, 100);\n' +
' setInterval(() => {\n' +
' fbAsyncInit();\n' +
' }, 5 * 60 * 1000);\n'
'</script>';
break;
Then changed the conf references to instaconf in insta.js file.
Since this file was loaded after the jQuery loops ended, the configuration was the last one in that loop (the last article in index.html file).
Here the problem is you are appending HTML elements dynamically. Here jquery will append in DOM then browser will some time to parse. Until that controller wont wait for the operation so loop continue execution. so here config is hold last element of twitter configuration.
And we can't pass reference to html string as per my knowledge. This we can achieve by passing config as string into html string from there we can pass to fbAsyncInit() method.
'<script>\n'+
' setInterval(() => {\n' +
' if (document.readyState === "complete") {\n' +
' window.instgrm.Embeds.process();\n' +
' }\n' +
' }, 100);\n' +
' setInterval(() => {\n' +
' let configuration = '+ JSON.stringify(conf) +';'+
' fbAsyncInit(configuration);\n' +
' }, 5 * 60 * 1000);\n'
'</script>';
and we can receive as
window.fbAsyncInit = function (con) {
or we can pass call back function to html method and we do operation which is done in magic.js
Reference: http://api.jquery.com/html/#html-function
then we can return html accordingly.
I hope this will help you.
I have some code that adds items to a select list which works fine. However, what I need to do is compare a value that has already been entered so the user cannot enter dupe values. I know how to compare values but cannot get my head round how to check for value already entered.
I would be grateful if someone could shed some light on how to do this. Many thanks
js
$(function() {
$(document).on('click', '#add', function() {
var boxvalue = $("#box_input").val();
if (boxvalue == '') {
$("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({
'color': 'red',
'margin-left': '5px',
'margin-top': '5px'
});
return false;
}
count = $('#box_ni').children('option').length;
$("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
if (count > 2) {
$("#counter").html("No more than 3 items per intake. Please remove items from the list.");
return false;
} else {
count++;
$("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
}
$("#box_ni").append("<option>" + boxvalue + "</option>");
$("#box_input").val('');
});
});
js remove function
$(function() {
$(document).on('click', '#remove', function() {
$("#box_ni > option:selected").each(function() {
$("#box_ni option:selected").remove();
count--;
});
$("#counter").html("Total selected boxes for intake: " +
'<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' +
'</span>').css('color:, black');
});
});
Checking for value can be done with a selector, but from your append script, you are not adding a value, but rather <option>value</option> (as opposed to with a value: <option value='value'>value</value>).
You can filter the results by checking the .text() of each option:
if ($("#box_ni option").filter(function (i,e) {
return $(e).text() == boxvalue ;
}).length > 0)
{
$("#counter").html("You've already selected that");
}
Snippet showing possible checks with value and text:
var newval = "1"
console.log("1", $("#sel option[value='"+newval+"']").length == 1)
var newval = "3"
console.log("3", $("#sel option[value='"+newval+"']").length == 1)
var newtext = "one"
console.log("one", $("#sel option").filter(function (i,e) { return $(e).text() == newtext; }).length == 1)
var newtext = "three"
console.log("three", $("#sel option").filter(function (i,e) { return $(e).text() == newtext; }).length == 1)
<select id='sel'>
<option value="1">one</option>
<option value="2">two</option>
</select>
add this in place of $("#box_ni").append....
var values = document.getElementsByTagName('option');
var j=0;
for(i=0; i < values.length; i++){
if(boxvalue == values[i].innerHTML){
j++;
}
}
if(j==0){
$("#box_ni").append("<option>" + boxvalue + "</option>");
}
You could try maintaining the list of values in an array and using that to represent the list's entries.
$(function() {
let boxvalues = [];
$(document).on('click', '#add', function() {
var boxvalue = $("#box_input").val();
if (boxvalue == '') {
$("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({
'color': 'red',
'margin-left': '5px',
'margin-top': '5px'
});
return false;
}
count = $('#box_ni').children('option').length;
$("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
if (count > 2) {
$("#counter").html("No more than 3 items per intake. Please remove items from the list.");
return false;
} else {
count++;
$("#counter").html("Total selected boxes for intake: " + '<span style="font-size: 14px; color: black;">' + '( ' + count + ' )' + '</span>').css('color:, black');
}
//Checks and adds the entries
if(boxvalues.indexOf(boxvalue) === -1) {
boxvalues.push(boxvalue)
$("#box_ni").append("<option>" + boxvalue + "</option>");
}
$("#box_input").val('');
});
});
I am using angular-treeview directive. Here , It is taking some time to load the tree, so I want to show a spinner for that time. So, I want to define a variable in directive and that will be used in the view so that I can show a spinner.
**angular-treeview.js**
(function ( angular ) {
'use strict';
angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile) {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//node class
var nodeClass = attrs.nodeClass || 'type';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//search by label
var searchQuery = attrs.searchQuery || '';
//function for highlighting search text
var searchHighlightFunction = attrs.searchHighlightFunction ||
function (content, text) {
return content
};
//css class to be added for highlighting
var searchHighlightClassName = attrs.searchHighlightClassName || '';
//filter to be used with search query
var searchFilter = attrs.searchFilter || '';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '| ' + searchFilter + ':' + searchQuery + '" data-ng-init="node.collapsed=true">' +
'<i class="collapsed {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="expanded {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="normal {{node.' + nodeClass + '}}" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
'<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)" ' +
'ng-bind-html="' + searchHighlightFunction + '(node.' + nodeLabel + ', ' + searchQuery + ', \'' + searchHighlightClassName + '\', true)"></span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren +
'" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children="' + nodeChildren + '"' +
' data-node-class="' + nodeClass + '" data-search-query="' + searchQuery + '" data-search-highlight-function="' + searchHighlightFunction + '"' +
' data-search-highlight-class-name="' + searchHighlightClassName + '" data-search-filter="' + searchFilter + '"></div>' +
'</li>' +
'</ul>';
//check tree id, tree model
if( treeId && treeModel ) {
/*
* to expand or collapse nodes on search text changes
*/
scope.$watch(searchQuery, function (newVal, oldVal) {
var node = scope.node;
if (newVal) {
if (newVal.length > 0) {
if (node) {
if ((node[nodeChildren] && node[nodeChildren].length)
|| (node[nodeChildren] && node[nodeChildren].length)) {
node.collapsed = false;
}
}
}
} else {
if (node && ((node[nodeChildren] && node[nodeChildren].length)
|| (node[nodeChildren] && node[nodeChildren].length))) {
node.collapsed = (scope[treeId].expandedNodes.indexOf(node[nodeLabel]) < 0);
}
}
});
//root node
if( attrs.angularTreeview ) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//this is where we are storing nodes by user to distinguish between
// those expanded by user from those done for showing search results
scope[treeId].expandedNodes = [];
scope.$watch(treeModel, function(newVal, oldVal) {
if (newVal) {
scope[treeId].expandedNodes = [];
}
});
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){
var expandedNodesIndex;
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
expandedNodesIndex = scope[treeId].expandedNodes.indexOf(selectedNode[nodeLabel]);
if (expandedNodesIndex > -1) {
if (selectedNode.collapsed) {
scope[treeId].expandedNodes.splice(expandedNodesIndex, 1);
}
} else {
if (!selectedNode.collapsed) {
scope[treeId].expandedNodes.push(selectedNode[nodeLabel]);
}
}
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){
//remove highlight from previous node
if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append( $compile( template )( scope ) );
}
}
};
}]);
})( angular );
My html is -
<div data-angular-treeview="true" data-tree-id="Treevalue"
data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
</div>
So, How to define a variable in this directive and use it in the scope ?
Looking through the code, it may be as simple as adding HTML inside the div with data-tree-view on it. That HTML will be wiped as part of the tree view directive, so anything you add in there (like a spinner) will be displayed until the directive finishes.
Edit:
Add an image inside the tree view div. This HTML will be cleared, so it will only show while it's loading.
<div data-angular-treeview="true" data-tree-id="Treevalue"
data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
<img src="spinner.gif">
</div>
Please try the jsFiddle with jQuery UI selectmenu and 2 buttons.
With the help of 2 buttons prevGame and nextGame I am able to change the selectedIndex variable tracking the currently selected game number.
The jQuery UI selectmenu doc unfortunately does not explain how to set and get (so that I can update the span currGame) the currently selected item:
Please explain: how to set and get the selected item in jQuery UI selectmenu?
HTML-code:
<form>
<select name="games" id="games"></select>
<button id="prevGame"><</button>
<span id="currGame">Loading...</span>
<button id="nextGame">></button>
</form>
JavaScript-code:
var yourGames = [1, 3, 5];
var hisGames = [8, 10, 12, 14];
var selectedIndex = 0;
$("#games").selectmenu();
// emulate repeating server responses
setInterval(function() {
updateMenu();
}, 5000);
$('#prevGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.max(selectedIndex - 1, 0);
updateButtons();
});
$('#nextGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.min(selectedIndex + 1, lastIndex());
updateButtons();
});
function lastIndex() {
return yourGames.length + hisGames.length - 1;
}
function updateButtons() {
$('#currGame').html('selectedIndex=' + selectedIndex); // TODO: change to "Game #"
$('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
$('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
}
function updateMenu() {
var yourGroup = ['<optgroup label="YOUR TURN">'];
for (var i = 0; i < yourGames.length; i++) {
var gameNumber = yourGames[i];
var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
yourGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
yourGroup.push('</optgroup>');
var hisGroup = ['<optgroup label="HIS TURN">'];
for (var i = 0; i < hisGames.length; i++) {
var gameNumber = hisGames[i];
var selectedTag = (i - yourGames.length == selectedIndex ? 'selected="selected"' : '');
hisGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
hisGroup.push('</optgroup>');
$("#games").selectmenu('destroy')
.empty()
.append(yourGroup.length > 2 ? yourGroup.join('') : '')
.append(hisGroup.length > 2 ? hisGroup.join('') : '')
.selectmenu(); // TODO: select the game at selectIndex
}
UPDATE:
I have prepared a newer jsFiddle using selectmenu("refresh") instead of selectmenu("destroy"), but it still has some issues.
jQuery and jQuery UI provides no way to directly set selected index of a select menu. You can use pure javascript way to set the selected index. Also I assume you want to change the text between buttons every time select menu changes. You can do it like so:
var yourGames = [1, 3, 5];
var hisGames = [8, 10, 12, 14];
var selectedIndex = 0;
setInterval(function() {
updateMenu();
updateCurrentGame();
updateButtons();
}, 5000);
$("#games").selectmenu();
$('#prevGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.max(selectedIndex - 1, 0);
updateButtons();
updateCurrentGame();
});
$('#nextGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.min(selectedIndex + 1, lastIndex());
updateButtons();
updateCurrentGame();
});
function lastIndex() {
return yourGames.length + hisGames.length - 1;
}
function updateButtons() {
$('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
$('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
}
// Update the select menu when prev & next buttons are pressed
function updateCurrentGame() {
var selectedText = $($("select#games option")[selectedIndex]).text();
$('#currGame').html(selectedText);
// pure js vay to set selected index
$("#games")[0].selectedIndex = selectedIndex;
$("#games").selectmenu("refresh");
}
// Update the selected index every time the select menu is changed manually
$("#games").on("selectmenuchange", function(e, ui) {
console.log(ui);
selectedIndex = ui.item.index;
var selectedText = ui.item.element.text();
$('#currGame').html(selectedText);
updateButtons();
})
function updateMenu() {
var yourGroup = ['<optgroup label="YOUR TURN">'];
for (var i = 0; i < yourGames.length; i++) {
var gameNumber = yourGames[i];
var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
yourGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
yourGroup.push('</optgroup>');
var hisGroup = ['<optgroup label="HIS TURN">'];
for (var i = 0; i < hisGames.length; i++) {
var gameNumber = hisGames[i];
var selectedTag = (yourGames.length + i == selectedIndex ? 'selected="selected"' : '');
hisGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
hisGroup.push('</optgroup>');
$("#games").selectmenu('destroy')
.empty()
.append(yourGroup.length > 2 ? yourGroup.join('') : '')
.append(hisGroup.length > 2 ? hisGroup.join('') : '')
.selectmenu();
}
button#prevGame,
span#currGame,
button#nextGame,
button#newGame {
vertical-align: top;
}
select#games {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<form>
<select name="games" id="games"></select>
<button id="prevGame"><</button>
<span id="currGame">Loading...</span>
<button id="nextGame">></button>
</form>
This can be done in much better way but the following code provides what you asked for:
var yourGames = [1, 3, 5];
var hisGames = [8, 10, 12, 14];
var selectedIndex = 0;
$("#games").selectmenu();
$('#prevGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.max(selectedIndex - 1, 0);
updateMenu();
updateButtons();
});
$('#nextGame').button().click(function(e) {
e.preventDefault();
selectedIndex = Math.min(selectedIndex + 1, lastIndex());
updateMenu();
updateButtons();
});
function lastIndex() {
return yourGames.length + hisGames.length - 1;
}
function updateButtons() {
var selectedText = $("#games option:selected").text();
$('#currGame').html(selectedText);
$('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
$('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
}
function updateMenu() {
var yourGroup = ['<optgroup label="YOUR TURN">'];
for (var i = 0; i < yourGames.length; i++) {
var gameNumber = yourGames[i];
var selectedTag = (i == selectedIndex ? 'selected="selected"' : '');
yourGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
yourGroup.push('</optgroup>');
var hisGroup = ['<optgroup label="HIS TURN">'];
for (var i = 0; i < hisGames.length; i++) {
var gameNumber = hisGames[i];
var selectedTag = (yourGames.length + i == selectedIndex ? 'selected="selected"' : '');
hisGroup.push(
'<option ' +
selectedTag +
' value="' +
gameNumber +
'">Game #' +
gameNumber +
'</option>');
}
hisGroup.push('</optgroup>');
console.log(yourGroup);
console.log(hisGroup);
$("#games").selectmenu('destroy')
.empty()
.append(yourGroup.length > 2 ? yourGroup.join('') : '')
.append(hisGroup.length > 2 ? hisGroup.join('') : '')
.selectmenu();
}
I also updated your Fiddle so you can play with it.
https://jsfiddle.net/q07uarwr/35/
I gave it a try and got both updating and displaying text. But only thing you need to find next is how to set value once selected index changes to the next <option> group in the drop down.
This is the main change:
function updateButtons() {
var gamesOptions = $('#games option');
$('#currGame').html("<span>" + $(gamesOptions[selectedIndex]).text() + "</span>");
$("#games").val(selectedIndex).change();
$('#prevGame').button(selectedIndex == 0 ? "disable" : "enable");
$('#nextGame').button(selectedIndex == lastIndex() ? "disable" : "enable");
updateMenu();
}
https://jsfiddle.net/q07uarwr/34/
I'm trying to make my webpage refresh and maintain it's scroll position with this code:
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
var match = window.location.href.split('?')[1].split("&")[0].split("=");
document.getElementsByTagName("body")[0].scrollTop = match[1];
}
}
While this successfully adds the ?page_y=scrollposition and the scroll position is accurate, and I can print match and match[1] to the console successfully, the only problem is it does not scroll the page.
EDIT:
Apparently, the script is loading before my script to generate the content of the web page and I'm not quite sure why. Posting entire code below:
<script>
$(window).load(function(){
$.getJSON("sun.json", function(json1) {
$.each(json1, function(key, data) {
document.body.innerHTML +=
"<div id='" + data.video + "' class='caption' data-source='" + data.video + "' data-title='" + data.title + "' data-desc='" + data.description + "' onclick='parent.changeVideo(dataset.source, dataset.title, dataset.desc); reloadImg()'>" +
"<img class='thumbnail' src='" + data.thumb + "' alt='" + data.title + "'>" +
"<div class='caption-text'>" +
"<b class='caption-title'>" + data.title + "</b>" +
data.description +
"</div>" +
"</div>" +
"<hr>"
console.log("This should be first");
$(".caption").hover(function(){
$(this).find(".caption-text").fadeIn(400);
},
function(){
$(this).find(".caption-text").fadeOut(400);
});
});
});
});
var scroll = $(window).scrollTop();
// yada
$("html").scrollTop(scroll);
function changeVid() {
document.querySelector("#current-video_html5_api").src = data.video
console.log(data.video);
}
</script>
<script>
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
var match = window.location.href.split('?')[1].split("&")[0].split("=");
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
//document.getElementsByTagName("body")[0].scrollTop = match[1];
window.scrollTo(0, match[1]);
console.log(match[1]);
console.log("This should come second");
}
}
</script>
You can use window.scrollTo:
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
var match = window.location.href.split('?')[1].split("&")[0].split("=");
window.scrollTo(0, match[1]);
}
}
You need to use scrollTo as a function - not as a property. I believe scrollTop (as a function) is only available in libraries (like jquery). Here's some documentation on how to use window.scrollto()...
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo