I am trying to make a portfolio where if you click on ‘scroll page’, the page will scroll completely until the footer image is one with the top image. So you can see one complete image when header and footer are merged.
I have searched Google and Stack Overflow, but unfortunately I couldn't find anything that did the trick.
EDIT
i have updated the style.
On IE9 it scrolls until footer hits header and it fits good, but in google chrome it does not.
Anyone have any idea? Thank you
EDIT 2
I have managed to make the page scroll but now i have height property problems in web crossing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | S.H. MOKHTAR | 2011</title>
<link rel="stylesheet" type="text/css" href="layout/styles.css" />
<script>
function pageScroll() {
window.scrollBy(0,60); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<div id="header"></div>
<div id="content"><input type="button" onClick="pageScroll()" value="Scroll Page">
Stop Scrolling<br>
<br>
</div>
<div id="footer"><img src="layout/images/bot.png" style="width:auto; height:auto" /></div>
</body></html>
body, html, div, input, footer{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
width:100%;
}
#header{
background:url(images/top.png); height:auto; width:auto; background-repeat:no-repeat;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
#content{
margin-top:50px;
}
#footer{height:870px;
}
EDIT 3
With help i managed to resolve the height problem, The new code is up and running and for download at http://www.sushitaksteeg.nl/secret/Port.rar or live at http://www.sushitaksteeg.nl/secret/template.html for now.
My other question where i could solve this problem with help is: Height different in IE FF Chrome
Thank you
Haven't tested it, but something like this:
$("body").scrollTop($("#yourimage").position().top);
(With jQuery ofcourse for XB (Cross Browser))
Related
I got the code from here, the main solution by rossipedia:
fixed sidebar until a div
Here's my Tumblr page and the part of the code the script is influencing (main is replaced with content):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
<style type="text/css">
#sidebarwrap {
margin: 0 0 1.5em;
width: 16.2em;
float: left;
position: relative;
}
#sidebar {
margin: 0 0 1.5em;
width: 16em;
height: 570px;
position: absolute;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer {
border-top: 4px solid {color:Footer Border};
background: {color:Footer Background};
color: {color:Background};
clear: both;
margin: 0;
overflow: auto;
padding: 0 0.5em;
}
#content {
margin-bottom: 4.5em;
margin-left: 18.5em;
min-width: 500px;
min-height: 550px;
}
</style>
</head>
Body
<body>
<div id="contain">
<div id="sidebarwrap">
<div id="sidebar">
...Stuff...
</div>
</div>
<div id="content">
...Stuff...
</div>
</div>
<div id="footer">
<div id="footer-container">
...Stuff...
</div>
</div>
I then included the the script right before the /body as so:
<script type="text/javascript">
...Script...
</script>
I keep spell checking and making sure everything is in order, but it all just won't work. At least not for that JS. The other JS's I used work just fine... The script is supposed to make my side bar scroll with the user and then stop right before overlapping the footer. Yet, the script acts likes its not even there, the sidebar doesn't move a single inch...
Heck, I even tampered with the original on its Fiddle page to make it the same layout and ordering as my page, and it still worked just fine.
Am I missing something? Everyone keeps talking about JQuery, and I'm not entirely sure what that is or if I'm supposed to use it... If someone could help me see what I'm doing wrong, I'd really appreciate it! :'D
It looks like you do need to load jQuery on your page to use the code you added. jQuery is a JavaScript library; it provides the "$" function.
To load jQuery in your page, add this before your fixed sidebar code:
<!-- Note that we have a closing tag right after the opening tag here. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Your code here
</script>
I'm trying to accomplish something as simple as putting to div's side by side. The thing is I'm very capable in CSS, however the solutions I'm trying to use do not work as intended, here is the problem.
I'ved used: (so both divs is laying side by side)
display: block; float: left; margin-right: 15px;
And it work flawlessly LOCALLY, the thing is I'm creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it's very important it acts alike in all browsers.
Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side... That don't work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.
So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?
Below is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sidekick</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sidekick.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
CSS:
.eas_sidekick_divs div
{
display: block;
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 850px;
height:600px;
background: #ccc;
}
This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html
Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.
Click on the button of the little banner to the right stating: "exiting me" and you'll see the div expand, the expanded div is the one i want to position to right at all times.
Hope u can help me out! :)
You can use display:inline-block; or display:block; both will work but as you mention "#eas_sidekick_container" width should be equal or should not exceed with parent Element width please correct "#eas_sidekick_container" width.
Here is the corrected code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.eas_sidekick_divs div
{
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 300px;
height:600px;
background: #ccc;
}
</style>
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
I've figured out myself a javascript solution for fixing my issue.
I've used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.
Below is my code:
$(document).ready(function() {
var cssWidth = 1024;
var cssPos = 10;
$("#eas_sidekick_container").hide();
$("#eas_sidekick_container").css(
{
width: '0px',
position: 'absolute',
top: '0px',
left: cssWidth + cssPos
});
$(".eas_sidekick_open").click(
function() {
$("#eas_sidekick_container").show();
$("#eas_sidekick_container").animate({
width: '850px'
});
$('html, body').animate({
scrollLeft: '850'
});
});
$(".eas_sidekick_close").click(
function() {
$("#eas_sidekick_container").animate({
width: '0px'
});
setTimeout( function(){
$("#eas_sidekick_container").css(
'display' , 'none'
);
}, 350);
});
});
here is jsFiddle: http://jsfiddle.net/arJEx/
Here's what I got so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Waiting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<style>
* { margin:0;padding:0; }
#wait {
background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function() {
$(".act").live("click",function() {
$("#wait").slideDown("slow");
});
});
</script>
</head>
<body>
<button class="act">Activate effect</button>
<div id="wait">Please wait...</div>
</body>
</html>
I want it so the blue div when I press that button slides down to the middle of the page... but I juts can't seem to find out how to do it. Please help?
edit: ok, it doesn't HAVE to be middle of screen but near the top of part. like.. anywhere near middle to top of page.
Everything is just fine with Your JS. You need to change CSS. First of all div's container must fill all window:
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
Than change div's css. First approach (not sure about IE):
#wait {
/* remove padding and append those */
position: absolute;
top: 5%; /* change it */
bottom: 50%;
width: 100%
}
Second one:
#wait {
/* remove padding and append those */
height: 50%;
}
There is one problem You will need to solve. You will need to verticall align Your text without using padding and this is another question (just search for it in stackoverflow or goole).
Is this what you want?
$("#wait").height(0).animate({height: $(window).height() / 2});
Is this what you're looking for?
$(function() {
$(".act").click(function() {
var h = $("#wait").height()/2;
var t = $(window).height()/2;
var pos = t - h - 50;
$("#wait").slideDown("slow").css('top', pos);
});
});
You'd have to add position:relative; and width: 100% to your css though.
This will show the div and push it down the page by extending the top margin 200px. It uses Jquery's animate, which lets you change a numeric property over time (read: move stuff). SlideDown is basically shorthand for calling an animate function that increases the height of an element to move it down the page. Instead of increasing the height, this keeps the same height and just moves the element to a lower part of the page.
Is this anything close to what you wanted? :D
$(function() {
$(".act").live("click",function() {
$("#wait").show().animate({ marginTop: "+=200" }, 600);
});
});
i want to make a login page but it is hidden in the center of the main page.
and then i use jquery to make the div that surrounds it visible and it will be like the login page at www.bytes.com.
but i cant figure it out how to center it with css. it doesnt work without affecting the main pages div positions.
i just want it to float over the main page. someone?
Is this what you want? Note the CSS comment. It's important to get the div centered. The "trick" that make the float above the other parts of your site, is position: absolute.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Centering a DIV with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css">
.center_center {
position: absolute;
background-color: #ccc;
border: 1px solid #000;
width: 300px;
height: 200px;
/* notice: margins are -(value/2) */
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
display: none;
}
</style>
</head>
<body>
<div id='login' class="center_center">
Login content
</div>
<p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>
You could try using a modal form for your login. jquery ui do a nice one http://jqueryui.com/demos/dialog/#modal-form which will open up a form for you to use in the centre of the page.
I have a new problem that bugs me ...
I am making a web page that I want to be fixed with no scrolling and most important I want my main Div to fill aaaaaaaaall my available space...
I made this code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>There is a ##!¤*-ing blank !</title>
<style type='text/css'>
html {margin:0px;padding:0px;height:100%;overflow:hidden;border: 3px solid green}
div {margin:0px;padding:0px;}
</style>
</head>
<body onload="document.getElementById('mydiv').style.height=document.getElementsByTagName('html')[0].offsetHeight+'px'"><div id="mydiv" style="margin:0px;padding:0px;width:100%;border: 2px solid red"></div></body>
</html>
As you can see I get a white space between my body element border and my div element border even though my body padding and div margin are set to 0...
I had once read "More Eric Meyer on CSS" that contains a solution to this issue but it was a long time ago and I don't remember ...
Any help would be greatly appreciated ^^.
You didn't set the body's style:
body {margin: 0px; padding: 0px; height: 100%;}
Your body margin isn't set to 0px, just that of html.
Set the margin to 0 on the body tag.
body {margin:0;}
In addition - rather than adding:
padding: 0; margin: 0;
to every selector do it globally at the top of your CSS file:
* { padding: 0; margin: 0; }