fadeToggle on multiple ids errors - javascript

Today I come to you with an issue with jQuery / javascript and .fadeToggle();.
So I want to P elements with id.
Please see here:
$("#here").click(function(){
$(".overlay, .popup").fadeToggle();
});
$("#there").click(function(){
$(".overlay, .popup2").fadeToggle();
});
Here is my JSFiddle:
I want, ideally, to have several paragraphs with individual ids so I can add a pop up with differing content!

I'd usually use a custom data attribute for something like this. This way you can reuse the same function no matter how many elements you have...
$('.clickable').click(function() {
var popupTarget = $(this).data('popup');
$('.overlay, '+popupTarget).fadeToggle();
});
/* click overlay to close... */
$('.overlay').click(function() {
$('div').fadeOut();
});
html,
body {
height: 100%;
}
.overlay {
position:absolute;
display:none;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.7);
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.popup, .popup2 {
position: absolute;
width: 300px;
height: 150px;
display: none;
background-color: white;
text-align: center;
/* center it ? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="overlay"></div>
<div class="popup">Some popup text</div>
<div class="popup2">Hello world!!</div>
<!-- add a class to each element and a data attribute to identify the target element... -->
<p id="here" class="clickable" data-popup=".popup">Click 1</p>
<p id="there" class="clickable" data-popup=".popup2">Click 2</p>

Related

Stack customized windows(divs) using CSS

I'm doing a single page application where you're suppose to be able to open multiple customized windows on the page(not browser tabs/windows, but windows created with DOM). I want the windows to stack on top of each-other with a certain XY-offset. I've tried added a transform: translate(5%, 5%)to the divs after the first div, but it simply isn't working.
I want them to stack like this:
But right now, they´re just stacking on top of each other.
HTML:
<main>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
</main>
CSS:
main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 100%;
height: 100%;
top: 0;
}
.window {
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
}
Any ideas?
Try adding position: absolute to all the divs and use left: <num>px and top: <num>px to position them. Make sure the containing element is position: relative, otherwise the divs will be absolutely positioned relative to the "viewport".
See this article for more on absolute positioning.
Ok, this works with some caveats: http://codepen.io/anon/pen/dNbqgE
html:
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
css:
.card {
width: 100px;
height: 200px;
outline: 1px solid #cc0000;
position: absolute;
background: #ddd;
}
.card:nth-of-type(n + 1) {
transform: translate(5%, 5%);
}
.card:nth-of-type(n + 2) {
transform: translate(10%, 10%);
}
.card:nth-of-type(n + 3) {
transform: translate(15%, 15%);
}
.card:nth-of-type(n + 4) {
transform: translate(20%, 20%);
}
.card:nth-of-type(n + 5) {
transform: translate(25%, 25%);
}
The caveat is that you have to define a new nth-of-type rule for each level of card you need. If you're using less, sass, or other css build tool you can pretty easily setup a macro to generate any number of these.
transform: translate(...) applies to the element itself, not to the parent, so maybe that's the case it doesn't work for you. I would use a similar approach like the one mentioned by Jason Cemra. Check out this another answer, maybe it helps you: How to use transform:translateX to move a child element horizontally 100% across the parent
to position of window div's, we have to set x-y position relative to a known reference. if all win div's are in a same parent, we have use different offset for them: eg: transform: translate(5%, 5%); for first div, transform: translate(10%, 10%); for second div, and so on.
another way is to nest them in each other such that the same value of offset can be used for all divs, but as their parent have different position, they get desired position:
<html>
<head>
<style type="text/css">
#main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 800px;
height: 500px;
top: 0;
}
.window {
position:absolute;
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
border:1px solid navy;
transform: translate(5%, 5%); /* this is relative to current position */
}
</style>
</head>
<body>
<div id=main>
<div class=window><div class=app>w1</div>
<div class=window><div class=app>w2</div>
<div class=window><div class=app>w3</div>
</div>
</div>
</div>
</div>
</body>
</html>

Body Background Image Clickable

I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!
The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>

How to show/hide div with javascript?

So I want to hide a div for user settings, which shows when the user clicks on a little cog icon. What is the best way for me to go about this?
I made a couple of very basic pics to show what I'm after:
Closed:
Open:
Once the user clicks the icon (the red dot) then I want the hidden div to push the content to its right over. I had a look at the CSS checkbox hack, but that requires the user to click directly on the icon (the red dot) again to close the hidden div. I would like to have it so the user can click anywhere else on the page to close the div.
Anyone know how to do this with pure js?
Any help is greatly appreciated, thanks!
You can try tabindex="-1" in order to use :focus.
This way you can achieve it with pure CSS.
#wrapper {
display: flex;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
#sidebar, #main, #hidden:focus {
padding: 10px;
}
#sidebar {
background: #A8D4AF;
}
#main {
flex-grow: 1;
background: #96A7B1;
}
#hidden {
width: 0;
background: #008DD2;
}
#hidden:before {
content: '';
display: block;
background: red;
border-radius: 50%;
position: relative;
left: -40px; top: 40px; /* Position of the dot*/
width: 20px; height: 20px; /* Size of the dot */
margin-bottom: -20px; /* Same as height */
}
#hidden:focus:before {
display: none;
}
#hidden:focus {
width: auto;
}
<div id="wrapper">
<div id="sidebar">
Test content
</div>
<div id="hidden" tabindex="-1">
Hidden stuff
</div>
<div id="main">
Lorem ipsum dolor
</div>
</div>

How to make the main content div fill height of screen with css [duplicate]

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?
These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>
No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.
This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/
Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle
Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.
Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/
Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers
This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/
I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image
While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>
The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.
I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)
I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}

Categories