I am new to this site and to web development in general, but I am working on a project that I need a bit of help with. Please bear with me as I am still new to this so I understand my code is sloppy and probably inefficient.
I am working on a sticky header that will stay visible as you scroll down the page. In addition, as you click on the links I would like them to be highlighted and then move to a particular location on the page through a scrolling action. When you click on 1, it should be highlighted and the others should be grayed out.
Since I am using a unique shape to do this I simply used images. I do not know any better so if you have suggestions it would be greatly appreciated. However, this is not the point of my question to you all. I have already figured out how to make the header work by utilizing the knowledge-base here on stack overflow. However, I need to optimize the element so that it is responsive for smaller viewports. I am uncertain how to do this given that I have multiple divs, images and scripts. Every time I try to accomplish this I break some other aspect of the header's functionality. Any help or direction would be greatly appreciated. I don't even know where to start here.
JSFiddle Demo
$(document).ready(function() {
$('div[id^="section"]').on('click', function() {
$('div[id^="section"]').addClass('not-active');
$(this).removeClass('not-active');
});
});
var $window = $(window),
$stickyEl = $('.fusion-page-title-bar'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 225
}, 1000);
return false;
}
}
});
.fusion-page-title-bar {
background-color: rgba(77,77,77,0.6) !important;
z-index: 9999 !important;
position: sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
top: 135px !important;
height: 71px;
border: none;
}
}
.fusion-page-title-bar.sticky{
position: fixed;
top: 0;
}
#main{padding-top:0px !important;}
.stickybanner {
height: 71px;
text-align:center !important;
width:1596px !important;
position:relative !important;
margin:auto !important;
background-color:gray;
}
[id^="section"] {
position: absolute;
display: inline;
}
[id^="section"] img:last-child {
display: none;
}
[id^="section"].not-active img:last-child {
display: block;
}
[id^="section"].not-active img:first-child {
display: none;
}
#section1 {
left: 26px;
position:absolute !important;
}
#section2 {
left: 325px;
position:absolute !important;
}
#section3 {
left: 624px;
position:absolute !important;
}
#section4 {
left: 923px;
position:absolute !important;
}
#section5 {
left: 1222px;
position:absolute !important;
}
.hidecode{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stickybanner">
<a href="#sections1">
<div id="section1">
<img src="http://imgur.com/A3hv0f3.png">
<img src="http://imgur.com/iQv7yhd.png">
</div>
</a>
<a href="#sections2">
<div id="section2">
<img src="http://imgur.com/Ld1TntV.png">
<img src="http://imgur.com/oziGN60.png">
</div>
</a>
<a href="#sections3">
<div id="section3">
<img src="http://imgur.com/zpViBoy.png">
<img src="http://imgur.com/f5wSB6N.png">
</div>
</a>
<a href="#sections4">
<div id="section4">
<img src="http://imgur.com/hgt5u84.png">
<img src="http://imgur.com/Skhrull.png">
</div></a>
<a href="#sections5">
<div id="section5">
<img src="http://imgur.com/iOThUy8.png">
<img src="http://imgur.com/lLRbfvT.png">
</div></a>
</div>
You can rather use CSS for making elements of arrow shaped. It will give you more flexibility and functionality and will be reusable and manageable.
I have made a JSFiddle depicting how can you make a arrow shaped div, the kind you require. You can tweak further more into it to achieve what exactly you want to.
https://jsfiddle.net/mzo5mqz2/
* {
margin: 0;
padding: 0;
}
/*Header full width*/
.header{
width: 100%;
position: fixed;
}
/*Common CSS to display tab shape*/
.header__tab{
min-width: 250px;
width: calc(20% - 20px);
line-height: 50px;
position: relative;
text-align: center;
margin: 50px auto;
display: inline-block;
}
.header__tab:after, .header__tab:before{
content:"";
position:absolute;
width:20px;
height:50%;
left:100%;
}
.header__tab--left__before, .header__tab--left__after {
content: "";
position: absolute;
width: 20px;
height: 50%;
left: -20px;
}
/*Color for Tab 1*/
.tab1 {
background: red;
}
.tab1:after{
bottom:0;
background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
.tab1:before{
top:0;
background: linear-gradient(to right top, red 50%, transparent 50%);
}
.tab1--before {
top: 0;
background: linear-gradient(to right top, transparent 50%, red 50%);
}
.tab1--after {
bottom: 0;
background: linear-gradient(to right bottom, transparent 50%, red 50%);
}
/*Color for Tab 2*/
.tab2 {
background: yellow;
}
.tab2:after{
bottom:0;
background: linear-gradient(to right bottom, yellow 50%, transparent 50%);
}
.tab2:before{
top:0;
background: linear-gradient(to right top, yellow 50%, transparent 50%);
}
.tab2--before {
top: 0;
background: linear-gradient(to right top, transparent 50%, yellow 50%);
}
.tab2--after {
bottom: 0;
background: linear-gradient(to right bottom, transparent 50%, yellow 50%);
}
<div class="header">
<div class="header__tab tab1">
<span class="header__tab--left__before tab1--before"></span>
<span class="header__tab--left__after tab1--after"></span>
<span>DOCUMENTATION ACCURACY</span>
</div>
<div class="header__tab tab2">
<span class="header__tab--left__before tab2--before"></span>
<span class="header__tab--left__after tab2--after"></span>
<span>CODING EFFICIENCY</span>
</div>
</div>
Web Dev Tip:- Invest a little extra time in the beginning and you will have the most flexible web app in the end which will give you the ability to quickly change the interface according to needs.
For ex- In this case, you can easily change the color of the tabs, or the shapes if you no longer like it after a while.
add this style in your css
img{width:100%;}
you can get responsive images for all devices.
You can simply use Bootstrap img-responsive class
and for alignment you can you the class col-md-2 (upto 12 from 0)
here is one example based on your code :
<div class="col-md-2">
<a href="#sections2">
<div id="section2">
<img class="img-responsive" src="~/IMG/PNG_transparency_demonstration_1.png" />
<img class="img-responsive" src="~/IMG/PNG_transparency_demonstration_1.png" />
</div>
</a>
</div>
Related
Everything I've seen for this basically uses a background image with a linear gradient over the top of it, and that won't work for me:
I have 2 divs with background images that appear next to each other vertically, with, say, 50px of overlap. I would like to make the top 50px of the background image on the second div into a gradient so it fades in from transparent.
Here's the setup to start:
* {
box-sizing: box-sizing:border-box;
}
div {
width: 200px;
height: 200px;
padding: 10px;
color: #fff;
}
.one {
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}
.two {
padding-top: 60px;
margin-top: -50px;
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
}
<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>
And here's roughly what I want it to look like:
I can't just upload a background image that fades one into the other because the content of the real divs is variable height, and the background needs to change only between the two divs.
mask can do it
* {
box-sizing: box-sizing:border-box;
}
div {
width: 200px;
height: 200px;
padding: 10px;
color: #fff;
}
.one {
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}
.two {
padding-top: 60px;
margin-top: -50px;
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
-webkit-mask: linear-gradient(#0000, #000 50px);
}
<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>
If you want it to stay a little more modular, you can only fade to a specific color (in my example white):
div { height: 300px; width: 500px; background-size: cover; }
div:first-child {
background-image: linear-gradient(to bottom, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/28/09/40/wild-7416210__340.jpg");
}
div:nth-child(2) {
background-image: linear-gradient(to top, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377__340.jpg");
}
<div>Test 1</div>
<div>Test 2</div>
I do have a feeling that this post will get a lot more negative responses as compared to positive ones but it's ok, one response containing the correct answer is worth it!
Ok, this feature is a bit hard to explain in words. I want to add a loading animation whenever a button from the navigation bar is clicked. It should take up 100vh height and 100vw width and should be from right to left and then disappear. (Need help with both CSS and js, maybe HTML too)
I suggest checking out https://www.jacekjeznach.com using a laptop. You can see the really cool loading animation going on when you click on any of the options from the main navigation bar situated on the left side of the website
I know I can't make the exact effect without becoming an expert in web development. I even checked out the GitHub repo of his portfolio but there was no index.html there. A lot of .jsx files (ReactJS) though.
I know the basics of HTML, CSS, JS and never worked with any frameworks (not been more than 2 months since I started learning web dev) but I need help with this project because it is a college assignment.
I chose to make an eLearning website, similar to what this guy teaches(using webflow and few backend tools like MemberStack, Airtable & Zapier): https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
I am allowed to use any frameworks but I am not allowed to use any website building tools(I can't explain the complex javascript code if I ignore the instructions and use it anyway). Connection to the backend is a plus point but not a requirement.
Currently I am just making the basic homepage of the website and its code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.slide {
width: 97vw;
height: 97vh;
margin: auto;
}
.wrapper {
display: flex;
flex-direction: row;
width: 500vw;
transform: rotate(90deg) translateY(-97vh);
transform-origin: top left;
}
.one {
background: #efdefe;
}
.two {
background: #a3f3d3;
}
.three {
background: rgb(245, 228, 228);
}
.four {
background: #ffddcc;
}
.five {
background: rgb(245, 241, 225);
}
.outer-wrapper {
width: 97vh;
height: 97vw;
margin: auto;
transform: rotate(-90deg) translateX(-97vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.wrap-class {
margin-left: 1vw;
display: flex;
align-items: middle;
justify-content: space-around;
height: 100vh;
width: 10vw;
align-content: space-between;
justify-content: center;
position: fixed;
flex-direction: column;
vertical-align: center;
}
/*Code for the horizontal navbar on left side: */
.navbar {
width: 10vw;
height: auto;
}
.margin1vh {
margin-top: 0.7vh;
margin-bottom: 0.7vh;
}
a:-webkit-any-link {
text-decoration: none;
color: white;
padding: 1vw;
padding-left: 0;
display: block;
/* padding: 3vh 1vw 3vh 1; */
height: 100%;
width: 100%;
}
button {
background-color: black;
display: block;
width: 100%;
box-shadow: inset 2px 2px black, 4px 4px 0 grey;
}
button:hover {
transform: scale(1.1);
}
html {
background-color: black;
/* filter: invert(1); */
scroll-behavior: smooth;
}
/*This code allow us to add linear gradient to a text*/
p,
h1 {
display: block;
margin-left: 31%;
margin-top: 5000px !important;
max-width: 1vw;
background: rgb(2, 0, 36);
background: radial-gradient(circle,
rgba(2, 0, 36, 1) 0%,
rgba(165, 106, 108, 1) 0%,
rgba(175, 99, 99, 1) 0%,
rgba(148, 116, 123, 1) 0%,
rgba(91, 153, 175, 1) 0%,
rgba(62, 172, 200, 1) 0%,
rgba(194, 226, 162, 1) 0%,
rgba(0, 212, 255, 1) 0%,
rgba(18, 255, 21, 1) 14%,
rgba(230, 65, 87, 1) 29%,
rgba(194, 185, 52, 1) 46%,
rgba(43, 83, 210, 1) 64%,
rgba(59, 221, 55, 1) 80%,
rgba(222, 85, 217, 1) 92%);
-webkit-background-clip: text;
background-clip: text;
/*for compatibility with safari browser*/
-webkit-text-fill-color: transparent;
display: inline;
background-size: 300%;
animation: bg-animation 17s infinite;
}
#keyframes bg-animation {
0% {
background-position: left;
}
50% {
background-position: right;
}
100% {
background-position: left;
}
}
/*Now, let's add the animation that happens when a button of fixed position is clicked: */
.animation-on-click {
min-width: 100vw;
min-height: 100vh;
background-color: black;
animation-name: animate;
animation-duration: 2s;
animation-iteration-count: 1;
overflow: visible;
}
#keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one" id="one">
<div>
<br />
<br />
<h1>Welcome to the website</h1>
</div>
</div>
<div class="slide two" id="two">
<div>
<br />
<br />
<h1>Welcome to the eLearning website</h1>
</div>
</div>
<div class="slide three" id="three"></div>
<div class="slide four" id="four"></div>
<div class="slide five" id="five"></div>
</div>
</div>
<div class="wrap-class">
<div class="navbar">
<button>
Home
</button>
<div class="margin1vh"></div>
<button>
About
</button>
<div class="margin1vh"></div>
<button>
Website
</button>
<div class="margin1vh"></div>
<button>
Support
</button>
<div class="margin1vh"></div>
<button>
Contact
</button>
</div>
</div>
<script>
function clicked() {
var element = document.getElementById("one");
element.classList.add("animation-on-click");
setTimeout(function () {
element.classList.remove("animation-on-click");
}, 2000);
}
</script>
</body>
</html>
I just need a loading animation (without a loading bar should also work) but it should be done on the whole screen. I think I might change the background color of all the elements in CSS horizontal flexbox to black also because black is the best background and it will allow me to change width ad height attributes of the .slide class and translateX and translateY functions from 97vw, 97vh to 100vw, 100vh (as they were in the original code)
Btw, I have combined the codes of CSS and JS files in the HTML file here to be able to share the code here on StackOverflow.
You can visit https://github.com/shubham-garg1/web-project to check the GitHub code. I have also published the work done till now online so you can go to http://www.elearningweb.tk and check the sources files.
Any help is appreciated, thanks.
They're actually pretty easy to do if you just want a spinner, but a "loading" animation should be tied to a "loading" process. Without making any assumptions, lets consider some native Javascript Ajax call...
var xmlhttp = new XMLHttpRequest();
document.getElementById("myLoader").style.display = "block";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myLoader").style.display = "none";
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
You can just throw an animation inside your myLoader div... If you want to get a little fancy, you can use Javascript to animate it after you load it.
Let's grab some code: I'll grab it from https://www.w3schools.com/howto/howto_css_flip_card.asp.
It's just a card flip on hover, but I've removed the hover part.
The important part here is in the flip-card-inner portion of the CSS. It's going to dictate to Javascript how long the animation process should take. If you want a longer one, just adjust the transition value.
JsFiddle: https://jsfiddle.net/L1fk0nhm/
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
</style>
<div class="flip-card">
<div id="myLoader" class="flip-card-inner">
<div class="flip-card-front">
I'm hiding stuff that's loading!
</div>
<div id="loadedStuff" class="flip-card-back">
</div>
</div>
</div>
We can actually have it flip on load, using Javascript after the inside of the element has loaded.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("loadedStuff").innerHTML = xmlhttp.responseText;
animatedCardRotation(document.getElementById("myLoader"), 0, 180);
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
function animatedCardRotation (Element, startDegree, endDegree) {
if(startDegree < endDegree ) {
startDegree += 10;
Element.style.transform = `rotateY(${startDegree}deg)`;
requestAnimationFrame( () => this.animatedCardRotation(Element, startDegree, endDegree) );
}
}
Combining requestAnimationFrame here really adds a lot to your CSS animations. You can virtually do any kind of CSS transformation here and if you have something that loads in chunks, it can help you build a very accurate "loading bar".
I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
This idea comes from the idea of an arcade cabinet. Let's say you have 2 layers in a project. Layer 1 with z-index of -1 has a background of blue. I want the upper most div to be black with the inner area of the div to be semi-transparent, similar to a window on an arcade cabinet. How would I solve this issue?
To give you an idea it would look like:
Arcade Cabinet Screen
Here you are:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
}
#s {
border-radius: 7vh;
width: 102vh;
height: 77vh;
box-shadow: 0 0 0 50vw #000;
transform: rotateX(-3deg);
background: linear-gradient(0, rgba(0, 0, 0, .3) 1px, transparent 0) 0 / 1px 3px, url(https://picsum.photos/800/600) 0 0 /cover
}
<div id="s"></div>
You can't do that... in the way you want. You would need to have multiple layers compose the "cabinet" facade. These would sit on the top. The blue could be in the background at -1. If you wanted to then have the "semi-transparent" part in there, then that would probably be a separate layer.
The facade below is in four "pieces": top, right, bottom, left. The screen itself sits in one layer. The glare sits in another.
.screen{
z-index:-1;
right:0;top:0;left:0;bottom:0;
background-color:blue;
position:absolute;
}
.screen div{
margin-top:90px;
color: yellow;
text-align: center;
font-family: fantasy;
}
.piece{
z-index:1;
background-color:black;
position:absolute;
}
.top{
height:4%;width:100%;
top:0;left:0;
}
.bottom{
height:4%;width:100%;
bottom:0;left:0;
}
.right{
height:100%;width:2%;
top:0;right:0;
}
.left{
height:100%;width:2%;
top:0;left:0;
}
.glare{
z-index:0;
background: radial-gradient(75% 35%, rgba(200,200,200,0.5), rgba(240,240,240,0.3));
right:0;top:0;left:0;bottom:0;
position:absolute;
}
<div class="top piece"></div>
<div class="right piece"></div>
<div class="bottom piece"></div>
<div class="left piece"></div>
<div class="glare"></div>
<div class="screen">
<div>press any button to continue...</div>
</div>
Try using three layers.
The Screen can be blue and behind that you have a big black div as the screen frame. On top of the screen you can put a transparent div.
The problem you'd face when using two divs is that the frame of the screen would look grey instead of the desired black effect.
To accomplish what you want, you need to think of layering in a different manner then how an arcade machine is built.
The black screen bezel is the lowest layer (#bezel)
The screen is the middle layer (#screen)
The overlay is the top layer (#overlay)
#bezel,
#overlay,
#screen {
height: 240px;
width: 256px;
}
#overlay,
#screen img {
border-radius: 20px;
}
#bezel {
background-color: black;
padding: 50px;
}
#overlay {
z-index: 2;
position: absolute;
background-color: rgba(0, 0, 255, 0.4);
}
<section id="bezel">
<section id="overlay"></section>
<section id="screen">
<img src="https://www.mobygames.com/images/shots/l/116293-rad-racer-ii-nes-screenshot-driving-off-into-the-sunset.png" />
</section>
</section>
I have a fixed div on the right of my page like this:
This is my html:
<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a>
<div class="tweetdetails" style="width: 0px;">
<p class="screenname">#BachelorGDM</p><br>
<img src="linktoimage" alt="image_user"><br>
<p class="createdon">Created on: Mar 8, 2013</p><br>
<hr>
<p class="text">Here is some text</p>
</div>
This is my CSS:
.tweetdetails{
color:white;
padding:10px 50px;
position: fixed;
right:0px;
width:300px;
z-index: 999;
background-color: #FFF;
height:100%;
background-color: black;
border-left: 5px solid rgb(127,255,255);
}
.open{
background-repeat: no-repeat;
background-size: 50px auto;
color:red;
position: fixed;
right:400px;
top:50%;
}
In my Javascript I have:
$("#toggle").click(function(){
$(".tweetdetails").animate({width:'0px'}, 500);
$("#toggle").animate({right: "-=300"}, 500);
})
But I always have an outcome like this:
How can I make sure I see nothing anymore? (I think it has something to do with the padding ...)
Check the fiddle if you're lazy ;) http://jsfiddle.net/tbleckert/UERHX/
That's because your padding will make the div 400px wide instead of 300px. You can add box-sizing to your div and add some extra width like this:
.tweetdetails {
box-sizing: border-box;
width: 400px; // Since we added box-sizing
}
The box-sizing will make sure the div stays with the width you define. And then animate the toggle's right to -400px. Remeber to add vendor prefixes to box-sizing (-moz and -webkit).
But! The problem will still remain so I would suggest animating the right attribute instead of the width. And that will work.
I would suggest you put the #toggle inside the .tweetdetails and absolute position it outside. That way you will only have to make one animation as the #toggle will follow. Also you can do this with css transitions just by adding a class instead.
.tweetdetails {
right: -400px;
transition: 0.5s right; // Add vendor prefixes
}
.tweetdetails.open {
right: 0;
}
$('#toggle').click(function () {
$('.tweetdetails').toggleClass('open');
});
I've made a fiddle to show you what I mean: http://jsfiddle.net/tbleckert/UERHX/
As a side note you shouldn't use ID's in your CSS but you should use them in your javascript. It's a good practise to add ID's to elements that you know you will use in your scripts (just don't go crazy, sometimes several elements applies and they should be classes so they can be looped easy).
You can make it more dynamic , without magic numbers:
$(".tweetdetails").animate({width:'0px' , padding:'0px'}, 500);
$("#toggle").animate({right: "-=" + ( $(".tweetdetails").outerWidth() ) }, 500);
.outerWidth is width+padding+border , have a look: http://api.jquery.com/outerWidth/
(Edited , thanks to #tbleckert)
I guess this is what you want:
http://jsfiddle.net/balintbako/XJbqD/
<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a>
<div class="tweetdetails" style="width: 0px;">
<p class="screenname">#BachelorGDM</p>
<br/>
<img src="linktoimage" alt="image_user"></img>
<br/>
<p class="createdon">Created on: Mar 8, 2013</p>
<br/>
<hr/>
<p class="text">Here is some text</p>
</div>
CSS
.tweetdetails {
color:white;
position: fixed;
right:0px;
z-index: 999;
background-color: #FFF;
height:100%;
background-color: black;
border-left: 5px solid rgb(127, 255, 255);
}
.open {
background-repeat: no-repeat;
background-size: 50px auto;
color:red;
position: fixed;
right:5px;
top:50%;
}
JS
$("#toggle").click(function () {
if ($("#toggle").hasClass("opened")) {
$(".tweetdetails").animate({
width: '0px',
padding: '0px'
}, 500);
$("#toggle").animate({
right: "-=" + 400
}, 500);
} else {
$(".tweetdetails").animate({
width: '300px',
padding: '10px 50px'
}, 500);
$("#toggle").animate({
right: "+=" + 400
}, 500);
}
$("#toggle").toggleClass("opened");
});
$(".tweetdetails").css('padding', '10px 0').animate({width:'0px'}, 500);