how to add subtle transiton between images? - javascript

I created this question and was able to get my slider to work. Now I need to add a smooth transition between images. I tried transition/ animate in CSS but that has a weird effect - there is a blackness between images. I think the transition property needs to be added to JS.
Current situation - there is stark difference as images change suddenly
Expectation - I want images to ease in and out.
Any help in this direction is greatly appreciated!
P.S. -> copy-pasting code here for ease of use:
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>


Use opacity instead of display to be able to add transition, and make your element position absolute to have them above each other:
let line = document.getElementById("line");
line.addEventListener("input", function(event) {
setNewImage(event.target.value);
});
function setNewImage(value) {
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image" + value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
}
.scrollbar input {
width: 380px;
}
ul {
position:relative; /*make them relative to ul not li*/
margin:0;
padding:0;
}
/* added this*/
ul li .image {
position:absolute;
top:0;
left:0;
}
/**/
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
opacity: 0;
transition:1s all;
}
.playing {
opacity:1;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li>
<div class="playing image image1"></div>
</li>
<li>
<div class="image image2"></div>
</li>
<li>
<div class="image image3"></div>
</li>
<li>
<div class="image image4"></div>
</li>
<li>
<div class="image image5"></div>
</li>
<li>
<div class="image image6"></div>
</li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max=6>
</div>
</div>

Related

How to cancel the increase of each next value in the for loop by the previous one (Making a slider)

I want to make a simple slider that will work by shifting position:right
I need to shift each picture by 250px, doing it through a cycle - the first picture shifts as needed, and all the others increase on each other, and go much further. Is it possible to somehow set the same indentation values in 250px to all elements in the loop?
codepen - https://codepen.io/dxxxxxxfly/pen/KKePaXW
<body>
<div class="slider_block">
<div class="btn_left"><button>Back</button></div>
<div class="slider_main">
<div class="slider_image">
<div class="imaga">
<img src="https://avatars.mds.yandex.net/i?id=6adf61533a32e0002e109f820f2895fa-5889001-images-thumbs&n=13&exp=1" alt="" class="image_slider">
<img src="https://dasart.ru/userdata/image/08/ab/08ab193e2f04fb47d02efef43ff53ce9.jpg" alt="" class="image_slider">
<img src="https://images.satu.kz/3628818_w640_h640_obves-hamann-tycoon.jpg" alt="" class="image_slider">
<img src="https://shop.ilovevalencia.ru/251-thickbox_default/arenda-kabrioleta-porsche-991-cabrio-v-valensii-ispaniya.jpg" alt="" class="image_slider">
</div>
</div>
</div>
<div class="btn_right"><button>Next</button></div>
</div>
<script src="script/script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.slider_block {
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.slider_image {
display: flex;
height: 123px;
width: 349px;
overflow: hidden;
}
.image_slider {
position: relative;
display: flex;
object-fit: cover;
width: 100%;
aspect-ratio: 480/169;
}
.btn_left > button,.btn_right > button {
border: none;
padding: 10px 15px;
margin: 25px;
cursor: pointer;
border-radius: 4px;
}
.imaga {
display: flex;
}
let right = 0;
const next = document.querySelector('.btn_right');
const image = document.querySelectorAll('.image_slider')
next.addEventListener('click', () => {
for(const items of image ) {
right += 250
items.style.right = right + 'px'
continue
}
})

Change content and target of anchor tag on click

I am using the onclick method on a link ("MENU") to display a div (#topmenu) when clicked, but how do I change the text of the anchor tag to "CLOSE" when div (#topmenu) appears and make the div disappear when "CLOSE" is clicked? Could it be achieved without using jQuery?
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
body * {
box-sizing: border-box;
}
#media only screen and (max-width: 1200px) {
.bar {
width: 80%;
margin: auto;
}
}
#media only screen and (min-width: 1201px) {
.bar {
width: 1000px;
margin: auto;
}
}
.bar {
display: flex;
justify-content: center;
position: relative;
}
.img img {
display: block;
}
.button span {
position: absolute;
right: 0;
top: 40%;
}
#topmenu {
display:none;
clear: both;
height:80vh;
vertical-align: middle;
text-align: center;
}
#topmenu ul {
list-style: none;
}
<div class="bar">
<div class="img">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png">
</div>
<div class="button">
<span style="float: right;">MENU</span>
</div>
</div>
<div id="topmenu">
<div style="text-align: left;">
<ul>
<li>About</li>
</ul>
</div>
</div>

Apply a class to the topmenu instead of changing the style.
function view(event){
event.preventDefault();
document.querySelector("#topmenu").classList.toggle('open');
if(event.target.innerHTML === "CLOSE")
event.target.innerHTML = "MENU"
else
event.target.innerHTML = "CLOSE"
}
You need to pass event to your onclick function
MENU
in your css
#topmenu.open{
display:block
}
function view(event){
document.querySelector("#menu").classList.toggle('red');
if(event.target.innerHTML === "Red")
event.target.innerHTML = "Blue"
else
event.target.innerHTML = "Red"
}
#menu{
width:100px;
height:100px;
background:blue;
transition:background 200ms;
}
#menu.red{
background:red;
}
<a onClick="view(event)" href="#">Red</a>
<div id="menu"></div>

There are many different ways that you can do this using vanilla JavaScript. You can do this easily by setting the a tag to have id="text" and changing the text with a conditional statement that determines what the current value of the text is.
If the text is currently "MENU", it should be changed to "CLOSE" and set display: block. If the text is currently "CLOSE", it should change it back to "MENU" and toggle the topmenu id to be invisible. You can also toggle the styling itself by using toggle.
if (document.getElementById('text').innerHTML === 'MENU'){
document.getElementById('text').innerHTML = 'CLOSE';
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
else {
document.getElementById('text').innerHTML = 'MENU';
document.getElementById('topmenu').setAttribute('style', 'visibility:hidden');
}
body * {
box-sizing: border-box;
}
#media only screen and (max-width: 1200px) {
.bar {
width: 80%;
margin: auto;
}
}
#media only screen and (min-width: 1201px) {
.bar {
width: 1000px;
margin: auto;
}
}
.bar {
display: flex;
justify-content: center;
position: relative;
}
.img img {
display: block;
}
.button span {
position: absolute;
right: 0;
top: 40%;
}
#topmenu {
display: none;
clear: both;
height: 80vh;
vertical-align: middle;
text-align: center;
}
#topmenu ul {
list-style: none;
}
<div class="bar">
<div class="img">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png">
</div>
<div class="button">
<span style="float: right;"><a id="text" href="#!" onclick="view()">MENU</a></span>
</div>
</div>
<div id="topmenu">
<div style="text-align: left;">
<ul>
<li>About</li>
</ul>
</div>
</div>
<script>
function view() {
if (document.getElementById('text').innerHTML === 'MENU') {
document.getElementById('text').innerHTML = 'CLOSE';
document.getElementById('topmenu').setAttribute('style', 'display:block');
} else {
document.getElementById('text').innerHTML = 'MENU';
document.getElementById('topmenu').setAttribute('style', 'visibility:hidden');
}
}
</script>

Try this solution using pure JavaScript.
var menu = document.getElementById("top-menu");
var btn = document.getElementById("menu-btn");
btn.addEventListener("click",function(e){
menu.classList.toggle("open");
if(e.target.textContent == "MENU"){
e.target.textContent = "CLOSE";
}
else {
e.target.textContent = "MENU";
}
});
#top-menu {
display: none;
}
.open {
display: block !important;
}
<div id="top-menu">My Meny</div>
MENU

Try this
let isDisplayed = false;
function view() {
isDisplayed = !isDisplayed;
document.getElementById('topmenu').style.display = isDisplayed?'block':'none';
document.querySelector('[onclick="view()"]').innerText = isDisplayed ? 'CLOSE':'MENU';
}

how to transition between images in a slider

I have a simple image slider with input range. I want to pick input range value and be able to fade-in and fade out images.
The problem is - my setup has to remain this way. I need to have img tags within li and need to have images as css background url under classnames.
How do i identify the current playing and transition to the next depending on where the slider is?
Requirement: If user goes to range 2 on slider, image2 should be visible. if user goes to range 4, image4 should be visible and so on.
I have been able to read the input range and locate the image with that image class.
How do I remove the "active" state of previous one and insert this new image?
Please find code attached
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
let currentImage = document.getElementsByClassName("playing");
let newImageClassName = "image"+value;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
I am getting the input range value. Help from here is greatly appreciated! Thanks!

I was able to solve it!
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Link back out from child HTML loaded in div to parent HTML

I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that was there previously. This is for an image gallery, with a main navigation (parent) and then the detailed view with smaller navigation (child). Here is the parent HTML, index.html (with CSS and JS embedded):
<html>
<head>
<title>Java Factory</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#container {
width: 1020px;
height: 634px;
}
ul#flavors {
list-style: none;
width: 1020px;
height: 634px;
position: relative;
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li {
position: absolute;
}
.wakey {
width: 309px;
height: 309px;
top: 0px;
left: 30px;
}
.smooth {
width: 309px;
height: 309px;
top: 0px;
left: 355px;
}
ul#flavors li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors li a {
text-indent: -9000px;
}
ul#flavors li a:hover {
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li.wakey a:hover {
background-position: -30px -640px;
}
ul#flavors li.smooth a:hover {
background-position: -355px -640px;
}
#top {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="web">
<div id="top">
</div>
<nav id="container">
<ul id="flavors" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="smooth">Smooth Caffeinator</li>
</ul>
</nav>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
And here is the child HTML:
<html>
<head>
<title>div container switch test</title>
<style type="text/css">
#coffee_return {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wakey">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container1 {
width: 1020px;
height: 624px;
background: url(images/coffee/wakey.jpg) no-repeat 0 0;
}
ul#flavors1 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors1 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors1 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors1 li a {
text-indent: -9000px;
}
ul#flavors1 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors1 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors1 li.smooth a:hover {
background-position: -157px 11px;
}
#coffee_return {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container1">
<ul id="flavors1" class="coffeenav">
<li class="smooth">Smooth Caffeinator</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="smooth">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container2 {
width: 1020px;
height: 624px;
background: url(images/coffee/smooth.jpg) no-repeat 0 0;
}
ul#flavors2 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors2 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors2 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors2 li a {
text-indent: -9000px;
}
ul#flavors2 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors2 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors2 li.smooth a:hover {
background-position: -157px 11px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container2">
<ul id="flavors2" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</body>
</html>
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
And the demo for this is: http://mmdsgn.com/divsample/5/ -- You'll see the return button appears at the top when you click either of the first two boxes (only ones that work right now) and I need that graphic button to call up the original div id content in the parent HTML.

Change the path on "href" to "../" instead of "x"
<img src="images/coffee/return_btn.jpg" border="0">
or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.
<img src="images/coffee/return_btn.jpg" border="0">
Edit:
Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)

You'll want to change your original script a bit:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
$('#coffee_return').on('click', function () {
$('#web').load('./ #web');
return false;
});
});
return false;
});
});
</script>
This basically says: After loading a section of coffee.html, look for a coffee_return button and add onclick behavior to re-load the original page into your #web section.
Also, change that href on your coffee_return button to # or JavaScript:void(0); since it's trying to load a document called "x" currently:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>

You cannot use same id on multiple elements, as you said
"
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
". This would give erroneous results. Rather, assign them a class and bind event with their class.

Categories

Resources