webForumDet fria alternativet

Visa script-länk/js visas efter klick på länk

2 svar · 425 visningar · startad av wally_91

wally_91Medlem sedan feb. 2006511 inlägg
#1

Hej alla på wF!

Jag har ett probelm.

Jag har ett script (både i <head> och <body>).

Själva "produkten" av scripet är att den visas direkt, och jag vill att man ska klicka på länken "Visa flytande miniräknare" för att scriptet ska visas.

Scriptet ligger i en "border" (hemsidan var skapad i FP) och måste jag lägga in tilläget i alla sidor eller räcker det med att ändra i "left-border" sidan?

<head> scriptet på alla sidor:

<!-- Här börjar flytande miniräknare -->
<style type="text/css">
<!--
#demo {
	margin:50px;
}
/* delete the style declaration below if you do not want it to be transparent! */
#calculator {
	filter:alpha(opacity=85);
	-moz-opacity:.85;
	opacity:.85;
}
.drag
{
	position:relative;
	cursor:hand
}
#calculator
{
	background-color:#F4F4F4;
	cursor:move;
	width:190px;
}
.calculatorcontainer
{
	padding:5px;
	border-top:1px solid #C0C0C0;
	border-left:1px solid #C0C0C0;
	border-right:2px outset #C0C0C0;
	border-bottom:2px outset #C0C0C0;
}
#calculator #control
{
	text-align:right;
}
#calculator input
{
	width:40px;
	height:30px;
	margin:2px;
	background-color:#FFF;
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:0.95em;
	border:1px solid #C0C0C0;
	cursor:hand;
	cursor:pointer;
}
#calculator img
{
	border:0;
}
#calculator #result
{
	width:173px;
	font-size:1.3em;
	padding:3px;
	cursor:text;
}
#calculator .operation
{
	color:#999;
	font-weight:bold;
	background-color:#DDD;
}
#calculator .equals
{
	color:#FFF;
	font-weight:bold;
	background-color:#336699;
}
#version
{
	float:left;
	padding:2px 0px 0px 2px;
	font-size:0.65em;
}
#version a
{
	color:#333;
	cursor:move;
	text-decoration:none;
}

-->
</style>

<script type="text/javascript">
<!--
/* The JavaScript Source!! http://javascript.internet.com */

var calculation = "";
var resultDone = false;

function addToCalc(val) {
  if(isNaN(val) && isNaN(calculation.substring(calculation.length-1, calculation.length)))
    return false;

  if(!isNaN(val) && resultDone) {
    resetCalc();
    resultDone = false;
  } else if(isNaN(val) && resultDone) {
    resultDone = false;
  }
  calculation += val;
  showResult();
}

function addToCalcDirect(val) {
  calculation = val;
}

function resetCalc() {
  calculation = "";
  showResult();
}

function positiveNegative() {
  if(calculation.substring(0, 1) == "-")
    calculation = calculation.substring(1, calculation.length);
  else
    calculation = "-" + calculation;
  showResult();
}

function calculate() {
  if(calculation != "") {
    try {
      calculation = eval(calculation);
    } catch(e) {
      reportError("Error!");
    }
    resultDone = true;
    showResult();
  }
  else
    return false;
}

function percentage() {
  try {
    calculation = eval(calculation) / 100;
  } catch(e) {
    reportError("Error!");
  }
  resultDone = true;
  showResult();
}

function squareRoot()
{
  try {
    calculation = Math.sqrt(eval(calculation));
  } catch(e) {
    reportError("Error!");
  }
  resultDone = true;
  showResult();
}

function showResult() {
  calculation = calculation.toString();
  if(calculation == "NaN") {
    reportError("Error!");
  } else {
    document.getElementById("result").value = calculation;
  }
}

function reportError(msg) {
  calculation = msg;
  document.getElementById("result").value = msg;
}

function closeCalculator() {
  document.getElementById("calculator").style.display = "none";
}

function showCalculator() {
  document.getElementById("calculator").style.display = "";
}

function about() {
  msg = "Flytande miniräkanre\n=============\n\n";
  msg += "Av Waldemar Axdorph\nhttp://www.carlssonsskola.se";
  alert(msg);
}

var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;

function move(e) {
  if (dragapproved) {
    z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x;
    z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y;
    return false;
  }
}

function drags(e) {
  if (!ie&&!ns6)
  return;
  var firedobj = ns6? e.target : event.srcElement;
  var topelement = ns6? "HTML" : "BODY";
  while (firedobj.tagName != topelement&&firedobj.className != "drag") {
    firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
  }
  if (firedobj.className == "drag") {
    dragapproved = true;
    z = firedobj;
    temp1 = parseInt(z.style.left+0);
    temp2 = parseInt(z.style.top+0);
    x = ns6? e.clientX: event.clientX;
    y = ns6? e.clientY: event.clientY;
    document.onmousemove=move;
    return false;
  }
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
// -->
</script>

<!-- Här slutar flytande miniräknare -->

Koden i <body> på "left-borer" sidan

<!-- Flytande minräknare börjar här --></p>
<div style="position: absolute; width: 264px; height: 657px; z-index: 1; left: -47px; top: 812px" id="layer1">
	<div id="demo">
		<a href="#" onclick="showCalculator();return false"><font size="2">Visa 
		flytande miniräknare</font></a><form onsubmit="calculate(); return false;">
			<div id="calculator" class="drag">
				<div class="calculatorcontainer">
					<div id="control">
						<div id="version">
							Du kan flytta den här</div>
						<p><a href="#" onclick="about();return false">
						<img src="../images/q.gif"></a>
						<a href="#" onclick="closeCalculator();return false">
						<img src="../images/close.gif" style="position:relative;top:-1px"></a></div>
					<p>
					<input type="text" name="input" size="16" id="result" onclick="this.focus()" onkeyup="addToCalcDirect(this.value)"><br>
					<input type="button" value="1" onclick="addToCalc(this.value)"><input type="button" value="2" onclick="addToCalc(this.value)"><input type="button" value="3" onclick="addToCalc(this.value)"><input type="button" value="+" onclick="addToCalc(this.value)" class="operation"><br>
					<input type="button" value="4" onclick="addToCalc(this.value)"><input type="button" value="5" onclick="addToCalc(this.value)"><input type="button" value="6" onclick="addToCalc(this.value)"><input type="button" value="-" onclick="addToCalc(this.value)" class="operation"><br>
					<input type="button" value="7" onclick="addToCalc(this.value)"><input type="button" value="8" onclick="addToCalc(this.value)"><input type="button" value="9" onclick="addToCalc(this.value)"><input type="button" value="*" onclick="addToCalc(this.value)" class="operation"><br>
					<input type="button" value="+/-" onclick="positiveNegative()" class="operation"><input type="button" value="0" onclick="addToCalc(this.value)"><input type="button" value="." onclick="addToCalc(this.value)" class="operation"><input type="button" value="/" onclick="addToCalc(this.value)" class="operation"><br>
					<input type="button" value="kvot" onclick="squareRoot()" class="operation"><input type="button" value="%" onclick="percentage()" class="operation"><input type="button" value="c" onclick="resetCalc()" class="operation"><input type="button" value="=" onclick="calculate()" class="equals">
				</div>
			</div>
		</form>
	</div>
</div>
<p>
<!-- Här slutar flytande miniräknare --></p>

Vore snällt om ni svara snabbt :OO

Mvh Wally_91

CssonMedlem sedan feb. 2000438 inlägg
#2

Du vill att miniräknaren ska vara dold och synas först när man klickar på länken? Isf...

Flytta in formuläret så det ligger i diven med id calculator.

Ändra css-regeln för #calculator till:

#calculator {
    background-color: #F4F4F4;
    cursor: move;
    width: 190px;
    [b]display: none;[/b]
}

Ändra showCalculator() till:

function showCalculator() {
    document.getElementById('calculator').style.display = 'block';
}

(Eftersom jag aldrig har använt FP har jag ingen aning om vad border i det sammanhanget är.)

wally_91Medlem sedan feb. 2006511 inlägg
#3

Tack! Det fungerar jätte bra!

136 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)