I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?
I circled it with red of what I wanted on the image.
should I use an icon
how do I get it to point to specific point on the web page
One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.
To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.
With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.
Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):
$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;
// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("<div class='overlay'></div>").appendTo("body");
// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}
// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}
// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();
// Create the tooltip
tooltip = $("<div class='tooltip'></div>")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}
createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");
// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
background: black;
font-family: Verdana;
font-size: 12px;
}
.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}
.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}
.menu li + li {
border-left: 1px solid gray;
}
.menu li a {
color: gray;
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}
.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;
width: 180px;
height: auto;
background: red;
padding: 10px;
}
.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>
Home
</li>
<li>
Product
</li>
<li>
Shop
</li>
<li>
About the brand
</li>
<li>
Join us
</li>
<li>
Contact
</li>
</ul>
Related
I'm trying to make my vertical navigation bar to move to the top when the user scrolls (the original position is not at the top).
I only know HTML, CSS and JavaScript, so I don't know jQuery.
Here is the code for the navigation bar:
Is there something wrong with the class or id names or is it the JavaScript code?
var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");
window.addEventListener("scroll", navigationFixing());
function navigationFixing() {
if (body.scrollTop > navigation.getBoundingClientRect().bottom)
{navigation.className = "fixedNavigation";
}
else {
navigation.className = "notFixedNavigation";
}
}
#navigation {list-style-type: none;
width: 15%;
margin: 0px;
padding: 0px;
font-size: 35px;
border: 1px solid;
height: 100%;
background-color: #d6d6c2;
overflow: auto;
position: absolute;
}
.navigationbar {
border-bottom: 1px solid black;
}
.navigationbar a {display: block;
background-color: #C0C0C0;
padding-left: 10px;
padding-bottom: 16px;
text-decoration: none;
color: #ffffff;
}
.navigationbar a:hover {background-color: #404040;
color: white;}
.navigationbar a.nuvarande {background-color: black;
}
.fixedNavigation {
position: fixed;
top: 0;
left: 0;
}
.notFixedNavigation {
position: absolute;
}
<ul id="navigation" class="notFixedNavigation">
<li class="navigationbar">
Home
</li>
<!---------------DATOR-------------------
<li class="navigationbar">
Play
</li>
---------------------------------------->
<li class="navigationbar">
Rules
</li>
<li class="navigationbar">
Tactics
</li>
<li class="navigationbar">
Contact
</li>
</ul>
You care calling your event handler immediately, instead of attaching it to the listener. Remove the parens.
window.addEventListener("scroll", navigationFixing);
In addition, navigation.getBoundingClientRect().bottom will change when the position changes. Better to set it outside the function.
var pos = navigation.getBoundingClientRect().bottom;
function navigationFixing() {
if (body.scrollTop > pos) {...}
}
Also note from #bestinamir, your CSS is being overwritten. It needs some work, but you can start with:
.fixedNavigation {
position: fixed !important;
top: 0;
left: 0;
}
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
Good day,
I'm having trouble with jquery. i found a topic here that i want to learn using jquery slide right to left div http://jsfiddle.net/PXLJG/2/.
what i want to achieve is when hover, show hidden content on specific div.
i tried adding .addClass('active'); to the script.
here is the script i made
$(document).ready(function(){
$('.holdingbox').hover(function(){
var rightbox = $('.rightbox');
if (rightbox.hasClass('active')){
rightbox.stop().animate({width: '-0px'}, 1000).removeClass('active');
} else {
rightbox.stop().animate({width: '90px'}, 1000).addClass('active');
}
});
});
The problem now is when i hover on one div, all div shows up.Please see attached image.
Hope you guys can point me to right direction. thank you
You need to target the rightbox element in current element context i.e. this
You can either use context or .find() to target child element.
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this); //$(this).find('.rightbox')
});
$(document).ready(function() {
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '-0px'
}, 1000).removeClass('active');
} else {
rightbox.stop().animate({
width: '90px'
}, 1000).addClass('active');
}
});
});
div {
display: inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: relative;
top: 0;
left: 0;
display: inline-block;
font-size: 24px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 30px;
vertical-align: top;
margin-right: 0;
}
.content {
width: 100px;
position: absolute;
background-color: #ac193d;
height: 29px;
left: 0;
top: 0;
right: 0;
color: #FFF;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdingbox">
<span class="rightbox"><span class="content">Kenyér</span></span>
<span class="leftbox">></span>
</div>
<div class="holdingbox">
<span class="rightbox">
<span class="content">Kenyér</span>
</span>
<span class="leftbox">></span>
</div>
Change code to this
You'll get children of the hovered element this way. Without using $(this) you target all '.rightbox' elements in document.
$('.holdingbox').hover(function(){
$(this).find('.rightbox').stop().animate({width: '90px'}, 1000)
}, function(){
$(this).find('.rightbox').stop().animate({width: '-0'}, 1000)
});
I have a container that holds three items.
One is floated left, another is centered and the last is floated right. If I remove the center item and add it back the right most item gets pushed down and I don't know why.
If you select the right item and view it in Chrome dev tools you can toggle the float: right off/on and then it will be positioned correctly.
This happens in Chrome but does not happen in FireFox. (I have not tested in IE)
I have a demo of the issue here: http://codepen.io/anon/pen/rVyRmy?editors=001
var on = true;
var l = $('<div class="left"></div>');
var r = $('<div class="right"></div>');
var clicky = function() {
if (on) {
$('.container').empty();
$('.container').append(l);
$('.container').append($(
'<div class="fill">' +
'<span>text</span>' +
'<span>text</span>' +
'<span>text</span>' +
'<span>text</span>' +
'</div>'
));
$('.container').append(r);
on = false;
} else {
$('.container').empty();
$('.container').append(l);
$('.container').append($('<input type="text" />'));
$('.container').append(r);
on = true;
}
$('.right').on('click', clicky);
};
$('.right').on('click', clicky);
.container {
width: 400px;
height: 20px;
text-align: center;
background-color: lightgray;
}
.left, .right {
display: inline-block;
width: 14px;
}
.left {
position: relative;
float: left;
}
.left:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8.7px 5px 0;
border-color: transparent orange transparent transparent;
}
.right {
position: relative;
float: right;
}
.right:before {
position: absolute;
top: 4px;
right: 4px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent orange;
}
span {
width: 93px;
background-color: green;
display: block;
float: left;
}
div span:first-child {
margin-left: 14px;
}
<div class="container">
<div class="left"></div>
<input type="text" />
<div class="right"></div>
</div>
In the above I clear everything and redraw, I have also tried leaving the left and right elements and just removing/adding the center back but I get the same result.
You can fix this by forcing a redraw on the right element. There are a couple of ways to do this, but my preferred way is $(r).hide().show(0);
$(r).offsetHeight has been known to work, though it doesnt work in the codepen you linked to and it doesnt work in safari. For background I added the code as follows:
else {
$('.container').empty();
$('.container').append(l);
$('.container').append($('<input type="text" class="middle" />'));
$('.container').append(r);
$(r).hide().show(0);
on = true;
}
The original SO post from which I got my answer when I ran into a similar problem the other day: Force DOM redraw/refresh on Chrome/Mac
Well, i'm starting to write this webpage and i've run into a few problems that i just cannot quite find the answers to.
The basic idea of the code I have is:
Open menu when the mouse is on "explore webpage"
Menu "links" highlight on mouseover
When user clicks on menu item, the menu moves to the top of the page and the "link" stays highlighted until the user clicks a different link.
When the menu moves to the top, a div opens below, displaying the content for that section.
I am having two main problems. Firstly, whenever I click on the menu item, it does not stay highlighted (number 3). Secondly, the div is not opening below the menu after the click(number 4). I would greatly appreciate any insight into these issues.
I am including all of my code, as I believe it is all relevant to my problems.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #000000;
}
#container
{
z-index: -1;
background: #000000;
width: 900px;
height: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}
#explore
{
z-index: 1;
background: #000000;
width: 300px;
height: 150px;
position: absolute;
top: 41.666%;
left: 33.333%;
opacity: 1;
}
#explore-text
{
z-index: 1;
color: #eb56bd;
font-size: 50px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
position: absolute;
top: 5px;
left: 0%;
opacity: 1;
}
.title
{
z-index: 2;
width: 300px;
height: 150px;
text-align: center;
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
color: #000000;
display: none;
}
#news
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 33.333%;
}
#about
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 0%;
}
#events
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 66.666%;
}
.content
{
z-index: 0;
background: #b0408d;
width: 900px;
position: absolute;
top: 21.666%;
left: 0px;
height : 900;
}
#news-content
{
display: none;
}
#about-content
{
display: none;
}
#events-content
{
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="explore" onmouseover="overExplore()" onmouseout="outExplore()">
<div id="explore-text">Explore Webpage</div>
</div>
<div id="news" class="title" onmouseover="overTitle(news)" onmouseout="outTitle(news)" onclick="titleClick(news)">news</div>
<div id="about" class="title" onmouseover="overTitle(about)" onmouseout="outTitle(about)" onclick="titleClick(about)">about</div>
<div id="events" class="title" onmouseover="overTitle(events)" onmouseout="outTitle(events)" onclick="titleClick(events)">events</div>
<div id="news-content" class="content">
</div>
<div id="about-content" class="content">
</div>
<div id="events-content" class="content">
</div>
</div>
<script>
var titleClicked = false;
var isClicked;
var newsContent = document.getElementById('news-content');
var aboutContent = document.getElementById('about-content');
var eventsContent = document.getElementById('events-content');
var title = document.getElementsByTagName('title');
var news = document.getElementById('news');
var about = document.getElementById('about');
var events = document.getElementById('events');
var explore = document.getElementById('explore');
var exploreText = document.getElementById('explore-text');
function overExplore() {
explore.style.width="900px";
explore.style.left="0%";
explore.style.background="#eb56bd";
explore.style.cursor="pointer";
explore.style.cursor="hand";
explore.style.opacity="0";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
function outExplore() {
explore.style.width="300px";
explore.style.left="33.333%";
explore.style.background="#000000";
exploreText.style.left="0%";
exploreText.style.top="5px";
explore.style.opacity="1";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
function overTitle(div) {
if (div!= isClicked) {
div.style.background="#b0408d";
}
if (titleClicked == false) {
div.style.display="block";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
explore.style.cursor="pointer";
explore.style.cursor="hand";
}
function outTitle(div) {
if (div!= isClicked) {
div.style.background="#eb56bd";
}
if (titleClicked == false) {
div.style.display="none";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
}
function titleClick(div) {
div.style.background="#b0408d";
var isClicked = div;
if (div == news)
{
about.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="block";
aboutContent.style.display="none";
eventsContent.style.display="none";
}
else if (div == about)
{
news.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="block";
eventsContent.style.display="none";
}
else
{
news.style.background="#eb56bd";
about.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="none";
eventsContent.style.display="block";
}
explore.style.top="5%";
news.style.top="5%";
about.style.top="5%";
events.style.top="5%";
titleClicked=true;
}
</script>
</body>
</html>
Thanks so much for your help.
A secondary issue: how do I prevent the cursor from changing from the pointer when directed at the text in my menu?
Thank again!
I've never managed to get the pseudo-classes (like :hover) to behave the way you want. If you can use jQuery, you can add a click function to the menu class:
$('.title').click(function() {
$('.title').css({'background':'#eb56bd'});
$(this).css({'background':'#b0408d'});
});
First you set all backgrounds to the non-clicked color, then apply the highlight color to the clicked item. This ensure a previously clicked item has the highlight removed when you click on another item.
JSFiddle
You should use css classes to style your menu links:
.selected{background:rgb(176, 64, 141);}
When a menu link is clicked, then you apply the selected class to the that menu link
function titleClick(div) {
//div.style.background="#b0408d";
div.className='selected';
var isClicked = div;
Following that you'll need to clear the 'selected' class from the other menu links so that they are no longer selected, example:
about.className="";
events.className="";
Instead of using mouseover and mouse out to style your menu links, use css :hover instead:
#news:hover{
background:"#eb56bd";
}
As for the div not showing, I'm guessing it's because the divs are empty. I've filled it up with some random text and it does show.