Here's what I'd like to execute:
Fixed navigation
Photo spanning full width of the page (may also be deeper than browser window which is okay because I want the user to scroll past the image.
So I suppose the photo should be fixed. The part that's hard to create is that once the window reaches the point of half photo, half story below, the story below should begin to cover the photo (until the photo is no longer visible) and the page begin to scroll up.
Here's my fiddle, and the code:
<body>
<header> <span class="white">Home</span></header>
<!--A FIXED HEADER ALWAYS IN SIGHT-->
<div id="content">
<section class="intro">
<!--CONTAINER FOR PHOTO AND HEADLINE-->
<h1 class="atop">Headline</h1>
<img class="scrollimg" src="http://ww2.hdnux.com/photos/23/74/63/5229797/3/1200x706.jpg"/>
</section>
<!--SECTION SHOULD BE FIXED BUT ONCE SCROLLED 75% OF PHOTO, STORY CONTAINER BELOW SHOULD BEGIN TO COVER PHOTO-->
<section class="story">
<!--CONTAINER FOR STORY WITH WHITE BACKGROUND BEGINS TO COVER PHOTO UPON SCROLLING DOWN-->
<div id="row">
<!--DUMMY COPY-->
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
</div>
</section>
</div>
<div id="footer">FOOTER</div>
with what I thought was some helpful code from another fiddle.
The fiddle seems to perform a similar trick in that the footer pushes content up upon reaching a set position upon scrolling.
How about
http://jsfiddle.net/anaran/gYxK4/
No JS at all.
See also https://developer.mozilla.org/en-US/docs/Web/CSS/position
position: fixed;
leaves not space for such an element.
Therefor elements coming after it need to specify relative positioning and specify the relative position.
I added a white background which you might like or not.
.story {
position: relative;
background: white;
padding: 4%;
top: 850px;
left: 30px;
}
Related
I'm working on a multi-language project. I want to change all the used margin-left styles to margin-inline-start, after the direction of the <body> changed according to the selected language. how can I do it programmatically in javaScript?
You probably can try to loop through computed style, retrieve margin-left value, reset margin-left and then apply a margin-inline-start with the value of margin left.
here is the basic idea : (Live Demo at https://codepen.io/gc-nomade/pen/MWrGBjX?editors=1111 )
let allelements = document.querySelectorAll("body *");
for (i = 0; i < allelements.length; i++) {
let computedStyle = window.getComputedStyle(allelements[i]);
// look for
if (computedStyle.getPropertyValue("margin-left") != "0px") {
let valMargin = computedStyle.getPropertyValue("margin-left");
// let's see what's going on, if anything happens
console.log(
"found margin-left. value : " +
computedStyle.getPropertyValue("margin-left") +
" of " +
allelements[i].tagName
);
//reset
allelements[i].style.marginLeft = "auto";
// set/reset inline-start margin
allelements[i].style.marginInlineStart = valMargin;
}
}
body {
direction: rtl;
}
h1,
p,
code {
margin-left: 10em;
}
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
I'm not an developper, so that might not be the most effective way to do it.
But starting from here, you will probably find out that margin-right maybe needs to be reset too, and so floats....
If you use a flex or grid-layout, without margin , but justify/align , you will not have to bother about the direction / dir value of the document , the browser will follow it naturally ;)
I need to keep track of the page offset on a website.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var Y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
Using the above code returns the vertical offset for me on all desktop browsers. However, I only get 0 on mobile browsers. How can I get the scroll location on mobile?
I guess this might help you:
Demo : Fiddle
JQuery
$(window).scroll(function (event) {
var scroll = $(window).scrollTop(); // This would give you offsetY while you scroll
$(".scrollY").text(scroll); // This is just to display for instance.
});
Open in Mobile
Update
JavaScript
window.addEventListener('scroll', function(){
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
document.getElementsByClassName("scrollY")[0].innerHTML = scrollTop;
}, true)
.scrollY
{
position:fixed;
top:0px;
left:0px;
padding:10px;
display:block;
width:auto;
height:auto;
background:red;
color:yellow;
}
.title h1
{
text-align:center;
}
div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px 0px;
border-radius:10px;
}
<div class="scrollY"> </div>
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
Demo : Fiddle
I have a series of divs that on click, toggle the state of a collapsible div (like an accordion widget). That is working fine, but I want to be able to scroll to the top of the trigger div (the div with class name 'panelTab') when the user clicks. The problem is that when the panels are hidden, they take up no space so jQuery doesn't automatically 'know' the size of the page, and isn't able to calculate to the top of the element automatically. So what happens is that on click it scrolls, but it 'overshoots' the top of the window and lands in the middle of the paragraph content. I'm stuck - anyone know a simple solution? Thanks in advance.
<div class="panelTab first holder">
<div class="text-block"> <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div> </div>
<div class="animatedPanel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM </h3><p class="sub- title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder"><div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
And the jQuery:
$('.animatedPanel').hide();
$('.panelTab').click(function() {
$('.panelTab').removeClass('active');
$(this).toggleClass('active');
var panel = $(this).next()
$('.animatedPanel').not(panel).slideUp();
panel.slideToggle({
direction: "up"
}, 100);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
});
http://jsfiddle.net/rmLo2n07/
try changing the style of the hidden element
position:absolute, display: block, visibility:hidden
then calculate it height and restore its old style
I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/
Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}
Suppose we have the following code:
<div id="test" style="width:200px; height: 200px; overflow: hidden;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Consectetur adipiscing elit. Vivamus lorem ipsum dolor sit amet,
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Sed rhoncus facilisis commodo. Sed mattis lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus ipsum diam, cursus ornare eleifend
quis, posuere id sapien. Vestibulum et mattis augue. Nulla facilisi.
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
</div>
The result would be a clipped text.
Is there some way to get invisible text as a substring?
I tried
$("#test :hidden").text();
and
$('#test').children(":hidden").text()
without success.
I'm trying to show pages of text without scrolling. I have a large amount of text (html formatted) and a fixed size div (the text page). I would like to paginate the text on it, just showing one page of text each time.
There is a good answer on this topic already, it provides the javascript you'd need to do this. Like the respondent there though, I would say find another way to do this if you can.
You could use a mono-spaced font like Lucida Console or Courier New and split the string based on a static number of characters that fit in the content area.