I'm new to learning CSS/HTML and i've been working a bit on trying to recreate the windows 98 vibe. However, one thing I've had a lot of trouble with specifically is trying to recreate the "start" button with a simple toggle script.
You can see an example of the current script i'm using here; https://thealonic.tumblr.com/ most of the work is my own work with some scraps of css from the old theme I was using along with win98.css
I've looked around a bit and tried around 4-5 solutions with no luck over the course of a couple hours, but none seemed to be helping me making any progress so I just tried to use more bare bones solutions by just using if statements.
<head>
<style>
.start_button {
float: left; background-image: url(https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png);
height: 22px; width: 54px; margin-left: 2px; margin-top: 2px; z-index: 3; background-repeat:no-repeat;}
</style>
</head>
<body class="win98>
<div class="start_button" id="start_button" onclick="startpress()"></div>
<script>
function startpress() {
if (document.getElementById("start_button").style.backgroundImage !== "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')") {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')" } else {
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"}}
</script>
</body>
This "almost" gets the job done but, the trouble I'm having is that the button recognises the press, and then it says down, even with such a simple if statement like this. I've seen this solution work for pretty much the exact same usecase but I don't understand why this doesn't quite work. Is there just something about html scripts specifically I don't quite understand?
Anyway, thanks for any help I get in advance and sorry if this has been asked before, but a quick search didn't get anything like this specifically as I'm not entirely sure if the cause is just the way I'm addressing the background image.
You probably need a Eval or something like that in the if.
But i would go with something more simple
var startmode=true
If (startmode)
{
startmode=false
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')"
}
else
{
startmode=true
document.getElementById("start_button").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')"
}
The problem in your code is that the condition inside the if statement doesn't change every time you click the button. You need some kind of toggle that changes at every click. You can try something like this:
const startButton = document.getElementById("start_button");
let startButtonOpen = false;
function startpress() {
startButtonOpen = !startButtonOpen;
if (startButtonOpen) {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903300292902982/unknown.png')";
} else {
startButton.style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/785903172115234846/unknown.png')";
}
}
Here's the solution to the problem i finally got around to solving.
So for the taskbar I have this, which just toggles between true and false alongside addressing the window titlebar and the taskbar.
function tumblrtoggle() { pyroButtonOpen = true;
if (tumblrButtonOpen == false) { inactiveall(); tumblrButtonOpen = true;
document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
} else if (pyroButtonOpen == true){ inactiveall(); tumblrButtonOpen = false;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";}}
And having this else where in the html so you don't have to keep calling "true" to each window if you have multiple.
function inactiveall() {
tumblrButtonOpen = true;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791328235451318342/title-bar_postheaderinactive.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789420847604564008/Taskbar_application1.png')";
}
Then to actually create the script for the window for when the window is clicked onto;
function tumblractive() { tumblrButtonOpen = false;
document.getElementById("post").style.zIndex = (currentno = currentno + 1); currentno = currentno + 1;
document.getElementById("postwindow").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/791321110750298162/title-bar_postheader.png')";
document.getElementById("taskapp1").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/630047188520665121/789416557692452884/Taskbar_application.png')";
}
Example is used here; https://thealonic.tumblr.com/ (all the windows use the same scripts with different names and alterations for different functionability)
Related
Hello there so I'm making a remake of the popular game cookie clicker but I'm having some issues so here is what I need help with
So as you know in the game cookie clicker, they have power up buttons and those buttons disable them selfs when you do not have enough money to buy it
and that's what I need help with I want to be able to have the power-up buttons disabled and when I have enough money make them auto enable
so here I'll put some example code to sort of explain it a bit better
code:
if (cookies >= 10) {
document.getElementById("IdName").disabled = false;
}else {
document.getElementById("IdName").disabled = true;
}
Something like this?
function evalButton() {
var cookies = document.getElementById("cookies").value;
cookies = parseInt(cookies, 10);
console.log(cookies);
if (cookies >= 10) {
document.getElementById("IdName").disabled = false;
}else {
document.getElementById("IdName").disabled = true;
}
}
#IdName {
background: red;
}
#IdName:disabled {
background: grey;
}
<input id="cookies" onkeyup="evalButton()"/>
<button id="IdName">Press me</button>
Your code is working fine-- and cookies value can be derived in the function or passed as an argument. A bit of CSS can be used to give visual cues to the disabled state.
I'm trying to figure out how to pull attributes from CSS to be used in Javascript. I've googled what I'm looking for so many times and in so many ways my fingers are about to fall off.
I'm looking to change font size to three different font sizes: 15px, 28px, and 40px. This would be toggled using three buttons. However, when you choose a font size, some of the other CSS attributes need to change in order to resize the text and padding to align with the element "behind" it, so that it doesn't push off the side and look ugly. I'm planning on doing the resizing automatically with Javascript, but for the life of me I can't figure out how to pull the "text size in pixels" attribute from the page in order to apply an "if/else" argument. This would need to be done in browser and I've found a .getComputedStyle command. But as I can't get it to work I'm not sure if that's what I need or not.
<body>
<p id="spaz">Text to be resized.</p>
<button type="button" onclick="txtszl()">large</button>
<button type="button" onclick="txtszm()">medium</button>
<script>
function txtszl(){
document.getElementById("spaz").style.fontSize="40px";
}
function txtszm(){
document.getElementById("spaz").style.fontSize="28px";
}
var $txtelement = document.getElementById("spaz");
var $txtsize = $txtelement.getComputedStyle("fontSize");
if ($txtsize == 40px){
alert("It's forty!");
}else{
alert("Nope!");
}
</script>
</body>
That's what I have come up with. Any help/links would be greatly appreciated!
The getComputedStyle function returns a CSSStyleDeclaration.
var txtElementStyles = getComputedStyle($txtelement, null),
fontSize = txtElementStyles.getPropertyValue('font-size');
Working fiddle: http://jsfiddle.net/wrathchild77/6LJaM/
function txtszl() {
document.getElementById("spaz").style.fontSize = "40px";
check();
}
function txtszm() {
document.getElementById("spaz").style.fontSize = "28px";
check();
}
function check() {
var $txtsize = document.getElementById("spaz").style.fontSize;
if ($txtsize == "40px") {
alert("It's forty!");
} else {
alert("Nope!");
}
}
I am trying to create a single textbox form on a webpage to boolean test the input submitted by the user. The input will be the website user's zip code. I want to make a predetermined array of zip codes that will test true.
If it is true (the zip code entered is included in the predetermined array), I want to display one bit of HTML, and if it tests false, I want to display another bit.
I've searched around and looked in some of my JavaScript books (I've just started learning) and haven't found an answer; could someone help me out with this? Thanks!
HTML:
<label id="input-label" class="invalid">
ZIP code: <input id="zipcode" />
<div class="valid-message">
Valid
</div>
<div class="invalid-message">
Invalid
</div>
</label>
CSS:
#input-label.valid .valid-message { display: block; }
#input-label.valid .invalid-message { display: none; }
#input-label.invalid .valid-message { display: none; }
#input-label.invalid .invalid-message { display: block; }
Javascript
function isValidZip(z) {
return ['12345','67890'].indexOf(z) != -1;
}
var label = document.getElementById('input-label');
var input = document.getElementById('zipcode');
input.onkeydown = function() {
label.className = isValidZip(input.value) ? "valid" : "invalid";
}
You could try something like this(might be a little off I'll double check then get back to you :) ):
var zipArr = ['98671','97006'];//insert the zip/post codes here
var userInputEl = document.getElementById('userInput');//Get the element could use tag names or it would be better actually if you used jQuery but yeah
var elToShow = document.getElementById('elementToShowIfNotFound');
var otherElToShow = document.getElementById('idOfOtherelementToShow');
var userInput = userInputEl.value();//might be .text()
if(zipArr.indexOf(userInput) === -1){//-1 means it isn't found in the array
zipArr.push(userInput);//pushes the new one onto the array
elToShow.style.display = 'block';//this changes the css display to block instead of it being hidden.
}else{
otherElToShow.style.display= 'block';
}
Might not be the best way to do this, but I'd suggest using jQuery it makes this process a lot easier.
I have this code in JavaScript:
function change() {
document.getElementById("mem").className = 'gif';
}
The fig and gif are like this:
a.fig {
background: #FFFFFF;
}
a.gif {
background: #000099 ;
}
and the function is used like this
<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >
Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!
Any ideas?
HTML:
<a id="mem" class="fig" href="users"> MEMBERS </a>
JavaScript:
var a = document.getElementById('mem');
a.onclick = function() {
this.className = this.className == 'fig' ? 'gif' : 'fig';
}
Live demo: http://jsfiddle.net/eVQjB/
Note: in the demo, I return false; from the click handler to prevent the anchor from being activated.
function change() {
var mem = document.getElementById("mem");
if (mem.className == 'fig') {
mem.className = 'gif';
}
else {
mem.className = 'fig';
}
}
You may be looking for a different problem with JavaScript and styles, but if I understand your problem, you'll still need a different color for the anchor if it has been visited. You can let CSS do that for you:
#mem {
background: #FFF;
}
#mem:visited {
background: #009;
}
<a id="mem" href="users">Lead me to the promised land!</a>
you can try by following way
document.getElementById("idElement").setAttribute("class", "className");
IF still not working you r class is not chaning the style of your html element
Just add return false:
onClick="change(); return false;"
The thing is that without it, the class is changed then the page is redirected as this is the default behavior of anchor tag.
If you want to reload the page and change the class in the reloaded page, have such link:
href="?change=true"
Then in the server side code check for this flag and if true put different class. I'm not familiar with PHP but here is classic ASP version, hopefully similar enough to PHP:
<%
Dim sClassName
If Request("change")="true" Then
sClassName = "gif"
Else
sClassName = "fig"
End If
%>
<a class ="<%=sClassName%>" id ="mem" href="?change=true">
I know blinking is not a nice thing. However...
I have a long complex HTML form with a number of compulsory fields. As well as highlighting the empty text boxes I want to draw attention to them by flashing the text of the question for maybe three seconds.
All the javascript/css methods I can find all seem to fall over when there is more than one such item to blink or are designed for leaving the item blinking all the time.
Any suggestions for how to achieve this?
The method at What is the replacement for a blinking text in a web page? seems like overkill.
thanks
Derek
I've tried this (to blink each designated span just over three seconds) but it only works on the first item it's called for:
function blinkOn(span){
span.counter=0;
span.defColor=span.style.color;
span.alertTimerId =setInterval("blinkOnce('"+span.id+"')", 400 );
}
function blinkOnce(spanID){
var span=document.getElementById(spanID)
span.counter++;
if(span.style.color==span.defColor){
span.style.color='transparent'}
else{
span.style.color=span.defColor;
}
if(span.counter>8){
blinkOff(span);
}
}
function blinkOff(span){
clearInterval(span.alertTimerId);
span.style.color=span.defColor;
}
I use jQuery for this kind of thing, personally:
$('#element_id')
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300);
Quite inelegant I know but it does the job. jQuery UI does have some more concise effects.
The only place I use it is for when a user adds something to a shopping basket without redirecting to the basket page, just to make sure they know that it's been added.
See:
http://api.jquery.com/fadeIn/, http://api.jquery.com/fadeOut/ and http://jqueryui.com/docs/show/ (pulsate, in particular)
I'm not exactly clear about the behavior you desire, but it sounds like you might be able to flash the question (or take some kind of action) using a Javascript timer. You can create unique timers for each element that you want to flash. And you can flash them once or set them up to repeat infinitely or up to a limit. Here's one example:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
I took some time to work this out this morning. If you haven't gotten yours to work yet, I hope you can adapt this to help.
<html>
<head>
<script type="text/javascript">
var idArray = [];
var defaultColor = '#000000';
function makeItemsBlink(blinkTime) {
blinkForTime('q1', blinkTime, '#ff0000');
blinkForTime('q2', blinkTime, '#00ff00');
blinkForTime('q3', blinkTime, '#0000ff');
}
function blinkForTime(id, blinkTime, blinkColor) {
idArray[id] = setInterval('toggleColor("' + id + '", "' + blinkColor + '")', 400);
setTimeout('stopBlinking("' + id + '")', blinkTime);
}
function stopBlinking(id) {
clearInterval(idArray[id]);
document.getElementById(id).style.color = defaultColor;
}
function toggleColor(id, blinkColor) {
var e = document.getElementById(id);
var currentColor = e.style.color;
if (currentColor == defaultColor) {
e.style.color = blinkColor;
}
else {
e.style.color = defaultColor;
}
}
</script>
</head>
<body onload="makeItemsBlink(3000);">
<div id="q1">Test question 1</div>
<div id="q2">Test question 2</div>
<div id="q3">Test question 3</div>
</body>
</html>