Text gets out from its container - javascript

I cannot figure out why the whole fonts in the modern browsers don't fit its corresponding width? So, here we can see a brilliant example, where 84 goes out of its width borders... Why?
Example via devtools screenshot:
By the code:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<span class="test">84</span>

The text itself (in white) stays inside of the span. The text-shadow you are applying is not taken into consideration for layouting since it is considered a purely aesthetic element.
If you want to prevent the text shadow from leaving the span, you can set overflow: hidden:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
overflow: hidden;
}
<span class="test">84</span>
And if you want to the box to expand to cover the shadow, you can add some padding as needed:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
padding: 0.1em;
}
<span class="test">84</span>

You can set shadow width to half of pixel (0.5px)
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}
<span class="test">84</span>

Related

Emoji don't display properly or don't display at all

I made a game I use at the school I teach, it has some emojis that display fine in my computer :
but at the school computer I get only their outline(sorry for the photo):
I also use the hurricane emoji 🌪️ that is not showing at all.
Is there a way to make sure the emojis will be shown properly or is there a way to set a fallback in case the emoji can't be displayed?
:root {
--blue: #5519ff;
--dark-blue: rgb(1, 6, 77);
--blue-outline-shadow: #3872b5;
--blue-outline-highlight: #35a3cc;
--yellow-outline-shadow: #c4bb00;
--yellow-outline-highlight: #fff64d;
}
.emoji {
text-shadow: none;
padding-left: 1vw;
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
color: none;
-webkit-text-stroke-width: 0px !important;
}
.Rtable-cell {
box-sizing: border-box;
flex-wrap: nowrap;
flex-grow: 0;
padding: 1vw;
overflow: hidden;
list-style: none;
font-size: 4vw;
place-items: center;
}
.letters {
display: flex;
flex-direction: row;
justify-content: center;
place-items: center;
text-align: center;
color: var(--dark-blue);
border-bottom: 3px solid var(--dark-blue);
font-size: 4vw !important;
/* padding-bottom: 0; */
}
.blue {
color: var(--blue-outline-highlight) !important;
font-size: 5vw !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--dark-blue);
text-shadow: 0 1px 0px var(--yellow-outline-shadow),
1px 0 0px var(--yellow-outline-highlight),
1px 2px 1px var(--yellow-outline-shadow),
2px 1px 1px var(--yellow-outline-highlight),
2px 3px 2px var(--yellow-outline-shadow),
3px 2px 2px var(--yellow-outline-highlight),
3px 4px 2px var(--yellow-outline-shadow),
4px 3px 3px var(--yellow-outline-highlight),
4px 5px 3px var(--yellow-outline-shadow),
5px 4px 2px var(--yellow-outline-highlight),
5px 6px 2px var(--yellow-outline-shadow),
6px 5px 2px var(--yellow-outline-highlight),
6px 7px 1px var(--yellow-outline-shadow),
7px 6px 1px var(--yellow-outline-highlight),
7px 8px 0px var(--yellow-outline-shadow),
8px 7px 0px var(--yellow-outline-highlight),
-12px -12px 2px rgba(49, 206, 99, 0);
}
.place {
background-color: #fee140;
background-image: linear-gradient(to bottom, 0%, #ffff7a #fff500 100%);
border: 3px solid var(--dark-blue);
text-shadow: var(--dark-blue) 0px -2px 0;
box-shadow: inset 0px -5px 10px 1px rgba(1, 6, 77, 0.6);
font-size: 4vw;
font-weight: bolder;
color: white;
text-align: center;
height:100px;
}
.disabled {
pointer-events: none;
background-image: linear-gradient(to top, #fee140 0%, #fa709a 100%);
box-shadow: inset 0px 5px 10px 1px rgba(1, 6, 77, 0.6);
}
<div class="Rtable-cell letters blue">A <span class="emoji">🐜</span></div>
<div class="Rtable-cell place disabled" >🌪️</div>

I am having a slash of headers before the animation brings them in from the side. How do I get rid of it?

I am building a website to put all my projects and resume on and I am using some animation to bring in the title elements in from the side on load as you can see in the snippet below. But when the page initially loads the title text flashes really quickly then the JavaScript loads and brings them in from the sides. Is this a preloading issue? It hasn't seemed to fix it.
Is it a matter of which order the elements/JavaScript is loaded? Or am I missing some line in my JavaScript that prevents this?
window.addEventListener('DOMContentLoaded', function () {
/* Function to bring in navbar from top staggered */
gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});
/* Function to bring h1 in from the left */
gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});
/* Function to bring in h2 from right */
gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});
/* Function to register gsap scroll plugin */
gsap.registerPlugin(ScrollToPlugin);
/* Function to scroll to About me when button is clicked */
document.getElementById('scroll').addEventListener('click', function clicked() {
gsap.to(window, {duration: 0.8, scrollTo:'#red' });
});
});
* {
box-sizing: border-box;
}
body {
background-color: #24305E;
height: 100vh;
}
h1 {
color: #A8D0E6;
font-display: fallback;
font-size: 15vh;
font-family: 'Noto Sans SC', sans-serif;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h2 {
font-family: 'Noto Sans SC', sans-serif;
font-display: fallback;
color: #F8e9a1;
font-size: 15vh;
margin-left: 12vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.15),
-14px 14px 1px rgba(0,0,0,0.14),
-16px 16px 1px rgba(0,0,0,0.13),
-18px 18px 1px rgba(0,0,0,0.12),
-20px 20px 1px rgba(0,0,0,0.11),
-22px 22px 1px rgba(0,0,0,0.1),
-24px 24px 1px rgba(0,0,0,0.09),
-26px 26px 1px rgba(0,0,0,0.08),
-28px 28px 1px rgba(0,0,0,0.07),
-30px 30px 1px rgba(0,0,0,0.06),
-32px 32px 1px rgba(0,0,0,0.05),
-34px 34px 1px rgba(0,0,0,0.04),
-36px 36px 1px rgba(0,0,0,0.03),
-38px 38px 1px rgba(0,0,0,0.02);
}
h3 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 10vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h4 {
font-family: 'Courier Prime', monospace;
color: #f99f9f;
font-size: 3vh;
margin-left: 13vw;
margin-top: 5vh;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5 {
font-size: 5vh;
font-family: 'Noto Sans SC', sans-serif;
color: #f8e9a1;
padding: 20px;
margin: 5vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
h5:after {
background-color: #F8E9A1;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
margin-left: 20px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
#red {
color: #f99f9f;
display: inline-block;
}
.box {
margin-top: 20vh;
width: 66vw;
height: 15vh;
margin-left: 12vw;
}
.content {
display: flex;
}
.column {
flex: 50%;
padding: 75px;
}
p {
color : #A8D0E6;
font-size: 2.75vh;
font-family: 'Courier Prime', monospace;
margin-left: 8vw;
text-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
hr {
height: 1vh;
background-color: #A8D0E6;
border: none;
margin-left: 6vw;
margin-right: 6vw;
}
img {
float: left;
width: 25vw;
height: auto;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer:before {
position: absolute;
top: 6%;
left: 10%;
width: 100%;
height: 100%;
border: 7px solid #F8E9A1;
content: '';
z-index: -2;
border-radius: 30px;
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2);
}
.btn {
font-family: 'Courier Prime', monospace;
color: #F8E9A1;
transition: transform .2s;
}
.btn:hover {
background-color: #F8E9A1;
color: #24305E;
transform: scale(1.2);
box-shadow:
-1px 1px 1px rgba(0,0,0,1),
-2px 2px 1px rgba(0,0,0,0.6),
-4px 4px 1px rgba(0,0,0,0.4),
-6px 6px 1px rgba(0,0,0,0.2),
-8px 8px 1px rgba(0,0,0,0.18),
-10px 10px 1px rgba(0,0,0,0.16),
-12px 12px 1px rgba(0,0,0,0.14),
-14px 14px 1px rgba(0,0,0,0.12),
-16px 16px 1px rgba(0,0,0,0.10),
-18px 18px 1px rgba(0,0,0,0.09),
-20px 20px 1px rgba(0,0,0,0.08),
-22px 22px 1px rgba(0,0,0,0.07),
-24px 24px 1px rgba(0,0,0,0.06),
-26px 26px 1px rgba(0,0,0,0.05),
-28px 28px 1px rgba(0,0,0,0.04),
-30px 30px 1px rgba(0,0,0,0.03),
-32px 32px 1px rgba(0,0,0,0.02),
-34px 34px 1px rgba(0,0,0,0.01);
}
.zoom {
transition: transform .2s;
}
.zoom:hover {
transform: scale(1.2);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans+SC:wght#700&display=swap" as="font">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Matthew Salem | Software Engineer</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark" style="background-color: #24305e;">
<a class="navbar-brand" href="http://www.matthewsalem.com"> Matt Salem Logo </a>
<form class="form-inline">
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="First group"><button class="btn btn-outline-primary btn-lg" id="scroll" type="button">01. About Me</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Second Group"> <button class="btn btn-outline-primary btn-lg" type="button">02. Portfolio</button></div>
</div>
<div class="zoom">
<div class="btn-group mr-5" role="group" aria-label="Third Group"> <button class="btn btn-outline-primary btn-lg" type="button">03. Resume</button></div>
</div>
</form>
</nav>
</div>
<h3>Hello! My name is</h3>
<div id="animate">
<h1>Matthew Salem.</h1>
</div>
<h4>I am a</h4>
<h2>Software Engineer</h2>
<h4>experienced in front end website architecture and back end application development.</h4>
<div class="box">
<h5><div id="red">01.</div> About Me</h5>
</div>
<div class="content">
<div class= "column">
<p>Hi! My name is Matt Salem. I am a software engineer based out of
New Haven, CT. Currently I am a student at the Holberton School.
I love buliding awesome software, especially any projects in the field
of web development. My goal is to build products that give the user
not only functional service or tool, but an experience that they will
remember. When I am not working on a project, you can find me
with friends out to eat, playing chess and drinking coffee downtown,
or enjoying a live show at Toad's Place or any other local venues.
</p>
</div>
<div class="column">
<div class="imageContainer">
<img src="IMG_3152 (1).jpg" alt="Headshot">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
</body>
</html>
From the docs:
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
It means your webpage will render before the callback is executed.
I would suggest to use gsap.to (https://greensock.com/docs/v3/GSAP/gsap.to()) instead. You could add your initial position in your CSS, which can then be reset by with gsap.to.
Try moving your <script src="main.js"></script> to the very bottom of the html body so that everything else runs first. I just finished adding some animations to a project...here is how I did it:
window.onload(animations());
function animations(){
const tl = gsap.timeline({defaults: {ease: "power1.out"}});
tl.to(".intro", {y: "-100%", duration: 1, delay: 1});
tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");
tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");
tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0",
duration: 0.5}, "-=0.5");
}

Disabling CSS transition on box-shadow property

Is it possible to disable transition of the box-shadow property on a button and enable it at the same time for different property values?
I have CSS:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 22px 22px 0px 0px rgba(172, 76, 51, 0.5), 0 0 0 2px #9e2a2b;
}
<button id="btn-more">More</button>
So obviously I want box-shadow with #9e2a2b color property to be visible all the time and disable its transition. However :hover box-shadow should still get the transition on :hover.
Tried to implement this solution but with no luck. Is there any way around this?
Switch the order of the shadows in your :hover state and the initial shadow will remain constant:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 0 0 0 2px #9e2a2b, 22px 22px 0px 0px rgba(172, 76, 51, 0.5);
}
<button id="btn-more">More</button>

toggling a link's activity on click using javascript

I have a question similar to this question Making a link stay active displaying hover effect upon click using javascript i just wanted to disable the active class when the link is clicked again any help would be appreciated
JSFiddle
HTML
<div id="profile_list">
<h2>Members: 37</h2>
• O.F.
• Founder
• Leader
• Sr. Admin
• Jr. Admin
• Full-Member
• Greenhorn
• Inactive
• Legend
</div>
JS
$('#profile_list a').click(function() {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
CSS
#profile_list {
width: 250px;
height: 328px;
background-color: #333;
background-image: -moz-linear-gradient(#777, #222);
background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
background-image: -webkit-linear-gradient(#777, #222);
background-image: -o-linear-gradient(#777, #222);
background-image: -ms-linear-gradient(#777, #222);
background-image: linear-gradient(#777, #222);
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
position: relative;
top: 20px;
left: 20px;
z-index: 2;
}
#profile_list h2 {
width: 226px;
height: 20px;
padding: 10px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}
#profile_list a {
width: 218px;
height: 20px;
padding: 4px 12px 7px 20px;
color: #A4A4A4;
float: left;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
top: 5px;
}
#profile_list a:hover, #profile_list a.active {
background: rgba(204, 204, 204, 0.5);
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
color: #FFF;
}
Then do two checks, one to see if the clicked anchor is active already and another to see if any of that anchors siblings are active.
If it's already active, "deactive" it by removing the class.
If one of its siblings is active during the click, don't activate it.
If neither it nor its siblings are active, activate it.
JS
// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
// Set variables for this,
// Whether I am the active one,
// And if there are other active elements in this list
var a = $(this),
amIactive = a.hasClass('active'),
areOthersActive = a.parent().children().hasClass('active');
// If I'm active
if (amIactive) {
// Make me not active when I'm clicked
a.removeClass('active');
}
// Otherwise, if none of my siblings are active
else if(!areOthersActive){
// Make me active
a.addClass('active');
}
});
Forked fiddle with changes: jsfiddle

javascript not working in I.E. 9 as well as Firefox

Greetings fellow stackoverflow members,
I am having quite the dilemma as of late. The code provided below is quite lengthy, however, most of it is duplicate code for each 3 main containers labeled (General, Kills, and Scores).
I am having issues with the javascript I have written up which coincides with jquery 1.9.1 - the slider doesn't slide - it works perfectly in Chrome, but doesn't in I.E.9 as well as Firefox for some reason...I've revised it all countless of times, but do not see any issues as to why it's not working in those browsers. If you can look it over and provide me with what or where I am going wrong in my javascript I'd greatly appreciate it as I'm thinking it will be easier for you guys/gals to spot the issue since it's fresh to your eyes.
DEMO: http://jsfiddle.net/aeJtx/3/
JAVASCRIPT:
/* ===== Start of 'Slider - My Statistics (Achievements - General)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_general .buttons_achievements_general span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').length;
var fragment_width = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_general:eq(0)').find('.con_achievements_general');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Kills)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_kills .buttons_achievements_kills span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').length;
var fragment_width = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_kills:eq(0)').find('.con_achievements_kills');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Scores)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_scores .buttons_achievements_scores span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').length;
var fragment_width = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_scores:eq(0)').find('.con_achievements_scores');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
CSS:
/* ===== Start of 'Achievement Details - (General)' ===== */
#general_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 20px;
}
#general_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_general {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_general {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_general span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_general span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_general span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_general {
width: 577px;
height: 96px;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_general {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_general {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'General Medals Wrapper inside Fragment' ===== */
#general_medals_wrapper {
width: 576px;
height: 96px;
float: left;
}
/* ===== Start of 'Achievement Details - (Kills)' ===== */
#kills_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 50px;
}
#kills_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_kills {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_kills span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_kills span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_kills span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_kills {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_kills {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#kills_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
/* ===== Start of 'Achievement Details - (Scores)' ===== */
#scores_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 80px;
}
#scores_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_scores {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_scores span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_scores span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_scores span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_scores {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_scores {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#scores_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
HTML:
<div id="general_wrapper">
<h2>General</h2>
<div id="slider_achievements_general">
<div class="buttons_achievements_general"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_general">
<div class="con_achievements_general">
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>Hi</p>
</div>
</div>
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="kills_wrapper">
<h2>Kills</h2>
<div id="slider_achievements_kills">
<div class="buttons_achievements_kills"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_kills">
<div class="con_achievements_kills">
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>Hello</p>
</div>
</div>
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scores_wrapper">
<h2>Scores</h2>
<div id="slider_achievements_scores">
<div class="buttons_achievements_scores"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_scores">
<div class="con_achievements_scores">
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>New</p>
</div>
</div>
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>Slider</p>
</div>
</div>
</div>
</div>
</div>
</div>
I believe I may have the solution to this. I ended up adding the above code to my site on a different script to see where the issue may be and think that this may be where you are having that issue of where it doesn't work in either FF or IE - as it happened to me as well in the past and sure enough once I implemented your above code it did the same thing.
Check how your html page is referencing your javascript page(s) if you have multiple js pages located in different folders/directories.
For example, Do THIS:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
Rather than THIS:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
If you have multiple folders/directories using JS on your site, you need to make sure whatever page you are working on can check the JS script for the page you are working on first opposed to any other JS scripts you may be using in other folders/directories. So if you use the first example above that I have provided you, it should work with no problem at all in all browsers. This happened to me several months ago and it literally took me forever to figure out what was going on.
You want to make sure any jquery you are using is written up and be referenced first on all html pages, then any js scripts you may have should follow that, but make sure they are in the correct order on whatever html page you are working on.
Example of a setup:
Main directory:
--> css folder
-------> Your_css_Script.css
--> images folder
--> js folder (inside 'js folder' you have:)
-------> Your_js_Script.js
-------> JQuery folder
------------> jquery-1.9.1.min.js
--> index.html
--> Another folder - (inside 'Another folder' you have:)
-------> css folder
------------> Your_css2_Script.css
-------> images folder
-------> js folder
------------> Your_js2_Script.js
-------> index2.html
I apologize for the bad diagram above, but hopefully that helps you understand the structure. So, if you are working on index2.html, and also Your_js2_Script.js, but also need to reference what you have on Your_js_Script.js as well as your jquery script on your index2.html, you would need to reference those scripts on your index2.html page like so:
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_js2_Script.js"></script>
<script type="text/javascript" src="/js/Your_js_Script.js"></script>
By the way, that's a pretty slick looking setup you got going on! And I hope what I provided helps.

Categories