I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.
My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it.
I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?
Here's my code so far:
JavaScript (jQuery):
$(function() {
$("#bandeau").click(function() {
$("#full_screen").toggle();
});
});
HTML:
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">content</div>
</div>
CSS:
#bandeau {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width: 100%;
height: auto;
color: white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target><h1 id=warning>FULLSCREEN CONTENT</h1></div>
</label>
This will toggle full screen on or off
https://jsfiddle.net/42atLz1g/1/
$("#bandeau, #full_screen").click(function(){
$("#full_screen").toggle();
});
Below is a simple and easy way to do it with one command and full explination. Enjoy and welcome to website development!
Note: scroll to end of answer to see a short list of helpful links
// this is simply jQuery shorthand for document.ready = function ...
$(function(){
// this is how to dynamically assign events
// why is this important? let's say, in the future,
// you decide to add elements after the page is loaded,
// this allows the NEW elements to still use the same events you've assigned
$(document)
// .on and .off are as simple as they appear,
// on adds an event to a group of elements and off removes
// as you'll notice, I assign just one method to both elements
// the reason is this move is extremely simple
// all you need is to have one element hide or show, based on
// clicking one of the divs
.on('click', '#bandeau, #full_screen', function(e) {
// .toggle accepts a booleen argument
// if true = show, if false = hide
// thus i simply test the id name within the parameter!
$('#full_screen').toggle(this.id == 'bandeau');
})
});
#bandeau{
background-color: black;
color: green;
overflow: hidden;
cursor: crosshair;
width:100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width:100%;
height: auto;
color:white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">tnetnoc</div>
</div>
See more about jQuery Dynamic Events here (.on) && here (.off)
More you should read about dynamic entry
.toggle()
Try to replace your jQuery code with this
$(function(){
$("#bandeau").click(function(){
$("#full_screen").show();
});
$("#full_screen").click(function(){
$(this).hide();
});
});
Related
Exhausted in trying to figure out what is wrong. I can't seem to get my menu box to slide out.
https://jsfiddle.net/87cd9341/5/
My sliding menu box does not slide out when I click on the "nav-toggle".
Not sure if z-index has anything to do with it because I'm using it to cover some elements, but it shouldn't right?
I just added the main elements of the code...when you click the black tab, the blue box is suppose to shoot out right?
When I I manually add "open" into class for the "nav-side" into the html or input 0% into the transform section of the "nav-side" into the css, this is what I want to happen after I click the "nav-toggle' with jquery/javascript.
<div class="nav-side">
</div>
<div class="tab-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
.plageholder-container {
display: block;
width: 29.064039%;
min-width: 121px;
max-width: 121px;
margin-left: 2.955665%;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background: #ffffff;
z-index:2;
}
.nav-side {
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 295px;
max-width: 500px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background-color:blue;
z-index:1;
margin-left: 2.955665%;
padding-left: 120px;
transform:translateX(-100%);
transition: transform .06s ease;
}
.nav-side.open {
transform:translateX(0);
}
.tab-container{
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 25px;
max-width: 25px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 126px;
padding-right: 0px;
overflow: hidden;
background-color:#ffffcc;
z-index:0;
margin-left: 2.955665%;
}
.nav-toggle{
position: relative;
position: relative;
display: inline-block;
top: 3px;
width:25px;
height:121px;
background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}
$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});
});
Theoretically, if my research is correct I think class="nav-side" is suppose to change to class="nav-side open"
when I click the "nav-toggle" link ????????
The problem is probably either the position or z-index. Please provide a jsfiddle.
Missing a dot . in $("nav-side")
$(".nav-side").toggleClass("open");
I have an Instagram section on my website which works the way I want it but I want to add another div with background color and text to the right of it so it looks like it is part of the grid but it's not!
I have it set up but when scaling the browser it does not stay with it at all can anybody help me out? Here are my HTML and CSS and also an image on how it should look.
.Container-Instagram {
margin-top: 5%;
width: 85%;
}
.H1-Instagram {
font-size: 48px;
color: #d7aa44;
}
.Instagram-Title {
background-color: #f8db74;
position: absolute;
margin-top: 204px;
margin-left: 792px;
padding: 30px;
width: 50%;
height: 187px;
text-align: center;
}
.cross-text2 {
display: inline-block;
position: relative;
}
.cross-text2::before {
background-color: #d7aa44;
content: "";
height: 4px;
position: absolute;
top: 37px;
left: 4px;
width: 100%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.Container-Instagram a {
border: 5px solid #fff;
display: inline-block;
line-height: 0;
width: 20%;
}
.Container-Instagram #instafeed a:first-child {
margin-left: 40%;
}
.Container-Instagram #instafeed a:nth-child(8n + 8) {
margin-left: 0.05%;
}
.instagram-section {
width: 75%;
}
<div class="Container-Instagram">
<div class="Instagram-Title"><h1 class="H1-Instagram">Get On The <span class="cross-text2">Insta</span> Gram</h1></div>
<div id="instafeed" class="instagram-section"></div>
</div>
The snippet does not work because of the JS but it is just for showing my code. this is what the end result should look like(red squares are instagram posts):
Image Example
Here is the web address I'm using to develop on if you want a better view of what I mean http://s749376357.websitehome.co.uk/ :D Thanks
Remove the margin-left:792px; on .Instagram-Title replace it with right:100px; then add position:relative; to .Container-Instagram this will then follow as you resize - you will however still need to do some work to make it fully responsive.
I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});
The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.
To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}
I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}
Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.
I have a grid of items, some of which are images, and some are text (all vertically-aligned, using different CSS techniques). Clicking these hides the content with fadeOut(), and shows different content with fadeIn().
My question is two-part:
How can I get the initially-hidden content to not match the CSS of the front during the transition? The text is mis-aligned until the transition has finished.
And secondly, how can I toggle this switch so that the process can be reversed?
My CSS:
.outer {
position: relative;
width: 144px;
height: 144px;
float: left;
border: solid 1px #dddddd;
margin: 10px;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.inner img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-height: 124px;
max-width: 124px;
padding: 10px;
}
.inner p {
font-weight: 700;
font-size: 1.2em;
position: relative;
top: 50%;
padding: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.back {
display: none;
}
And my JavaScript/jQuery so far:
$(".outer").click(function() {
$(this).find(".front").fadeOut();
$(this).find(".back").fadeIn();
});
A JSFiddle of my predicament can be found here.
You should fade the element .back in after the element .front has been faded out.
You would do this by invoking .fadeIn() within the .fadeOut() callback:
Updated Example
$(".outer").click(function () {
var self = this;
$(this).find(".front").fadeOut(function () {
$(self).find(".back").fadeIn();
});
});
I am trying to implement something like this http://www.jamieoliver.com (slider -> arrow on hover)
I have done this much http://jsfiddle.net/PXLJG/5/ In the jsfiddle script? The arrow must be stand. The div.class=content 'Text next article' must be slide to left next to the arrow.
$('.holdingbox').hover(function () {
$('.rightbox').stop().animate({
width : '120px'
}, 400)
}, function () {
$('.rightbox').stop().animate({
width : '-0'
}, 400)
});
HTML:
<div class="holdingbox">
<a href="#">
<div class="margined">
<div class="rightbox">
<div class="content"><p>Következő cikk</p></div>
</div>
<div class="leftbox"> > </div>
</div>
</a>
</div>
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: absolute;
display: inline-block;
height: 36px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.holdingbox a {
text-decoration: none;
color: #FFF;
display: block;
}
.leftbox img {
margin: 0 auto;
margin-top: 10px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 50px;
vertical-align: top;
margin-right: 0;
}
.rightbox a {
text-decoration: none;
color: #FFF;
}
.content {
width: 120px;
position: absolute;
background-color: #ac193d;
height: 38px;
text-align: center;
left: 0;
top: 0;
right: 0;
color: #FFF;
}
.content p {
margin-top: 8px;
}
just add position: absolute; right: 0; in .rightbox class.
.rightbox {
display: inline-block;
height: 50px;
margin-right: 0;
overflow: hidden;
position: absolute;
right: 0;
vertical-align: top;
width: 0;
}
Working here - http://jsfiddle.net/PXLJG/7/
I tried to fix up the code you've already got but it needed some major rehauling so I've just re-done it all.
JSFiddle: http://jsfiddle.net/t2z9Q/
CSS
.container {
width: 120px;
position: relative;
overflow: hidden;
color: white;
}
.container .content {
width: 100px;
overflow: hidden;
position: absolute;
left: 120px;
float:left;
z-index: 99;
background: #ac193d;
}
.container .arrow {
float: right;
width: 20px;
position: relative;
color: black;
z-index: 100;
background: #ac193d;
}
JS
$('.arrow').hover(function() {
$('.container .content').stop().animate({left: '0'}, 400)
}, function() {
$('.container .content').stop().animate({left: '120px'}, 400)
});
HTML
<div class="container">
<div class="content">Next Article</div>
<div class="arrow">></div>
</div>
This way you lose a lot of the jargon html & css that isn't really required but still get the same effect.
You are applying inline-block style on all divs. Please revert to normal display of block.
div{
display: block;
}
or just remove it as the default display is block
http://jsfiddle.net/PXLJG/8/
That should solve your core issue.
Now if you want to show the arrow to the left of the text div, remove absolute position on the arrow.
Now you will be having a whitespace between the inline-block elements, that is the arrow and the text. To remove it easily remove the whitespace between those two div in HTML
http://jsfiddle.net/PXLJG/18/
For something exactly like as in the website, you can try positioning both arrow and text using absolute positioning and anchoring them with their right property.
This way, as the width increases it will expand from right to left.
http://jsfiddle.net/PXLJG/20/