toggling a link's activity on click using javascript

toggling a link's activity on click using javascript - 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

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>

Text gets out from its container

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>

Anchor tag not working inside List Item

https://jsfiddle.net/1exbczjy/
<body>
<section class="main">
<form class="search" action="">
<input type="search" id ="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
</ul>
</form>
</section>
</body>
This is a demo of the code that I am trying to run , my original code contains js file which is dynamically populating my ul class using the innerHTML function but the output is same as the dummy list data I have provided.
I am not able to understand why my list tag does not work . I have tried to resolve it using other answers provided on this site , checking for z index and absolute and relative position of a and li tag.

The reason is because on click, the input loses its :focus (as pointed out by shaochuancs) and the content is hidden before the click on the anchor is registered. A click event consists of mousedown and mouseup event. The loss of focus is triggered on mousedown anywhere on the page. So just prevent the loss of :focus on mousedown on the anchor tags. The rest of the code would function as expected, because the anchor tag click is triggered on mouseup.
So the issue can be dealt with some basic javascript/jQuery, by simply preventDefault() on mousedown on the anchor tags.
$("a").mousedown(function(ev) {
ev.preventDefault();
}
Note that in this code snippet the link doesn't load because it is blocked by the frame. But you can see in the console that the link is clicked.
$("a").mousedown(function(ev) {
ev.preventDefault();
console.log($(this).attr("href"));
console.log("Click triggered");
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
body {
background: #f7f7f7;
color: #404040;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
}
a {
color: #1e7ad3;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
.container,
.main {
width: 640px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.main {
margin-top: 50px
}
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10000;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results li a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results li a span {
font-weight: 200
}
.search .results li a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
}
.search .results li a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.search li {
padding: 0px;
}
.search li a {
margin: 0px;
display: block;
width: 100%;
height: 100%;
}
.lt-ie9 .search input {
line-height: 26px
}
/*adding effect when the mouse is hovered over list item*/
/*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<body>
<section class="main">
<form class="search" action="">
<input type="search" id="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
<li>Tag A</li>
<li>Tag B</li>
</ul>
</form>
</section>
</body>

The root cause is: when anchor tag is clicked, .search input lose its :focus status, which makes .search input:focus + .results { display: block } disabled and .search .results's display as none again -- As the <a> tag does not exist on page anymore, nothing happens. It has nothing to do with ul or li.
Here is a simplified example: https://jsfiddle.net/cshao/rtonLr4z/, the <a> won't work as in the question.

There is also another possibility. If you set the decoration of the Anchor to none and change the background of the li on hovering the Achor link only works when you are hovering on the text of the Anchor but what you want is that the Anchor activates on the whole surface of the li, but how you can make that work is another thing.

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.

making a.active work with background image slide

I am having some troubles trying to get this to work, I'm new to javascript, and am pretty sure I'd need it for this. I'd like to have my background image slide upon hover and stay active on its correct div when selected. What I currently have html, css, and javascript wise works perfectly...javascript part is when user clicks on the div, a container opens up below it - that works as it should, however, I have no idea how to integrate giving the initial div a.active to stay active on that div rather than always going back into the center. Any ideas, suggestions, and/or help would be much appreciated.
UPDATE:
Here is a jsfiddle of what is provided below: http://jsfiddle.net/mGQ8w/4/
This is what I got so far:
HTML
<div id="profile_selection">
<a href="#nos_profiles" class="profile_selection">
{ÑØ§}<br />Members
</a>
<a href="#registered_profiles" class="profile_selection">
Registered<br />Members
</a>
<a href="#team_profiles" class="profile_selection">
Team<br />Profiles
</a>
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection"></div>
<div id="registered_profiles" class="selection"></div>
<div id="team_profiles" class="selection"></div>
CSS
#profile_selection {
width: 612px;
height: 152px;
padding: 0;
margin: 15px auto;
position: relative;
}
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
height: 100px;
padding: 50px 0 0 0;
background: #222;
-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: #DF7401;
}
#profile_selection_slider {
width: 64px;
height: 16px;
background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
top: 152px;
left: 275px;
z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
left: 480px;
}
#nos_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-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;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#registered_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-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;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
#team_profiles {
width: 950px;
height: 500px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-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;
display: none;
position: relative;
top: -10px;
z-index: 1;
}
JAVASCRIPT
$(document).ready(function () {
$('a.profile_selection').click(function () {
var a = $(this);
var selection = $(a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if (selection.is(':visible')) {
selection.slideToggle(400)
} else {
selection.slideToggle(400)
};
});
});
LATEST UPDATE:::::
http://jsfiddle.net/mGQ8w/13/
Is it possible to make it where once a user decides to click a different div, the active class goes back to normal while the new selected div becomes active? The way it is now, is that if you click on all 3, they all become active....I'd like it where only 1 is active - the one that a user clicks on....so if a user clicks on the NOS Members div, it becomes active, then if the user clicks on Registered Members, the NOS members is no longer active, but the Registered Members div is...

You need to add the active class using addClass& can remove the remove the active class from previous selection using removeClass.
$(document).ready(function(){
$('a.profile_selection').click( function(){
var a = $(this) ;
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $( a.attr('href') );
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if( selection.is(':visible') ){
selection.slideToggle(400)
}else{
selection.slideToggle(400)
};
});
});
This need to be used along with the css changes provided by #N1ck as below
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
left: 480px;
}
Check this http://jsfiddle.net/mGQ8w/14/

Give same rule to .active as you do for :hover e.g:
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
left: 71px;
}
becomes
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
left: 71px;
}
Then toggle the selected menu item with an .active class.
var menuItems = $('a.profile_selection');
menuItems.on('click', function () {
var a = $(this),
selection = $(a.attr('href'));
menuItems.removeClass('active');
a.toggleClass('active');
...etc
});
Here's a fiddle as an example: http://jsfiddle.net/n1ck/FbeFU/

We Keep Coding

JavaScript is the programming language of the Web.

toggling a link's activity on click using javascript - javascript

Related

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

Text gets out from its container

Anchor tag not working inside List Item

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

making a.active work with background image slide

Categories

Resources