I have a html website and I want to see on my mainpage a transparent overlay / popup with buttons like in the picture I uploaded. To press one of these buttons for redirection to particular url. How can I create this popup? It should be universal, therewith I don't need to change my html structure and also I can use it with different websites by just binding this JQuery/CSS.
My sketch:
I wrote up an example on ho wto accomplish this. You can use the rgba to add alpha (or transparency) into your colors.
$("body").append(`<div class="popup">
<ul>
<li>Ex 1</li>
<li>Ex 2</li>
<li>Ex 3</li>
<li>Ex 4</li>
</ul>
</div>`)
body {
margin:0;
padding:0;
}
.popup {
position:fixed;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background:rgba(77,77,77,.4);
}
.popup > ul {
list-style-type:none;
padding:0;
margin:0;
position: absolute;
top: 50%;
width:100%;
transform: translateY(-50%);
}
.popup > ul > li {
background:green;
display:inline-block;
color:black;
border:2px solid black;
width:calc(25% - 8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I was trying something out as a test but didn't quite know how to program it the right way. I was hoping someone could help me out with that.
I made a sketch so it would be a little more clear about what I want to achieve. The menu on the left needs to stay in that exact position.
Let's say the content next to the menu would be smaller than the menu itself. Then the green sections would go underneath the menu. This is not what I want to achieve. I was thinking about scaling the height of the content with Javascript if the content element is too small.
Do you feel like this is the right way to accomplish the desired result? Or could you suggest a better/cleaner way to accomplish this? (An example on jsfiddle would be great)
Thanks in advance!
Edit: I would also like to inform that the menu's height needs to be dynamic. For example what if I add an extra menu item.
You mean something like this?
Just be wary this Only works on MODERN browsers as I am using the checkbox hack :)
Here is a code snipet
*{
box-sizing:border-box;
margin:0px;
padding:0px;
}
#head{
background-color:#000;
border-bottom:#333 solid 1px;
display:block;
padding:10px 0px 0px 10px;
}
#head ul{
background-color:#f00;
display:block;
width:150px;
position:relative;
list-style:none;
margin:0px;
text-align:center;
}
#head li{
display:none;
}
#head input{
display:none;
}
#head input:checked ~ li{
display:block;
}
#head input:checked ~ label{
background-color:#511;
color:#fff;
}
#head label{
font-family:Constantia;
width:100%;
padding:10px 0px;
color:#333;
border-bottom:#111 dotted 1px;
display:block;
font-weight:bold;
text-transform:uppercase;
}
#head label:hover{
background-color:#511;
color:#fff;
cursor:pointer;
}
#head a:link{
background-color:#f00;
width:150px;
display:block;
color:#111;
text-decoration:none;
border-bottom:#333 solid 1px;
padding:10px;
float:left;
margin-right:10px;
}
#head a:visited{
color:#111;
}
#head a:hover{
background-color:#911;
color:#fff;
border-bottom:#211 solid 1px;
font-weight:bold;
}
#body{
padding:10px;
}
<div id="head">
<ul>
<input type="checkbox" id="menu" />
<label for="menu">Menu</label>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="body">
<h1>Content</h1>
<p> All my content sits here what am I suppose to do?</p>
</div>
By making use of floats rather than position absolute lets the browser know there is suppose to be content under the header if I had to change it to apply position absolute it would still go out the header but won't take up any space therfore the content wont shift next to or under it but rather behind the navigation.
You should see that the content will go below it when the window gets smaller if you wish to make the content not be squashed up a bit before going underneath the navigation is to set a min-width to the #body{} tag.
I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?
Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>
Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle
You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/
I want my submenu to have slide down effect using
$.animate({top:$("#menu").outerHeight()})
I want my submenu to have an effect as a car(submenu) leaving the garage(first level menu) on slide down, then car parking to the garage on a slide up. I do not want to have a $.slideDown() or $.slideUp() effects, because I do not like the effect of increasing height.
The problem is that I can not seem to make my first-level menu overlap my submenu on sliding down or sliding up. On hover submenu just overlaps the main menu and then stays "overlapped" on slide up.
Here is my HTML code:
<ul id="menu_Navigation2">
<li>First</li>
<li>Second
<ul>
<li>Default</li>
<li>Default</li>
</ul>
</li>
<li>Third</li>
<li>Forth
<ul>
<li>Forth default
</li>
<li>forth default
</li>
</ul>
</li>
</ul>
CSS:
#menu_Navigation {
border:1px solid green;
margin:0px;
padding:0px;
list-style-type:none;
}
#menu_Navigation li {
padding:4px 4px;
}
#menu_Navigation>li {
display:inline-block;
position:relative;
list-style-type:none;
z-index:90;
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
color:white;
font-size:13px;
cursor:default;
margin-right:-4px;
min-width:100px;
}
#menu_Navigation a {
color:white;
text-decoration:none;
}
#menu_Navigation ul {
position:absolute;
display:none;
padding:0px;
min-width:106px;
margin-left:-4.5px;
list-style:none;
top:-27px;
z-index:-999;
}
#menu_Navigation ul li {
display:block;
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
}
#menu_Navigation ul li:hover {
border:1px solid black;
background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
color:blue;
}
To clarify, please have a look at this jsFiddle, which illustrates the problem.
How can I achive this animate effect, so submenu appears as a whole(gradually) from the main menu then slides up to menu properly(not overlapping it)?
Thanks in advance for any suggestions.
Remove the z-index from:
#menu_Navigation>li
And add it to:
#menu_Navigation
For this to work(parent above children) the parent(first level of li) needs to be wrapped(the main ul) with an element with positive z-index and the children(internal ul) needs to have negative z-index(you have that).
EDIT: As suggested by Shukhrat Raimov I am adding his jsFiddle with the working code.
I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.
I have the current code and I am trying to put tabs on the side of my slideshow that change as the images change. and so the current image we are at is shown by the tab the active tab while still displaying the other tabs but in another color. The attached code is what I have come up with so far, but I can't seem to understand what comes next. I also tried to have my text vertical. I am also having trouble changing the height parameter of the tab div's, I changed the html but they wont get taller.
I just started learning I hope some one can help me out. Thanks.
Here's my HTML code:
<div id="content_transparent">
<div id="slideshow">
<div>
<div>
<div id="barChart_div" style="width: 60px; height: 50px;float:left;background-color: blue;"><p class="css-vertical-text">tab1</p></div>
<div id="stats_div" style="width: 60px; height: 50px; float:left;background-color: green; margin-top:50px;margin-left:-60px">tab2</div>
<div id="lineChart_div" style="clear:left; width: 60px; height: 50px;background-color: red;">tab3</div>
<div id="cdfChart_div" style="width: 60px; height: 50px;background-color: orange;">tab4</div>
</div>
<div class="fadein">
<div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
</div>
</div>
Here's my css:
p.css-vertical-text {
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
font-family:‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
}
.fadein {
position:relative;
height:572px;
width:100%;
left:0;
}
.fadein img {
position:absolute;
top:0;
width:95%;
height:572px;
left:60px;
}
.fadein div {
position:absolute;
height:100%;
width:100%;
}
#content_transparent {
z-index:2;
color:#FFFFFF;
text-align:center;
background:rgba(0, 0, 0, 0.5);
border:3px solid black;
height:1600px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:30px;
}
#slideshow{
width:100%;
height:575px;
background-color:black;
}
You might be looking for jQuery Tabs.
It offers easy to use tab-functionality and is used to following way:
1) You include the jQuery and jQuery UI javascripts in your HTML document and include the jQuery UI CSS file
2) You define the tabs and their content as follows
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div id="tabs-2"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div id="tabs-3"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
</div>
3) You create a javascript block to initiate the tabbing functionality as follows
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
4) That's it.