I am creating an advanced administration panel, and I'm playing the part of editing items, I like it when I clicked to edit an item he would fill the entire space of its parent, however I have no idea how to make the element back to its original position with animation, any idea how to do this? I tried this so far:
Here is a pen: http://codepen.io/anon/pen/WvGONp
HTML
<div id="container">
<div class="single-item">
<div class="title">home</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Gallery</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Contact</div>
<a class="edit" href="#"></a>
</div>
</div>
SCSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html, body, #container {
height: 100%;
min-height: 100%;
}
#container{
& > .single-item{
position: relative;
background-color: #d9d9d9;
border-radius: 2px;
margin-bottom: 15px;
padding: 15px;
z-index: 1;
& > .edit{
display: block;
position: absolute;
background-color: #000;
top: 15px;
right: 15px;
width: 20px;
height: 20px;
}
&.active{
z-index: 2;
}
}
}
Javascript
$("#container").on("click", ".edit", function(e){
e.preventDefault();
var el = $(this);
var elParent = el.closest(".single-item");
var curElTop = elParent.position().top;
var curElLeft = elParent.position().left;
elParent.toggleClass("active", function(){
elParent.css({
position: "absolute",
top: curElTop,
left: curElLeft
}).animate({
top: 0,
right: 0,
bottom: 0,
left: 0
});
});
});
CSS3 transition will help you create smooth animation for full screen width & height.
But if still for some reason, you want to do it in jQuery, here is the solution :
While clicking second time on the "edit" button, you just have to say :
$("<element_reference>").removeAttr("style");
It will remove the styles what was applied previously, get back the element to its normal view.
Or you can also change the position from "absolute" to "static", both will give you the same result. Refer this question for animating position using jQuery.
Hope it helps.
I've discovered the easiest way to do things like this is:
Put CSS transition properties on the item.
Make a new class that you add onto the item when it's clicked, to make it fullscreen. Take off the class when the item is closed.
CSS transitions tend to be faster and smoother.
Related
A slide-out side panel menu won't hold internal padding without being partially displayed.
I've stripped the whole site and have tried changing just about every value, but nothing over two days of searching has worked - -though I know the answer's something obvious to an experienced coder.
.sidePanelTableA {
height: 80%;
width: 0;
position: fixed;
z-index: 20;
top: 0;
background-color: red;
overflow-x: hidden;
}
#mysidePanelTableA {
padding: 0px 0px 8px 0px;
<!--0 left padding makes dissapear move padding?-->
}
.closebtn {
color: blue;
position: absolute;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<svg viewbox="0 0 1200 600" preserveAspectRatio="none">
<g transform="translate(300,364) scale(16)" >
<g onclick="openPanelTableA()" >
<rect style="display:inline; fill: yellow;"
width="5" height="3" />
</svg>
function openPanelTableA() {
document.getElementById("mySidePanelTableA").style.width = "250px";}
function closePanelTableA() {
document.getElementById("mySidePanelTableA").style.width = "0";}
<div id="mySidePanelTableA" class="sidePanelTableA">
<a href="javascript:void(0)"
class="closebtn"
onclick="closePanelTableA()">
×
</a>
<br><br>
TITLE
<br><br>
<img src="tableA.jpeg" height="200px">
</div>
I expect the red side panel to be completely hidden, but it shows by the width of it's padding on the left of the screen. It is properly hidden if I remove the internal left-side padding from the panel, but then the padding's gone...
Thanks, in advance.
Badly-formatted Codepen: https://codepen.io/moptopop/pen/RwbVMLv in which the effect somehow DOES NOT seem to show on adding left padding.
(Please scroll slightly to click yellow rectangle which should trigger the problem panel. Sorry I wasn't able to add the image back in, but that shouldn't affect the issue.)
You have two options- either remove he left padding when the menu is "hidden" then reinstate it when it is"shown" - or to apply a max width:0; overflow:hidden to the panel when it is "hidden".
Also - it is better to add / remove a class that has the styling in the CSS than to directly add css to an element via javascript.
Note the following code only addresses the width / padding / visibility and not the side transitions etc.
//js
function openPanelTableA() {
document.getElementById("mySidePanelTableA").classList.remove("hide-panel")}
function closePanelTableA() {
document.getElementById("mySidePanelTableA").classList.add("hide-panel")}
//css
#mySidePanelTableA {
width: 250px;
padding: 0px 0px 8px 0px;// or whatever padding you want
}
#mySidePanelTableA.hide-panel {
width: 0;
max-width: 0;
overflow: hidden; // this prevents the panel from being seen - even with the padding.
}
For the closed state, you have to either:
give negative left = width + padding
give padding = width = 0, and then, set padding/width for .open state
here's a code snippet:
function openPanelTableA() {
document
.getElementById("mySidePanelTableA")
.classList.add('open');
}
function closePanelTableA() {
document
.getElementById("mySidePanelTableA")
.classList.remove('open');
}
html, body {
padding: 0;
}
.sidePanelTableA {
box-sizing: border-box;
height: 80%;
position: fixed;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
width: 0;
padding: 0;
transition: all ease 0.5s;
}
.sidePanelTableA.open {
width: 150px;
padding: 30px;
}
#mysidePanelTableA {
padding: 0px 0px 8px 20px;
}
.closebtn {
color: blue;
position: absolute;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div id="mySidePanelTableA" class="sidePanelTableA">
<a
href="javascript:void(0)"
class="closebtn"
onclick="closePanelTableA()"
>
×
</a>
<br /><br />
TITLE
<br /><br />
<img src="tableA.jpeg" height="200px" />
</div>
<button onclick="openPanelTableA()">Open</button>
I want to make an expanding sidebar, I was able to make the sidebar expand but but I need to cover the original button that was pressed.
I would like to have an area at the side where I can click to close the sidebar.
I'm almost there. The problem i'm having is that the close id when clicked does not seem to trigger the toggle.
here is my code
$("#icon-menu-mobile,#exit").each(function() {
$(this).click(function() {
var effect = 'slide';
var options = 'left';
var duration = 500;
$('#panel').toggle(effect, options, duration);
});
});
#panel {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
z-index: 999;
}
.panelcontent {
position: relative;
top: 50px;
width: 70%;
height: 100%;
background-color: #cccccc;
float: left;
}
#icon-menu-mobile {
width: 36px;
height: 30px;
cursor: pointer;
font-size: 24px;
}
#icon-menu-mobile,
#exit {
position: static;
float: right;
width: 30%;
height: 100%;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<span id="icon-menu-mobile">
☰
</span>
<div id="panel">
<div class="panelcontent">
Some text here to fill it out
</div>
<div id="exit">
Click here to exit
</div>
</div>
</body>
As you can see after clicking the burger menu you can't close it with the side close button.
I'm guessing that the toggle only works from the first id clicked and that id needs to be clicked again to toggle again.
Is there a way to have two id's activate the same toggle?
Here's a working example: http://codepen.io/anon/pen/pgGPrm
I think you were attaching the same event to both, so it wouldn't slide to the opposite direction, i've split it up into:
$("#icon-menu-mobile").click(function() {
var effect = 'slide';
var options = 'left';
var duration = 500;
$('#panel').toggle(effect, options, duration);
});
$("#exit").click(function() {
var effect = 'slide';
var options = 'right';
var duration = 500;
$('#panel').toggle(effect, options, duration);
});
EDIT: actually upon further inspection, it doesn't seem to matter if they are together or not. the thing that fixed it was actually including jQuery-UI in my codepen. are you sure you are properly including jQuery-UI? otherwise you get an error after the initial slide, which prevents the second slide from working
THE FIDDLE
When a user hovers over a chevron icon next to a name on my website a div appears with options.
The Problem: The names can have different lengths and I would like to display the div below the chevron no matter how long the name is.
Here is my code:
HTML
<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
<ul class='settings-bubble'>
<li>Bearbeiten</li>
<li>Löschen</li>
</ul>
</div>
SCSS
// The chevron icon
.settings {
display: inline;
position: relative;
padding: .1em 0 0 .5em;
opacity: 0; // I display the chevron on hover using jquery
}
// The options bubble
.settings-wrapper {
position: relative;
}
.settings-bubble {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
margin: 0;
padding: 0 .6em;
opacity: 0;
z-index: 9999;
li {
position: relative;
display: block;
a { float: left; }
}
}
I would be very thankful for any kind of help!!
If I change left: 0 to right: 0it looks like this:
When the icon is hovered, there is an event handler that displays the div. In that handler, you can inspect the x and y coordinates of the icon. When you display the div, you can modify its style to be positioned relative to the icon. For example:
var chevron = document.getElementById('chevron');
var popup = document.getElementById('popup');
chevron.addEventListener('mouseover', function(e) {
popup.classList.remove('hidden');
popup.style.left = e.target.offsetLeft + 'px';
});
chevron.addEventListener('mouseout', function(e) {
popup.classList.add('hidden');
});
.hidden {
display: none;
}
#popup {
position: absolute;
border: 1px solid #000;
}
<h1 contenteditable="true">Some long title <span id="chevron">></span></h1>
<div id="popup" class="hidden">popup</div>
I left the title editable so you can make it longer and see the popup change position.
In .settings-bubble change left: 0; into right: 0; and it will stick to the inner right side of the parent instead of the inner left.
EDIT: the trick is to add the div containing the bubble into the div containing the string of arbitrary length, and attach that bubble inside that div to the inner right-hand side, as illustrated by this fiddle.
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
I am making a landing page, and this might sound like a stupid question, but my <h2> and <form> elements are not showing up anywhere on my page. I have tried everything I can think of and still, nothing. I'm baffled.
The photo I am using for my full screen background image is one off of photoshop with a grey square in the center (which looks like what some people do with z-index). In the background, it is cycling logo's in js as a kind of throwback design.
I am not sure if I am doing something wrong, or if there is something in my css, html, js making it so the text/form is not showing up.
index.html
<section id="bg">
<img src="img/bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="img/corona.png">
<img class="rotating-img" src="img/mc.png">
<img class="rotating-img" src="img/mtv.png">
<img class="rotating-img" src="img/op.png">
<img class="rotating-img" src="img/supercell.png">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</section>
css
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: 750px;
}
.rotating-img {
display: none;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
}
javascript
$(window).load(function() {
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fades time (in milliseconds)
var fadeTime = 2500;
//number of items
var numberOfItems = $('.rotating-img').length;
//current item
var currentItem = 0;
//show first item
$('.rotating-img').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-img').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-img').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
If anyone can see an error(s) in my code that I cannot see, I would love to know. Thanks for the help.
I have some insight into how you might approach this layout.
I simplified your HTML slightly (removed the form and put in a simple line of text) so
as to concentrate on the various stacking layers due to the fixed and absolutely
positioned elements.
The key is that since your #bg element is fixed, it sets the reference point for
positioning any other positioned child elements, be it fixed or absolute.
In your original post, you set the offsets to be top: -50% and left: -50%, which
places the origin of the block outside of the visible viewing area.
As a result, h2 was positioned at the top left corner of #bg, hence not visible,
and the p text, which is in regular content flow, would also start to the top left
of the container block (#bg).
As a start, set the offsets to top: 0 and left: 0 with 100% for the width and height,
and then rethink about how to size your images in your image rotator and the background
image.
Now that you see where the elements are, you will make be able to make progress
with your layout.
body {
margin: 0; /* get rid of 10px border from default browser style sheet */
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: auto;
}
.rotating-img {
display: block;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
top: 30%;
left: 50%;
}
<section id="bg">
<img src="http://placehold.it/500x500">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="http://placekitten.com/2000/4000">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<p>Some other words ...</p>
</div>
</section>
You can use background-image: url(img/bg.jpg); in #bg, instead of adding the image directly and try to add something on it.
In your image CSS, do this in the CSS:
z-index:-1000;
The z-index controls what elements overlap other elements. The higher the z-index, the more in front an element will be. See if that clears anything up. Otherwise, there is another issue. I am also curious as to why you are using absolute positioning on all those elements.
In CSS try this code:
#bg {
background-image:url('img/bg.jpg');
}
And then remove the tag from the HTML page. I would also take a look at simplifying your code since you seem to have a ton of divs all wrapped within each other. Perhaps consider using a table if it suits your needs.