So I have a set of 4 divs at the bottom of my page. I intend for the top of these divs to look like tabs, and when the div (tab) is clicked on, that div's height will increase and thus appear like a hidden page is rising from the bottom of the window.
Here is my code so far:
---Css---
tab1 {
float: left;
width: 400px;
height: 100px;
background: red;
position: absolute;
left: 300px;
bottom: 0px;
clear:both;
}
tab2 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 400px;
bottom: 0px;
}
tab3 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: red;
position: absolute;
left: 500px;
bottom: 0px;
}
tab4 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 600px;
bottom: 0px;
}
---HTML---
<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
<tab4></tab4>
---JavaScript---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script>
$('tab1').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab2').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
$('tab3').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab4').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
Here is a jsfiddle to demonstrate what I have http://jsfiddle.net/tkTJr/
I want to allow each div to be 100% of the window width but still enable the others to be clicked. At the moment if I did that I can only click on the one with the lowest z-index because they are overlapping. I was thinking of making the top of each div stick out like a tab to differentiate one from another. Any help in doing so?
Many thanks, I hope some one will know the solution to this problem.
I tried to achieve this using two approaches:
Approach #1: Javascript/jQuery
I went ahead and added functionality that closes the 'active' tab as I call it if the user clicks off of the tab's content or tab. Essentially this just toggles the bottom position of the tab and shows/hides (by way of sliding up/down) each time a user clicks a tab. Here is a live demo of that. If you're not looking to have the added functionality, this fiddle will do just fine for you
Here is the relevant code for the version with increased functionality:
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
Approach #2: CSS
Before I had toggled width/height with CSS based on <input>s and <label>s. This time I decided to try to make the same tabs using only CSS, so here is my attempt. Essentially it puts a link around the tab and animates it up when clicked and also animates the content's height when clicked. It took a lot less fiddling to complete and I always love complete CSS projects <3 However this approach does not quite achieve the same functionality as the jQuery approach, which is what I was afraid of and made me sad :( The problem is described below in 'Functionality note'
Here is the relevant code for a CSS only approach:
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
Usage note: The jQuery approach requires devices be able to run jQuery (of course) and the CSS approach requires that users be on "modern" browsers that allow CSS3 transitions. I didn't include all of the browser tags in my CSS, just the ones for webkit, mozilla, and IE.
Functionality note: The CSS approach I used does not allow user to click the tab to 'close' the content, they must click anywhere else. It also allows the tab to close when the content is clicked, so unless someone finds a work around for it it's only functional for displaying static content like images, text, etc.
One could change the CSS demo to only open/close when the tab itself is clicked by using the checkbox-hack, allowing the content to be selected and such
If you'd like any part of it explained further let me know. I hope I helped!
Related
In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE
You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.
$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
I am trying to have a simple design with three nested divs (Div 3 inside Div 2 inside Div 1), each overlaid on top of each other (Div 3 overlaid on Div 2 overlaid on Div 1). The middle div (Div 2) has a certain level of opacity, such that the outermost div (Div 1) is visible to some extent. However, the div which is the top-most div (i.e. Div 3) should be completely visible and the opacity of Div 2 should not affect Div 3.
Here is the jsfiddle. Child 2's opacity is getting affected by Child 1's opacity, which I don't want to happen. I want Child 2's opacity to be 1.0. How can I do this? Please test on Chrome and Firefox.
Following is the html part:
<html>
<head>
</head>
<body>
<div class="parent box">
Parent
<div class="child box">
Child
<div class="child2 box">
Another Child
</div>
</div>
</div>
</body>
</html>
Following is the css (note that I need position: absolute for both the children):
.box{
width:200px;
height:200px;
}
.parent {
background-color:green;
}
.child {
background-color:blue;
left:40px;
top:40px;
z-index:10;
position:absolute;
opacity:0.35;
}
.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}
That's not possible, opacity affects all childs. Use
rgba(r,g,b,a)
for the elements instead.
Example:
.parent {
background-color: rgba(28,179,239, 0.35)
}
.child {
left:40px;
top:40px;
z-index:10;
position:absolute;
background-color: rgba(28,179,239, 0.5)
}
.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}
See here
Break the tree of the nested divs: You don't need to change your HTML, but set the background color and opacity that is now in the child div to a pseudo element of it.
This way you break the dependency in the opacity channel
.box {
width: 200px;
height: 200px;
}
.parent {
background-color: green;
}
.child {
left: 40px;
top: 40px;
z-index: 10;
position: absolute;
}
.child:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: blue;
opacity: 0.35;
}
.child2 {
background-color: green;
left: 40px;
top: 40px;
z-index: 100;
position: absolute;
}
<div class="parent box">
Parent
<div class="child box">
Child
<div class="child2 box">
Another Child
</div>
</div>
</div>
I'm trying to make a web page to time a race and I had the idea to make the html page with the timer slide from the right with hitting a button
here's the html of the main menu:
<!DOCTYPE HTML>
<body style="background:#f2f2f2;">
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu" onclick="openChronometre()" ></div>
</div>
</body>
here's a js fiddle of the main menu (without images)
here's a js fiddle of the timer (the layout isn't that great, still WIP)
when hitting the black bar in the main menu, the entire page html page for the timer should come from the right, is there any way to do that?
Sorry I didn't do the animation part. But as a basic idea...
You're probably better off keeping the timer as a div on the main menu page.
If it has to be another page then use an iframe or ajax to load the contents to the div I guess.
Either way it should be contained in the element you're clicking on. Then you can use some JavaScript to modify the CSS and show it/slide it on the page. The jQuery library has a lot of animation/slide functions for example.
I basically combined your 2 fiddles into one and added:
#options {position: absolute; left: 90%; }
and
onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"
html {
overflow: hidden;
}
body {
font-family: 'Century Gothic';
font-size: 34px;
}
#options {
box-shadow: 0 0 5px 1px;
margin-top: 100px;
margin-right: -8px;
height: 450px;
cursor: pointer;
position: absolute;
left: 90%;
}
#Chrono1,
#Chrono2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
padding: 6px 20px;
}
#Panel1,
#Panel2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
width: 400px;
height: 450px;
}
#Panel1:hover,
#Panel2:hover {
transition: opacity 0.5s;
-webkit-animation: PanelSlide 2s;
/* Chrome, Safari, Opera */
animation: PanelSlide 2s;
/* IE */
}
<body style="background:#f2f2f2;">
<div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
if (opts.style.left == '0px') {
opts.style.left = '90%';
} else {
opts.style.left = '0px';
}
">
<div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>
<div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
<div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
00:00:00
</div>
<div id="Chrono2" style="display: inline-block; position:relative;">
00:00:00
</div>
</div>
<div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
<div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">
</div>
<div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">
</div>
</div>
</div>
</body>
Just have (or load) the chronometre page in a div that is outside of the visibility, then use the animations to slide it in:
#next_page {
position:fixed;
top:0px;
left:100%;
z-index:222;
height:100%;
width:100%;
background:rgba(0,0,0,0.6);
}
And then with JS (I used jQuery for convenience):
function openChronometre(){
$("#next_page").stop(0,0).animate(
{ left: 0 },
1000
);
}
You can see it working here: http://jsfiddle.net/1uggfw32/5/ (I made the options as a green box so you can click on them).
I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they are on the opposite ends of the slideshow div
So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float in place of the previous formatting that I just mentioned)
I feel like it might have something to do with the styling, but I could be horribly wrong.
Anyone have any ideas?
HTML:
<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
<div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">
<div class="slide">
<h2>Web Development With PHP</h2>
<p><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></p>
</div>
<div class="slide">
<h2>Database Design with MySQL Workbench</h2>
<p><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></p>
</div>
<div class="slide">
<h2>Web Design With CSS and HTML</h2>
<p><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
CSS:
/*
* Slideshow style rules.
*/
#slideShow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideShow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideShow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
/**
* Slideshow controls style rules.
*/
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
float: left;
/*
top: 0;
left: 0;
*/
background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
float: right;
/*
top: 0;
right: 0;
*/
background:transparent url(control_right.jpg) no-repeat 0 0;
}
Javascript (Running in HTML document):
// Insert controls in the DOM
$('#slideShow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
This should work just fine:
#slideshow{
position:relative;
}
#leftControl{
float:none;
top:0;
left:0;
}
#rightControl{
float:none;
top:0;
left:0;
}
of course you dont need to add the float none, you could just simply remove the float:left and float:right that is currently on those elements.
When the controls are positioned with absolute positioning -
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background:#ff0000;
}
#rightControl {
top: 0;
right: 0;
background:#ffcc00;
}
I am not seeing an error in how it is being displayed. If you look here http://jsfiddle.net/CERFY/ it looks correct. Is there some other markup that could be affecting this, that maybe you had a live example to show?
My phrasing is probably all wrong, but this is what I have.
http://jsfiddle.net/ozzy/Ute6B/
Now this works fine, its for an ad system I am making nothing earth shattering.
The above example is a banner.
Now if I add this code: ASWELL ( it all goes pear shaped ) so I am obviously a knob, and have cocked something up. As functions cannot have ID's i gather it must be the mouse events that are colliding, so not allowing the feature I have made work independantly on both codes... essentially, if you add the code below to the fiddle... bugger that, I will create a secondary fiddle.. with 2 sets of code. added for you to see the issue.
http://jsfiddle.net/ozzy/9zcqW/
The idea is that each of the Adverts is unique, and the function on hover for the info links works independantly on each advert, in some cases we may need 4 adverts per page... so really any help appreciated... my previous post here::: may shed some light to answers already received, we didnt have internet when I posted that so now this is updated version in this question...
Give this function an id
you can try this also i am not sure it's perfect way or not but it's work
demo here
javascript
function mouseOver(ban_id)
{
if(ban_id=="flashdivb")
document.getElementById("flashdivb").className="flash-abgb";
else if(ban_id=="flashdivsb")
document.getElementById("flashdivsb").className="flash-abgsb";
}
function mouseOut(ban_id)
{
if(ban_id=="flashdivb")
document.getElementById("flashdivb").className="flash-ib";
else if(ban_id=="flashdivsb")
document.getElementById("flashdivsb").className="flash-isb";
}
html
<!--html code for the banner-->
<div class="banner">
<div class="bannerAd">
<img src="http://sitehelp.com.au/images/bannerad.png">
<a href="somelink.html">
<div id="flashdivb" class="flash-ib"></div>
</a>
<a href="/media">
<div class="ibhover" onmouseover="mouseOver('flashdivb')" onmouseout="mouseOut('flashdivb')"> </div>
</a>
</div>
</div>
<!--html code for the sidebar-->
<div class="sidebar">
<div class="sidebarAd">
<img src="http://sitehelp.com.au/images/sidebarad.png">
<a href="somelink.html">
<div id="flashdivsb" class="flash-isb"></div>
</a>
<a href="/media">
<div class="isbhover" onmouseover="mouseOver('flashdivsb')" onmouseout="mouseOut('flashdivsb')"> </div>
</a>
</div>
</div>
css
/*css for the banner*/
h3 { font-family:Arial, Helvetica, sans-serif;
color:#444444;
}
/*header advert*/
.banner {
width:468px;
height:60px;
border:1px solid #aaaaaa;
position:relative;
}
.bannerAd{
position:absolute;
top:0px;left:0px;
}
.flash-ib {
background-image: url("http://sitehelp.com.au/images/bannerinfo.png");
height: 60px;
width: 468px;
position:absolute;
top:0px;left:0px;
/*opacity:0.4;opacity option*/
}
.flash-abgb {
background-image: url("http://sitehelp.com.au/images/bannerinfolink.png");
height: 60px;
width: 468px;
position:absolute;
top:0px;left:0px;
/*opacity:0.8;opacity option*/
}
div.ibhover {
height: 20px;
width: 25px;
position: absolute;
top: 40px;
left: 443px;
}
/*css for the sidebar*/
.sidebar {
width:250px;
height:250px;
border:1px solid #aaaaaa;
position:relative;
}
.sidebarAd{
position:absolute;
top:0px;left:0px;
}
.flash-isb {
background-image: url("http://sitehelp.com.au/images/sidebarinfo.png");
height: 250px;
width: 250px;
position:absolute;
top:0px;left:0px;
/*opacity:0.4;opacity option*/
}
.flash-abgsb {
background-image: url("http://sitehelp.com.au/images/sidebarinfolink.png");
height: 250px;
width: 250px;
position:absolute;
top:0px;left:0px;
/*opacity:0.8;opacity option*/
}
div.isbhover {
height: 20px;
width: 25px;
position: absolute;
top: 230px;
left: 225px;
}