I'm running into a small problem.
I want to display 3 houses and when you hover over them with your mouse it displays tooltip text. This is what I got so far. It runs fine as you can see, but when adding a style sheet it is interfering and deleting the houses and the tooltip text :
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.linkhome {
display: inline-block;
font-size: 2.25rem;
padding-left: 10px;
padding-right: 10px;
}
.linkhome :hover {
color:#23739b;
transition: color 0.3s ease-in-out;
}
.links {
}
</style>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="links">
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Homepage</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
</body>
</html>
But when I add this in the head-tag:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
The houses with the toolbelt disapears, Is there any reason to fix this problem?
Thanks for reading this post, I hope some can help me or give me a suggestion.
I would suggest you please use bootstrap4 tooltip
Please try below solution.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
</body>
</html>
Related
I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>
This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px
I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp
There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.
folks!
Me might be stupid, but i cant get working video popUp box.
Okay, let's start from beginning. I have 3D style image carousel gallery with button and title in it. I have edited this (important) - "button" to tens of times to get it working, but still no results. It feels like the current 3D CSS, JQuery, Javascript and HTML image slider gallery doesn't work together with Video popUp box. I`m not sure, but it feels like. The working popUp video sample (demo) is here and I would like it to get this done combined with my 3D carousel(slider) image gallery. When I put few script lines from working sample to the gallery page i got no response from the script lines. Like the 3D gallery blocked the popUp video box and it does not show up.
My goal : I want to get popUp video box over the 3D image gallery slider.
Problem : PopUp box doesn't respond (not working), it is not displayed over the 3D gallery slider, after button (Watch movie) click.
Here it is the full code of 3D carousel image gallery and working popUp video box. To make it easier for you i put all the source links for this script sample, so you can just create your own index.html file with this script.
<html>
<head>
<meta charset="UTF-8">
<title>3D Smooth Carousel - Slider</title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css">
<style type="text/css">
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popuptext {
display: none;
}
.mfp-hide {
display: none !important;
}
.button {
padding: 20px 40px;
border-color: #f3f3f3;
font-size: 17px;
font-size: 1.7rem;
font-family: "museo-sans", Arial, Verdana;
font-weight: 500;
margin-top: 40px;
display: inline-block;
}
.button {
border: 2px solid #fcf;
color: #000;
text-transform: uppercase;
transition: all 0.15s ease-in-out;
}
.button .fa {
margin-left: 20px;
}
.button:hover {
background-color: #07d;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.content {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#videoLink')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
}
//]]></script>
</head>
<body>
<div class="slider-container" id="slider">
<div class="slider-content">
<div class="slider-single">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" />
<a class="slider-single-download" href="#videoStory" id="videoLink">Watch movie <i class="fa fa-play-circle" aria-hidden="true"></i></a>
<div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"><iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""></iframe>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>311,247</p>
</a>
</div>
<!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script. //-->
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-play-circle"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a>
<a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a>
</div>
<script src="https://kinobalss.lv/3d/js/index.js"></script>
</body>
</html>
I am trying to toggle the arrows when a div is expanded see
$(document).ready(function() {
$('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
// var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
if ($(showElementDescription).is(':visible')) {
showElementDescription.hide("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
showElementDescription.show("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});
.expandableCollapsibleDiv i {
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
padding-left: 10px;
float: right;
}
.expandableCollapsibleDiv ul {
border-bottom: 1px solid white;
clear: both;
list-style: outside none none;
margin: 0;
padding-bottom: 10px;
display: none;
/* visibility: hidden;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>NEW YORK</a></h3>
<ul>
<li><a>Albany</a></li>
<li><a>Buffalo</a></li>
<li><a>Kingston</a></li>
<li><a>Tonawanda</a></li>
<li><a>Sherrill</a></li>
<li><a>Sherrill</a></li>
<li><a>Oneida</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>CALIFORNIA</a></h3>
<ul>
<li><a>Alameda</a></li>
<li><a>Bell</a></li>
<li><a>Banning</a></li>
<li><a>Campbell</a></li>
<li><a>Fresno</a></li>
<li><a>Galt</a></li>
<li><a>Jackson</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>WASHINGTON</a></h3>
<ul>
<li><a>Asotin</a></li>
<li><a>Bellingham</a></li>
<li><a>Bothell</a></li>
<li><a>Camas</a></li>
<li><a>Clarkston</a></li>
<li><a>Cheney</a></li>
<li><a>Newport</a></li>
</ul>
</div>
</div>
The problem, on page load the div is set to display:none and not set with css visible. The arrow doesn't react as it should. I like the arrow to point down when the div is not expanded (hidden) and to point up if the div is expanded (visible).
Using visible:hidden didn't solve my problem as the div are using the space on the page.
How can i fix this?
You had used .find() incorrectly. Also JQuery library was not included in the JSFiddle, so I included that!.
Note: Initially the arrow should be fa-angle-up instead of fa-angle-down.
Before:
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
After:
$(this).find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up');
JSFiddle Demo
$(document).ready(function() {
$('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
// var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
if ($(showElementDescription).is(':visible')) {
showElementDescription.hide("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
showElementDescription.show("fast", "swing");
$(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
}
});
});
.expandableCollapsibleDiv i {
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
padding-left: 10px;
float: right;
}
.expandableCollapsibleDiv ul {
border-bottom: 1px solid white;
clear: both;
list-style: outside none none;
margin: 0;
padding-bottom: 10px;
display: none;
/* visibility: hidden;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>NEW YORK</a></h3>
<ul>
<li><a>Albany</a></li>
<li><a>Buffalo</a></li>
<li><a>Kingston</a></li>
<li><a>Tonawanda</a></li>
<li><a>Sherrill</a></li>
<li><a>Sherrill</a></li>
<li><a>Oneida</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>CALIFORNIA</a></h3>
<ul>
<li><a>Alameda</a></li>
<li><a>Bell</a></li>
<li><a>Banning</a></li>
<li><a>Campbell</a></li>
<li><a>Fresno</a></li>
<li><a>Galt</a></li>
<li><a>Jackson</a></li>
</ul>
</div>
<div class="expandableCollapsibleDiv">
<i class="fa fa-2x fa-angle-down"></i>
<h3><a>WASHINGTON</a></h3>
<ul>
<li><a>Asotin</a></li>
<li><a>Bellingham</a></li>
<li><a>Bothell</a></li>
<li><a>Camas</a></li>
<li><a>Clarkston</a></li>
<li><a>Cheney</a></li>
<li><a>Newport</a></li>
</ul>
</div>
</div>
Hi guys looking for some assistance as the heat appears to be melting my brain. I'm having a stupid problem and in once of those situations where i should probably take a break and come back to this but hey.
Basically all i want to do is I add/removeClasses when the user clicks on the primary About Me button and then close with the .close class button.
For some reason I just can't see what I've dont wrong lol. I know I need jquery for this to add/removeClass. I also know I need to setup a new class to add the active state of the overlay and set a width to 100%. I'm just not having much joy at the moment. I have it working fine on hover but that isnt adequate for mobile so I need an onClick event for this. Came up with this so far. I know im close, any help would be appreciated. Thanks in advance
Jquery Code
//open on click
$(".slideIn").click(function(){
$(".overlay").addClass('.overlay-active');
});
//close on x button click
$(".close").click(function(){
$(".overlay").removeClass('.overlay-active');
});
HTML CODE
<section class="intro" role="region">
<div class="split-screen row">
<div class="col-sm-12 col-lg-6 left">
<a class="btn-btn-primary slideIn" style="color:#fff;" title="link to landing page task" href="#"><h2>About Me</h2></a>
<div class="overlay">
<div class="text">
<figure class="col-lg-4"><img class="img-responsive" src="img/nick_avatar.png" ></figure>
<div class="col-lg-8">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Nick</h3>
<p>some text| some text | some text</p>
<q>a bit more text for us to read here, why not</q>
<br/><br/>
<h3>Lets Connect</h3>
<div class="social row">
<i class="fa fa-phone" aria-hidden="true"></i></li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a target="_blank" href="#" alt="Connect With Me On Twitter" title="Connect With Me On Twitter" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On LinkedIn" title="Connect With Me On LinkedIn" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
<a target="_blank href="#" alt="Connect With Me On CodePen" title="Connect With Me On CodePen" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-codepen fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On GitHub" title="Connect With Me On GitHub" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 right">
<a class="btn-btn-primary" title="link to landing page task" href="#"><h2>To The Task</h2></a>
</div>
</div>
</section>
CSS CODE
html{
height:100%
}
body{
height:100%;
}
.intro{
height:100%
}
.split-screen{height:100%;}
.left{
position: relative;
display : flex;
justify-content : center;
align-items : center;
background-color:#009dcc;
height : 100%;
color : #FFF;
}
.right{
display : flex;
justify-content : center;
align-items : center;
background-color:#FFF;
height : 100%;
color : #000000;
}
#media (max-width: 1200px) {
.left{
height:50%
}
.right{
height:50%
}
}
.fa{margin:15px;}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
background-color: #008CBA;
overflow: hidden;
transition: .5s ease;
}
.overlay-active {
width: 100%;
}
.fa{color:#ffffff;}
.fa:hover{color:#fac600;}
.text {
position: absolute;
top: 50%;
left: 50%;
width:84%;
height:50%;
white-space: nowrap;
color: white;
font-size: 20px;
overflow: hidden;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
figure{padding:10px;}
figure img{
border:3px solid #fff;
border-radius:50%;
}
.social{border-top: 2px solid #fff;}
#media all and (max-width: 768px) {
figure{display:none;}
.text{padding:5px; height:67%;}
}
#media all and (max-width: 468px) {
p,q{font-size:12px;}
}
In your functions, remove the . from the class name in addClass() and removeClass(). With it you're actually adding a class called .overlay-active which includes the ..
Also, worth noting, you do not need jQuery to add or remove a class. Remember, jQuery is just javascript.
I am trying to create a tooltip with buttons (Just like LinkedIn) for example.
This is what I have tried so far: (but stuck from here)
.tooltip{
display: inline;
color:black;
position: relative;
top:200px;
}
.tooltip:hover:after{
background: grey;
border-radius: 5px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
top: -53px;
width: 163px;
}
.tooltip:hover:before{
border:solid;
border-color: #333 transparent;
border-width: 6px 6px 0px 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span title="More">Linkedin Profile</span>
</body>
</html>
Issue:
But, I'm not able to figure out how to add <buttons> and also image to the tooltip?
How does the solution formulate for HTML/CSS/JS and HTML/CSS only?
Expected output:
Thank you
I would suggest to use Bootstrap popover as it is more flexible. See bootstrap documentation for popover here
Here is a simple example on how to use it FIDDLE
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<span data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login" class="btn btn-default" >Click me</span>
<div id="popover-content" class="hide">
<div class="row">
<div class="col-xs-4">
<img width="88px" height="88px"src="https://pbs.twimg.com/profile_images/816404989392211968/Wv_8ZDrX_400x400.jpg"/>
</div>
<div class="col-xs-8">
<h4>
Justin Trudeau <br/>
<small>
Prime minister of Canada
</small>
</h4>
<button class="btn btn-sm btn-primary">
Follow
</button>
<button class="btn btn-sm btn-default">
View profile
</button>
</div>
</div>
</div>
JAVASCRIPT
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});