Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

#1395277 by Leena from cat-breeds-info.com
Sun Apr 01, 2018 3:26 pm
I saw Author WIP Progress Bar for Wordpress and I wonder if there is a code I could use to install such a code to my author website. It shows my readers how my writing progresses (like 75% of 70.000 words written). Would anyone know if there is such a code for SBI sites?

I copy here the code for the Wordpress plugin:
[progressbar wip_title="First Draft" unit_of_measure="words" your_goal="90000" current_score="46012" progress_bar_color="orange" progress_bar_border="ornage" candy_stripe_options="none" progress_bar_height="0" progress_bar_media="" font_color="" more_information="" include_hyperlink="" hyperlink_text="" hyperlink="" include_own_progress_bar=""]

Leena :)
#1396009 by Leena from cat-breeds-info.com
Thu Apr 12, 2018 8:01 am
The code in the link works but could some html savvy person explain:

I tried putting this code to my website for my Nephilim Quest book. I am now at the editing stage (I have reached my word target), so I put the progress bar to 100%. The code I put in a raw html box is below:

<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
width: 1%;
height: 30px;
background-color: #FF8800;
}
</style>
<body>

<h3>Nephilim Quest 3 / Amarna 130.000 words</h3>

<div id="myProgress">
<div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>

</body>
</html>

So far so good. The bar worked well.
Then I tried to put another html code for another book. Its progress is at 43% at the moment. And here came the problem: When I changed the progess to 43%, and clicked on the button, it moved the Nephilim Quest bar to 43%. It did not move the Death of a Vampire bar. Also the color I had defined for Nephilim Quest (orange) changed to that of the The Death of a Vampire (turquoise)

How can I make these html codes unresponsive to each other, so that they both scroll separately and keep their colors?

The other code is:

<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
width: 1%;
height: 30px;
background-color: #2BE6FF;
}
</style>
<body>

<h3>The Death of a Vampire / 80.000 words</h3>

<div id="myProgress">
<div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 43) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>

</body>
</html>

Thank you in advance to anyone who could help.

Leena :)
#1396022 by Mary from Mico
Thu Apr 12, 2018 5:08 pm

Hi Leena,

Is there a misspelling in the first code in the first post?

Code: Select allprogress_bar_color="orange" progress_bar_border="[color=#FF0080]ornage[/color]"


I have no idea if it matters or not, and do not know how to do these codes either.

Mary
#1396055 by Leena from cat-breeds-info.com
Fri Apr 13, 2018 11:16 am
Ah yes, a typo. But no effect. I put the codes for each book on their own pages. And they work fine there. If I place them on the same page, they don't work separately.

They are here:

http://www.leenasbooks.com/death-of-a-vampire.html

http://www.leenasbooks.com/nephilim-quest.html

http://www.leenasbooks.com/space-witches.html

Oh well - I would have wanted to put them all on a sidewide dot, but it doesn't seem possible if they won't work separately.

I wish I understood the logic of html...

Leena :)
#1396062 by Juri from plainlight.com
Fri Apr 13, 2018 6:03 pm
Leena from cat-breeds-info.com wrote:Oh well - I would have wanted to put them all on a sidewide dot, but it doesn't seem possible if they won't work separately.

Hi Leena,

The problem with your current code is, it can't distinguish between different bars -- they all have the same id.

Try using the following in your site-wide dot [this also gets rid of anything not required]:

Code: Select all<style>
.myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 1%;
height: 30px;
background-color: #f80;
}
</style>
<h3>The Death of a Vampire / 80.000 words</h3>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<br>
<button onclick="move(0);">Click Me</button>

<h3>Nephilim Quest 3 / Amarna 130.000 words</h3>

<div class="myProgress">
<div class="myBar"></div>
</div>

<br>
<button onclick="move(1);">Click Me</button>

<h3>Space Witches 2 / 60.000 words</h3>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<br>
<button onclick="move(2);">Click Me</button>

<script>
var progress=[45,100,30]; // place your respective progress numbers here
function move(i) {
var elem = document.getElementsByClassName("myBar")[i];
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= progress[i]) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>

Perhaps you'll need to tweak the layout a bit.

To change your progress, just modify the numbers within the brackets in this line:

Code: Select allvar progress=[45,100,30]; // place your respective progress numbers here


progress.png
It could look like this
progress.png (43.8 KiB) Viewed 267 times

Kind regards,
J.
#1396102 by Leena from cat-breeds-info.com
Sat Apr 14, 2018 7:17 am
Thank you so much, Juri! This code sure does the trick. I changed the order a bit so Nephilim Quest is at the top. Just one thing: when I tried this on page builder, the middle bar is nice and narrow but the ones on top and at the bottom are twice as thick... Do you know how to fix that?

Leena :)

<style>
.myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 1%;
height: 30px;
background-color: #f80;
}
</style>
<h3>Nephilim Quest 3 / Amarna 130.000 words</h3>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<br>
<button onclick="move(0);">Click Me</button>

<h3>The Death of a Vampire / 80.000 words</h3>

<div class="myProgress">
<div class="myBar"></div>
</div>

<br>
<button onclick="move(1);">Click Me</button>

<h3>Space Witches 2 / 60.000 words</h3>

<div class="myProgress">
  <div class="myBar"></div>
</div>

<br>
<button onclick="move(2);">Click Me</button>

<script>
var progress=[100,45,30]; // place your respective progress numbers here
function move(i) {
var elem = document.getElementsByClassName("myBar")[i];
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= progress[i]) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
#1396116 by Juri from plainlight.com
Sat Apr 14, 2018 4:16 pm

...or, cut and paste the style element out of body into the Head/This Page Only:

Code: Select all<style>
.myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 1%;
height: 30px;
background-color: #f80;
}
</style>

    I pasted the code "as is" into one of my draft pages, and it looked OK to me:

    progress.png
    BlockBuilder test
    progress.png (30.95 KiB) Viewed 194 times

Kind regards,
J.
#1396179 by Leena from cat-breeds-info.com
Sun Apr 15, 2018 8:32 pm
Thank you so much, Juri! It never ceases to amaze me how one tiny thing can have such an effect when using html. Not to mention that there are people who actually understand it...
I put it on my website now. A bit big in size, but what the hey - now I have the functionality I needed.

Thank you again,

Leena :)
Similar Topics Statistics Last post
Nav Bar Code to Open New Window to Different Site?
by Kira from Atascosa Wed Oct 04, 2017 1:20 am
3 Replies
299 Views
by Debs from SiteSell
Wed Oct 04, 2017 3:37 pm
google search bar code problem
by Russell from Watkins Glen Fri Mar 02, 2018 3:54 pm
2 Replies
139 Views
by Debs from SiteSell
Mon Mar 05, 2018 3:00 pm
Integrating Code Folders for Raw HTML container
by Rebecca from Chateaugay Wed May 31, 2017 9:48 am
2 Replies
633 Views
by Rebecca from Chateaugay
Thu Jun 01, 2017 6:47 am
"Mobile Browser Theme" Color Modifier HTML Code
by Kurtis from messiah-of-god.com Fri Nov 03, 2017 8:17 pm
1 Replies
273 Views
by Debs from SiteSell
Mon Nov 06, 2017 1:33 pm
Business Directory - code or leave as is?
by Leah from Emu Creek Thu Oct 19, 2017 4:24 am
2 Replies
245 Views
by Debs from SiteSell
Thu Oct 19, 2017 9:29 pm

Users browsing this forum: No registered users and 2 guests