Once again, thank you all in advance for your review and kind help I receive on this forum. I'll try to keep my request simple.
Simply put, I have working .js code that allows me to save variables in a webapp. The 'button' is currently a text link to start the save process, but I need to use a certain glyphicon instead of a text link (SAVE PROJECT) and can't figure out how to call this out in the javascript. Also, this would have two states, a disabled button, and an enabled button. Again, it's currently working like a champ using text link.
Here is an example of my code. When setting up the app variables... this link 'button' is disabled.
$(".setup").on("click", function(){
if(!$(this).hasClass("disabled")){
if(W != undefined && H != undefined){
init();
}
var w = parseInt($("#setup").css("width")), h = parseInt($("#setup").css("height")),
t = (height - h) / 2+50, l = (width - w) / 2;
$("#setup").css("top", t + "px");
$("#setup").css("left", l + "px");
$("#setup").css("display", "block");
$("#height").val(redRet.height());
$("#width").val(redRet.width());
$(".load").removeClass("disabled");
$(".save").text("SAVE PROJECT");
$(".save").addClass("disabled");
progressing = true;
}
})
After plotting function, I remove the disabled state so the link 'button' is now active to allow selection to save the content. Meaning, I'd need to change the glyphyicon state as well.
$(".plot").on("click", function(){
if(!$(this).hasClass("disabled")){
$(".load").addClass("disabled");
$(".save").removeClass("disabled");
}
})
var saveString, imageFileName, loginUser, progressing = false;
$(".save").on("click", function(){
if(!$(this).hasClass("disabled") && $(this).text() == "SAVE PROJECT"){
$(".plot").addClass("disabled");
saveString = '{';
saveString += '"setup":{'
saveString += '"width":' + W + ',';
saveString += '"height":' + H + ',';
saveString += '"wRatio":' + wRatio + ',';
saveString += '"hRatio":' + hRatio ;
saveString += '},'
saveString += '"image":{'
saveString += '"name":"' + imageFileName + '",';
saveString += '"width":' + kImage.width() + ',';
saveString += '"height":' + kImage.height() + ',';
saveString += '"x":' + kImage.x() + ',';
saveString += '"y":' + kImage.y() + ',';
saveString += '"scale":' + kImage.scale().x ;
saveString += '},'
saveString += '"redRet":{'
saveString += '"width":' + redRet.width() + ',';
saveString += '"height":' + redRet.height() + ',';
saveString += '"x":' + redRet.x() + ',';
saveString += '"y":' + redRet.y() ;
saveString += '},'
saveString += '"mainGroup":{'
saveString += '"width":' + mainGroup.width() + ',';
saveString += '"height":' + mainGroup.height() + ',';
saveString += '"x":' + mainGroup.x() + ',';
saveString += '"y":' + mainGroup.y() + ',';
saveString += '"scale":' + mainGroup.scale().x ;
saveString += '}'
saveString += '}'
if (saveString) {
$.ajax({
type: "POST",
url: "http://domain.com/tester3/upload/save.php",
data: "user=" + loginUser + "&jsonString=" + saveString,
success: function(html){
$("#message .modal-body").html("<p>"+html+"</p>");
$("#message").modal();
},
error: function(error){
$("#message .modal-body").html("<p>"+error+"</p>");
$("#message").modal();
}
});
}
}
IN SUMMARY: How do I call this out, instead of...
$(".save").text("SAVE PROJECT");
Thank you Billy. The issue I'm having is that the the html uses glyphicons over button types, (transparent bgs) with the class referring to a stylesheet that refers to fonts.
<div class="btnGroup">
<button type="button" class="btn btn-trans setup"><span class="hexioglyph-setup"></span></button>
<button type="button" class="btn btn-trans load disabled"><span class="hexioglyph-load"></span></button>
<button type="button" class="btn btn-trans plot disabled"><span class="hexioglyph-plot"></span></button>
<button type="button" class="btn btn-trans save disabled"><span class="hexioglyph-save"></span></button>
</div>
Which then refers to a stylesheet that links to the fonts.
<link rel="stylesheet" href="hexioglyphs/css/hexioglyphs.css">
Contents of special stylesheet.
.btn-trans {
background: none;
box-shadow: none !important;
border:none !important;
outline: none !important;
active: none !important;
}
#font-face {
font-family: 'hexioglyphs';
src: url('../font/hexioglyphs.eot?4598548');
src: url('../font/hexioglyphs.eot?4598548#iefix') format('embedded-opentype'),
url('../font/hexioglyphs.woff?4598548') format('woff'),
url('../font/hexioglyphs.ttf?4598548') format('truetype'),
url('../font/hexioglyphs.svg?4598548#hexioglyphs') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'hexioglyphs';
src: url('../font/hexioglyphs.svg?4598548#hexioglyphs') format('svg');
[class^="hexioglyph-"]:before, [class*=" hexioglyph-"]:before {
font-family: "hexioglyphs";
font-style: normal;
font-weight: normal;
font-size: 3em;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 2em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hexioglyph-setup { color: #959595;}
.hexioglyph-setup:before { content: '\e801'; }
.hexioglyph-setup:hover { color: #0090ff; }
.hexioglyph-load { color: #959595;}
.hexioglyph-load:before { content: '\e802'; }
.hexioglyph-load:hover { color: #0090ff; }
.hexioglyph-plot { color: #959595;}
.hexioglyph-plot:before { content: '\e803'; }
.hexioglyph-plot:hover { color: #0090ff; }
.hexioglyph-save { color: #959595;}
.hexioglyph-save:before { content: '\e804'; }
.hexioglyph-save:hover { color: #0090ff; }
.glyphicon-folder-open { color: #959595; }
.glyphicon-folder-open:hover { color: #0090ff; }
All the other glyphs show up fine, except the save button.
obviously change the src's to your glyph
var button=document.getElementById('submitButton');
button.onclick=function(){
this.src="http://placehold.it/200x50";
}
<input type="image" src="http://placehold.it/100x50" id="submitButton" alt="Submit">
Related
So I have this script that shows a sitemap of my blog just like this:
And when its clicked shows like this:
Basically I want to exclude some tags from showing in the site, and Display the posts of the first label when loaded like the second image.
I tried using cat_remove = ['Label12', 'Label13']; to remove labels but didn't work.
And tried using show_post (cat [0] .term, 1,0); to display post of the first label when loaded but that didn't work either.
I hope I've documented everything. Thanks in advance.
var cat_home = 'https://myblog.blogspot.com';
cat_numb = 4;
cat_pre = '< Anterior';
cat_nex = 'Siguiente >';
var cat_name;
var cat_start;
var cat_class;
function show_post2(a) {
var tt = a.feed.openSearch$totalResults.$t;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat_numb && i < a.feed.entry.length; i++) {
var entry = a.feed.entry[i];
cat_title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
var cat_url = entry.link[j].href
}
}
dw += '<li>';
dw += (cat_start + i) + '. ' + cat_title + '';
dw += '</li>'
}
dw += '</ul>';
dw += '<div id="navi-cat">';
if (cat_start > 1) {
dw += '' + cat_pre + ''
}
if ((cat_start + cat_numb - 1) < tt) {
dw += '' + cat_nex + ''
}
dw += '<span>' + cat_start;
if (cat_start != tt) {
dw += ' – ' + (cat_start + i - 1)
}
dw += ' / ' + tt + '</span>';
dw += '</div>';
document.getElementById('show-post').innerHTML = dw + '<style type="text/css">.cat-' + cat_class + ' a{background:#bbb!important;color:#fff!important}<\/style>'
}
function show_post(a, b, c) {
var d = document.getElementsByTagName('head')[0];
e = document.createElement('script');
e.type = 'text/javascript';
e.setAttribute('src', cat_home + '/feeds/posts/default/-/' + a + '?alt=json-in-script&start-index=' + b + '&max-results=' + cat_numb + '&callback=show_post2');
d.appendChild(e);
cat_name = a;
cat_start = parseInt(b), cat_class = c
}
function show_cat(a) {
var cat = a.feed.category;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat.length - 1; i++) {
for (var j = i + 1; j < cat.length; j++) {
if (cat[i].term > cat[j].term) {
cat_hv = cat[i].term;
cat[i].term = cat[j].term;
cat[j].term = cat_hv
}
}
}
for (var i = 0; i < cat.length; i++) {
dw += '<li class="cat-' + i + '">';
dw += '<a href="" onclick="show_post(\'' + cat[i].term + '\',\'1\',\'' + i + '\');return false" title="';
dw += cat[i].term;
dw += '">';
dw += cat[i].term;
dw += '</a>';
dw += '</li>'
}
dw += '</ul>';
document.getElementById('show-cat').innerHTML = dw
}
document.write('<script type="text/javascript" src="' + cat_home + '/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
#show-cat {
float: left;
margin-right: 33px;
width: 165px;
height: 310px;
overflow-x: hidden;
overflow-y: auto;
line-height: 18px
}
#show-cat ul {
margin: 0;
border-top: 0 solid rgba(0, 0, 0, 0.1);
padding: 0
}
#show-post ul li {
list-style-type: none;
margin: 0 0 0 -25px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
#show-post ul li:hover {
margin-right: 10px;
border-color: #fcd3d3
}
#show-cat ul li a {
display: block;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: initial
}
#navi-cat a:hover {
color: #fff!important
}
#show-cat ul li:last-child a {
border-bottom: none
}
#show-cat ul li a,
#navi-cat a {
background: #fff;
color: #555;
font-weight: bold;
text-decoration: none
}
#show-cat ul li a,
#navi-cat a,
#navi-cat span {
font-size: 13px
}
#show-cat ul li a:hover,
#navi-cat a:hover {
background: #666;
color: #fff
}
#show-post {
float: left;
width: 69%;
line-height: 1.6em
}
#show-post a {
color: #333;
font-size: 14px
}
#show-post a:hover {
color: #f14b4b
}
#navi-cat {
padding: 20px 0
}
#navi-cat a {
padding: 5px 10px;
background: rgba(0, 0, 0, 0.7);
margin: 0 5px 0 0;
color: #fff;
border-radius: 3px;
}
#navi-cat a:nth-child(2) {
background: #f14b4b;
margin: 0 10px 0 0;
color: #fff
}
#navi-cat span {
float: right;
padding: 5px 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
font-weight: 700
}
#show-cat::-webkit-scrollbar {
width: 8px;
height: 8px
}
#show-cat::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1);
}
#show-cat::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6)
}
#show-cat::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
transition: all 400ms ease-in-out
}
#media screen and (max-width:768px) {
#show-cat {
width: 35%
}
#show-post {
width: 59%
}
}
#media screen and (max-width:480px) {
#show-cat {
width: 100%;
margin: 20px 0
}
#show-post {
width: 100%
}
}
<div id='show-cat'></div>
<div id='show-post'>
<div style='clear:both'></div>
Here is how to exclude labels
cat = cat.filter(i => !["Label12","Label13"].includes(i.term));
Place it after this variable var cat = a.feed.category;
To display posts of the first label when loading, use this show_post(cat[0].term, 1) after sorting.
var cat_home = 'https://myblog.blogspot.com';
cat_numb = 4;
cat_pre = '< Anterior';
cat_nex = 'Siguiente >';
var cat_name;
var cat_start;
var cat_class;
function show_post2(a) {
var tt = a.feed.openSearch$totalResults.$t;
dw = '';
dw += '<ul>';
for (var i = 0; i < cat_numb && i < a.feed.entry.length; i++) {
var entry = a.feed.entry[i];
cat_title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
var cat_url = entry.link[j].href
}
}
dw += '<li>';
dw += (cat_start + i) + '. ' + cat_title + '';
dw += '</li>'
}
dw += '</ul>';
dw += '<div id="navi-cat">';
if (cat_start > 1) {
dw += '' + cat_pre + ''
}
if ((cat_start + cat_numb - 1) < tt) {
dw += '' + cat_nex + ''
}
dw += '<span>' + cat_start;
if (cat_start != tt) {
dw += ' – ' + (cat_start + i - 1)
}
dw += ' / ' + tt + '</span>';
dw += '</div>';
document.getElementById('show-post').innerHTML = dw + '<style type="text/css">.cat-' + cat_class + ' a{background:#bbb!important;color:#fff!important}<\/style>'
}
function show_post(a, b, c) {
var d = document.getElementsByTagName('head')[0];
e = document.createElement('script');
e.type = 'text/javascript';
e.setAttribute('src', cat_home + '/feeds/posts/default/-/' + a + '?alt=json-in-script&start-index=' + b + '&max-results=' + cat_numb + '&callback=show_post2');
d.appendChild(e);
cat_name = a;
cat_start = parseInt(b), cat_class = c
}
function show_cat(a) {
var cat = a.feed.category;
cat = cat.filter(i => !["Label12","Label13"].includes(i.term));
dw = '';
dw += '<ul>';
for (var i = 0; i < cat.length - 1; i++) {
for (var j = i + 1; j < cat.length; j++) {
if (cat[i].term > cat[j].term) {
cat_hv = cat[i].term;
cat[i].term = cat[j].term;
cat[j].term = cat_hv
}
}
}
for (var i = 0; i < cat.length; i++) {
dw += '<li class="cat-' + i + '">';
dw += '<a href="" onclick="show_post(\'' + cat[i].term + '\',\'1\',\'' + i + '\');return false" title="';
dw += cat[i].term;
dw += '">';
dw += cat[i].term;
dw += '</a>';
dw += '</li>'
}
dw += '</ul>';
document.getElementById('show-cat').innerHTML = dw;
show_post(cat[0].term, 1);
}
document.write('<script type="text/javascript" src="' + cat_home + '/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
I developing comment section for my HTMl page. I place it in div container in body section in my page, like that:
<body>
...
<div id='commentsTree'></div>
...
</body>
Commment section generated by script, here it is
function createCommentsTree(commentsData) {
resultHTML = "";
let commentsArray = JSON.parse(commentsData);
//let result = "";
resultHTML = resultHTML + "<ul id='myUL'>";
commentsArray.forEach(element => {
if (element.hasOwnProperty("subordinates")){
resultHTML = resultHTML + "<li>" +
"<span class='caret'></span><textarea class='textFieldRoot'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>";
createCommentsTreeHyerarchycally(element);
resultHTML = resultHTML + "</li>";
}
else{
resultHTML = resultHTML + "<li>" +
"<textarea class='textField'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>" +
"</li>";
}
});
resultHTML = resultHTML + "</ul>";
return resultHTML;
}
function createCommentsTreeHyerarchycally(source) {
resultHTML = resultHTML + "<ul class='nested'>";
source.subordinates.forEach(element => {
if (element.hasOwnProperty("subordinates")){
resultHTML = resultHTML + "<li>" +
"<span class='caret'></span><textarea class='textFieldRoot'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>";
createCommentsTreeHyerarchycally(element);
resultHTML = resultHTML + "</li>";
}
else{
resultHTML = resultHTML + "<li>" +
"<textarea class='textField'>" + element.content + "</textarea>" +
"<div align='right'>" +
"<button>Save</button>" +
"<button>Answer</button>" +
"<button>Delete</button>" +
"</div>" +
"</li>";
}
})
resultHTML = resultHTML + "</ul>";
}
in result i have hyerarchycally comments tree, you can see it on example here
https://jsfiddle.net/Obliterator/wogurs6L/, or, on picture "comment section" added below.
On picture you can see "caret" symbol, looks like black small arrow near textareas, i mark it on picture. When i click it, comment line must unfold, and show subordinate comment lines. You can try it in example here https://jsfiddle.net/Obliterator/wogurs6L/, in this example it works totally correct. But, in my web page, when i click on "caret" symbol, nohing happens, comment line do not unfold. And this is a problem.
For unfold by clicking "caret" symbol i make this script and css:
script:
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
css:
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
.textFieldRoot {
position: relative;
left: 15px;
width: 100%;
}
.textField {
position: relative;
width: 100%;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
position: absolute;
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
i add css and script in my page, for which i trying add comment section, that way (treeListScript.js and treeListStyle.css):
<head>
...
<script type="text/javascript" src="http://localhost/testapp/lib/others/treeList/treeListScript.js"></script>
<link rel="stylesheet" href="http://localhost/testapp/lib/others/treeList/treeListStyle.css">
...
</head>
<body>
...
<div id='commentsTree'></div>
...
</body>
i create my web page this way:
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
line windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments); creates comment section.
So, what i am doing wrong, what i mus do for my unfold fucntional works correct on my web page? If something unclear, ask, i try explain.
I solve problem by myself. Reason is i just incorrect add event handler to the .caretelements, i add it as script in head section, but i need to add it after i generate comment section, this way:
//creating new HTML page +++
var windowTask = window.open("http://localhost/testapp/site/windows/formTask.html", "taskForm");
windowTask.onload = function(){
windowTask.document.getElementById("formTitle").innerText = "Task " + selectedRow.taskID;
windowTask.document.getElementById("taskID").value = selectedRow.taskID;
windowTask.document.getElementById("title").value = selectedRow.title;
windowTask.document.getElementById("status").value = selectedRow.status;
windowTask.document.getElementById("creator").value = selectedRow.creator;
windowTask.document.getElementById("responsible").value = selectedRow.responsible;
windowTask.document.getElementById("description").value = selectedRow.description;
windowTask.document.getElementById("dateCreation").value = selectedRow.dateCreation;
windowTask.document.getElementById("dateStart").value = selectedRow.dateStart;
windowTask.document.getElementById("dateFinish").value = selectedRow.dateFinish;
//creating new HTML page ---
//creating comment section +++
var comments = getCommentsTree(selectedRow.taskID, 'task');
windowTask.document.getElementById('commentsTree').innerHTML = createCommentsTree(comments);
//creating comment section ---
//adding event handler +++
var toggler = windowTask.document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
//adding event handler ---
now everything works fine. If anyone spend some time for my question, thx.
I am trying to modify the CSS of this code so that the articles are in columns of 3 articles side by side.
The CSS / script shows the articles one below the other, I would like to show them side by side.
Example:
1 - 2 - 3
4 - 5 - 6
Even though I have already made some modifications, the result I want is not showing up.
Does anyone know where the error code is?
<style>
/**
* Blogger Archive with Pagination - Default Theme
* Visit: http://www.dte.web.id
*/
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:#666;
text-align:left;
margin:0px auto;
padding:15px;
background-color:white;
-webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
box-shadow:0px 1px 4px rgba(0,0,0,0.6);
}
#loadingscript {
background:#F6EFBB url('data:image/gif;base64,R0lGODlhEAAQAPUAAP///wAAAO7u7lRUVAAAALa2tvb29tbW1uLi4mZmZggICL6+vk5OTtzc3BwcHCgoKOjo6GxsbCIiIkZGRpiYmH5+fsrKyoyMjKqqqvz8/NDQ0IaGhmBgYBYWFnJycsTExFpaWpKSkqSkpEBAQC4uLjQ0NJ6ennh4eA4ODjo6OrCwsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAGo0CA0IDJAAhIR0YgbDYmhAKggyQIDp/mwYGcADzIEGDT0QgRjyrgQHAYIMiRgAmhII0EDGBUFQ0SCAAGD0YNAiJIAwtHSBUQGQZNCEZNVQQSTZkWEQpIChEWQpQAApYEmRkLgQAZGRpQSAALA0kQTQlCBSQlBZahDEIECotvBgxIwL1ZVYBCBxIEGgadIAAcSB0NWhdjahoEI9qZttexABiRQkEAIfkECQoAAAAsAAAAABAAEAAABmBAgBAgGhGEhJFoyGQQnsjniCk0PY+Aq4eZQACs2OfWcCI+vVbkWEEoXtHCtfR6ZhrYV6p+z9fTCVtDYFdGYgAGQmiEIoZ3SIptACNyUWgMdnhRBF5UJ3lZTwl7bkhKTEEAIfkECQoAAAAsAAAAABAAEAAABp1AgBAAGRGOQoxhKNRoAI8jAaAhjA7DQwcEWBy5HOnSwDh+MuUPQEp4FqQowGFqOA6ez8XgeMogAAgoZwAbXEN+TA0GKg5SChEWTEMgbJUFkgAWCQpsHRhMAggZTEYboxdDBkYEAwsABU8QKQSjIwACbCIZGRVScgSoF0cjAgAZHUcTAB5HAgIOHU9CEBMEl8gECRkf0qkYo1IMEExBADsAAAAAAAAAAAA=') no-repeat 50% 46%;
padding:10px;
font:bold 20px Georgia,Serif;
color:black;
height:400px;
text-indent:-9999px;
-webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
-moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}
.itemposts {
margin:0px auto 5px;
height:auto;
background-color:white;
overflow:hidden;
display:block;
}
.itemposts h6 {
margin:0px auto 2px;
font:bold 12px/14px Arial,Sans-Serif;
background-color:#9BB009;
background-image:-webkit-linear-gradient(#9BB009, #AABD30);
background-image:-moz-linear-gradient(#9BB009, #AABD30);
background-image:-ms-linear-gradient(#9BB009, #AABD30);
background-image:-o-linear-gradient(#9BB009, #AABD30);
background-image:linear-gradient(#9BB009, #AABD30);
padding:10px 15px;
text-transform:none;
color:white;
}
.itemposts h6 a {
color:white;
text-decoration:none;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}
.itemposts img {
float:left;
height:72px;
width:72px;
margin:2px 10px 2px 0px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:#fafafa;
border:1px solid #dcdcdc;
padding:4px;
}
.itemposts .iteminside {
padding:10px;
background-color:#f2f2f2;
background-image:-webkit-linear-gradient(#f2f2f2, white);
background-image:-moz-linear-gradient(#f2f2f2, white);
background-image:-ms-linear-gradient(#f2f2f2, white);
background-image:-o-linear-gradient(#f2f2f2, white);
background-image:linear-gradient(#f2f2f2, white);
border-top:1px solid #e5e5e5;
-webkit-box-shadow:inset 0px 1px 0px white;
-moz-box-shadow:inset 0px 1px 0px white;
box-shadow:inset 0px 1px 0px white;
}
.itemposts .itemfoot {
clear:both;
border:1px solid #EAE7DB;
padding:5px 10px;
margin:10px 0px 0px;
background-color:#FAFAE7;
color:#4B86C1;
overflow:hidden;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#895F30;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
color:#9BB009;
text-decoration:underline;
}
#itempager {
background-color:#F2F0F1;
padding:30px 0px;
border-top:1px solid #E5E5E5;
-webkit-box-shadow:inset 0px 1px 0px white;
-moz-box-shadow:inset 0px 1px 0px white;
box-shadow:inset 0px 1px 0px white;
}
#pagination, #totalposts {
color:#999;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
margin-bottom:10px;
text-align:center;
}
#pagination span, #pagination a {
border:1px solid #e5e5e5;
color:white;
display:inline;
margin:0 1px;
padding:2px 5px;
text-indent:0px;
background-color:#8899D0;
text-decoration:none;
}
#pagination span.actual,
#pagination a:hover {
background-color:#7483BC;
}
#pagination span.hidden {
display:none;
}
</style>
Script
<script>
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "Games",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "https://elfenliedbrazil.blogspot.com/",
postPerPage = 6,
numChars = 370,
imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script type='text/javascript'>
//<![CDATA[
// -----------------------------------------------------------------------------------------
//
// Original:
// Modified by Taufik Nurrohman
//
// -----------------------------------------------------------------------------------------
var minpage = 6; // Minimum number to display the page
var maxpage = 10; // The maximum number of pages to display
var firstpage = 0; // Detect the first time it is executed
var pagernum = 0; // Contain the page number where we
var postsnum = 0; // Start the first page
var actualpage = 1; // Starting value of the current page (it will change if you click the pagination).
// This is the container template that will be used to insert the posts template, pagination and the posts count
document.write('<div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="Taufik Nurrohman" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://hompimpaalaihumgambreng.blogspot.com/2012/03/daftar-isi-blogger-dengan-navigasi.html" target="_blank">►TN</a></div></div>');
var _results = document.getElementById('results');
var _pagination = document.getElementById('pagination');
var _totalposts = document.getElementById('totalposts');
// Build the table of contents framework
function showPagePosts(json) {
var entry, posttitle, posturl, postimg, postsumm, replies, monthnames, timepub, output = "";
if (pagernum === 0) {
postsnum = parseInt(json.feed.openSearch$totalResults.$t);
pagernum = parseInt(postsnum / postPerPage) + 1;
}
for (var i = 0; i < postPerPage; i++) {
if ("entry" in json.feed) {
if (i == json.feed.entry.length) break;
entry = json.feed.entry[i];
posttitle = entry.title.$t; // Get the post title
// Get rel="alternate" for truly post url
for (var k = 0, elen = entry.link.length; k < elen; k++) {
if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href; // This is your real post URL!
break;
}
}
// Get the comments count
for (var l = 0, clen = entry.link.length; l < clen; l++) {
if (entry.link[l].rel == "replies" && entry.link[l].type == "text/html") {
var commentsnum = entry.link[l].title.split(" ")[0]; // This is your comments count
break;
}
}
// If the Blogger-feed is set to SHORT, then the content is in the summary-field
postsumm = ("summary" in entry) ? entry.summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : ""; // Get the post summary
// Reduce post summaries to "numChars" characters.
// "numChars" is a variable. You determine the value
if (postsumm.length > numChars) {
postsumm = (numChars > 0 && numChars !== false) ? postsumm.substring(0, numChars) + '...' : "";
}
// Get the post date (e.g: 2012-02-07T12:56:00.000+07:00)
var _postdate = entry.published.$t,
_cdyear = _postdate.substring(0, 4), // Take 4 characters from the "postdate" beginning, it means the year (2012)
_cdmonth = _postdate.substring(5, 7), // Take 2 character 5 step from "postdate" beginning, it mean the month (02)
_cdday = _postdate.substring(8, 10); // Take 2 character 8 step from "postdate" beginning. it means the day (07)
// Month array template
monthnames = (idMode) ? ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// The final product of the post date = (07 Feb 2012) (cdday monthnames cdyear)
timepub = (showPostDate) ? _cdday + ' ' + monthnames[parseInt(_cdmonth, 10) - 1] + ' ' + _cdyear + ' - ' : '';
// The final product of the comments count & comments label (10 Komentar) (commentsnum commentsLabel)
replies = (showComments) ? commentsnum + ' ' + commentsLabel : '';
// Get the post thumbnails
postimg = ("media$thumbnail" in entry) ? entry.media$thumbnail.url : imgBlank;
// Build the post template
output += '<div class="itemposts">';
output += '<h6>' + posttitle + '</h6>';
output += '<div class="iteminside"><img src="' + postimg + '" />';
output += '<span class="summary">' + postsumm + '</span></div>';
output += '<div style="clear:both;"></div><div class="itemfoot">' + timepub + replies + '<a class="itemrmore" href="' + posturl + '">' + rmoreText + '</a></div>';
output += '</div>';
}
}
// Put the whole template above into <div id="results"></div>
_results.innerHTML = output;
_create_pagination();
}
// Build the pagination
function _create_pagination() {
output = "";
var starter = 0;
output += ((actualpage > 1) ? '<a title="' + prevText + '" class="prevjson" href="javascript:_init_script(' + (actualpage - 1) + ')">' + prevText + '</a>' : '<span class="prevjson hidden">' + prevText + '</span>') + '<em style="font:inherit;color:inherit;" class="pagernumber">';
if (pagernum < (maxpage + 1)) {
for (starter = 1; starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
} else if (pagernum > (maxpage - 1)) {
if (actualpage < minpage) {
for (starter = 1; starter < (maxpage - 2); starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else if (pagernum - (minpage - 1) > actualpage && actualpage > (minpage - 1)) {
output += '1';
output += '2';
output += ' ... ';
for (starter = actualpage - 2; starter <= actualpage + 2; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else {
output += '1';
output += '2';
output += ' ... ';
for (starter = pagernum - (minpage + 1); starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
}
}
output += '</em>' + ((actualpage < starter - 1) ? '<a title="' + nextText + '" class="nextjson" href="javascript:_init_script(' + (actualpage + 1) + ')">' + nextText + '</a>' : '<span class="nextjson hidden">' + nextText + '</span>');
_pagination.innerHTML = output;
_totalposts.innerHTML = totalPostLabel + ' ' + postsnum + ' - ' + jumpPageLabel + ' ' + ((actualpage * postPerPage) - (postPerPage - 1)) + ((actualpage < starter - 1) ? ' - ' + (actualpage * postPerPage) : "");
}
// Functions to remove and append the callback script that has been manipulated in the `start-index` parameter
function _init_script(n) {
var parameter = (n * postPerPage) - (postPerPage - 1), old, s,
head = document.getElementsByTagName('head')[0],
url = (sortByLabel) ? siteUrl + '/feeds/posts/summary/-/' + labelSorter + '?start-index=' + parameter : siteUrl + '/feeds/posts/summary?start-index=' + parameter; // Optional: Sort posts by a specific label
if (firstpage == 1) {
// Jump to top
document.documentElement.scrollTop = _results.offsetTop - 30;
document.body.scrollTop = _results.offsetTop - 30;
// Remove the old callback script
old = document.getElementById("TEMPORAL");
old.parentNode.removeChild(old);
}
_results.innerHTML = '<div id="loadingscript">' + loadingText + '</div>';
_pagination.innerHTML = '';
_totalposts.innerHTML = '';
s = document.createElement('script');
s.type = 'text/javascript';
s.src = url + '&max-results=' + postPerPage + '&orderby=published&alt=json-in-script&callback=showPagePosts';
s.id = 'TEMPORAL';
head.appendChild(s);
firstpage = 1;
actualpage = n;
}
// Execute the _init_script() function with parameter as `1` on page load
// So it will show the first page.
window.onload = function() {
_init_script(1);
};
//]]>
</script>
you can do with css. please apply the css code before closeing style tag
/* here the updated css */
#results {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.itemposts {
width: 33%;
margin-bottom: 10px;
}
/* media query for mobile responsiveness */
#media (max-width:882px) {
.itemposts {
width: calc(50% - 10px);
}
}
#media (max-width:576px) {
.itemposts {
width: 100%;
}
}
How can dynamic values be stored in the local storage?
I have a seat layout. How i can store only the selected seat numbers in the local storage, but not reserved seats?
My code can be seen below:
$(function() {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function() {
var str = [],
item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>
localStorage is an object within the global 'window' object, and therefore will normally be available throughout your javascript code. It pretty much behaves like a dictionary, you create, retrieve, edit and remove key:value pairs. jQuery will not be necessary.
It is also imporant to remember that localStorage only support string values, and simply saving an array would not work.
// When modifying bookedSeats:
var bookedSeatsCacheString = JSON.stringify(bookedSeats);
localStorage.setItem('bookedSeats', bookedSeatsCacheString);
// Init code:
var bookedSeatsCache = localStorage.getItem('bookedSeats');
var bookedSeats = JSON.parse(bookedSeatsCache);
if(!Array.isArray(bookSeats))
bookedSeats = [];
init(bookedSeats);
EDIT: I edited your code to make this work with localStorage
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
// Init code
var bookedSeatsCache = localStorage.getItem('bookedSeats'),
bookedSeats;
if(typeof bookedSeatsCache === 'string' && bookedSeatsCache.length > 0)
bookedSeats = JSON.parse(bookedSeatsCache);
else
bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
var seatNum = $(this).attr('title');
bookedSeats.push(seatNum);
localStorage.setItem('bookedSeats', JSON.stringify(bookedSeats));
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
#holder{
height:225px;
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;
}
#place .selectedSeat
{
background-image:url("booked_seat_img.gif");
}
#place .selectingSeat
{
background-image:url("selected_seat_img.gif");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
vertical-align: middle;
list-style: none outside none;
color:white;
font-family:'LatoWeb', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size:13px;
padding-left:28px;
padding-top:14px;
height:35px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>
without using funtion, when i use for (var prop in obj) which will show me all value in the object. However when i tried to put in function, it just show up me with the first value in the object which not show me the second element ( studentID ). :(
var target = document.getElementById("outputArea");
var outstring = " ";
var myObj = {
name: "Nguyen Viet Tien",
StudentID: "26813157",
};
function tellAll(obj) {
var dis = " ";
for(var prop in obj) {
dis += "first property is" + prop + "with the content" + obj[prop] + "<br/>";
return dis;
}
}
outstring += tellAll(myObj);
target.innerHTML = outstring;
<html lang="en">
<head>
<meta charset="utf-8">
<title>Eng1003 Workshop Code Week 04</title>
<style>
#outputArea {
padding: .25em;
border: solid black 2px;
margin: 3em;
height: 20em;
width: 20em;
overflow-y: scroll;
font-family: arial "sans serif";
font-size: 1em;
color: rgb(50, 50, 250);
background-color: rgb(225,225,225) ;
}
</style>
</head>
<body>
<div id="outputArea"></div>
</body>
</html>
return statement in the wrong place
function tellAll(obj) {
var dis = " ";
for(var prop in obj) {
dis += "first property is" + prop + "with the content" + obj[prop] + "<br/>";
}
return dis;
}