I have a menu and I need to change the body background to different image on every menu item. Also, it would be nice if it would fade or bounce or do something nice and clean while changing.
So far I have this code:
var $body = $('body');
$('li:first-child').hover(function(){
$body.css('background-image', 'url("img/dd.jpg")');
}, function() {
$body.css('background-image', '')
})
The html is
<div id="main-menu-container">
<ul>
<li><a><span>One</span></a></li>
<li><a><span>Two</span></a></li>
<li><a><span>Three</span></a></li>
</ul>
</div>
How do I continue and add the animation?
You can just select the items where you want to change the background.
var $body = $('body');
$('#main-menu-container li a').hover(function(){
$body.css('background', 'red');
}, function() {
$body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
If you want a different background you need to store them somehow. Maybe as data attribute on the menu, or create a object, storing the images, or something.
var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];
$('#main-menu-container li a').hover(function(){
$body.css('background', colors[$(this).parent().index()]);
}, function() {
$body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
Try to add all the images to the page with z-index:-1 and position:fixed. Then just animate opacities of those images. Here's HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<div class = "images-container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img0.jpg">
</div>
<ul id = "main-menu-container">
<li><a><span>One</span></a></li>
<li><a><span>Two</span></a></li>
<li><a><span>Three</span></a></li>
</ul>
</body>
</html>
CSS:
div.images-container img{
z-index: -1;
position: fixed;
width:1600px;
height: 900px;
}
ul#main-menu-container{
position: relative;
top:50px;
}
ul#main-menu-container li{
font-weight: 500;
font-family: sans-serif;
background: #ed2389;
border-color: #fff;
border-width: 1px;
float: left;
color: white;
list-style: none;
padding: 8px;
border-style: solid;
border-collapse: collapse;
}
ul#main-menu-container li:hover{
background: #fff;
color: #ed2389;
border-color: #ed2389;
}
JavaScript:
$(function() {
$("div.images-container img").fadeOut(0);
$("div.images-container img").last().fadeIn(0);
$("#main-menu-container").hover(function(){
$("div.images-container img").last().fadeToggle(500);
});
$("#main-menu-container li").hover(function(e) {
var $target = $(e.target);
var $menu = $("#main-menu-container li");
var index = $menu.index($target);
var $images = $("div.images-container img");
$images.eq(index).fadeToggle(500);
});
});
Here I used the order of the images to choose what image is going to be displayed. For more control you can use ids and classes.
Here's a fiddle: https://jsfiddle.net/eoppskvL/
P.S. I don't own any of the images in the fiddle in case I need to say that.
Okey, so I figured it out. Thank you for your help people!
The html
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
The CSS
body {
background: url("../img/back.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background ease-in 1s;
-moz-transition: background ease-in 1s;
-o-transition: background ease-in 1s;
transition: background ease-in 1s;
}
.background-0 {
background: url("../img/dd.jpg");
}
.background-1 {
background: url("../img/dd.jpg");
}
.background-2 {
background: url("../img/dd.jpg");
}
The script
var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
current_index = list_elements.index(this);
$('body').addClass('background-' + current_index);
}).on('mouseleave', function(){
$('body').removeClass('background-' + current_index);
current_index = null;
});
Unfortunately you cannot animate the background-image of an element. You could use this trick to add a transparent background and animate the opacity of the :after pseudo-element.
Related
In the top left corner of this page, I have a "Light/Dark mode" toggle. When 'Light mode' is clicked, it fades into dark mode nicely no problem. But once it's in Dark mode, and you click 'light mode', it doesn't fade in nicely and I can't seem to get it to work.
What would I need to add to my code to get it to fade nicely in to light mode?
<!DOCTYPE html>
<html id= "mode" lang="en-au">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> Test </title>
<head>
<link rel = "icon" type = "image/png" href = "https://ibb.co/bRc1Qqq">
<link rel = "apple-touch-icon" type = "image/png" href = "https://ibb.co/bRc1Qqq"/>
<!-- Square Windows tiles -->
<meta name="msapplication-square70x70logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square150x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square310x310logo" content="https://ibb.co/bRc1Qqq"></meta>
<!-- Rectangular Windows tile -->
<meta name="msapplication-wide310x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Raleway|Abril+Fatface|Unica+One|Press+Start+2P|Bungee">
<!-- Makes stuff fadein on pageload-->
<script>
window.onload = function()
{document.body.className += " loaded";
document.querySelector("body").style.opacity = 1;
}
</script>
<style>
html {
height: 100%;
background-color:#b8b8b8;
}
body {
text-decoration: none;
font-family: "Raleway";
border-radius: 7px;
/* color-scheme: light dark; */
}
h1, ul {
padding-top: 5%;
}
body, .fadein {
opacity: 0;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3;
}
body.loaded .fadein {
opacity: 1;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header h1 {
margin: 0;
}
.tabs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tabs li {
flex-grow: 1;
text-align: center;
padding: 0.5%;
}
.tabs a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-radius: 7px;
}
.tabs a:hover,
.tabs a.active {
background-color: #ddd;
}
.main {
padding: 20px;
}
/* Hides all sections by default
.section {
display: none;
}
*/
.section.active {
display: block;
}
.dark-mode {
background-color: #020C17;
color: #ffffff;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.dark-mode ul a{
background-color: #020C17;
color: #ffffff;
}
.dark-mode ul a:hover,
.dark-mode ul a.active {
background-color: #081334;
color: #ddd;
}
#dark-mode-button {
color: #ddd;
padding: 10px;
border-radius: 7px;
cursor: pointer;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
position: fixed;
}
</style>
<!-- makes scrolling smooth when using anchor -->
<script>
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
var offset = target.offsetTop;
window.scrollTo({
top: offset,
behavior: 'smooth'
});
});
</script>
<!-- The HTML for the website -->
<body>
<div id="dark-mode-button"><p id="mango" class="btn-toggle">Dark mode</p></div>
<div class="fadein">
<div class="container">
<!-- The header with the title and tabs -->
<div class="header">
<h1>Testing</h1>
<ul class="tabs">
<li><a href="#section1" >About</a></li>
<li>Projects</li>
<li>Test</li>
</ul>
</div>
<!-- The main content of the website, with the sections -->
<div class="main">
<div id="section1">
<h2>About</h2>
<p>This is the content of section 1.</p>
</div>
<div class="section" id="section2">
<h2>Projects</h2>
<p>This is the content of section 2.</p>
</div>
<div class="section" id="section3">
<h2>Test</h2>
<p>This is the content of section 3.</p>
</div>
</div>
</div>
</div>
</body>
<script>
// Get the elements for the tabs and sections
const tabs = document.querySelectorAll('.tabs a');
const sections = document.querySelectorAll('.section');
// Add a click event listener to each tab
tabs.forEach(tab => {
tab.addEventListener('click', event => {
event.preventDefault(); // prevent the default link behavior
// Remove the active class from all tabs and sections
tabs.forEach(tab => tab.classList.remove('active'));
sections.forEach(section => section.classList.remove('active'));
// Add the active class to the clicked tab and corresponding section
tab.classList.add('active');
document.querySelector(tab.getAttribute('href')).classList.add('active');
});
});
</script>
<!-- JavaScript code to handle the button click and switch between modes. also uses button id and the body element -->
<script>
// Get the button and add a click event listener to it
const button = document.getElementById('dark-mode-button');
button.addEventListener('click', () => {
// Get the current body element and toggle the "dark-mode" class
const body = document.getElementById("mode");
body.classList.toggle('dark-mode');
});
</script>
<script>
/* Fetch the buttom element */
const mode = document.getElementById('mango');
/* Add click event listener where we will provide logic that updates the button text */
mode.addEventListener('click', function() {
/* Update the text of the button to toggle beween "More" and "Less" when clicked */
if(mode.innerText.toLowerCase() === 'dark mode') {
mode.innerText = 'Light mode';
}
else {
mode.innerText = 'Dark mode';
}
});
</script>
You need to apply the tranition effect to the elements affected by your dark theme, not the dark-mode class itself. You did it right for the #dark-mode-button though.
Solution for your code: add a transition (transition: all 0.5s ease-in-out) on html{} and .tabs a {}, and you can remove the transition effect on the dark-mode class. Fiddle: https://jsfiddle.net/40y5axcd/
Note: you applied a white text color to the whole html for dark mode, hence your main content text isn't visible on a white background. I left it as is, since it wasn't a part of your question.
Going forward you're better off using an utility class with the transition effect and apply it to all elements affected by the dark mode, especially if you continue to add elements to your page and want to change the transition duration. You rather only have to change one class, then having to go through every element and change the duration.
I have a fixed tool bar with a dark background colour on top of my page with the following code.
/*html*/
<div class="floating-header-div">
<md-toolbar>
<a>Login</a>
</md-toolbar>
</div>
/*css*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}
md-toolbar {
background-color : rgb(55,58,60);
}
What I want to achieve is that the tool bar starts off with transparent background colour when the page is not scrolled. (So I only see the login link)
As the user scroll down abit more (past a certain section), the background color of the toolbar appears. Preferably animated.
How can I achieve this. I am using Angular 2 so preferably nothing too fancy like using document or jquery
Use (scroll)="onScroll($event) to catch the scroll event and with #ViewChild access the toolbar. With a simple validation toogle when your toolbar has to be transparent:
<div #content class="content">
<md-toolbar class="toolbar" color="{{ setColor ? 'primary' : 'accent' }}">
<span>Login</span>
</md-toolbar>
<div class="topimage"></div>
<p>Content</p>
</div>
#ViewChild('content') content;
setColor = false;
onScroll(event) {
this.setColor = this.content.nativeElement.getBoundingClientRect().top < -64;
}
I am not very good with Angular 2 animations but you can do it with CSS3:
.mat-toolbar{
-webkit-transition: background-color 400ms linear;
-ms-transition: background-color 400ms linear;
transition: background-color 400ms linear;
}
Here is a working example: https://plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview
this should help you, you may need to modify this to suit your needs.
/*for setting navigation bar colour*/
$(document).ready(function(){
var scroll_start = 0;
var nav_element = $(".navbar");
var startchange = $('#my_element'); // element to start change when it reaches the top
var nav_element_height = nav_element.outerHeight();
var startchange_offset = startchange.offset().top;
var offset = Math.round(startchange_offset - nav_element_height);
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset) {
nav_element.addClass('navbar-bg-color');
} else {
nav_element.removeClass('navbar-bg-color');
}
});
});
Try something like this :)
app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 50) {
scope.boolChangeClass = true;
} else {
scope.boolChangeClass = false;
}
scope.$apply();
});
};
});
body { margin: 0; background: lightgrey; min-height: 900px;}
.header {
background: transparent;
height: 70px;
padding: 24px;
box-sizing: border-box;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 150;
font: 18px sans-serif;
color: white;
transition: all .25s ease-out;
}
.min .header { height: 50px; padding: 14px 24px; background: rgb(55,58,60);}
img{
width: 100%;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body ng-app="myApp" scroll id="page" ng-class="{min:boolChangeClass}">
<div class="header">Header Title</div>
<div class="content">
<img src="https://images.pexels.com/photos/115045/pexels-photo-115045.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
</body>
</html>
I would like to have some help about the transition of a div in CSS or JavaScript.
I have a <div> with dispay:none;.
With some JS, i change the display option on display:block.
All is working correctly.
But i would like to know how to make a transition when the <div> appear on the screen.
Like the player Spotify when you want to search something.
Thanks for you help.
And really sorry for my BAD english !
You can do it with a JQuery like this:
$(function() {
var open=false;
$('.menubar span').click(function(){
if(open==false){
$('.search').css('left','50px');
open=true;
}
else{
$('.search').css('left','-100px');
open=false;
}
});
});
.menu{
position:fixed;
left:0;
top:0;
width:50px;
height:100%;
background:#222021;
z-index:4;
}
.menubar{
width:50px;
height:100%;
color:white;
font-family:arial;
}
.search{
position:absolute;
left:-100px;
top:0;
width:100px;
background:lightgrey;
height:100%;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
<div class="menubar">
<span>Home</span>
</div>
</div> <div class="search"><input type="search"></div>
Click "Menu" in the menu bar, and the search bar slides out, click again to hide it.
To use JQuery, you have to include the jquery library:
include this in <head>:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Or download it from:http://jquery.com/download/
Then, just use the script like normal JS, in a <script> tag.
EDIT:
With your problem in the comments below, #navbar had a static position, which means z-index will not work for it:
#nav-bar {
background-color: #23232C;
bottom: 0px;
left: 0px;
top: 0px;
width: 220px;
height: 100%;
margin-top: -17px;
z-index: 99;
position: absolute;
}
The following answers uses CSS Style Declarations to accomplish the transition effect.
if you declare the transition: all 1s style on an element. If the style property changes on that element your browser's (user-agent's) graphic device will calculate and update the frames (or visual changes) that occur between the two states (initial state, and end state). However, the property that is being changed must be scalar; that is, both the initial value and new value are scalar (like 0% being set to 100%). Additionally, if you're changing a property that is not scalar, but affects the rendering of other properties.. they will skip the transition effect (aka display:none being set to display:block).
Note: Instead of changing the inline style on the elements using Javascript, we're going to instead change the class of those elements; meaning, the following styles represent visual states, which we'll toggle between..
Again, the transition style declaration (or rather, the graphic device) will handle the incremental rendering of the frames between these two states.
Code Sample of changing 4 style properties (explicitly)
var str = 'hide';
var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
{
var elms = document.querySelectorAll('div.block');
for (var i = 0, lng = elms.length; i < lng; i++)
{
elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
elms[i].className = elms[i].className + ' ' + str;
}
str = (str === 'show') ? str = 'hide' : 'show';
});
.block {
display:block; position:absolute;
top:0;
left:0;right:80%;
bottom:0;
background-color: rgba(0,0,0);
border:0.1em solid black;
min-width:5em;
transition: left 2s, opacity 2s, right 2s, background-color 1s;
}
.wrapper
{
display:block;position:relative;background-color:whitesmoke;
min-height:10em;
width:auto;
}
.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}
<button id="toggler">Toggle Block</button>
<div class="wrapper">
<div class="block"></div>
</div>
The following is a fairly more complex slider, which ulitmately uses the same principal for rendering the transitions.
$("div.slide > button.show" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slidePrev = slide.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
})
$("div.slide > button.hide" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slideNext = slide.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slidePrev.toggleClass("hide").toggleClass("show");
})
html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}
div.wrapper {position:relative;
left:0;right:0;top:0;bottom:0;
width:auto;
background-color:whitesmoke;
display:block;
overflow:hidden; height:100%;
}
button {line-height:2em;padding:0.2em;display:block;}
div.slide {
display:block;
position:absolute;
border:0.2em solid black;
background-color:white;
top:0;
bottom:0;
right:0;
left:0;
opacity:1;
transition: left 1s, opacity 0.5s;
}
div.slide:nth-child(1) {
left: 1em;
z-index: 1;
}
div.slide:nth-child(2) {
left: 3.5em;
z-index: 2;
}
div.slide:nth-child(3) {
left: 6em;
z-index: 3;
}
div.slide:nth-child(4){
left: 8.5em;
z-index: 4;
}
div.slide.hide {
opacity:0.3;
left: 59%;
}
div.slide.show {
opacity:1;
}
div.show > button.show {display:none;}
div.hide > button.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
</div>
Im trying to use simple jquery offset() and animate to make my div scroll to the desired div when the user clicks on a link.
Basically, when the user clicks blog it will go to test1
user clicks Contact it will move to test2
user clicks Work it will move to test3.
I implemented some code I had used in a previous project (it had worked before) but the scrolls are not working correctly this time and I really don't know the reason why. I tried searching for a solution but web development has been an on and off thing for me and I don't understand some of the explanations :/ Any help would be appreciated.
EditOne: had to update the html, still not working.
The HTML:
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<title>Bryan the Lion</title>
</head>
<body>
<script type="text/javascript">
function go_One(){
var divPosition = $('.test1').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<script type="text/javascript">
function go_Two(){
var divPosition = $('.test2').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<script type="text/javascript">
function go_Three(){
var divPosition = $('.test3').offset();
$('#main_wrapper #main').animate({scrollTop: divPosition.top}, "fast");
}
</script>
<div id = "header">
<h1>Title</h1>
</div>
<div id = "main_box">
<div id = "designHex">
</div>
<div id ="nav">
<ul>
<li id = "Blog"></li>
<li id = "Contact"></li>
<li id = "Work"></li>
</ul>
</div>
<div id = "main_wrapper">
<div id ="main">
<div class = "test1">
<p>some div</p>
</div>
<div class = "test2" >
<p>some div2</p>
</div>
<div class = "test3" >
<p>some div3</p>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS: Of most importance here I think are main_wrapper, main, and test(1)(2)(3)
body{
height: 100% ;
background: url(images/gplaypattern.png);
}
#font-face {
font-family: "AlexBrush";
src: url(fonts/AlexBrush-Regular.ttf) format("truetype");
}
#header{
height: 100px ;
margin-bottom: 20px ;
}
#main_box{
margin: 0 auto ;
width: 80% ;
height: 52 0px ;
}
#main_wrapper{
margin-left: 45% ;
width: 67%;
overflow: hidden;
}
#main_wrapper #main{
width: 103%;
height: 500px ;
overflow-y:scroll;
}
.test1{
height: 500px ;
background: yellow;
}
.test2{
height: 500px ;
background: blue;
}
.test3{
height: 500px ;
background: gray;
}
#nav{
float: left;
width: 275px ;
height: 450px ;
margin-left: 3% ;
}
#nav ul li a{
display: block;
width: 100% ;
height: 150px ;
}
#nav ul li a:hover{
cursor: pointer;
}
#nav #Blog{
background: url(images/Blog.png);
}
#nav #Blog:hover{
background: url(images/Blog_hover.png);
}
#nav #Contact{
background: url(images/Contact.png);
}
#nav #Contact:hover{
background: url(images/Contact_hover.png);
}
#nav #Work{
background: url(images/Work.png);
}
#nav #Work:hover{
background: url(images/Work_hover.png);
}
#designHex{
background: rgba(255,255,255, 0.3);
height: 150px ;
width: 150px ;
position: absolute;
top: 50px ;
left: 5% ;
}
You need to take into account the scrollTop AND offset of the parent div:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Uafxz/2/
function scrollTo(selector) {
var offset = $(selector).offset();
var $main = $('#main');
$main.animate({
scrollTop: offset.top - ($main.offset().top - $main.scrollTop())
}, "fast");
}
I changed your code to use a single function (passing the target selector). I removed the second id selector as ids are unique and id lookup is the fastest type of lookup anyway (no point slowing it down with a second search).
Note: I had to hide your designHex element for the JSFiddle as it overlapped the first link.
You actually don't target the good element to animate scrollTop :
$('html,body').animate({scrollTop: divPosition.top}, "fast"); // instead of #main_wrapper #main
And as said in comment, your code contains a lot of errors or non-standard notation. For example, you use 3 script tag and 3 function that do the same job. That could be done with only one.
I have the following js script which (on its own it works fine really):
<style>
<!--
.hide { display: none; }
.unhide {
display: block;
text-decoration: none;
color: black;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hide')?'unhide':'hide';
}
}
</script>
</head>
<body>
<div id="col2">
<a href="javascript:unhide('content1');">
Title of Content</a>
</div>
<div id="col2">
<div id="content1" class="hide">
Body of content
</div>
</div>
Left alone, this produces output, at least. But I want to format this according to this css code:
a.unhide li {
background: #fff;
font: 20px century schoolbook, serif;
}
a.unhide li:hover {
background: #ddd;
text-decoration:underline;
padding: 3px 8px;
display: table-row;
line-height: 500%;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.hide {
font: 20 px century schoolbook, serif;
color: black;
text-decoration: none;
}
So how can I possibly "pair" all this? I've posted elsewhere and people have been stumped. Please help. I can induce changes into just about every aspect BUT the "unhide" portion of the js script. It does not cooperate with me ;( Basically I want a #ddd hover effect over the "unhide" link and all content to be in century schoolbook. Please help. Thank you.
Your problem might be that you have double IDs. IDs cannot be duplicate, they have to be unique. You can give them a class instead.
Try this instead:
HTML
<div>
<a href="javascript:unhide('content1');">
Title of Content
</a>
</div>
<div>
<div class="content1 hide">Body of content</div>
</div>
Javascript
function unhide(divID) {
var item = document.getElementsByClassName(divID)[0];
console.log(item);
console.log(item.className == divID + ' hide');
if (item) {
item.className = (item.className == divID + ' hide') ? divID + ' unhide' : divID + ' hide';
}
}
Demo here
In your CSS you are applying the hover to a a.unhide li:hover {. Is that what you want? I see no li in your code and the content1 in your code is a div not a a.