I'm using stickjs script and can't seem to call "options" method in code. I've pasted it below.
I'm not sure if I need first initialize "options" ie. .sticky(options ({options_here, option_2});
I've tried both ways, but it is till not calling another css class when the div sticks to top:
You can see I've done for 2 options: { topSpacing: 0, className: "#newheader" } - #newheader should be showing a different color per CSS.
What am I missing? Thanks!
<html>
<head>
<title>Sticky Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#header").sticky({ topSpacing: 0, className: "#newheader" })
});
</script>
<style>
body {
height: 10000px;
padding: 0;
margin: 0;
}
#header {
background: #bada55;
color: white;
font-family: Droid Sans;
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
#newheader {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>This is test this is text this is text at the top.</p>
<div id="header">
<p>This is the sticky thingy that is really cool.</p>
</div>
<p>This is test this is text this is text at the bottom.</p>
</body>
</html>
The ClassName property adds a CLASS-name to the element. So its no ID!! Try:
$("#header").sticky({ topSpacing: 0, className: "newheader" });
And alter your css like:
.newheader {
background: #FF0004;
.....
}
UPDATE:
After reading the Sticky documentation it was clear... The new class will be added to the parent element. So you must change you css cascading to:
.newheader #header {
background: #FF0004;
color:#0056F2;
font-family: Droid Sans;
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
width:100%;
box-sizing:border-box;
}
That will save your day!
Related
Got an issue and no ideas for solving this.
I have some link in my HTML, to which I apply :hover and :focus+:active CSS styles (here's example):
https://codepen.io/Auditive/pen/WVrRKJ
When I'm clicking such link by mousewheel (for opening in other tab) - the :focus & :active CSS styles remain.
I'm looking for ways to remove :focus & :active styles from clicked link.
For example, maybe smth like:
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("click", function() {
link.blur();
});
}
Thanks in advance.
First of all, getElementsByTagName returns an HTML Collection which doesn't have an addEventListener property. You need to use a specific HTML node like link[0] (you could use a more specific query like giving the link an id and use getElementById).
Most importantly, the middle click doesn't fire a click event, but it does fire a mouseup event so you can use the which property of the event to find out if the mouseup comes from the middle click button.
Note: In order to make a snippet in this answer I used a self executing function to call the RemoveFocus function.
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');
body {
background: #282828;
}
p {
font-family: 'Raleway', sans-serif;
text-align: center;
font-size: 30px;
font-weight: 300;
color: #8f8;
}
.block {
width: 400px;
height: 50px;
border: 1px solid #787878;
border-radius: 5px;
margin: 0 auto;
text-align: center;
padding-top: 1%;
margin-top: 2.5%;
box-shadow: 0px 0px 4px 0px #fff8;
}
a, a:link, a:visited {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 300;
color: #fff;
text-decoration: none;
}
a:hover, a:link:hover, a:visited:hover {
font-weight: 300;
background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
text-shadow: 0px 0px 1px #fff4;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*https://loading.io/spinners/comets/lg.comet-spinner.gif*/
a:focus, a:link:focus, a:visited:focus,
a:active, a:link:active, a:visited:active {
color: transparent;
background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
background-size: 20%;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-clip: border-box;
text-shadow: none;
}
<body>
<p />Click on link with mousewheel
<div class="block">
<a href="https://google.com" />Link 2 Google
</div>
<script>
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link[0].addEventListener("mouseup", function(e) {
if( e.which == 2 ) {
this.blur();
}
});
}
(function() {
RemoveFocus();
})();
</script>
</body>
First you need get first element of array
var link = document.getElementsByTagName("a")[0];
and then handle two events:
link.addEventListener("click", clickHandle);
link.addEventListener("auxclick", clickHandle);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p />Click on link with mousewheel
<div class="block">
<a href="https://www.google.ru/" />Link 2 Google
</div>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap');
body {
background: #282828;
}
p {
font-family: 'Raleway', sans-serif;
text-align: center;
font-size: 30px;
font-weight: 300;
color: #8f8;
}
.block {
width: 400px;
height: 50px;
border: 1px solid #787878;
border-radius: 5px;
margin: 0 auto;
text-align: center;
padding-top: 1%;
margin-top: 2.5%;
box-shadow: 0px 0px 4px 0px #fff8;
}
a,
a:link,
a:visited {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 300;
color: #fff;
text-decoration: none;
}
a:hover,
a:link:hover,
a:visited:hover {
font-weight: 300;
background-image: linear-gradient(to right, #fff 42.5%, #4285f4, #ea4336, #fbbc04, #4285f4, #34a853, #ea4336);
text-shadow: 0px 0px 1px #fff4;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*https://loading.io/spinners/comets/lg.comet-spinner.gif*/
a:focus,
a:link:focus,
a:visited:focus,
a:active,
a:link:active,
a:visited:active {
color: transparent;
background-image: url(https://loading.io/spinners/comets/lg.comet-spinner.gif);
background-size: 20%;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-clip: border-box;
text-shadow: none;
font-weight: bold;
}
</style>
<script>
var link = document.getElementsByTagName("a")[0];
function clickHandle(event) {
//event.preventDefault();
link.blur();
return;
}
link.addEventListener("click", clickHandle);
link.addEventListener("auxclick", clickHandle);
</script>
</body>
</html>
didn't tested the code, but i think this will work:
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("click", function(e) {
if( e.which == 2 ) {
e.preventDefault();
link.blur();
}
});
}
add addEventListener "wheel" or "mousewheel" and do what you do for example for your question the use
function RemoveFocus() {
var link = document.getElementsByTagName("a");
link.addEventListener("wheel", function() {
link.blur();
});
}
then put code what you want
I'm creating a movie website for my UI/UX class but seem to have some broken scripts. I don't know the best way to format this, since I have multiple scripts,
I first put in CircleType.js to make the "BUDAPEST" arch like on the movie posters. That was all good and fine until I also put a jQuery tools overlay so that when you click on the "WATCH THE TRAILER" it overlays the background and opens an external link while in that window. I entered that in but it makes the text "BUDAPEST" not arch.
For background, I am pretty solid in HTML and CSS but pretty new to Javascript and jQuery. There is probably something small I'm doing wrong but I just don't have the knowledge to see it. Let me know if you have any questions, and thank you for any help in advance.
<script language="javascript">
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'black',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
font-size: 11px;
font-style: normal;
margin: 0;
font-family: 'Copse', serif;
}
/*****************BACKGROUND**********/
body {
background-color: #575964;
height: 100%;
width: 100%;
}
#overlay {
background-image: url(overlay.png);
color: #efefef;
height: 450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height: 441px;
overflow-y: auto;
}
/*****************TITLE*************/
h2, h3 {
text-align: center;
color: #ffda85;
font-family: 'Halant', serif;
}
h2 {
font-size: 50px;
font-weight: 300;
}
h2.grand {
margin-top: -20px;
}
h3 {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
}
h3.the {
margin-top: 60px;
}
h3.hotel {
margin: -50px 0 0 0;
}
#circle {
font-family: 'Halant', serif;
font-size: 80px;
margin: -50px 0 0 0;
font-weight: 300;
text-align: center;
color: #ffda85;
}
/****************BUTTONS***************/
div.container{
width: 100%;
margin-top: 50px;
}
div#left {
width: 600px;
margin-top: 120px;
margin-left: 80px;
float: left;
}
div#right {
margin-left: 600px;
margin-right: 100px;
margin-top: -40px;
float: right;
}
div.clear {
clear: both;
}
button {
font-family: 'Copse', serif;
background-color: Transparent;
color: #000;
text-decoration: none;
border: 1px solid #fff;
outline: none;
padding: 15px 90px;
font-size: 15px;
letter-spacing: 5px;
text-align: center;
}
a:hover {
background-color: rgba(255, 255, 255, 0.5);
padding: 19px 0 16px 0;
font-weight: 600;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
<title>GRAND BUDAPEST HOTEL</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="circletype.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
</head>
<body>
<h3 class="the">THE</h3><br>
<h2 class="grand">GRAND</h2><br>
<div id="circle">BUDAPEST</div>
<script>
$('#circle').circleType({
radius: 384
});
</script>
<h3 class="hotel">HOTEL</h3><br>
<div id="container">
<div id="left">
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<button type="button">MEET THE CAST</button>
</a>
</div>
<div id="right">
<a href="trailer.htm" rel="#overlay" style="text-decoration:none">
<button type="button">WATCH THE TRAILER</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
</div>
</body>
</html>
Start by making these changes:
<script language="javascript">
$(document).ready(function () {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'black',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
font-size: 11px;
font-style: normal;
margin: 0;
font-family: 'Copse', serif;
}
/*****************BACKGROUND**********/
body {
background-color: #575964;
height: 100%;
width: 100%;
}
#overlay {
background-image: url(overlay.png);
color: #efefef;
height: 450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height: 441px;
overflow-y: auto;
}
/*****************TITLE*************/
h2, h3 {
text-align: center;
color: #ffda85;
font-family: 'Halant', serif;
}
h2 {
font-size: 50px;
font-weight: 300;
}
h2.grand {
margin-top: -20px;
}
h3 {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
}
h3.the {
margin-top: 60px;
}
h3.hotel {
margin: -50px 0 0 0;
}
#circle {
font-family: 'Halant', serif;
font-size: 80px;
margin: -50px 0 0 0;
font-weight: 300;
text-align: center;
color: #ffda85;
}
/****************BUTTONS***************/
div.container{
width: 100%;
margin-top: 50px;
}
div#left {
width: 600px;
margin-top: 120px;
margin-left: 80px;
float: left;
}
div#right {
margin-left: 600px;
margin-right: 100px;
margin-top: -40px;
float: right;
}
div.clear {
clear: both;
}
button {
font-family: 'Copse', serif;
background-color: Transparent;
color: #000;
text-decoration: none;
border: 1px solid #fff;
outline: none;
padding: 15px 90px;
font-size: 15px;
letter-spacing: 5px;
text-align: center;
}
a:hover {
background-color: rgba(255, 255, 255, 0.5);
padding: 19px 0 16px 0;
font-weight: 600;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
<title>GRAND BUDAPEST HOTEL</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="circletype.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
</head>
<body>
<h3 class="the">THE</h3><br>
<h2 class="grand">GRAND</h2><br>
<div id="circle">BUDAPEST</div>
<script>
$('#circle').circleType({
radius: 384
});
function meetCast() {
// Meet the cast
}
function watchTrailer() {
// Start the trailer
}
</script>
<h3 class="hotel">HOTEL</h3><br>
<div id="container">
<div id="left">
<button type="button" onclick="meetCast()">MEET THE CAST</button>
</div>
<div id="right">
<button type="button" onclick="watchTrailer()">WATCH THE TRAILER</button>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
</div>
</body>
</html>
I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help
I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun
I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.
I've been implementing this awesome JS/Jquery expand/collapse function into a page, but it's got a little kink to it that I'd like to fix.
Specifically, the problem is that when you first click on the link Websites ▾, the menu expands nicely, but just before it's done it has a little jump to it, which I'd like to remove. The jump doesn't occur in the JS Fiddle, nor does it occurr when clicking to expand/collapse after the intial click, so I suspect my CSS might be the issue, but I'm just not sure.
Any help is greatly appreciated. Thanks for your time.
The JS was borrowed from this JS Fiddle
And here's a test page I've published
Additionaly, here's all the code (stripped of some excess content to simplify)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/webfonts.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/expandcollapse.js"></script>
</head>
<div class="container">
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
<div class="content">
<p>Human Rights Symbols</p>
<p>
Cornerstone Parks
</p>
<p>
Eileen Fisher (Video Page)
</p>
<p>
Suzy B Fine Jewelry*
</p>
<p class="para2">Niki International</p>
<p class="para2">Eliza's Eyes</p>
<p class="para2">Fabrikant-Tara</p>
<p class="para2">Branded Jewelry</p>
</div>
</div>
<h2>*To view password-protected links,
please request access by phone or email.
</h2>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.container {
/* Expand Collapse Styling */
width:100%;
}
.container div {
width:100%;
}
.container .header {
cursor: pointer;
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.container .content {
display: none;
}
#LightSlateGrayBar {
/* Color: LightSlateGray, #778899, hsl(210, 22%, 60%) */
width: 100%;
height: 30px;
background-color: rgba(119, 136, 153, 0.95);
}
.TopBar {
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.BottomBar {
position: fixed;
bottom: 0;
left: 0;
box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.25);
}
#box {
min-width: 600px;
max-width: 600px;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
text-align: center;
}
p {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.para2 {
color: LightGray;
}
.paraBlue {
font-size: 18px;
color: #25438d;
margin-top: 26px;
}
h1 {
font-family: 'rokkittregular', arial, helvetica, sans-serif;
font-size: 42px;
color: #25438d;
margin-bottom: -20px;
}
.hyphen {
font-size: 34px;
letter-spacing: -2px;
}
h2 {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: .5px;
line-height: 12px;
color: gray;
}
a:link {
transition: all 1s linear 0;
transition-timing-function: ease-in;
text-decoration:none;
color: gray;
}
a:visited {
text-decoration:none;
color: #8F8F8F;
}
a:hover {
text-decoration:underline;
color: black;
}
a:active {
text-decoration:none;
color: lightGray;
}
.heading {
cursor: pointer;
position: relative;
}
JS
// JavaScript Document
$(function() {
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.html(function () {
//change text based on condition
return $content.is(":visible") ? "Websites ▴" : "Websites ▾";
});
});
});
});
Initially the content inside your div#header is
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
From the first toggle onwards it'll change to
Websites ▾ // only the arrows character codes changes on further clicks, structure is same
without <span> and <p> elements, causing a difference in size, which in turn causes the jump. Returning the proper html content as the initial state like
return $content.is(":visible") ? "<span><p> Websites ▴</p></span>" : "<span><p> Websites ▾ </p></span>";
or changing the content initially to
<div class="header">
Websites ▾
</div>
Should fix the problem..