I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
Related
I need some help to achieve my website. I have a div animated in JS that slides into the screen from right to left (with a button and by a margin-right action). It works fine in Firefox but not in Chrome : with the same value on margin-right, I see the div entirely in FF when showed, but not in GG, I only see a part of it.
The same problem appears for hiding the div; the value isn't high enough so there's still a visible part. I set a higher value for Chrome with "-webkit-margin-end" in my CSS, that helped for hidding, but when showed the problem remains. I guess I have to add a Chrome option in my script, so the "margin-right" value (or the "-webkit-margin-end" value ?) could be increased too when animated, but I actually can't find any answer to my request.
That's probably because I'm not good enough to apply it to my code, and that's why a bit help would really be appreciated.
Furthermore, is there a way to slide on page load ? I'd like the div 'open' when the user enters the website.
Here's a piece of my code :
/* CSS */
/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}
/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}
/* SCRIPT */
jQuery.easing.def = 'easeOutBounce';
$('#plus').click(function() {
if($(this).css("margin-right") == "125px") {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}
});
Firefox :
Chrome :
Rather than finding an ad-hoc solution for each browser-specific bug maybe you can try finding a way to make your code work the same way for every browser.
I would avoid manipulating the margins. Instead I suggest having one main DIV with a fixed width and then have another DIV inside with the paddings you need. Then do the animation with the right attribute.
Check this snippet and see if this demo works for you.
function togglePanel() {
if (parseInt($('#main').css('right')) == 0) {
// get the current width (+ horizontal padding) (+ the border size * 2)
width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
$('#main').animate({"right": -width}, 'slow');
} else {
$('#main').animate({"right": 0}, 'slow');
}
}
$('#toggleMain').on('click', function() {
togglePanel();
});
$(document).ready(function() {
togglePanel();
});
* {box-sizing: border-box;}
#main {
background:blue;
position:absolute;
padding:10px;
right:-222px;
top:0px;
bottom:0px;
width:200px;
border:1px solid red;
}
#inner {
width:100%;
padding:10px;
border:1px solid green;
background:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>
Try this, for detecting if chrome and adding margin.
$(document).ready(function(){
var isChrome = !!window.chrome;
if(isChrome) {
$(".element").css("margin-right", "30px");
}
});
Browser detection is no good practice, see for example Is jQuery $.browser Deprecated?
A better way is to provide general cross browser solutions.
You could for example use normalize.css and then apply your own css. This maybe makes the css "resets" you need, so your own css looks good/equal in all browsers.
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
I have used jQueryCollapse plugin for displaying Questions and Answers.
Question is written on Tab and Answer is displayed when we click on tab.
When tab is active means when answer is displayed at that time page height increases and because of that I have to increase the height of background image.
For that I have coded as follows:
<script type="text/javascript">
$(document).ready(function(){
$('#main-content1').height(1450);
$("#t1").click(function(){
var height = 1450;
$('#main-content1').height(height);
});
$("#t2").click(function(){
var height = 1450;
$('#main-content1').height(height);
});
$("#t3").click(function(){
var height = 1275;
$('#main-content1').height(height);
});
$("#t4").click(function(){
var height = 1250;
$('#main-content1').height(height);
});
</script>
The CSS code for id main-content is as follows:
#main-content1 {
margin-left:auto;
margin-right:auto;
margin-top:35px;
width:900px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
height:1450px;
background:url(res/back-img.png) repeat;
}
The code for footer is as follows:
#footer {
border-top: 0px solid #003366;
overflow:visible;
}
.foot {
float:left;
list-style-type:none;
margin-bottom:20px;
background-image:url(res/footer_back.png);
background-repeat:no-repeat;
overflow:visible;
margin-top:-50px;
background-position:0px 120px;
width:182px;
height:180px;
}
img {
border-color:transparent;
}
#site-footer {
width:728px;
margin-left:auto;
margin-right:auto;
}
When I click on tab it shows answer but not increasing its background image height as per jquery code on iphone mobile browser. But it is working fine on windows pc browser.
The content is going behind the footer.
I did Google very much but I am not getting how to resolve this issue.
Please can any one help me out to solve this issue.
Thanks in advance..
Haven't test yet, but try max-height instead of height/ or auto height.
CSS
#main-content1 {
margin-left:auto;
margin-right:auto;
margin-top:35px;
width:900px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
max-height:1450px; /* height:auto; */
background:url(res/back-img.png) repeat;
}
My question is how to make dynamic content to be shown horizontally. It means no vertical scrolling, only horizontal. I have tried -webkit-column-count but it only creates X columns, but not horizontal scrolling. Any suggestions?
You can use the CSS
white-space: nowrap;
But then you'll have to be careful about putting line breaks in where you want them otherwise you'll end up with one really long line of text. http://jsfiddle.net/Nbkj2/1/
This is a pretty open-ended question, as I'm sure there's a lot of ways to answer this, but maybe this will point you in a useful direction: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
To summarize the article, you break your content into a series of full-screen pages. Each page is a div with CSS to take up the whole screen, with height/width properties and float:left; to make them all stack up sideways. To prevent the pages from wrapping you make the body of the document as wide as all the pages you've made: body { width:10000px; }
Then the author puts some javascript handlers on links to scroll the page sideways to each panel of content.
Depends what element and what you mean by horizontal. Here's two examples of what I think you mean.
div {
Width:20%;
Display:inline-block; //won't work for ie 8 and below
}
body {
width: 150%;
}
Something like this demo (HTML add CSS only)
DEMO: http://jsfiddle.net/enve/ea88y/
FROM: http://www.visibilityinherit.com/code/horizontal-website.php
HTML
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:scroll;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
* html {background:url(fake.jpg)}
* html #full {height:100%;}
I have a bookmark that calls script and lays a css overlay over the webpage. There is a top bar with a button to close it and the rest is simply a div with a semi-transparent background. Pick a random site and it looks fine, but for example, Google's top bar covers it as well as the search and buttons cover the overlay. Another example is reddit's header.
I make these divs and the button:
var overlayBackground = document.createElement('div'); //main overlay that covers the page
overlayBackground.setAttribute('id', "overlay_background");
document.body.appendChild(overlayBackground);
var topBar = document.createElement('div');
topBar.setAttribute('id', "top_bar");
overlayBackground.appendChild(topBar);
function cancelStuff(){
overlayBackground.removeChild(topBar);
document.body.removeChild(overlayBackground);
}
topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>";
And here is the css:
#cancel_stuff{
zIndex:2147483647;
font-weight:bold;
font-size:2em;
border:none;
width:100%;
height:50px;
color:#FF9900;
background-color:#336688;
}
#cancel_stuff:hover{
cursor: pointer;
color:#336688;
background-color:#FF9900;
}
#top_bar{
zIndex:2147483647;
box-shadow:0px 3px 10px 2px black;
position:fixed;
top:0px;
width:100%;
height:50px;
}
#overlay_background{
float:left;
zIndex:2147483647;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(240, 240, 240,0.8);
}
You're looking for the z-index property, not the zIndex property. Try it again with this change and see if it works.
Google uses a z-index of 990 for their top bar, so this should work fine.