Sidebar fixed panel with fixed content block

Sidebar fixed panel with fixed content block - javascript

I have a sidebar which is position:fixed; and overflow:auto; - this causes the scroll to happen within the fixed element.
Now when the sidebar is turned on, that element does not move, its just static on the page.
What i want to achieve: I would like to fix .super-image-thumb inside the scroll element, so when the scroll happens, the thumbnails at the top are fixed.
I have tried a javascript fix as well but its still not working. Any recommendations?
jQuery(function($) {
function fixDiv() {
var $cache = $('.super-image-thumb');
if ($('.sliding-panel-content').scrollTop() > 100)
$cache.css({
'position': 'fixed',
'top': '10px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
});
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
-webkit-transform: translateY(-115%);
-ms-transform: translateY(-115%);
transform: translateY(-115%);
transition: all .25s linear;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.sliding-panel-content.is-visible {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>

Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/
function fixDiv() {
$('.super-image-thumb').css({
'top': $('.sliding-panel-content').scrollTop()+'px'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();

Javascript for that will only make the things more complicated.
It is all about CSS, the position: fixed or absolute is always based on the first ancestor with position: relative, so you should play with it.
I would remove the jQuery code and add this CSS:
.slide-content {
position:relative;
}
.super-image-thumb {
position:fixed;
background: #FFF;
top:0;
width:100%;
z-index: 2;
}
.main-image-container {
position:absolute;
top:85px;
z-index: 0;
}
As in the jsfiddle

It looks like transitions and position: fixed does not work together in all browser, when you remove them, code works fine. Some solution for this you can find in css3 transform reverts position: fixed
I created snippet without transitions and also I removed JS part (I think is not needed), and propose CSS-only solution. It is not finished to the end, it needs some more aligments - but you can do it yourself - the way for solving your problem is clear, I think.
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.super-image-thumb {
position: fixed;
top: 10px;
}
.main-image-container {
margin-top: 100px; // should be same as thumb height
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>

Related

JavaScript click event is not changing the style

I'm making a toggle sidebar where onClick of button showmenu funtion is not working. I'm trying to change the style of the sidenav from display:none to display:block but when I click the button nothing happens. I've tried with an alert and that works but not with the style.
Please help me find out where is the problem?
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(sidenav.style.display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>

Your function working. Only change this line. Add style on nav tag style="display: none" and set default display: none or block.
<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">

You need to remove the display:none from the CSS classes.
But really, you're taking the wrong approach here. Your CSS and JavaScript should be separated from your HTML.
See the comments inline below:
// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript
// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");
btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);
// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);
function showMenu() {
// Just toggle the usage of the pre-made hidden class
sideNav.classList.toggle("hidden");
overDiv.classList.toggle("hidden");
console.log("function showMenu called");
}
function noDisponible(event){
// Make sure it was the right type of sideNave item
if(event.target.classList.contains("noDisponible")){
// Do work here
console.log("function noDisponible called");
} else if(event.target.classList.contains("logout")){
// Do logout here
logout();
}
}
function overlay(event){
// Do work here
console.log("function overlay called");
}
function logout(event){
console.log("function logout called");
}
.hidden { display:none; }
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button type="button" id="menu-div"></button>
<nav class="sidenav hidden" id="sidenav">
<a class="item noDisponible">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png">
</a>
<a class="item noDisponible" href='mapa.html'>
<label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
<img class="icon" src="images/iconos/mapas.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png">
</a>
<a class="item logout" id="logout">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png">
</a>
</nav>
</header>
<div id="overlay" class="overlay hidden">OVERLAY HERE</div>
<div id="content"></div>

Set the style of sidenav programatically outside of the function:
let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";
function showmenu() {
let overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if (sidenav.style.display == "block") {
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color: #ffffff;
left: 0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay {
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png" />
</a>
<a class="item" href='mapa.html'>
<label class="menu-txt">Mapas</label>
<img class="icon" src="images/iconos/mapas.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png" />
</a>
<a class="item" id="logout" onclick="logout();">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png" />
</a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()">Overlay</div>
<div id="content">Content</div>

You need to use window.getComputedStyle to get the css properties instead of element.style.
Element.style only gives the inline styles provided but window.getComputedStyle will give you the final styles provided to the element. element.style will give you the inline styles only and that's why to make it work, you need to add inline style display: none as suggested by #BCM.
You can read more here
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (window.getComputedStyle(sidenav).display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(window.getComputedStyle(sidenav).display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Also, for writing this type of code, you should be following #Scott Marcus's approach. It is much better and cleaner.

How to make slide toggle on click?

I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});

you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>

Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>

Click in a button overwritten by an image

In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!

To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.

you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here

You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>

sticky div in page header overlapping page content

I have a "sticky" div that starts in an absolute position and then switches to fixed at top: 0 once the window begins to scroll (I am using it as a navigation bar), but I also have "in-page" links.
My problem is that the sticky overlaps the other content in the body, in other words the top 200px (the size of the navbar) become hidden (beneath the sticky navbar) as soon as they begin to scroll down.
Is this a CSS problem or a JavaScript problem? How can I fix it?
http://jsfiddle.net/b26g1ztu/
javascript:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
HTML:
<!--navigation with logos-->
<div id="sticky-anchor"></div>
<div id=sticky>
<a href="#lccpost">
<img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg">
</a>
</div>
<!--Articles-->
<!--Nav pics-->
<section>
<div id=lcc1>
<a name="lccpost"><img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg"></a>
</div>
</section>
<!--titles-->
<section>
<div id=submissions><h2>Submissions</h2></div>
<!--single submissions-->
<div class=name>
<h3>John Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Shelby%20Schueller.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jane Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Sarah%20Spohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jason Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Jeremy%20Kohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
CSS:
body
{
background-color: RGB(95,0,0);
}
#sticky
{
position:absolute;
top:150px;
background-color: RGB(65,0,0);
color:White;
border-style:solid;
border-color:RGB(255,215,0);
padding: 5px;
width: 500px;
height: 150px;
overflow: hidden;
overflow-y: scroll;
}
#sticky.stick {
position: fixed;
top: 0px;
bottom:auto;
z-index: 10000;
}
#lcc1
{
position:absolute;
top: 350px;
left: 20px;
}
#submissions
{
position:absolute;
top: 320px;
left: 240px;
color:White;
}
.name
{
position:relative;
top:400px;
left: 150px;
color:White;
}
.subs
{
display:inline-block;
position:relative;
top: 330px;
left: 270px;
border-style: dashed;
border-color:Red;
padding:5px;
}

I think your problem is a bit JS and a bit CSS.
You're using JS/JQuery to toggle between two CSS classes and essentially toggling between absolute and fixed positioning. Further you are using top to make your decisions in JS, but they evaluate to different values when you are in absolute or fixed positioning.
Finally, i'd recommend that you either (a) just stick with fixed positioning and adjust the location (top/left) onscroll or (b) when you are in .stick mode add padding-top:300px to the body or margin-top:300px on body section:first-child

Logging an attribute from CSS Modal

My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.

You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');

Develop Reference

JavaScript is the programming language of the Web.

Sidebar fixed panel with fixed content block - javascript

Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/ function fixDiv() { $('.super-image-thumb').css({ 'top': $('.sliding-panel-content').scrollTop()+'px' }); } $('.sliding-panel-content').scroll(fixDiv); fixDiv();

Related

JavaScript click event is not changing the style

How to make slide toggle on click?

Click in a button overwritten by an image

sticky div in page header overlapping page content

Logging an attribute from CSS Modal

Categories

Resources