How to create sevenly.org like design using jquery - javascript

I have basic knowledge of javascript and jquery . I want to implement design like Sevenly which is like a page/div is move over another but I don't know how to start with that . Let me know if anyone has as idea on how to implement this ?

If the first container has a specific height, then I think the most straight forward solution would be to fix the first container (position:fixed). Then you add a margin-top to the rest to push the rest down so it starts just below the first container:
HTML:
<div id="header">Header</div>
<div id="rest">
<div>Other 1</div>
<div>Other 2</div>
<div>Other 3</div>
</div>
CSS:
div#header{
position:absolute;
position:fixed;
width: 100%;
height:150px;
border: 2px dashed yellow;
background-color: lightyellow;
}
div#rest{
margin-top:150px;
position:relative;
}
div#rest div{
height: 300px;
border: 2px dashed green;
background-color: lightgreen;
}
The position:absolute; is for browsers that don't support fixed. Making it absolute will causes it to behave like fixed, except that it scrolls along with the rest of the page. The position:relative; on the rest is because of z-stacking. fixed-ing the header container causes it to be put in it's own layer on top of everything else; setting the rest to relative puts the rest on top of the header again.
See jsfiddle demo here.
If you don't have a specific height on the header, then you will probably need to use javascript.

Related

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to do. How do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar on the far right of your screen)?
Any suggestion? I saw the css for the new scrollbar, but it's all webkit, and without HTML, how do I single out which DIV I want it to affect?
You can style your scroll bar for any specific div as this example. I applied the custom scrollbar to the div with class="scroll"
However custom scrollbar css does not work in firefox. However you can use some custom jquery plugins for that (they may not be as good as the css ones but they do the trick) and here's question about that.
Here's a great article about what different properties and styles you can apply to your custom scrollbar.
Here's a fiddle
.scroll{
background-color:green;
width:100px;
height:200px;
overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
background-color: #000000;
border: 2px solid #555555;
}
<div class="scroll">
sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

HTML - My content becomes messed up when I zoom in/out

http://pastebin.com/1Yz1aF1S HTML/CSS
HTML code is in home.html
CSS code is in stylesheet.css
Whenever I zoom in our out my content moves around rather awkwardly and breaks my page a bit. Was wondering how i could fix this issue and work to avoid this issue in the future? Images of the site can be found here!
http://imgur.com/a/MbZkk
Still new to HTML and only just started learning it properly in University but I've been immensely enjoying it and am thinking about pursuing it as a career!
The page "breaking" looks to be the result of using float left and float right elements next to each other. If their is insufficient room, your right hand panel breaks to the next line but is still floated right.
You can achieve a non responsive layout that keeps both panels next to each other and locates the right hand panel flush with the right margin if there is room, but produces horizontal scroll bars if not, you can use table layout. A demonstration without using <TABLE> tags:
CSS
#panels
{ border: thin solid green; /* to see */
min-width: 100%;
display:table;
}
#leftPanel
{ border: thin solid red; /* to see */
min-width: 40em;
display: table-cell;
}
#rightPanelContainer
{ display: table-cell;
text-align: right; /* right justify */
}
#rightPanel
{ display:inline-block; /* allow panel to be justified */
border: thin solid blue; /* to see */
min-width: 20em;
text-align: left;
}
HTML
<div id="panels">
<div id="leftPanel">
Left Panel
</div>
<div id="rightPanelContainer">
<div id="rightPanel">
Right Panel
</div>
</div>
</div>

How can I have a scrollable body with fixed header and footer inside a container div? using jQuery

I have one container with two children elements inside of it. I want to place one child at the top and other child at the bottom of the container . The middle part (the content) should scroll between the top and bottom child elements.
I want both children elements inside the container to have a fixed position and the content should scroll without scrolling both top and bottom div.
I'd like a solution using CSS or jQuery, please. For a JSFiddle example, see my comment below.
I would like to add the below as a comment but because of low reputation I was unable to do it.
Take a look at the following jsfiddles:
1) http://jsfiddle.net/davidpauljunior/g2ydV/8/
2) http://jsfiddle.net/yASFU/
Style:
#content {
width: 80%;
margin: 0 auto;
padding: 60px 0;
}
You could add another inner div to hold the content, and set overflow-y: scroll on it so that only the content will scroll and not the header and footer. Here is a modified version of your fiddle to illustrate this concept:
http://jsfiddle.net/jwnace/vtuv6wh6/
Just add position:fixed; to the necessary elements in the CSS. So the CSS should look something like:
.inside {
top: 2px;
border: 1px solid #000;
background-color: #000;
color: #FFF;
height:50px;
position:fixed;
}
.inside2 {
bottom: 2px;
border: 1px solid #000;
background-color: #000;
color: #FFF;
height:50px;
position:fixed;
}
Further read
Updated fiddle to reflect the same.

How to increase div width according to the text inside it?

I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?
There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast

Categories

Resources