I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:
To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/
Related
I'm very new to coding and am trying to create a portfolio website.
I have used a pop-up code sourced from W3 Schools.
The idea is that when you click on each small illustration, a full-screen pop-up appears with text. I have been able to do it successfully for one pop-up when you click on the flower.
My problem is, I am now unsure how to do a pop-up for each small illustration with different text.
I have added my code to this post, as well as screenshots of it in the browser to give you a better idea of what it looks like with the illustrations. Website Screenshot Here
Any help would be very much appreciated! I'm very stuck.
/* Open */
function openNav() {
document.getElementById("popup").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("popup").style.height = "0%";
}
/* Universal Styles */
body, html {
width: 100%;
}
body {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
background-color: #9486f2;
font-weight: 300;
font-size: 18px;
}
/* Navigation */
a {
color: white;
text-decoration: none;
font-size: 20px;
}
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
nav {
text-align: right;
padding-top: 30px;
padding-right: 50px;
float: right;
}
nav div {
padding: 5px 0;
}
/* Logo */
header img {
height: 80px;
padding-left: 50px;
padding-top: 50px;
}
/* Heart & Icons */
.container .rowtop {
text-align: center;
}
#flower {
position: relative;
right: 120px;
cursor: pointer;
height: 100px;
}
#adobe {
position: relative;
left: 190px;
}
.container .rowmiddle {
text-align: center;
}
#code {
position: relative;
bottom: 370px;
right: 30px;
}
#heart {
position: relative;
bottom: 60px;
}
#pudding {
position: relative;
bottom: 330px;
left: 50px;
}
.container .rowbottom {
text-align: center;
}
#certificate {
position: relative;
bottom: 210px;
right: 120px;
}
#tv {
position: relative;
bottom: 200px;
left: 190px;
}
/* Pop-Ups */
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
opacity: 0.95;
background-color: #cc90ec; /* Black w/opacity */
overflow-y: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 40%; /* 100% width */
text-align: left; /* Centered text/links */
margin-top: 50px;
font-size: 30px;
line-height: 46px;
margin: 0 auto;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color:#adff2f;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Wavy Text */
.wavy
{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(
transparent, rgba(0,0,0,0.2));
}
.wavy span
{
position: relative;
display: inline-block;
color: #adff2f;
font-weight: 400;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
#keyframes animate
{
0%
{
transform: translateY(0px);
}
10%
{
transform: translateY(-20px);
}
30%,100%
{
transform: translateY(0px);
}
}
/* Footer */
h5 {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
font-weight: 200;
font-size: 14px;
}
footer {
padding-left: 50px;
position: relative;
bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dom Pooley</title>
<script src="main.js" ></script>
<link rel="stylesheet" href="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/css/style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght#0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<!-- Header -->
<body>
<header class="flex-container">
<img src="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/images/DomPooley_Logo_01.png"">
<nav>
<div>About</div>
<div>Work</div>
<div>Contact</div>
</nav>
</header>
<!-- Heart and Icons -->
<div class="container">
<div class="rowtop">
<img id="flower" src="resources/images/Pansy_01.png" onmouseover="this.src='resources/images/Pansy_02.png' " onmouseout="this.src='resources/images/Pansy_01.png'" onClick="openNav()">
<img src="resources/images/Adobe_01.gif" id="adobe" alt="" height="120">
</div>
<div class="rowmiddle">
<img src="resources/images/Code_01.gif" onmouseover="this.src='resources/images/Code_02.png' " onmouseout="this.src='resources/images/Code_01.gif'" id="code" alt="" height="40">
<img id="heart" height="500" src="resources/images/Dom_Heart_01.png" onmouseover="this.src='resources/images/Dom_Heart_02.png' " onmouseout="this.src='resources/images/Dom_Heart_01.png'"/>
<img src="resources/images/Pudding_01.gif" id="pudding" alt="" height="120">
</div>
<div class="rowbottom">
<img src="resources/images/Certificate_01.gif" id="certificate" alt="" height="100">
<img src="resources/images/TV_01.gif" id="tv" alt="" height="110">
</div>
</div>
<!-- Pop-Ups -->
<!-- The Overlay -->
<div id="popup" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div id="flowerpop" class="overlay-content">
<p>Thanks to COVID-19, I now have a new hobby -I have been growing, picking, pressing and coating flowers in resin to make jewellery. I would include a photo but they still have that "primary school project vibe"...
<br><div class="wavy">
<span style="--i:1;">*</span>
<span style="--i:2;">W</span>
<span style="--i:3;">a</span>
<span style="--i:4;">t</span>
<span style="--i:5;">c</span>
<span style="--i:6;">h</span>
<span style="--i:7;"> </span>
<span style="--i:8;">t</span>
<span style="--i:9;">h</span>
<span style="--i:10;">i</span>
<span style="--i:11;">s</span>
<span style="--i:12;"> </span>
<span style="--i:13;">s</span>
<span style="--i:14;">p</span>
<span style="--i:15;">a</span>
<span style="--i:16;">c</span>
<span style="--i:17;">e</span>
<span style="--i:18;">*</span>
</div></br></p>
</div>
</div>
<!-- Footer Section -->
<footer>
<h5>Copyright Dominique Pooley 2020</h5>
</footer>
</body>
</html>
You have to make a small change in css.
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
You have to remove letter-spacing: 5px; from css file.
then code looks like :
a:hover {
color:#adff2f;
font-weight: 400;
}
based on what you've mentioned, it sounds like you're trying to have a generic pop-up/modal as a HTML element and then when you click on different illustrations it will open the modal and the modal would contain some text related to that illustration that you clicked on.
What you want to do, is keep your modal, which appears to be the #popup element, add an onclick to each illustration that runs a function which dynamically injects some text by targetting the heading where you need the text to be, for example:
toggleModal (title, subtitle) {
const headingEl = document.querySelector('[data-your-heading]')
const subtitleEl = document.querySelector('[data-your-subtitle]')
headingEl.innerText = title
subtitleEl.innerText = subtitle
// run some code to hide/show the modal below here
}
Next, attach the data-your-* attributes to whichever tag you want to update text with, for instance a <p> tag within your generic HTML modal/pop-up.
And then on each of your illustrations, you add an onclick function and pass the arguments of what text you want, for example:
<button type="button" onclick="toggleModal('My Title', 'My Subtitle')">Show Illustration 1</button>
I created a system in a website I'm making that uses a single HTML file, with the user clicking buttons on either side of the page to scroll the content. Of course, I want to hide the buttons when the user reaches either end of the content (i.e. disable the left arrow when on the leftmost page). I'm using console.log() to print the left value of the <div> containing the content, which is what I .animate() with jQuery to create the effect. However, when I scroll once using the buttons, the value changes to 0px, which is already the default CSS value of the <div>. Scrolling again, the value changes to -99.9999px, which is also the value when I scroll back to the first page. This means that my button disappears as soon as I scroll to the third page, hampering further navigation. The inline style attribute always contains the expected value, however. What is the reason for these discrepancies?
Be forewarned, the Snippet is very messed up. You might need to copy and paste into some local files. Sorry about that. The #box is the <div> you should paying attention to. Thanks!
Snippet:
body {
background-image: url("images/pinecones.JPG");
min-height: 100%;
margin: 0px;
background-repeat: no-repeat;
max-width: 100%;
overflow-x: hidden;
}
::selection {
background-color: green;
}
::-moz-selection {
background-color: green;
}
footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
width: 100%;
padding: 5px;
padding-right: 0px;
padding-left: 0px;
font-family: monospace;
}
p {
font-family: 'Cambria', sans-serif;
margin: 10px;
margin-bottom: 20px;
text-indent: 20px;
}
div.page:hover {
font-size: 120%;
}
h1 {
font-family: sans-serif;
}
#box {
position: relative;
left: 0%;
}
.banner-text {
text-indent: 0px;
font-family: sans-serif;
font-size: 30px;
letter-spacing: 3px;
color: white;
margin: 0px;
margin-top: 20px;
margin-right: 35px;
display: inline-block;
float: right;
cursor: pointer;
}
.banner-text:hover {
font-size: 30px;
}
#media screen and (max-width: 1200px) {
.banner-text {
font-size: 25px;
}
}
#media screen and (max-width: 1100px) {
.banner-text {
font-size: 20px;
}
}
/* I'll need to add more progressions of this, sizing down the margin and eventually getting rid of this to go mobile. */
#banner {
background-color: #000000;
opacity: 0.8;
width: 100%;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
display: block;
z-index: -1;
}
#banner-text {
display: block;
position: absolute;
left: 340px;
}
#navbar {
position: absolute;
left: 340px;
top: 50px;
color: white;
}
.nav-text {
text-indent: 0px;
float: left;
margin: 0px;
margin-right: 30px;
margin-top: 30px;
font-family: sans-serif;
letter-spacing: 2px;
font-style: italic;
cursor: pointer;
}
.nav-text:hover {
font-size: 120%;
margin-right: 15px;
}
#media-box {
position: absolute;
right: 0px;
z-index: 1;
margin: 20px;
width: 200px;
}
.media {
float: right;
cursor: pointer;
}
.contact-info {
position: absolute;
right: 0px;
margin-top: 10px;
margin-right: 5px;
font-size: 14px;
color: white;
font-family: sans-serif;
letter-spacing: 1px;
}
.phone {
cursor: default;
top: 50px;
}
.email {
top: 80px;
cursor: pointer;
}
#logo {
position: absolute;
top: 0px;
left: 0px;
display: block;
}
.page {
display: block;
background-color: black;
opacity: 0.8;
color: white;
}
.box {
position: absolute;
top: 500px;
width: 100%;
}
#title {
position: relative;
width: 50%;
font-style: italic;
font-size: 24px;
font-family: sans-serif; /* Redundant if decide to use sans-serif elsewhere */
letter-spacing: 2px;
}
#title-text:hover {
font-size: 100%;
}
.arrow {
position: fixed;
margin: 10px;
cursor: pointer;
z-index: 100;
}
.left {
left: 0px;
visibility: hidden;
}
.right {
right: 0px;
}
.main {
width: 50%;
margin: auto;
position: relative;
height: 300px;
}
.intro { /* Need to fix this thing not scrolling right */
width: 50%;
margin-left: 20px;
}
#left {
position: relative;
margin-left: 68px;
width: 25%;
height: 355px;
right: 0px;
}
#bottom {
width: 50%;
position: relative;
}
/* The pages position values below */
.second {
position: absolute;
left: 62.5%;
}
.third {
position: absolute;
left: 112.5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<link href="simple-scrollbar.css" rel="stylesheet"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Bud, Branch & Blossom Landscaping, LLC</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.min.js"></script>
</head>
<body>
<div id="media-box">
<img id="linkedin" class="media" src="images/linkedin.png" title="Linkedin"/>
<img id="houzz" class="media" src="images/houzz.png" title="Houzz"/>
<img id="instagram" class="media" src="images/instagram.png" title="Instagram"/>
<img id="facebook" class="media" src="images/facebook.png" title="Facebook"/>
<a class="contact-info phone" href="tel:+15175151723">(517)-515-1723</a>
<a class="contact-info email" href="#">Contact us today!</a>
</div>
<div id="banner">
<div id="banner-text">
<p id="maintenance" class="banner-text">MAINTENANCE.</p>
<p id="installation" class="banner-text">INSTALLATION.</p>
<p id="design" class="banner-text">DESIGN.</p>
</div>
<div id="navbar">
<p id="about" class="nav-text">About Us</p>
<p id="gallery" class="nav-text">Our Work</p> <!-- Whichever one Tommy likes better. -->
</div>
</div>
<!-- Everything on top of the banner -->
<div id="logo"><img src="images/whitelogo.png"/></div>
<!-- Content -->
<div id="box">
<div class="first box">
<img class="left arrow" src="images/left_arrow.png"/>
<img class="right arrow" src="images/right_arrow.png"/>
<div class="first page intro">
<p>Bud, Branch & Blossom Landscaping is a small, independent landscaping firm that serves the Greater Lansing area.</p>
<p>We perform a variety of landscaping services, including landscape design, plant installation and removal, hardscaping, and lawn maintenance.</p>
<p>Bud, Branch & Blossom is also an active member of the Michigan Nursery and Landscape Association (MNLA), and is approved by the Michigan Department of Agriculture and Natural Resources (MDANR).</p>
</div>
<div class="first page intro">
<p>Tommy we need another testimonial yo.</p>
</div>
</div>
<!-- Second page -->
<div class="second box">
<div id="title" class="second page">
<p id="title-text">About Us</p>
</div>
<div class="second page main" ss-container>
<p>Bud, Branch & Blossom owner Tommy Morgan has spent years researching plants, shrubs, and trees. Before forming the company, he redesigned spaces in his own yard, honing his understanding of how textures and colors fit beside each other in garden beds. That appreciation for landscape composition serves his customers well. He enjoys making connections with his clients and getting to spend time outdoors doing what he loves.</p>
<p>The business started with a few small design projects, supplemented by several lawn mowing jobs. A year after forming the company, Tommy hired his first employees – people who, as he says, “understand that all of the work we do is in service to our customers.” He’s invested in top-of-the-line equipment, with brands like Exmark, Stihl, and Redmax lining our equipment racks.</p>
</div>
</div>
<!-- Third page -->
<div class="third box">
<div id="left" class="third page" ss-container>
<p>Design work allows us to share our creativity with our customers. Owner Tommy Morgan enjoys creating artwork with natural components. When designing a garden, many important factors must be considered, such as light, soil conditions, water, drainage conditions, and location. </p>
<p>The first step of the design process involves a free initial consultation. This allows us to understand your needs, and gives us an opportunity to see and understand the space. Following this, a design will be presented to you, along with pictures of plants/materials being used, and an estimate of the cost.</p>
</div>
</div>
</div>
<footer class="page">Copyright © Bud, Branch & Blossom Landscaping, LLC. All rights reserved.</footer>
<script type="text/javascript"> // Hover effects
// Elements
var fb = document.getElementById('facebook');
var ig = document.getElementById('instagram');
var hz = document.getElementById('houzz');
var li = document.getElementById('linkedin');
// Social media
fb.addEventListener('mouseover', function() {
fb.src = "images/facebook_hover.png";
});
fb.addEventListener('mouseleave', function() {
fb.src = "images/facebook.png";
});
ig.addEventListener('mouseover', function() {
ig.src = "images/instagram_hover.png";
});
ig.addEventListener('mouseleave', function() {
ig.src = "images/instagram.png";
});
hz.addEventListener('mouseover', function() {
hz.src = "images/houzz_hover.png";
});
hz.addEventListener('mouseleave', function() {
hz.src = "images/houzz.png";
});
li.addEventListener('mouseover', function() {
li.src = "images/linkedin_hover.png";
});
li.addEventListener('mouseleave', function() {
li.src = "images/linkedin.png";
});
</script>
<script type="text/javascript"> // PAGE SCRIPT
function test() {
xleft = document.getElementById('box').style.left;
console.log(xleft);
if(xleft == '-500%') {
$('.right').css('visibility', 'hidden');
} else {
$('.right').css('visibility', 'visible');
}
}
$('.right').click(function() {
$('#box').animate({
left: '-=100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.left').click(function() {
$('#box').animate({
left: '+=100%'
}, 400);
if(xleft == '-200%') {
$('.left').css('visibility', 'hidden');
} else {
$('.left').css('visibility', 'visible');
}
});
$('#about').click(function() {
$('#box').animate({
left: '-100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#design').click(function() {
$('#box').animate({
left: '-200%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#installation').click(function() {
$('#box').animate({
left: '-300%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#maintenance').click(function() {
$('#box').animate({
left: '-400%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#gallery').click(function() {
$('#box').animate({
left: '-500%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.email').click(function() {
$('#box').animate({
left: '-600%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
</script>
</body>
</html>
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>
When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.