I'm creating a simple slideshow, it's part of my 'DOM animation & effects with JQuery' assignment, focusing on JavaScript, HTML, CSS and jQuery.
The assignment is simple: Create a slideshow with 2 buttons (Prev & Next). When I click on the corresponding button it should take me to the next slide or the previous slide.
var $one = $(".one")
var $two = $(".two");
var $three = $(".three");
var $four = $(".four");
var $five = $(".five");
var $six = $(".six");
var $seven = $(".seven");
$two.hide();
$three.hide();
$four.hide();
$five.hide();
$six.hide();
$seven.hide();
$one.slideDown();
var $prev = $("prev");
var $next = $("next");
$next.on("click", function() {
if ($one.slideDown()) {
$one.hide();
$two.slideDown();
} else {
$one.slideDown();
}
});
$prev.on("submit", function() {
if ($one.slideDown()) {
$one.hide();
$six.slideDown();
} else {
$one.slideDown();
}
});
img {
border: 6px rgb(245, 166, 166) solid;
}
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="one">
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="two">
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="three">
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="four">
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="five">
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="six">
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="seven">
<button type="submit">⬅︎ Prev︎</button>
<button type="click">Next ➡</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
I've spent much time trying to figure out the best way to do this and then came up with the solution above, however the IF statement isn't working too well.
I'm not looking for the solution or straight up answer - just guidance, of where the problem is/hints on how to tackle it (also a link to a video that could give me a similar problem/walkthrough/tutorial would be greatly appreciated!).
Thanks for all your help!
Your code looks much better like this. There are a few edge cases but you should be able to handle them now.
What I did:
- Gave a slide class to the slider
- I add is-active class to the active slider
- Remove the is-active when button is clicked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: Interactive slideshow</title>
<style>
img {
border: 6px rgb(245, 166, 166) solid;
}
</style>
</head>
<body>
<br>
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
<button class="prev">⬅︎ Prev︎</button>
<button class="next">Next ➡</button>
<script>
var slide = $(".slide")
slide.hide();
slide.first().show().addClass('is-active');
// slide.first().slideDown();
//variables
var prev = $(".prev");
var next = $(".next");
//Next button action
next.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').next().addClass('is-active').show();
});
//Prev button action
prev.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').prev().addClass('is-active').show();
});
</script>
</body>
</html>
NOTE: Please try avoiding classes like one, two, three so on. Because if there are like 1000 images you will not add 1000 lines of code because that will become a mess.
Related
I put together this very simple jQuery code to animate a sequence of images. It works perfectly. you can view it here.
But now I am trying to update the code so it could work on multiple image sequences at once as long as it has its own class that is referenced in the jQuery code. So I updated it - view below. Unfortunately my updates are not working. Can you guys help me resolve this issue? Thank you in advance!
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let currentImg = 0;
function changeImg(allImg){
$(allImg[currentImg]).fadeOut(0, function(){
if(currentImg == allImg.length -1){
currentImg = 0;
}else {
currentImg++;
}
$(allImg[currentImg]).fadeIn(0)});
}
setInterval(changeImg(aniOne), 0050);
setInterval(changeImg(aniTwo), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
As Chris G stated above:
The working code uses setInterval(changeImg, 50) which will work fine. The problem with your current attempt is setInterval(changeImg(aniOne), 50) which evaluates to a call to changeImg(aniOne), then a call to setInterval(undefined, 50) (since changeImg doesn't return anything). If you want this to work, you need to make changeImg into a function that returns a function. – Chris G
After we add these problems, we then have the issue of both animations sharing the currentImg variable, so instead I made two different variables and passed them along with the images. You can handle this many different ways.
let aniOne = $(".animation.first img");
let aniTwo = $(".animation.second img");
let num1 = 0;
let num2 = 0;
function changeImg(allImg, num){
function main(){
$(allImg[num]).fadeOut(0, function(){
if(num == allImg.length -1){
num = 0;
}else {
num++;
}
$(allImg[num]).fadeIn(0)});
}
return main;
}
setInterval(changeImg(aniOne, num1), 0050);
setInterval(changeImg(aniTwo, num2), 0050);
.animation {
width: 30%;
}
.animation img {
display: none;
}
.animation img:first-of-type {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation first">
<img src="http://s23.postimage.org/t57meexkb/horse_1.png">
<img src="http://s23.postimage.org/i86apnasr/horse_2.png">
<img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png">
<img src="http://s23.postimage.org/w4ej1j71n/horse_4.png">
<img src="http://s23.postimage.org/ddclrdch7/horse_5.png">
<img src="http://s23.postimage.org/nbxkdulwr/horse_6.png">
<img src="http://s23.postimage.org/phrv8cpd7/horse_7.png">
<img src="http://s23.postimage.org/n1un88wob/horse_8.png">
<img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png">
<img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png">
<img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png">
<img src="http://s23.postimage.org/bhuetyd0r/horse_12.png">
<img src="http://s23.postimage.org/imc82zka3/horse_13.png">
<img src="http://s23.postimage.org/auvi4fg4r/horse_14.png">
</div>
<div class="animation second">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/5QGZklx.png">
<img src="https://i.imgur.com/i1oLaES.png">
</div>
Below is my code, this is basic question can anyone help to fix this,
I want image to appear after sometime when user hover on it. say for eg 3 sec
function MouseRollover(MyImage) {
MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg";
}
<div align="center">
<!--The rollover image displays here.-->
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" />
</div>
You can set the setTimeout inside the function so that it does not change the image source for 3 seconds like below. Although in this example if the user stops hovering before 3 seconds, then the onMouseOut will finish firing before the onMouseOver, which leaves the user with the hovered image.
<html>
<head>
<script language="javascript">
function MouseRollover(MyImage) {
setTimeout(function(){
MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif";
}, 3000);
}
function MouseOut(MyImage) {
MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg";
}
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg"
border="0px"
width="300px" height="auto"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>
Ok, below is a script that will change the image 3 seconds after mousing over. I slightly modified your code as it's a lot easier to work with scripts when it's not embedded in your HTML. Hope this helps.
const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg';
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg';
const img = document.querySelector('img');
img.addEventListener('mouseover', (e) => {
setTimeout(()=>{
img.src = universe;
}, 3000);
})
<html>
<head>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
</div>
</body>
</html>
Here is an example, mouse over wait 3 seconds.
Also resets when mouse leaves..
var mrSmiley = document.querySelector('.img');
var timer;
mrSmiley.onmouseenter = function () {
timer = setTimeout(function () {
mrSmiley.classList.add('img-3sec');
}, 3000);
}
mrSmiley.onmouseleave = function () {
clearTimeout(timer);
mrSmiley.classList.remove('img-3sec');
}
.img {
cursor: pointer;
width: 128px;
height: 128px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>');
}
.img-3sec {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>');
}
Mouse over Mr Happy for 3 seconds..
<div class="img">
</div>
<script>
function zeigeBildGross1(Bild1){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross2(Bild2){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross3(Bild3){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross4(Bild4){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
</script>
<noscript>
Bitte JavaScript in Ihrem Browser aktivieren!
</noscript>
</head>
<body>
<img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
</body>
Hello,
I want to code a website using HTML and JS, where 4 pictures are shown.
If I press on one picture, it should be resized.
Is it possible, to get a "dynamic" variable?
My idea was, to get a new variable which can have the content Bild1, Bild2, Bild3 or Bild4, depending on which picture was pressed before so there's not the same function for each case just with a different word.
For example:
function zeigeBildGross(){
var x = <!-- depending on which pic was pressed either: Bild1, Bild2, Bild3 or Bild4 !-->
document.getElementById(x).width = 500;
document.getElementById(x).height = 300;
}
Is that possible?
Thank you for reading,
Stöger
Simply deliver the id of your image to the function:
HTML:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">
Javascript:
function zeigeBildGross(id){
document.getElementById(id).width = 500;
document.getElementById(id).height = 300;
}
Cleaner version:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">
Javascript:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}
You don't need to create a variable that contains the image being clicked, it already exists as the context in the onclick event handler.
Simply pass this as parameter to the function, and you can use that to access the element:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}
<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
I have for images with a number on it. Those numbers are 1-4. I want to place them numerically and when the user clicks on 1, i want them to go to slide 1 and if they click on 2, then slide 2. This also needs to have a sliding effect.
I am using this particular javascript code below for left and right options but i am not sure if I can re-use this for my purpose:
HTML would be something like:
<img src="#" class="image_one">
<img src="#" class="image_two">
<img src="#" class="image_three">
<img src="#" class="image_four">
<div class="content_for_image_One" id="slide1">
You see this when you click on image 1
</div>
<div class="content_for_image_two" id="slide2">
You see this when you click on image 2
</div>
<div class="content_for_image_three" id="slide3">
You see this when you click on image 3
</div>
<div class="content_for_image_four" id="slide4">
You see this when you click on image 4
</div>
<script type="text/javascript">
$(document).ready(function () {
var $sliderMask = $('#slider_mask');
var $slideContainer = $('#slide_container');
var $slides = $slideContainer.find('.slide');
var slideCount = $slides.length;
var slideWidth = $sliderMask.width();
$slideContainer.width(slideCount * slideWidth);
$slides.width(slideWidth);
var currentSlide = 0;
function animate() {
$slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
}
$('#left_button').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#right_button').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
$('#click_left').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#click_right').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
});
</script>
Your provided html does not fit to your code, but let's assume you have the following html:
<div id="slidesWrapper">
<div id="slidesContainer">
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
</div>
</div>
<div id="thumbnails">
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
</div>
with the following css:
#slidesWrapper {
width: 1000px;
height: 400px;
overflow: hidden;
position: relative;
}
#slidesContainer {
width: auto;
position: aboslute;
}
.slide {
float: left;
height: 400px;
}
you could use something like:
(function($){
$(function() {
var wrapper = $('#slidesWrapper'),
container = $('#slidesContainer'),
slides = container.children(),
thumbs = $('#thumbnails').children();
container.css('left', '0');
thumbs.click(function() {
var index = $('thumbnails').children().index(this);
container.stop().animate({
left: '-' + slides.eq(index).position().left + 'px'
}, 1000);
});
});
})(jQuery);
its not tested though and I dont quite get what you want. This example fits if you have a wrapper with slides in it and only one can be visible, fixed width and height
function next()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-500px"},"slow");
}
else if(nm>0 || nm!=-2000)
{
nm=nm-500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
else if(nm==-2000)
{
$("ul").animate({"marginLeft":"0px"},"slow");
}
}
function previous()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-2000px"},"slow");
}
else
{
nm=+nm + +500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
}
</script>
</head>
<body>
<div id="slide_wrapper">
<ul id="img_ul">
<li>
<q>
Learn everything you can, anytime you can, from anyone you can there will always come a time when you will be grateful
you did.
</q>
</li>
<li>
<q>
Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read.
</q>
</li>
<li>
<q>
If plan A fails, remember there are 25 more letters.
</q>
</li>
<li>
<q>
Do not go where the path may lead, go instead where there is no path and leave a trail.
</q>
</li>
<li>
<q>
A journey of a thousand miles must begin with a single step.
</q>
</li>
</ul>
</div>
<input type="button" id="previous" value="Previous" onclick="previous();">
<input type="button" id="next" value="Next" onclick="next();">
code from TalkersCode complete tutorial here http://talkerscode.com/webtricks/content-slider-using-jquery-and-css.php
Basically what I am trying to accomplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently accomplishing this with a simple onClick event with JS. That's not an issue. The trouble comes in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
What is the best way to accomplish this simple effect?
Below is a simple working example:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<style type="text/css">
.normal {
border:none;
}
.highlighted {
border:1px solid #336699;
}
</style>
<script type="text/javascript">
var ImageSelector = function() {
var imgs = null;
var selImg = null;
return {
addImages: function(container) {
imgs = container.getElementsByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
img.className = "normal";
img.onclick = function() {
if(selImg) {
selImg.className = "normal";
}
this.className = "highlighted";
selImg = this;
};
}
}
};
}();
</script>
</head>
<body>
<div>
<div id="menu">
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
</div>
</div>
<script type="text/javascript">
var div = document.getElementById("menu");
ImageSelector.addImages(div);
</script>
</body>
</html>
This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example
I would take advantage of jQuery. Give each of your images a class, for example, "imageHighlight" or something. Then you could do something like this (completely untested):
$(document).ready(function() {
$('img.imageHighlight').click(function() {
$('img.imageHighlight').css('border-width', 0);
$(this).css('border-width', '3px');
});
});
And have some CSS with it:
img.imageHighlight {
border: 0px solid #345678;
}
There's probably even a better way to do it by toggling CSS classes or something, but I'm lazy at the moment. Still digesting lunch :)