I'm trying to create an accordion inside each dropdown, but it's not working properly. The all accordions for each dropdown option displayed in the first dropdown options and if I choose another dropdown option, the accordion is cannot open when clicked it. How to fix this?
Here's the link for full snippet
$(function() {
$('#faqDrodpown').change(function(){
$('.faqs').hide();
$('#' + $(this).val()).show();
});
$('#accordion-faq').find('.accordionfaq-toggle').click(function() { /*Expand or collapse this panel*/
$(this).next().slideToggle('fast');
$(".accordionfaq-content").not($(this).next()).slideUp('fast');
});
});
Just changed jquery $('#accordion-faq').find('.accordionfaq-toggle') to $('#accordion-faq .accordionfaq-toggle') and its work fine for me
Edit:
Changed $('#faqDrodpown').change() function that toggle class hide
and added css on that class for hide content and for onload to hide other faq block i added some js code
$(function() {
$('.faqs').addClass('hide');
$('#' + $('#faqDrodpown').val()).removeClass('hide');
$('#faqDrodpown').change(function(){
$('.faqs').addClass('hide');
$('#' + $(this).val()).removeClass('hide');
});
$('#accordion-faq .accordionfaq-toggle').click(function(){ /*Expand or collapse this panel*/
$(this).next('.accordionfaq-content').slideToggle('fast');
$(".accordionfaq-content").not($(this).next()).slideUp('fast');
});
});
.faq-dropdown {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
.faq-dropdown select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
font-size:1.25em;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
.faq-dropdown::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
z-index: 2;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(102,102,102)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;
pointer-events:none;
}
/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.faq-dropdown select::-ms-expand {
display: none;
}
/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
select:focus::-ms-value {
background: transparent;
color: #222;
}
}
/* Firefox 7+ -- Will let us hide the arrow, but inconsistently (see FF 30 comment below). We've found the simplest way to hide the native styling in FF is to make the select bigger than its container. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.dropdown::after`, did not undo the previous rule */
/* Set overflow:hidden on the wrapper to clip the native select's arrow, this clips hte outline too so focus styles are less than ideal in FF */
_::-moz-progress-bar, body:last-child .dropdown {
overflow: hidden;
}
/* Show only the custom icon */
_::-moz-progress-bar, body:last-child .dropdown:after {
display: block;
}
_::-moz-progress-bar, body:last-child .dropdown select {
/* increase padding to make room for menu icon */
padding-right: 1.9em;
/* `window` appearance with these text-indent and text-overflow values will hide the arrow FF up to v30 */
-moz-appearance: window;
text-indent: 0.01px;
text-overflow: "";
/* for FF 30+ on Windows 8, we need to make the select a bit longer to hide the native arrow */
width: 110%;
}
/* At first we tried the following rule to hide the native select arrow in Firefox 30+ in Windows 8, but we'd rather simplify the CSS and widen the select for all versions of FF since this is a recurring issue in that browser */
/* #supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
.dropdown select { width:110%; }
} */
/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .dropdown select:focus {
outline: 2px solid rgba(180,222,250, .7);
}
/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .dropdown::after {
display:none;
}
/* Hover style */
.faq-dropdown:hover {
border:1px solid #888;
}
/* Focus style */
select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Firefox focus has odd artifacts around the text, this kills that */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
option {
font-weight:normal;
}
/* These are just demo button-y styles, style as you like */
.faq-dropdown-btn {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
.output {
margin: 0 auto;
padding: 1em;
}
.accordionfaq-toggle {
cursor: pointer;
font-size: 1.1em;
font-weight: 700;
text-align: left;
border-radius: 3px;
padding: 19px 19px 19px 60px;
border: 1px solid #CCC;
box-shadow: 0 0 5px rgba(0, 0, 0, .19), 0 3px 3px rgba(0, 0, 0, .23);
background: #FFF;
border-radius: 3px;
}
.accordionfaq-toggle:active {
border-bottom: none;
}
.accordionfaq-content {
display: none;
border-radius: 3px;
border: 1px solid #CCC;
border-top: 0 !important;
background: #FFF;
box-shadow: 0 0 5px rgba(0, 0, 0, .19), 0 3px 3px rgba(0, 0, 0, .23);
margin: -87px 0 19px 0;
padding: 4em 3em 3em 4em;
}
.accordionfaq-content>p {
margin-top: 2.5em;
}
.faqs.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-dropdown-btn faq-dropdown">
<select id="faqDrodpown">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="output">
<div id="red" class="faqs">
<div id="accordion-faq">
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
</div>
</div>
<div id="yellow" class="faqs">
<div id="accordion-faq">
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
</div>
</div>
<div id="blue" class="faqs">
<div id="accordion-faq">
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
<h4 class="accordionfaq-toggle"><span class="arrow">Lorem ipsum title</span></h4>
<div class="accordionfaq-content">Lorem ipsum content</div>
</div>
</div>
</div>
change JS to
$(function() {
$('#faqDrodpown').change(function(){
$('.faqs').hide();
$('#' + $(this).val()).show();
var data = $("#faqDrodpown").find("option:selected").val();
$('#accordion-faq-'+data).find('.accordionfaq-toggle').click(function() {
$(this).next().slideToggle('fast');
$(".accordionfaq-content").not($(this).next()).slideUp('fast');
});
});
});
Change HTML to
<div id="accordion-faq-red">
<div id="accordion-faq-yellow">
<div id="accordion-faq-blue">
Related
I have linear gradient text. What I'm trying to achieve is to have text-underline with same colors like text:
What I have already tried:
Default text-decoration: underline gives me non gradiented line which is way to big, and I can't actually customize it at all.
::after pseudoclass gives me underline but it's under whole text block
box shadow is affected by line-height, and I can't get this line closer to text.
body {
background: black;
}
h1 {
font-size: 120px;
display: inline;
line-height: 130px;
position: relative;
text-decoration: underline;
background: linear-gradient(330deg, #ff6553 0, #ff1979 50%, #ffa400 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1::after {
position: absolute;
display: inline;
content: "";
width: 100%;
height: 2px;
background: white;
bottom: 0;
left: 0;
}
<div class="text">
<h1>some text with <br> colorful gradient</h1>
</div>
Here's my code fiddle:
https://jsfiddle.net/3z0qrs6k/
Multiple gradient can do it:
body {
background: black;
}
h1 span {
font-size: 120px;
line-height: 130px;
color:transparent;
--g:linear-gradient(330deg, #ff6553, #ff1979, #ffa400);
background:
var(--g),
var(--g) bottom 2px left 0/100% 2px no-repeat; /* adjust the bottom value to control the offset */
background-clip: text,padding-box;
-webkit-background-clip: text,padding-box;
}
<h1><span>some text with <br> colorful gradient</span></h1>
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've tried so many different ways trying to get 2 div's staying side by side, but no matter what I do I can't seem to figure it out.
I managed to sort it for a while with "position: absolute" but that was until I realized the menu hight wasn't changing. I'm not an expert when it comes to CSS but the rest I'm good at. I've searched and search and so far this is the best results I've came up with:
Results like this: http://puu.sh/oWRbK/4827eeba57.jpg but should looks like this: http://puu.sh/oWS52/a2dc6282e4.jpg anyone that has any suggestions how to fix this issue, please feel free helping me as I'm getting gray haired by this right now, been trying to figure out a way for the past 4 hours but no matter what I do, if I margin-top the pixels space I get it correct but in a different resolution comparing to my monitor messes it completely up.
.wrapper {
padding-left: 68px;
padding-right: 68px;
width: auto;
height: auto;
margin: 0;
}
.header {
padding-top: 16px;
padding-bottom: 14px;
}
.hline {
width:auto;
height:2px;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 325px;
}
/* USER MENU */
.menuWrap {
padding-right: 65px;
width: 260px;
}
.user_menu {
border-style: solid;
border-color: rgba(255, 255, 255, 0.5);
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 260px;
color: #a6bed5;
background: rgba(110, 110, 110, 0.5); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* Standard syntax */
}
.user_after {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 17px;
height: 39px;
width: 260px;
background: #6e6e6e; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #6e6e6e, #ebebeb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #6e6e6e, #ebebeb); /* Standard syntax */
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
.user_menu .content {
width: 260px;
}
.user_menu .header {
padding: 6px;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
min-height: 62px;
}
.user_menu .header img {
width: 62px;
height: 62px;
float: left;
}
.user_menu .header p {
padding-left: 70px;
font-family: Open Sans;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
.user_menu .header a {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:link a:visited a:active {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:hover {
text-decoration: none;
color: #b5cee6;
}
.user_menu .addMenu {
font-family: Open Sans;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
.user_menu .addMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.user_menu .addMenu li a {
display: block;
color: #94a9b9;
padding: 12px 0 12px 20px;
text-decoration: none;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
}
/* Change the link color on hover */
.user_menu .addMenu li a:hover {
color: #b5cee6;
}
/* MAIN CONTAINER */
.bs-container {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 100%;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<div class="wrapper">
<div class="header">
<img src="/images/logo.png" />
</div>
<div class="hline"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="bs-container">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><!--ISSUE IS RIGHT HERE.-->
<div class="user_menu">
<div class="content">
<div class="header">
<img src="http://mta.everest-community.net/mta-image.php?id=1" />
<p>
<b><font color="#f7b618">123B3n</font> <font color="#334c66">(1)</font></b><br>
LOGOUT
</p>
</div>
<div class="addMenu">
<ul>
<li>HOME</li>
<li>CHARACTERS <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="characters" class="collapse">
<li>OVERVIEW</li>
<li>STAT TRANSFER</li>
<li>CUSTOM INTERIORS</li>
<li>MANAGEMENT</li>
</div>
<li>ACCOUNT <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="account" class="collapse">
<li>PROFILE</li>
<li>HISTORY</li>
<li>SETTINGS</li>
<li>OVERVIEW</li>
</div>
<li>PREMIUM <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="premium" class="collapse">
<li>PREMIUM FEATURES</li>
<li>DONATION HISTORY</li>
<li>DONATE NOW!</li>
</div>
</ul>
</div>
</div>
</div>
<div class="user_after"></div><!--JUST FOR SHOW-->
</div>
</div>
</div>
My JSFiddle: https://jsfiddle.net/123B3n/ohku4a0q/
P.S Didn't know about JSFiddle until now, thanks for letting me know!
You are providing your CSS, but you are also using Bootstrap in your code (or what looks like it) and I am wondering if you have thought about the impact.
--> row
---->col-md-2
That is using the two column grid of a 12 column system with the md breakpoint, where is the other col-md-10 for the right side.
To me, it looks like you are in a losing battle with bootstrap. And without the full code, the only solution here is to rewrite all of your code and that actualyl does you no service.
I will give you this:
<div class="row">
<div class="col-md-2">Left</div>
<div class="col-md-10">Right</div>
</div>
12 Column system, but then you need to look into what happens when you go mobile and get smaller than the md breakpoint.
That MAY be as simple as
<div class="row">
<div class="col-md-2 col-xs-12">Left</div>
<div class="col-md-10 col-xs-12">Right</div>
</div>
How's this? https://jsfiddle.net/wx3emp71/2/
I reorganized your row div to contain both of the columns you want beside each other. Then I gave them a class of "content" (feel free to change that) and made them inline-blocks of 50% width each. I also removed some margin you had on one of your containers. To make them display beside each other at 50% width, I had to restructure your divs a little bit so that there's no white space between the end of the close tag and the beginning of the new open tag. Lastly, I gave them box-sizing: border-box just so that any margins/padding don't come into play when calculating the width, therefore allowing the 50% width to work.
If you like my solution, I actually recommend you add the following style, *{ box-sizing: border-box;} to all your CSS files. That way, everything has the border-box property and you never have to worry about fitting the paddings into your calculations.
I put my work under the /***** my edit *****/ comment so you can change it however you feel fit. I don't think I added any other styling elsewhere, but I did remove some as I mentioned before.
I have the following button:
http://jsfiddle.net/TU6vQ/
and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so?
The spinner is here.
Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.
This is the simple button I have:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
If you make the button relatively positioned, you can absolutely position the spinner inside of the button:
http://jsfiddle.net/TU6vQ/8/
HTML:
<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
<img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
Invite your friends
</button>
CSS:
.spinner {
position: absolute;
right: 5px;
top: 6px;
width: 25px;
height: 25px;
display: none;
}
JS:
$('button#inviteYourFriends').click(function() {$('.spinner').show();});
Put spinner inside of button, give it absolute positioning, and relative on the button. The button is a block level element, you don't need an additional div around it all.
I updated the jsfiddle here:
<div style='position:relative'>
<img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
</div>
The button tag can support img tags like almost any other element, and so all you need to do is put the image inside it; as simple as it sounds.
<button id="inviteYourFriends" class="arvo-bold button blue" >
<img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
</button>
On your button click just prepend your button contents with the image. Voila.
You can do this.
http://jsfiddle.net/YQNn4/
HTML
<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt="">
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
JS
$(document).ready(function(){
$('.progress').hide();
$('#inviteYourFriends').click(function(){
$('.progress').show();
});
});
i would add the image inside the button element, then position and size it using css.
here is the jfiddle: http://jsfiddle.net/TU6vQ/9/
here's the code:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
<img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
</button>
CSS:
.button {
line-height: 52px;
font-size: 16px;
width: 270px;
height: 50px;
text-shadow: -1px -1px 1px rgba(175,175,175,.42);
text-transform: uppercase;
text-decoration: none;
text-align: center;
line-height: 38px;
color: #fefefe;
font-size: 14px;
display: block;
height: 38px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}
.button.blue {
background: rgb(169,191,200);
background: -moz-linear-gradient(top, rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
background: -webkit-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -o-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -ms-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: linear-gradient(to bottom, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}
.spinner
{
margin-top:8px;
margin-left:5px;
height:20px;
width:20px;
position:absolute;
}
I am trying to get a tooltip for each portion on a location map. Using the code below, I am getting the tool tip for as many portions as I want. But the next step is to give a link in each tooltip and it should open another which has more information.
Please suggest if I can do something in my code. Note: It should not be involve manually adding divs, divs should just be added as my tooltips are added (using variables).
<style>
body {
text-align: center;
font: 13px Arial,Helvetica;
}
/* Relative positioning*/
#wrapper {
position: relative;
margin: 10px auto 20px auto;
border: 1px solid #fafafa;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
/* Hide the original tooltips contents */
.pin {
display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
background:url(mapimg.png);
width: 26px;
height: 15px;
}
.tooltip-down {
background-position: 0 -52px;
}
.tooltip {
display: none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
background: -o-linear-gradient(top, #fff1d3, #ffdb90);
background: linear-gradient(top, #fff1d3, #ffdb90);
}
.tooltip::after {
content: '';
position: absolute;
top: -10px;
left: 50%;/*
margin-left: -90px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right :10px solid transparent;*/
}
.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}
.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}
.tooltip h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
}
.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}
#pop1, #pop2 {
display:none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff1d3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function(){
// set the wrapper width and height to match the img size
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
//tooltip direction
var tooltipDirection;
for (i=0; i<$(".pin").length; i++)
{
// set tooltip direction type - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
}
else {
tooltipDirection = 'tooltip-up';
}
// append the tooltip
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
</script>
<div id="wrapper">
<img width="920" height="450" src="image.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="280" data-ypos="110">
tooltip 1 <br>
<b>Area:</b> 24 sft<br>
<b>block:</b> 2 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="135">
<b>Area 2</b><br/>
Area: 17 sft<br/>
Population: 382,000,000
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="158">
<b>Area 3</b><br/>
Area: 10<br/>
<b>Population:</b> 731,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="180">
<strong>Area 4</strong><br/>
Area: 30<br/>
Population: 1,022,011,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="206">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="850" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
</div>
This will add a div after an anchor once the anchor is clicked, if the anchor is clicked again the div will be removed:
$('a').click(function()
{
var currTag = $(this);
if (currTag.next('div').attr('name'))
{
currTag.next('div').remove();
}
else
{
currTag.after("<div name='details'>Here's more information</div>");
}
});