Good morning world! I've got another problem with my project, this time the JavaScript isn't working, I want the picture to change when I'm holding my mouse pointer over it, thanks for your patience!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<title>Konst UF</title>
<meta charset="utf-8" />
<script type="text/javascript" language="javascript">
if (screen.width <= 699) {
document.location = "mobile.html";
}
document.getElementById("Orderbutton").onclick = function () {
location.href = "http://www.youtube.com/";
};
function billFunction() {
var Bill = getElementById("BillGate");
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
</script>
<body>
<p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
<center>
<ul>
<li>
<p class="Home">Home</p>
</li>
<li>
<p class="Products">Products</p>
</li>
<li>
<p class="About">About Us</p>
</li>
</ul>
</center>
<center><p class="para1">Konst UF</p></center>
<center>
<img
id="BillGate"
src="bill-gates.jpg"
alt="Bill Gates"
class="Billgates"
onmouseover="billFunction()"
/>
</center>
<marquee><h2>Bill GATES</h2></marquee>
<div></div>
<div class="sidepanels1">
<center>
<img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst" />
</center>
<h2>Unknown</h2>
<p>I have no idea haha</p>
</div>
<div class="sidepanels2">
<center>
<img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa" />
</center>
<center><h2>Mona Lisa</h2></center>
<center>
<p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p>
</center>
</div>
<center>
<button
id="Orderbutton"
type="button"
onclick="location.href = 'http://www.youtube.com/';"
>
Order Our Products
</button>
</center>
</body>
</head>
</html>
That was the html code and I hope you could find the problem, if you need the css I got it too:
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
font-size: 30px;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
margin-top: 40px;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
margin-top: 40px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
div.2nd {
background-color: black;
color: white;
}
img.asus-logo {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 40px;
}
img.Konstbild {
margin-top: 20px;
width: 300px;
height: 300px;
border: 3px solid green;
margin-right: auto;
margin-left: auto;
}
ul {
list-style-type: none;
}
p.madeby {
position: fixed;
}
Thank you !
Lets take a look at your billFunction, as there are a few problems with this function.
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
First of all, getting the element of your desire requires you to use document.getElementById, rather than just getElementById. Changing that should give you the correct element.
Next, you are setting img.src, but variable img is never defined. I assume this should be Bill.src instead. (Side note, I want to advise you to use lowerCamelCase variable names)
Last, your logic for checking which image to use looks wrong. Bill (capital B) can never be in bill-gates. Changing this logic using all lowercase should work.
You will get something along the lines of:
function billFunction() {
var bill = document.getElementById('BillGate');
if (bill.src.match("bill")) {
bill.src = "bill-gates.jpg";
} else {
bill.src = "Card.jpg";
}
}
In your JavaScript change this
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
And in your HTML
<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>
Also you should comment the onclick code before, it's causing you problems.
A better solution would be to do this only with CSS. It's much easier.
#bill {
background-image: url("bill-gates.jpg");
}
#bill:hover {
background-image: url("Card.jpg");
}
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
Corrected One:
$("img").hover(function(){
$(this).attr("src","bill.jpg");
},function(){
$(this).attr("src","card.jpg")
});
Related
I have two toggles (toggle-1 and toggle-2) with different contents in a header. I would like to prevent the user to have both toggles active simultaneously (otherwise they overlap).
In the code below I tried to use if statements to hide one of the toggles if the other is already opened but it does not work.
Ideally, what I would like to happen is that if toggle-1 is active and the user clicks on toggle-2, then toggle-1 would come back to its original state and toggle-2 would be now active. The same the other way around.
I am not familiar with JavaScript yet and I'd really appreciate if you could tell me what I have done wrong and how it should be done to have my ideal result
Here's the link to my CodePen if you find it easier:
https://codepen.io/fergos2/pen/NWWxgEp
var myToggle
var oneToggle = $(document).ready(function() {
$('.toggle-1').click(function() {
$('.toggle-1').toggleClass('active')
$('.toggle-1-content').toggleClass('active')
})
})
var twoToggle = $(document).ready(function() {
$('.toggle-2').click(function() {
$('.toggle-2').toggleClass('active')
$('.toggle-2-content').toggleClass('active')
})
})
if (myToggle == oneToggle) {
$(document).ready(function() {
$('toggle-2-content').hide();
})
} else if (myToggle == twoToggle) {
$('toggle-1-content').hide();
}
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle-1,
.toggle-2 {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.toggle-1.active,
.toggle-2.active {
background-color: red;
}
.toggle-1-content,
.toggle-2-content {
display: none;
}
.toggle-1-content.active,
.toggle-2-content.active {
display: block;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
.toggle-1-content.active {
left: 0;
}
.toggle-2-content.active {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle-1">1</div>
<div class="toggle-1-content">
<p>Some content 1</p>
</div>
<div class="toggle-2">2</div>
<div class="toggle-2-content">
<p>Some content 2</p>
</div>
</div>
</div>
Several issues.
Please study the code below
too many $(document.ready... and no need to store the result of such a statement
Using a data-attribute and a common class, shortens the code a lot. DRY Don't repeat yourself
I simplified the content containers CSS too
$(function() { // on page load
$('.toggle').on("click", function() { // any of the toggles
const $wrapper = $(this).closest(".wrapper");
const id = $(this).data("id");
$(this).toggleClass('active'); // toggle clicked div
const show = $(this).is(".active"); // is it active after we toggled?
$wrapper
.find(".toggle") // find all toggles
.not(this) // exclude the one we clicked
.removeClass("active"); // remove class
$wrapper.find(".content").hide(); // hide any content divs
$("#" + id).toggle(show); // show the one belonging to the clicked toggle
})
})
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.active {
background-color: red;
}
.content {
display: none;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
#div1 {
left: 0;
}
#div2 {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle" data-id="div1">1</div>
<div id="div1" class="content">
<p>Some content 1</p>
</div>
<div class="toggle" data-id="div2">2</div>
<div id="div2" class="content">
<p>Some content 2</p>
</div>
</div>
</div>
Working code:
$(document).ready(function() {
$('.toggle-1').click(function() {
if ($('.toggle-2').hasClass('active')) {
// remove toggle-2 active classes
$('.toggle-2').removeClass('active');
$('.toggle-2-content').removeClass('active');
}
$('.toggle-1').toggleClass('active');
$('.toggle-1-content').toggleClass('active');
});
$('.toggle-2').click(function() {
if ($('.toggle-1').hasClass('active')) {
// remove toggle-1 active classes
$('.toggle-1').removeClass('active');
$('.toggle-1-content').removeClass('active');
}
$('.toggle-2').toggleClass('active');
$('.toggle-2-content').toggleClass('active');
});
});
Here is the link to my working version.
A few things to keep in mind:
You don't need to call $(document).ready() multiple times. There's just no reason to call it multiple times on a single page as the event is only fired once.
You need to keep track of state somehow; hence the if ($('el').hasClass('classname')) syntax. Once you handle that properly, it's easy to ensure that each element is 'reset' to its original state when the other is clicked.
Hope that helps!
toggleClass accepts a second boolean parameter that forces the type of toggle, on or off. More than that you can also target multiple elements with a single jQuery call, so use that to your advantage since the classes applied have the same name.
So you could simplify your code to
$(document).ready(function() {
$('.toggle-1').click(function() {
$('.toggle-1, .toggle-1-content').toggleClass('active');
$('.toggle-2, .toggle-2-content').toggleClass('active', false)
})
$('.toggle-2').click(function() {
$('.toggle-2, .toggle-2-content').toggleClass('active');
$('.toggle-1, .toggle-1-content').toggleClass('active', false)
})
})
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle-1,
.toggle-2 {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.toggle-1.active,
.toggle-2.active {
background-color: red;
}
.toggle-1-content,
.toggle-2-content {
display: none;
}
.toggle-1-content.active,
.toggle-2-content.active {
display: block;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
.toggle-1-content.active {
left: 0;
}
.toggle-2-content.active {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle-1">1</div>
<div class="toggle-1-content">
<p>Some content 1</p>
</div>
<div class="toggle-2">2</div>
<div class="toggle-2-content">
<p>Some content 2</p>
</div>
</div>
</div>
You can use the method "removeClass" to remove the active class from the other toggle
var oneToggle = $(document).ready(function() {
$(".toggle-1").click(function() {
$(".toggle-1").toggleClass("active")
$(".toggle-1-content").toggleClass("active")
$(".toggle-2").removeClass("active")
$(".toggle-2-content").removeClass("active")
})
})
var twoToggle = $(document).ready(function() {
$(".toggle-2").click(function() {
$(".toggle-1").removeClass("active")
$(".toggle-1-content").removeClass("active")
$(".toggle-2").toggleClass("active")
$(".toggle-2-content").toggleClass("active")
})
})
I need to understand how to connect peers in gun db. I have a socket.io server deployed on heroku but I don't know if it will work with gun. Can anyone with experience with gun db help me with this? I've readed the documentations but it's not clear how the peers are connected and there isn't a clear code example on the documentation.
I've tested the chat example, but it will not work on my localhost server, I will not be able to deploy it on my shared hosting because sockets are not permitted. Also on localhost messages are not delivered between two different browser windows.
UPDATE :
Here is the code with the suggested lib/webrtc added. Still not working.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Converse</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
.chat__heading {
position: fixed;
text-align: center;
z-index: 1;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.chat__form-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 20px;
position: fixed;
z-index: 1;
bottom: 0;
}
.chat__form {
display: flex;
justify-content: center;
height: 50px;
background-color: white;
border: 2px solid white;
max-width: 900px;
width: 100%;
border-radius: 5px;
}
.chat__name-input {
flex: 1;
padding: 10px;
}
.chat__message-input {
flex: 5;
padding: 10px;
}
.chat__submit {
padding: 10px;
color: white;
border-radius: 5px;
}
.chat__submit:hover::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit:focus::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 5px;
transition: background-color 0.3s;
background-color: rgba(0,0,0,0);
}
.chat__message-list {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
overflow-y: auto;
padding: 60px 20px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
min-height: 100vh;
}
.chat__message {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
width: 100%;
position: relative;
max-width: 900px;
}
.chat__name {
margin-right: 20px;
}
.chat__when {
position: absolute;
top: 0;
right: 2em;
padding: 10px;
background: rgba(100%, 100%, 100%, 0.9);
opacity: 0;
border-radius: 5px;
}
.chat__message:hover .chat__when {
opacity: 1;
right: 0em;
}
#media (max-width: 567px) {
.chat__heading {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="chat hue2 page">
<h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
<ul class="chat__message-list">
<li class="none"></li>
</ul>
<div class="chat__form-container hue2">
<form class="chat__form">
<label for="name-input" class="visually-hidden">Name</label>
<input id="name-input" class="chat__name-input" placeholder="Name"></input>
<label for="message-input" class="visually-hidden">Message</label>
<input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
<button class="chat__submit say hue2">say</button>
</form>
</div>
<div class="model">
<li class="chat__message white huet2 box">
<b class="chat__name"></b>
<p class="chat__message-text"></p>
<span class="sort none">0</span>
<div class="chat__when"></div>
</li>
</div>
</div>
<script src="../jquery.js"></script>
<script src="../../gun.js"></script>
<script src="../../nts.js"></script>
<script src="../../lib/webrtc.js"></script>
<script>
var gun = Gun(document.location.host + ':443/gun');
var chat = gun.get('converse/' + location.hash.slice(1));
console.log(chat);
console.log(gun);
console.log(location.hash.slice(1));
$(".chat__submit").on('click', submit);
$(".chat_form").on('keydown', enter);
function enter(e) {
if (e.which !== 13) { return }
submit(e);
}
function submit(e) {
e.preventDefault();
var msg = { when: Gun.time.is() };
msg.who = $('.chat__name-input').val();
if (!msg.who) {
msg.who = 'user' + Gun.text.random(3);
$('.chat__name-input').val(msg.who);
}
msg.what = $('.chat__message-input').val();
if (!msg.what) { return }
chat.set(msg);
$('.chat__message-input').val('').focus();
}
chat.map().val(function (msg, id) {
if (!msg) { return }
var messageList = $('.chat__message-list');
var last = sort(msg.when, messageList.children('li').last());
var li = $("#msg-" + id)[0]; // grab if exists
if (!li) {
li = $('.model li').clone(true) // else create it
.attr('id', 'msg-' + id)
.insertAfter(last);
}
// bind the message data into the UI
li = $(li);
li.find('.chat__name').text(msg.who);
li.find('.chat__message-text').text(msg.what);
li.find('.sort').text(msg.when);
var time = new Date(msg.when);
li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
$('html, body').stop(true, true)
.animate({ scrollTop: messageList.height() });
});
function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
</script>
</body>
</html>
wow #mauro-stepanoski 's comment is so good (it should be the answer)! #jihuuNI when the lib/webrtc adapter is added like in the Todo-Dapp tutorial, it attempts to automatically connect all browsers with all other browsers - in the future, AXE will automatically cut off unnecessary connections. Do note, browser's WebRTC feature is not very reliable, so you still want to also have super peer connections.
I'm trying to find a way to transition from one background image to another when I hover a div.
Here's a demo:
codepen demo
Here's my code
$('#cat').hover(function(){
$('.image').css('background-image',
"url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
Any ideas?
First, you are missing IDs for your <h1>, because your JQuery select elements with ID cat, dog and rabbit.
seccond, what you should change is background of '.bg' class, not '.image' class
HTML
<h1 id="cat">CAT</h1>
<h1 id="dog">DOG</h1>
<h1 id="rabbit">RABBIT</h1>
JS
$('#cat').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
$('#dog').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')");
});
$('#rabbit').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')");
});
demo : https://jsfiddle.net/z2hevmya/
var images = {
"cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb',
"dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a',
"rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859'
};
$('.menu').hover(function(){
var img = $(this).attr("id");
$('.bg').css('background-image', "url(" + images[img] + ")");
});
body {
margin: 0;
padding: 0;
}
h1 {
z-index: 100;
color: #456;
font-family: sans-serif;
position: relative;
opacity: .5;
transition: all ease 1s;
cursor: pointer;
height: 1em;
padding: .5em;
margin: 0;
}
h1:hover {
opacity: 1;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>
<h1 id="cat" class="menu">CAT</h1>
<h1 id="dog" class="menu">DOG</h1>
<h1 id="rabbit" class="menu">RABBIT</h1>
<script language="javascript">
$(function () {
$('.mDiv').hover(function () {
$(this).addClass('divHover');
}, function () {
$(this).removeClass('divHover');
}
);
});
</script>
<style type="text/css">
.mDiv {
height: 300px;
width: 200px;
background: darkgrey;
border: solid 1px #ccc;
float: left;
margin-right: 10px;
}
.divHover{
// background-image: you " img url";
background: greenyellow;
}
</style>
<div id="d">
<div class="mDiv">Test</div>
</div>
I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}
Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.
You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>
With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>
Hy everybody,
My task is to realize a slider with pure HTML / Jquery code.
The template is the follow
and the html code for the upper template is the follow
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="slide"><span></span></article>
<article id="slide-1" class="slide"><span></span></article>
<article id="slide-2" class="slide"><span></span></article>
<article id="slide-3" class="displayed-slide"><span></span></article>
</section>
</div>
<nav id="slider-nav">
</nav>
We start with button {#slide-0} which display article {ID="slide-0"}; when we select another button, let's say {#slide-3} then article with {ID="slide-0"} fade out and article with {ID="slide-3} fade in; when we select another button, let's say {#slide-1} then article with {ID="slide-3"} fade out and article with {ID="slide-1} fade in; and so on.
I started to struggle with this aim a week ago and so I ask your precius help.
Many many thanks
This will get you going.
You will need:
- http://jquery.com/ - JQuery
- http://jqueryui.com/ -JQueryUI
With these two your work is easy.
First reference JQuery in your website then you reference JQueryUI.
Then you will do something like this in your own JQuery Code:
The HTML:
<div id="slider">
<div id="firstSlide">
<img class="active" src="pics/home/1.1.gif"/>
<img src="pics/home/1.2.gif"/>
<img src="pics/home/1.3.gif"/>
</div>
</div>
The CSS:
#slider
{
position: relative;
height: 180px;
border-bottom: 3px solid black;
z-index: 1;
box-shadow: 0px 0px 10px black;
}
#firstSlide
{
position: absolute;
width: 198px;
height: 100%;
left: 0%;
border: 1px solid black;
}
#firstSlide img
{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
}
#firstSlide img.active
{
z-index: 3;
}
The JQuery:
var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';
var timer = setInterval('DoIt1()', timerInterval);
function DoIt1()
{
var $active = $('#firstSlide' + ' .' + 'active');
var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
$next.css('z-index',2);
$active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
setTimeout(function() { DoIt1(); }, slideDelay);
}
In the JQuery, just change the var's to your needs. Also, change the CSS etc to your own needs. The Z-INDEXes are VERY important here - so be careful when you change theCSS I gave you.
Why don't you put a javascript function in your href that can just change the class of your article.
When you change the class of your article, you can display them or not (like we can see, class=slide or displayed-slide)
I don't know if it's what you want to do ?
Have you try some things ?
I did it (phew!!)
Now this is the css
#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#sliding-container {
width: 100%;
}
#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}
#slider-nav a.active {
background: #999;
}
this is the html
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />
</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
and this is the script
<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");
$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");
$navButtons.removeClass("active");
$selectedButton.addClass("active");
crossFading(rawIdSlideToFadeIn);
});
function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");
if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>
Yes, some part of this code has to be improved, but the kernel is built,
Special thanks to SushiBalboha: his hint showed me the right way.
Thank you very much