Responsive sticky footer not working over full screen slideshow

Responsive sticky footer not working over full screen slideshow - javascript

I am trying to place a responsive sticky footer over a full screen slideshow. For the sticky footer I am using this solution ( a Javascript and CSS solution ) Sticky footer link. Slideshow is a Javascript slideshow. But I am not able to get the sticky footer to work with the slideshow. Once I remove the slideshow, the sticky footer works!. I am not sure what is going on here but I do think that it has to do something with the absolute positioning of the footer. Here is a live link to the problem link with the problem Is there a way I can make the sticky footer work ?
Here is my CSS and HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<link href="/styles.css" rel="stylesheet" type=
"text/css">
<script src="/jquery-2.1.4.min.js" type=
"text/javascript">
</script>
<script src="jquery-bgstretcher-3.3.1.min.js" type=
"text/javascript">
</script>
<style>
.bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/* Compatibility with old browsers */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
.footer{
margin: 0 auto;
text-align:center;
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}
/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;
}
.nav li {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;
}
p{color:#FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul class="nav">
<li>
HOME
</li>
<li> MY GALLERIES
</li>
<li> SEARCH
</li>
<li> ABOUT ME
</li>
</ul>
</nav>
</header>
<article>
<section>
<div class="intro">
<p>Welcome to my gallery!</p>
<div class="underline"></div>
</div>
</section>
</article>
<script type="text/javascript">
jQuery(function($){
$("body").bgStretcher({
images: ["1-1.jpg", "2-1.jpg"],
imageWidth: 1024,
imageHeight: 768
});
});
</script>
<div class="push"></div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoCmspageForm" method="get" name="PhotoCmspageForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2015 rajeevthomas.com</p>
</div>
</div>
<script>
$('a').each(function() {
if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
$(this).attr('href', $(this).attr('href') + '/');
}
});
</script>
<script>
var bumpIt = function() {
$('body').css('margin-bottom', $('.footer').height());
},
didResize = false;
bumpIt();
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if(didResize) {
didResize = false;
bumpIt();
}
}, 250);
</script>
</body>
</html>

Related

fadeOut () hides all the header and I just want to hide the h1

I'm trying to hide the h1 when the scroll is greater than 850, but when it goes below 850 also hides the nav.
If I hide the nav without hiding the h1, then it doesn't return with the fadeIn ()
I don't understand why the nav is hidden, if I ask you to just hide the id '#marca'.
HTML and CSS
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.header {
position: fixed;
margin-top: -23px;
width: 100%;
height: 70px;
}
.marca{
display: block;
}
h1{
text-align: center;
padding-top: 15px;
margin-bottom: 0;
}
h1 a{
text-decoration: none;
color: black;
}
.vacio{
height: 3000px;
}
/* MENU HEADER */
.menu-negro,
.menu-blanco{
margin-top: -35px;
/* display: flex;
justify-content: flex-end; */
float: right;
}
.menu-negro a,
.menu-blanco a,
.menu-negro img,
.menu-blanco img{
margin-right: 10px;
}
.menu-blanco{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/proba.js" charset="utf-8"></script>
</head>
<body>
<header class="header">
<h1 id="marca">Marca</h1>
<nav id="menu-negro" class="menu-negro">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
<nav id="menu-blanco" class="menu-blanco">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
</header>
<div class="vacio">
</div>
</body>
</html>
This is my jquery code.
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
marca.fadeIn()
}
})
})

The problem is not that the fadeOut is hidding the entire nav, but this
when the h1 marca is hidden, the menu-negro stop floating to him, and start floating to the parent element, so it just goes up because 2 things, the header has a margin-top: -23px; and the menus have a margin-top: -35px;, what you could do is to add a class to change the margin of the nav like
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
$('.menu-negro').addClass('no-margin-top');
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
$('.menu-negro').removeClass('no-margin-top');
marca.fadeIn()
}
})
})
and in the css just add
.menu-negro.no-margin-top {
margin-top: 23px;
}

Javascript(0) along with external Javascript in HTML5

I'm wondering if could anyone help me. I'm stuck with this code where my script toggles the button when I click it and when I click outside the toggled window, it'll disappear, after 2 hours of searching and testing out. I still can't figure it out.
currently the script doesn't even work where the toggled menu doesn't even come out.
When running external JSscript like the TopMenuScript.js
it says referance error, function not defined
ReferenceError: DropdownFunction is not defined
HTML5
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1 {
width: 1021px;
}
.TopPanel {}
body,html{
height:100%;
width:100%;
overflow:auto;
margin:0;
padding:0;
}
.TopBannerImage {
background:url(../Images/topPanel_3croped.png) center;
height:315px;
min-width:100%;
background-repeat:no-repeat;
}
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
<ul id="ul_Top">
<li><a class ="active" href="#home">Home</a></li>
<li style="float:right !important">News</li>
<li class ="dropdown">
Dropdown
<div class="dropdown-content" id="MenuDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="TopBannerImage">
</div>
<!--All Site Scripts -->
<!-- <script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
</body>
Javascript
<script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
External Script link with the same script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
css
.TopPanel
{
border-style:ridge;
border-width:2px;
border-color:black;
margin:auto;
padding: 0px;
text-align: center;
background-size:cover;
background-image url(../Images/background.jpg);
background-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
height: 49px;
}
li{
float:left;
}
li a, .dropbin {
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
background-color:black;
}
li.dropdown {
display:inline-block;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
min-width:160px;
box-shadow : 0px 8px 16px 0px RGBA(0,0,0,0.2)
}
.dropdown-content a {
color:black;
padding:12px 16px;
text-decoration: none;
display:block;
}
.dropdown-content .dropdown-content {
display:block;
}
body{margin:0;padding:0;}
.show {display:block;}

i've cleaned up and fixed everything for you. Ran it in visual studio 2015 and it works just fine, fixed your UI as well. Main cause of problem, Syntax errors and Spelling errors.
you wanna make sure no syntax errors occurs in the javascript. one wrong synxtax and it'll cause it. i believe we're seeing errors that we're not seeing on your page.
in coding it's case sensitive
-continue coding regardless how much you fail as there's no end in learning
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>
Your HTML5 code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1 {
width: 1021px;
}
.TopPanel {}
body,html{
height:100%;
width:100%;
overflow:auto;
margin:0;
padding:0;
}
.TopBannerImage {
background:url(../Images/topPanel_3croped.png) center;
height:315px;
min-width:100%;
background-repeat:no-repeat;
}
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
<ul id="ul_Top">
<li><a class ="active" href="#home">Home</a></li>
<li style="float:right !important">News</li>
<li class ="dropdown">
Dropdown
<div class="dropdown-content" id="MenuDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="TopBannerImage">
</div>
<!--All Site Scripts -->
<!-- <script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script> -->
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="JavaScript/TopMenuScript.js" ></script>
</body>
</html>
Your JavaScript Code
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Your css code
.TopPanel
{
border-style:ridge;
border-width:2px;
border-color:black;
margin:auto;
padding: 0px;
text-align: center;
background-size:cover;
background-image url(../Images/background.jpg);
background-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 49px;
}
li{
float:left;
}
li a, .dropbin {
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
background-color:black;
}
li.dropdown {
display:inline-block;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
min-width:160px;
box-shadow : 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a {
color:white;
padding:12px 16px;
text-decoration: none;
display:block;
text-align:left;
}
.dropdown-content .dropdown-content {
display:block;
}
body{margin:0;padding:0;}
.dropdown-content a:hover {background-color:#f1f1f1}
.show {display:block;}
#BannerImage {
background-image: url('/Images/topPanel_3croped.png');
width:100%;
height:100%;
background-repeat:no-repeat;
}
#my-div{
margin-left:auto;
margin-right:auto;
}

Tumblr back to top button not working

I'm fairly familiar with HTML and CSS, but for the life of me i cannot get this 'back to top' button to work on my tumblr page. I would really appreciate a keen eye to help me out here. I have added a JQuery code to enable the text to fade in and out when scrolling (infinite scroll past 100).
Thanks very much for your help.
L
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Video Corner Fold" content="red">
<meta name="font:Font" content="'BrownBold'">
<meta name="if:Show Captions" content="0"/>
<meta name="if:Uppercase Links" content="0">
<meta name="if:Fade On Hover" content="0">
<meta name="if:Show Tags on Index Page" content="0">
<meta name="image:header" content="0"/>
<style type="text/css">
#header {
width:100%;
height:100%;
background: url('{image:header}')no-repeat;
position:fixed;
margin: 15px 50% 0 50%;
top:0px;
left: -300px;
right: -300px;
z-index:9999;
}
body {
background-color:{color:Background};
font-family:{font:Font};
color:{color:Text};
font-size:17px;
line-height:25px;
}
a {
padding-bottom:2px;
color:{color:Text};
text-decoration:none;
border-bottom:2px solid;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto;
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
margin: 0px 30% 0 16.3%;
bottom:20px;
z-index:5000;
}
.archive {
position:fixed;
margin: 0px 20px 0 30%;
bottom:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
margin: 0px 0px 0 60%;
bottom:20px;
z-index:5000;
}
#toTop {
width:100%;
margin: 0px 0px 0 43%;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}
.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
</head>
<body>
<div id="header"></div>
{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title">{Title}</div>
<div class="archive">Archive</div>
<div class="message">Message</div>
<div class="follow">{block:PermalinkPage}{block:Posts}Reblog / {/block:Posts}{/block:PermalinkPage}Follow</div>
<div class="random">Random</div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
<div id="wrapper">
{block:Posts}
<div id="post"
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
>
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}
{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>— {Source}</p>
{/block:Source}
{/block:Quote}
{block:Photo}
{block:IndexPage}<div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/></div>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}
{block:Video}
{block:IndexPage}<div class="corner"></div>{/block:IndexPage}
<div id="video">
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}
{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<img src="{PhotoURL-HighRes}">{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}
{block:Audio}
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}
{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
</div>
{/block:Posts}
{block:NextPage}<div id="page-nav">{/block:NextPage}
</div>
</body>
</html>

The #header element sits above .archive, #toTop and .random due to its higher z-index (5000 / 9999).
If you make the following change, #toTop is clickable and works as desired:
#header {
width: 100%;
height: 100%;
background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
position: fixed;
margin: 15px 50% 0 50%;
top: 0px;
left: -300px;
right: -300px;
z-index: 4999;
}
There is another error though. It seems two versions of jQuery are being requested:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
The later, http://masonry.desandro.com/js/jquery-1.7.1.min.js, fails as it can't be found. I can't see why you need two versions of jQuery or why you are hot linking.
Either use a CDN (like the first link) or upload the javascript directly to Tumblr's own CDN.

Instead of messing around with scrollTop, just use a link.
Scroll to Top
This will take you straight back to the top. Admittedly no animations but if you're just looking for basic functionality then it's perfect.

Gallery slide show ,motion pictures are not moving

I am try to build Gallery slide show.
I am new in javscript and jQuery.
1 - I don't see any mottion moving and I don't no why?
2 - I can not center the image center of the div, the left side there is linkage.
Thanks for any help and guidance on the subject.
Here we can see code that work good.
Gallery
My code HTML file:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 30;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-300px'
});});
});
};
// end hide -->
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item2" src="p2.png">
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item3" src="p3.png">
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item4" src="p5.png">
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
My code CSS file:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
height: 215px;
width: 980px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 284px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-316px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 10px 0px 0px 10px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}

when you do the animate, you are applying CSS styles to the properties. therefore, in the case of positioning, you have to indicate the units, like:
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent + 'px'
}...

photo gallery with description

I'm trying to build an image gallery with description when moving over the image.
The code looks good but nothing happens when you move the mouse cursor over the image.
My problem is when I running the code the "<div class='description_content'>" does not appear.
Thx for any help.
good examle
wrong code
HTML CODE:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-302'+'px'
});});
});
//********************************************** div.description
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('#portfolio-tiles li').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class description
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
};<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
//$('#stop').click( function(){
//clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item1" src="p2.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item1" src="p3.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item1" src="p5.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
CSS CODE:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 220px;
width: 652px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
position:relative;
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 2.5px 0px 2.5px;
width: 309px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-302px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 15px 15px 15px 15px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}

You can use $('li').hover() and $(this).find('.description') to achieve this.
Replace this piece of code...
$('#portfolio-tiles li').hover(function(){
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).children('.description').stop().fadeTo(500, 0);
});
with this...
$('li').hover(function(){
$(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).find('.description').stop().fadeTo(500, 0);
});

Develop Reference

JavaScript is the programming language of the Web.

Responsive sticky footer not working over full screen slideshow - javascript

Related

fadeOut () hides all the header and I just want to hide the h1

Javascript(0) along with external Javascript in HTML5

Tumblr back to top button not working

Gallery slide show ,motion pictures are not moving

photo gallery with description

Categories

Resources