Change CSS div style (conditional?) - javascript

Got a centered fullscreen main at the very middle of the webpage:
<div id="main"></div>
The main opens a default web:
<script>
$("#main").html('<object data="http://www.myweb.com"/>');
</script>
And two hidden sidenavs (one at the left and one at the right) showable through two buttons and with a list of links inside them. sidenavLeft pushes the main to the right when appears, and sidenavRight pushes the main to the left.
The default main page can be changed just by clicking on the links inside the sidenav menus.
I can't figure out how to say to the #main, move to the right when the sidebarLeft is shown and to the left when the sidebarRight is shown. I think I need a CSS conditionals to do this, but as far as I know there is no conditional support in CSS.
/* if the sidebarRight is shown, push the page content to the left */
#main {
transition: margin-right .5s;
}
/* if the sidebarLeft is shown, push the page content to the right */
#main {
transition: margin-left .5s;
}
How can I do this with CSS/Jquery/javascript?

In JQuery:
if ($("#sidebarLeft").is(':visible')) {
$("#main").css("transition", "margin-right .5s");
}
Or better:
.transition-right {
transition: margin-right .5s;
}
if ($("#sidebarLeft").is(':visible')) {
$("#main").addClass("transition-right");
}
Also, you should put that code on your button click handlers. So when button triggers show/hide to do something else too (change margins)

Related

Simple jQuery "push" menu - offset main container and menu but transition timings not correct

I am trying to create a simple off-canvas "push" menu. When the menu trigger is clicked, the menu slides in from the right of the viewport and pushes the main content divs offset by the width of the menu.
The jQuery works (in that is pushes the menu onto the page, and pushes the content off the page) but the animations do not work as expected. There is some "catchup" where the menu moves slower than the main content areas.
I set a transition-delay to fix this issue but it doesn't seem to have had the effect I thought it would.
How do I managed to get the content divs to move offscreen so that it looks like they are pushed by the menu?
Here is an example of my issue: http://codepen.io/anon/pen/GrKJor
Here is my code:
$('.nav-trigger').click(function(){
$('nav').addClass('nav--open');
$('header').addClass('content--pushed');
$('main').addClass('content--pushed');
$('footer').addClass('content--pushed');
});
And here is the CSS for the transition:
nav {
...
right: -300px;
transition: right 0.2s ease-in;
}
.nav--open {
right: 0px;
}
.content--pushed {
position: relative;
right: 300px;
}
The issue is you're attempting to animate a property - specifically, right position - in a way that will only work in your markup structure if the element being animated has a position:fixed.
You can see the desired behavior in this forked CodePen:
http://codepen.io/anon/pen/ygBNXG
(I also added a 'nav-close' button so you can see the inverse & test repeatedly)
By applying a fixed position to the header, main & footer, the transition effect can indeed be animated:
header, main, footer {
position: fixed;
/* other CSS */
}
To account for the fixed position, I've then offset the top position of main & footer based on your defined heights:
main {
top:100px
}
footer {
top:200px
}
Finally, and this is only preference, I made the left position of header, main & footer be what changes (from 0 to -300px) as that seems to more accurately reflect what's happening, which is those elements are being moved off the left edge of the viewport by 300px.
Update
If you don't want to use position:fixed on the elements, you need to modify your markup structure to wrap the header, main & footer elements and place the nav element outside of said wrapper. This is working sans fixed position and heights/offsets here:
http://codepen.io/anon/pen/qREvEB
The revised markup is essentially:
<div class="wrapper">
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<nav>...</nav>
In this scenario, the positions of the header, main & footer can be reset to relative and the content is all scrollable as needed.

show calendar on top of other elements

I'm struggling with my calendar because it actually takes too much space in the page.
The calendar is hidden at first:
Visible="False"
Then when I click the button to select the date I show it:
protected void btnCalendar_Click(object sender, ImageClickEventArgs e)
{
if (Calendar1.Visible)
{
Calendar1.Visible = false;
}
else
{
Calendar1.Visible = true;
}
}
The problem is that the calendar takes the space in the page anyway, also if it's hidden, and when it opens up the page becomes pretty "awkward".
I'd like the calendar to be shown on top of the other items on the page, just on a "upper level", that way it doesn't split the header from the middle of the page.
Is there any way to do that with html or css?
I've tried to put the calendar into a div, but then I couldn't find anything useful about the stuff I needed
2 options... and visible isn't one of them.
You could use
display: none;
in your CSS as suggested above. Setting display none doesn't show the element, or even make room for it on the page.
The better option (as in aesthetically pleasing) would be to use position, opacity, z-index and pointer-events. It's a bit more time consuming, but gives you the option to transition the element into place.
#Calendar1.show {
position: absolute;
z-index: 1000;
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s ease;
}
#Calendar1.hide {
opacity: 0;
pointer-events: none;
}
Then just change the class to show or hide the element...
Danny
use 'display:none' , 'visibility:hidden' hides element but takes place
Take a look at this link

Toggle Div combined with CSS-Hover

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>
I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.

I am trying to arrange my html/css/jquery so I can toggle the visibility of a div by double clicking on it

I am trying to arrange my html/css/jquery so I can toggle the visibility of a
div by double clicking on it. I can make it hidden by a double click but when I
double click again it does not reappear. When I check to see all of the div outlines,
the outline of this div is no longer there. I use a web developer plugin to check.
I am using the following codes to try to accomplish this:
My css classes are..
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
the html is...
<div id="ConstructionDiv" ondblclick="unhide('ConstructionDiv')" class="unhidden">
<!.. the div is unhidden at page load. When I look at generated
source code after the double click the class is "hidden"
-->
</div>
my javascript is...
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
Is it possible to do what I am trying? There must be something that works.
Thank you.
I just tried this, and invisible elements cannot receive click events.
As Andy said, Opacity 0 can receive click events just fine, and the contents are still invisible.
Use the following css rules:
.hidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
-moz-opacity:.1;
-khtml-opacity: .1;
opacity: .1;
}
.unhidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
UPDATE
You can also wrap the element in some other element like div and then use the click of that div to show or hide the inner content.
What if you have two divs, both placed absolutely, but one possibly much larger than the other. clicking one changes the visibility of both of them.

How to Click a div and have it change dimensions of other divs and then change back once clicked again

I am trying to do a basic div layout and would like to use plain javascript or jquery to mimic the functionality on this page
http://octopress.org/blog/archives/
There is a content wrapper div and a left article column and a right sidebar column. There is also a skinny div in-between the left and right div that can be clicked on, once clicked on, it either closes or expands the right side div.
The page flow...
1) On page load the right side div should be open.
2)
Once you click the middle div it closes the right side div and expands the left side div's width to cover the space of the left + right side div. The middle div still is visibable, so you can click it again to expand the div back out
3) Also once you click the middle div to collaps the right side div, it collapses it, but it also puts the contents of that div, underneith the left main column div. Like the right side div I think has a float:left valuse so once the left div is expanded, it will push that div down underneith the left div
4) With right side div collapsed, you can click the middle div which is now hugging the right side border of the main div wrapper, it will then resive the left div back down small to allow the right div to fit back into place again
It probably sounds more complicated then it is to describe what I am looking to do, if you view the link though http://octopress.org/blog/archives/ it does exactly what I am talking about.
I have tried disecting the page and rebuilding just the part I am after without any luck, I would really appreciate any help in a doing this with jquery, as well as how to do the css for the divs.
I have seen some plugins that do similar work but not the same, please help if you can
Here are some screen shots of the different phases I am after...
I appears that I just need to have the javascript add and remove some css rules when the middle div is clicked.
the key for the layout is to use negative margin on the sidebar.
You could see the simplified layout example here:
http://jsfiddle.net/9FUQA/
The html
<div id="wrapper">
<div id="content">
<div class="left_column"></div>
<div class="right_column"></div>
<span class="toggle_sidebar"></span>
</div>
</div>
The CSS. First you float both column, and you set the width on the right column and a 100% nagetive margin-right to bring the right column onto the same line as the left-column.
On collapse, you remove both the float and negative margin-right on right-column, and it falls into the normal block flow.
#content {
width:500px;
margin-right:200px;
position:relative;
}
.left_column {
width:100%;
float:left;
}
.right_column {
width:160px;
padding:0 20px;
margin:0 -100% 0 0;
float:left;
}
.toggle_sidebar {
position:absolute;
top:0;
bottom:0;
right:-10px;
}
.collapse .right_column {
float: none;
width: auto;
clear: left;
margin: 0;
}
.collapse #content {
margin-right:20px;
}
.collapse .toggle_sidebar {
right: -20px;
width: 19px;
}
The JS
$(document).ready(function () {
$('.toggle_sidebar').click(function(event) {
$('#wrapper').toggleClass('collapse');
});
});
You could see the simplified layout example here:
http://jsfiddle.net/9FUQA/
Load jQuery 1.7...
$('#left-div').click(function () {
$('left-div').animate({
width: 99%,
}, 5000, function() {
});
});
$('#right-div').click(function () {
$('right-div').animate({
width: 400px,
}, 5000, function() {
});
});
Something like that. Might have to tweak it for your css though.

Categories