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.
Related
I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?
I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>
You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})
What I Am Making
On my site, the navigation bar does not start at the top of the page, instead it is a little way down the page, under the header/banner. When the user scrolls down past the nav bar, I change it's position to fixed so that it now stays visible at the top of the page as they scroll through the rest of the content.
I want this to look really seamless, so, when the navbar becomes fixed, I add some padding to the main content to stop it from jumping up into the space where the navbar was. I'm doing all this in my javascript, using jQuery to add classes ands styles to particular elements.
The Problem
In Safari, my code is working perfectly! The problem I have is that on Chrome and Firefox it seems like I need to add more padding than I do on Safari. On Chrome and Firefox the content is still jumping up slightly after the navbar becomes fixed. Whilst trying different values, I discovered that on those browsers, I need exactly 20 extra padding to make the transition seamless, but then the content jumps up too far on Safari!
Why is this extra padding needed on some browsers but not Safari?
If anyone can help I would be truly grateful because this is really bugging me! I have no idea why this is behaving differently in different browsers.
Here is a code snippet. I've tried to minimise the amount of code needed to recreate the issue but the CSS is a bit verbose because I thought I'd better include it all in case there's something there that is causing the issue.
----- EDIT -----
OK I discovered that the element which is causing the problem is my .navbar-button which I didn't include in my original snippet. I have added it in now. This is the thing which is behaving differently in different browsers.
I had to add margin to this element because it was not positioning correctly in Chrome or Firefox without it, whereas in Safari it was positioned just fine.
This extra margin is what is causing the issue.
$(document).ready(function() {
var $navBar = $(".navbar");
$(window).scroll(handleScroll);
function handleScroll() {
fixNavbarToTopIfNecessary();
}
function fixNavbarToTopIfNecessary() {
var bannerHeight = $("#banner").outerHeight();
//When user scrolled past the initial position of the navbar
if ($(window).scrollTop() > bannerHeight) {
$navBar.addClass("navbar-fixed");
$("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav.
} else {
$navBar.removeClass("navbar-fixed");
$("#content").removeAttr("style");
}
}
});
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: normal;
color: #888;
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
}
body {
line-height: 1.5;
font-size: 14px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
img {
margin: 0;
padding: 0;
font-weight: normal;
}
button {
border: none;
cursor: pointer;
}
.row::before,
.row::after {
display: table;
content: " ";
}
.row::after {
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.column {
display: block;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.s12 {
width: 100%;
}
p {
margin-top: 10px;
margin-bottom: 20px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 50px 0;
}
.container {
width: 970px;
}
#banner {
background-color: #794f29;
width: 100%;
height: 600px;
padding: 150px 0;
position: relative;
text-align: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.banner-intro {
width: 50%;
float: right;
right: 5%;
top: 50%;
margin: 0 auto;
position: relative;
transform: translateY(-50%);
}
.banner-intro-heading {
color: white;
font-size: 60px;
text-shadow: 0 0 5px #ffecb0;
margin-bottom: 10px;
}
.banner-intro-lead {
color: white;
font-size: 24px;
}
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
display: inline-block;
border-radius: 5px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
transition: .3s;
cursor: pointer;
}
.btn:hover {
background-color: #a16fff;
color: white;
border-color: #8748ff;
}
.banner-intro-button {
margin-top: 30px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3);
}
.navbar {
-webkit-font-smoothing: subpixel-antialiased;
/* this stopped the font weight from changing when the navbar is fixed */
width: 100%;
height: 60px;
background: rgba(255, 236, 176, 0.97);
line-height: 60px;
display: block;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
transform: translateZ(0);
/* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */
}
.navbar-fixed {
position: fixed;
top: 0;
}
.navbar-brand {
font-family: "Merienda", cursive;
display: inline-block;
padding: 0 15px;
font-size: 18px;
float: left;
}
.navbar-items {
float: right;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: block;
float: left;
}
nav a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
color: #794f29;
transition: .3s;
padding: 0 25px;
}
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 10px 15px;
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
.featured {
text-align: center;
}
.featured-title {
font-size: 40px;
margin-bottom: 1.5rem;
color: #ccaa8c;
}
.featured-subtitle {
font-size: 22px;
margin-bottom: 1.5rem;
color: #666;
}
.featured .lead {
line-height: 2;
font-size: 16px;
margin-bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<section id="banner">
<div class="banner-intro">
<h1 class="banner-intro-heading">Grand Title!</h1>
<p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p>
<a class="btn banner-intro-button" href="#">Call to Action</a>
</div>
</section>
<nav class="navbar"> <!-- This is what I add the navbar-fixed class to -->
<div class="container">
Brand
<div class="navbar-items">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<li><a class="btn navbar-button" href="#">Button</a></li>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main id="content"> <!-- This is what I add the padding to -->
<div class="container">
<div class="row">
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
</div>
</div>
</main>
I found two solution for your problem (use each of them is enough).
Method 1) Change margin-top and margin-bottom of .navbar-button to 0 (to prevent vertical margin collapsing...) , and use vertical-align: middle; for center it vertically:
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 0 15px; /* *** margin top & bottom are changed to zero! */
vertical-align: middle; /* *** this is new! */
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
Method 2) remove display: inline-block from .btn class:
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
/* display: inline-block; */ /* *** this is removed! */
...
}
it is obvious that if you don't want to change default styles of .btn, you can add display: block to your navbar button manually as an inline style (style="display: block;") or using a new css class (eg: .block) for it.
<li>
<a class="btn navbar-button" href="#" style="display: block;">Button</a>
</li>
I am new to js and have hit a brick wall with altering how I calculate an element width depending on the screen size. I started with only calculating the width by how many of the list items were set to "plan-visible". It works great on a laptop screen, but doesn't break at css media query widths when the screen is smaller. I then had the brilliant idea (haha) of attempting to this directly in the javascript with an if/else statement, which I have little experience with. The result was that it did absolutely nothing. I researched and researched and it looks (to me) like it should work, but I am obviously missing something. I have included the html, the original js that worked for a static element, and then my failed attempt at making it responsive. Thanks!
html:
<div id="product-table" class="clear">
<div class="plan-visible">
<h3>BALANCE<em>aap</em><img class="image aap" src="http://localhost:1400/images/baap.png"></h3>
<a class="sbutton aap" href="">Go to AAP</a>
<ul>
<li>Point and click your way through the preparation of your organization’s Affirmative Action plan.<br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>trak</em><img class="image trak" src="http://localhost:1400/images/btrak.png"></h3>
<a class="sbutton trak" href="">Learn More</a>
<ul>
<li>Manage your organization’s hiring process from start to finish.<br> <br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>hub</em><img class="image hub" src="http://localhost:1400/images/bhub.png"></h3>
<a class="sbutton hub" href="">Go to HUB</a>
<ul>
<li>Access a centralized compliance information center to view, publish, and share information from your BALANCEworks applications.</li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>pay</em><img class="image pay" src="http://localhost:1400/images/bpay.png"></h3>
<a class="sbutton" href="">Go to PAY</a>
<ul>
<li>Conduct detailed compensation analyses, identify potential pay discrimination, and design a compliant pay structure</li>
</ul>
</div>
</div>
original js:
$(document).ready(function() {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
});
new, broken js:
$(document).ready(function() {
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
$('#product-table').css('446', width);
} else {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
}
});
css:
#product-table {
margin: 100px auto;
text-align: center;
.plan-visible {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
position: relative;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
border-radius: 5px ; }
.plan-visible:nth-child(1) {width: 180px;}
.plan-visible:nth-child(2) {width: 180px;}
.plan-visible:nth-child(3) {width: 180px;}
.plan-visible:nth-child(4) {width: 180px;}
.plan-hidden {display: none;}
}
/* --------------- */
#product-table h3 {
font-size: 20px;
color: $mainBlue;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: $lightGrey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* product image settings */
#product-table .plan-visible .image {
display: block;
height: 100px;
width: 100px;
margin: 15px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#product-table .plan-visible .image.aap {
border: 3px solid $aap;
}
#product-table .plan-visible .image.trak {
border: 3px solid $trak;
}
#product-table .plan-visible .image.hub {
border: 3px solid $hub;
}
#product-table .plan-visible .image.pay {
border: 3px solid $pay;
}
/* --------------- */
#product-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#product-table li {
border-top: 1px solid $lightGrey;
padding: 20px 0 10px 0;
}
/* --------------- */
/* product table specific buttons */
.sbutton {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
padding: 8px 20px;
margin: 20px 0 0 0;
display: inline-block;
background-color: $mainBlue;
color: white;
border-radius: 4px;
border: 1px solid $mainBlue;
text-align: center;
text-decoration: none;
font-size: 14px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.sbutton:hover {
background-color: #94ae3c;
color: #fff;
border: 1px solid #94ae3c;
text-decoration: none;
}
.sbutton.aap:hover {
background-color: #6f2784;
border: 1px solid #6f2784;
}
.sbutton.trak:hover {
background-color: #5c89b4;
border: 1px solid #5c89b4;
}
.sbutton.hub:hover {
background-color: #b58f2e;
border: 1px solid #b58f2e;
}
.sbutton.pay:hover {
background-color: #94ae3c;
border: 1px solid #94ae3c;
}
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 am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo