Wondering if I could get some help/direction...
Basically, I'm building my portfolio website. Here's work in progress, it's not finished!
https://reenaverma.github.io/
Basically, when you scroll down the page, you'll see a grey line moves from left, to the middle of the screen. It should basically be an animation to accompany the title on scroll.
I basically want the grey line to stop, at the beginning of each title. So for 'about reena', it should stop before "a", (not underneath).
I wanted to know the best way to achieve this? The relevant code so far is below. I got some of this off google and stackoverflow already.
I suppose I could drop the title before a div, (so the animation sits in a div on the left of the title). And use animate.js fadein/slidein. But I just wanted to know if there was a better/right way to do this?
HTML
<section class="section-white">
<div class="container">
<div class="flex-grid">
<div class="col-white">
<h2><span>about reena</span>
<div class="line"></div>
</h2>
<!-- <div id="trainMotion">
<img src="http://i.imgur.com/uKxkshD.png" alt=""
class="line">
<p>A Full Stack Developer etc etc etc...</p>
</div>
</div>
</div>
</section>
CSS:
.line {
display: block;
position: relative;
margin: 0 auto;
height: 3px;
background-color: #ccc;
width: 150px;
left: -300px;
transform: translateX(-50%);
}
JAVASCRIPT
$(window).on('scroll',function(){
const trainPosition = Math.round($(window).scrollTop() /
$(window).height() * 100);
$('.line').css('transform','translateX('+(trainPosition-30)+'%)');
});
Thank you!
You can divide the <h2> container into two parts. And add the animation container adjacent to the title making sure that the animation is restricted to that container only.
I am adding a codepen link which might help. Link
In this scenario, I restricted the width of the animation container. You can synchronise the timing with the JS.
You'll want to play around with the values at transform: translateX(-50%); in your CSS and +(trainPosition-30)+'%) in your JS to achieve the destination coordinates that are ideal for your project. Where your translateX value is the starting position then on scroll you're adding an additional 30%.
I don't know that this would be the cleanest option, but you can experiment with media queries to ensure that on all screen sizes it'll reach the position you want.
Related
So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;
I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.
The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}
Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.
First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!
I'm trying to create a 1 page website that has a menu across the top in a similar style to chart.io or simple.com, can anyone point me in the direction of a good tutorial? I've searched using google but I've not managed to come up with anything that does something like what I'm trying to do.
I currently have Mootools smooth scroll doing the scroll however I'm having trouble animating the element under the menu item.
Any and all help is greatly appreciated...
Start making the header menu fixed using CSS:
#header {
position: fixed;
top: 0;
left: 0;
}
Then you can use a Mootools plugin like this one:
http://davidwalsh.name/mootools-scrollspy
Demo: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
As you can see, with this plugin you can easily get the scroll position, so you can place the triangle under the menu in the correct position.
To animate the triangle, you just need some basic tween animation. HTML will be something like this:
<div id="header">
Your header here
<div id="triangle">
<img src="triangle.png" alt="">
</div>
</div>
CSS:
#header #triangle {
position: absolute;
bottom: 0;
left: 0;
}
Mootools tween for animation, this will move the triangle smoothly from it's current position to 300px from the left:
$('triangle').tween('left', 300);
Hope this will help you!