I hate to ask again but i am still habeing problems wit my code fo4r my traffic lights i have amended some of it but there are still some issues for example the button does not appear, i am programming in dreamweaver and the code is html.
<p>This is my Traffic Light script</p>
<img id="image" src="RedLight.jpg";
<button type="button" onclick="changeLights()">Change Lights</button>
</head>
<body>
<script>
var list=["RedLight.jpg","RedAmberLight.jpg","GreenLight.jpg","AmberLight.jpg"]
var lighton = "Red"
function changeLights() {
if (lighton=="Red") {
image.src=list[1];
lighton="RedAmber";}
if (lighton=="RedAmber") {
image.src=list[2];
lighton="Green";}
if (lighton=="Green") {
image.src=list[3];
lighton="Amber";}
else{
image.src=list[3];
lighton="Red";}
}
</script>
</body>
</html>
Here is a solution:
<body>
<p>This is my Traffic Light script</p>
<img id="image" src="RedLight.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
var list=["RedLight.jpg","RedAmberLight.jpg","GreenLight.jpg","AmberLight.jpg"]
var lighton = "Red"
function changeLights() {
if (lighton=="Red") {
document.getElementById("image").src = list[1];
lighton="RedAmber";
}
else if (lighton=="RedAmber") {
document.getElementById("image").src=list[2];
lighton="Green";
}
else if (lighton=="Green") {
document.getElementById("image").src=list[3];
lighton="Amber";
}
else{
document.getElementById("image").src=list[0];
lighton="Red";
}
}
</script>
</body>
Related
Hi i have code like this:
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Show more") {
$("#toggle").text("Show less");
$("#text").slideDown();
} else {
$("#toggle").text("Show more");
$("#text").slideUp();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-container">
<button id="toggle">Show more</button>
</div>
In show more i would like to add a icon /f078 and in show less /f106.
How to add? I tried by css and html tags but it doesnt work.
I have been trying to create a like counter for a webpage. Currently, It only shows the number likes when someone presses the button. The code is written below.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
</body>
</html>
I am aware that .innerHTML is the problem behind 'the number of likes' not being shown but I am not sure how to make it so that it always displayed and centred above the button.
Eg. If the page has 143 likes.
143
Please Like!
Please help me out - Thank You so much for reading
You have to display the counter initially, and then keep track each time it changes.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
showCounter();
}
}
function showCounter(){
if(typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
<script>
showCounter(); //Fisrt call, Once the page is loaded.
</script>
</body>
</html>
I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}
Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});
Ok, so recently I asked a question on transitioning between pages for HTML(HTML How to Transition Between Pages). So I found this thing called barba.js so I got it and...it didn't work. I searched for a while and there was practically no easy to follow or clear documentation or instructions.
Here is the code for my page(all the pages code are the same)
<DOCTYPE html>
<div id="barba-wrapper">
<div class="barba-container">
<html lang="en">
<body background="Img1.png">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<script src="barba.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
</div>
</div>
I would like to use barba.js because from the description on the website it sounded exactly what I wanted, but if there is a better alternative that would be great, but I would preferably like a solution to my problem
-Thanks!
UPDATE
So I've now changed some of my code but it is still not working.
HTML:
<DOCTYPE html>
<html lang="en">
<body background="Img1.png">
<main id="barba-wrapper" data-prev="" data-next="Page2.html">
<div class="barba-container">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</main>
</body>
</html>
<script src="barba.js"></script>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
Barba.Pjax.start();
});
</script>
CSS.css:
font{
size:25;
color:#FFFFFF;
}
body {
background-size: 100% 100%;
background-repeat: no-repeat;
}
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
color: #555;
}
.barba-container {
position: relative;
}
nextprev.js:
document.addEventListener("DOMContentLoaded", function() {
var lastElementClicked;
var PrevLink = document.querySelector('a.prev');
var NextLink = document.querySelector('a.next');
Barba.Pjax.init();
Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var MovePage = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.scrollTop()])
.then(this.movePages.bind(this));
},
scrollTop: function() {
var deferred = Barba.Utils.deferred();
var obj = { y: window.pageYOffset };
TweenLite.to(obj, 0.4, {
y: 0,
onUpdate: function() {
if (obj.y === 0) {
deferred.resolve();
}
window.scroll(0, obj.y);
},
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
},
movePages: function() {
var _this = this;
var goingForward = true;
this.updateLinks();
if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
goingForward = false;
}
TweenLite.set(this.newContainer, {
visibility: 'visible',
xPercent: goingForward ? 100 : -100,
position: 'fixed',
left: 0,
top: 0,
right: 0
});
TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
TweenLite.set(_this.newContainer, { clearProps: 'all' });
_this.done();
}});
},
updateLinks: function() {
PrevLink.href = this.newContainer.dataset.prev;
NextLink.href = this.newContainer.dataset.next;
},
getNewPageFile: function() {
return Barba.HistoryManager.currentStatus().url.split('/').pop();
}
});
Barba.Pjax.getTransition = function() {
return MovePage;
};
});
Tweenmax.min.js: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js
Bootstrap.css: getbootstrap.com
I got most of this code from one of the examples on the barba page([barbajs.org/demo/nextprev/index.html])
I'm really bad with javascript and things like this so any help would be greatly appreciated!
You have to place the barba.js wrapper and container within the body tags. You also have to initialize Barba.js when the DOM is ready.
Barba.Pjax.start();
I don't see that called anywhere. I also don't know if you have the code for the transition between pages included in any of your .js files.
See http://barbajs.org/transition.html
I had the exact same issue. Adding the defer attribute to the <script> tag did the job for me.
Like <script defer src="barba.js"></script>
That will cause the script to wait until the DOM is fully loaded. Also, be sure to place a / before the path at your href. Like <a href="/Page2.html"
Hope it fixes your Issue!
Here is what i want:
Now in more detail:
I have 2 iframes, one on top of the other. the one above has 4 buttons/images, the one below is where a url/link will be displayed when one of these buttons/images gets clicked. i got this working...
what i want now is to have those buttons change image from inactive (ie. light pink) to active (ie. red) state when they are clicked. also, when i click on another of the 4 buttons it will turn red and the previous active (red) button/image must turn back to its inactive state (light pink). so i want 2 images here: (1) active.png and (2) inactive.png.
ALSO, i want the buttons to change to active.png when i hover over them. this i was able to manage with onmouseover and onmouseout effect. its just the ACTIVE part is what i cant figure out.
do i need javascript or can i do without it in case some user has it disabled?
i was also thinking about maybe using radio buttons and then skinning them with my active.png and inactive.png using css or something, but i dont know how to do this either :P i dont know what is the best and simplest way to go?
------------UPDATE-----------
ok i got something working but im not all the way there yet. it might not even be the way to go, but what i've done is create 4 links and given them all an id (ie.button1, button2..)
then in css i did this for each:
button1 { width: 66px; height: 70px; display: block; background-image:url(images/inactive1.png); }
button1:hover { width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
button1:focus{ width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
but i dont want it to loose focus unless another one of the buttons is clicked. cuz now its loosing focus if i click anywhere on the page :( how can i fix this?
I made these two files that cover all:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.buttons[isselected = "true"] { background-color:#ff7373; }
.buttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
});
$("#button2").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
////Use one of these if you need to reload the iframe
//$('#myiframe').contentWindow.location.reload(true);
//$("#myiframe").attr("src", $("#myiframe").attr("src"));
});
$("#button3").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
});
$("#button4").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
});
});
function ClickedButton1 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
return false;
};
function ClickedButton2 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
return false;
};
function ClickedButton3 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
return false;
};
function ClickedButton4 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
return false;
};
</script>
</head>
<body>
<div>
<div id="button1" class="buttons" isselected="true">button1</div>
<div id="button2" class="buttons" isselected="false">button2</div>
<div id="button3" class="buttons" isselected="false">button3</div>
<div id="button4" class="buttons" isselected="false">button4</div>
<iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>
<iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
</div>
</body>
</html>
And buttons.htm looks like:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/* CSS Here */
.iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.iframebuttons[isselected = "true"] { background-color:#ff7373; }
.iframebuttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#iframebutton1").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton1();
});
$("#iframebutton2").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton2();
});
$("#iframebutton3").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton3();
});
$("#iframebutton4").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton4();
});
});
</script>
</head>
<body>
<input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
<input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
<input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
<input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>
The only way to do this without JS, is to create four static pages as mentioned in the comment to your original post.
Your body markup would look like this:
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<iframe src="www.url.com">
</iframe>
The list above is your Navigation. You do not need a separate iframe, since you have four static pages. In each static page, the li-element containing the link to the active static page gets a class called "active".
The iframe stores the url, you want to be displayed in there.
In your css file, you can style your navigation like that:
#nav a {background: url('images/inactive.png');}
#nav a:hover,
#nav li.active a{
background: url('images/active1.png');
}
This should work, but a solution using JS would be much more elegant.