I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
Related
I need to reproduce a similar effect of this: https://dribbble.com/shots/3275340-Exploring-The-North-Face in the home page of the website i am working on. I read some comments in this dribble link, and the creator said that the effect was made with Adobe After Effects, so maybe this effect is not completely doable in the web environment.
(Old) Currently the way-to-go is a custom svg path set to display only the content inside of it, like this question: SVG viewbox overflow: hidden / crop.
My first goal was resolving how to make the transition between the two words not linear, so i created an outline of the clouds with svg path. My problem with this code here it's that as soon as i leave my developement resolution (approximately 1900x920) of my monitor the svg path doesn't resize and gets pushed after the end of the image.
My problems right now are 2:
Resolved Notice the transition over the two words, how it's not linear
Resolved he responsiveness of this whole section, how it breaks just moving like 10px away from my screen's resolution
Old Fiddle: https://jsfiddle.net/4kd36ya8/1/
UPDATE: I changed the whole code to try out another thing: CSS Masks (https://css-tricks.com/clipping-masking-css/) and this seems to work very good with what I am trying to achieve. The problem is with the position of the words. If i put them in position: fixed there is a bug in Microsoft Edge (see this question for reference; note that I already tried the fix that the post explains, but with no success at all).
Current Fiddle: https://jsfiddle.net/ztgyq1kc/4/
Current Code:
body {
/* Just to make the document scroll over */
height: 300vh;
}
.home-header {
height: 100vh;
}
.home-header .inside {
position: relative;
width: 100%;
height: 100%;
-webkit-mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
z-index: 2;
}
.image {
width: 100%;
height: auto;
display: inline-block;
}
.cloud-writing {
height: 0;
line-height: 0;
text-transform: uppercase;
font-weight: 700;
font-size: 12.5rem;
letter-spacing: -1rem;
text-align: center;
position: fixed;
top: 50%;
width: 100%;
}
.cloud-writing.white {
color: #fff;
z-index: 3;
}
.cloud-writing.blue {
color: blue;
z-index: 1;
}
<div class="home-header">
<div class="inside">
<div class="cloud-writing white">Text1</div>
<img src="https://via.placeholder.com/1920x1080?text=placeholder" class="image" alt="" />
</div>
<div class="cloud-writing blue">Text2</div>
</div>
My next goal will be adding a parallax library (I still do not know which one) to handle all animations.
My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});
I've been trying layout with css the div (dark blue) so that changes size according to the size of the window without covering the bottom panel, I thought that with the height to 100% official, but not understand because it ignores the panel below, and ends moving off the page
now that see not let me post pictures, so something is also what I have:
html:
<div id="container">
<div id="message">hi i'm a message</div><!--i can see this div-->
<div id="darkBlue"></div>
<div id="anotherPanel">you can't see me</div>
</div>
and this css
#container{//This container is attached to the right side
right: 0;
width: 300px;
position: fixed;
height: 100%;
top: 0;
color: white;
padding: 20px;
}
#darkBlue{//this div cover the next div
height: 100%;
border: 1px solid white;
background: #3a5193;
bottom: 100px;
}
#anotherPanel{//i can't see this div.......
height: 100px;
botton: 0px;
}
Not sure if you can solve with css, or have to resort to using javascript (which is something I want to avoid), anyone knows some property who can help me?
UPDATE: This is the picture of what layout attempt: https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png
Using bottom top left right you must define position. In your case remove bottom from #darkBlue #anotherPanel and add to #darkBlue height: calc(100% - 100px)
DEMO
Update
If you don't want to use calc then add margin-bottom:-100px; to #darkBlue
DEMO
You have a typo in the CSS of anotherPanel. You have botton instead of bottom. Also when using this CSS properties, is good to set the position.
Try this:
#anotherPanel{
height: 100px;
width: 300px;
bottom: 0px;
background: #F00;
position:absolute;
}
Is this the droid you are looking for?
Best.
If you assign a height of 100% to a child element it will take up 100% of the height of the parent element. If you want the element to cover the whole container without being in the document flow of the parent element you can try to do the following:
#darkBlue {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3a5193;
}
Edit: #Niels has mentioned an additional detail I've not mentioned before. For this to work the parent elements position needs to be set to either fixed, absolute or relative
So I have two images, one is a half of a ribbon and the second one is a full ribbon with facebook etc links on it. I need to have the first one in the middle of a page, so when you click it it would expand out. I figured i need to use hidden overlay or something but I am totally new at javascript.
Can someone provide an example or help me with this?
I tried to understand what you want and tell me if this is what you meant.
You can wrap the two images in two sepatare divs and then wrap them in a div with position relative.
Then you give to the two divs position absolute.
On the click of the first div you change the second div left position (or the top if you want a vertical effect).
Here is the html with divs only:
<div style="position: relative">
<div id="frontDiv">
aaaaaaaaaaaa
</div>
<div id="backDiv">
bbbbbbbbbbb
</div>
</div>
Here the CSS:
#frontDiv{
height: 20px; width: 45px;
background: red; position: absolute;
z-index: 1; left: 0px; top: 0px;
}
#backDiv{
height: 20px; width: 30px;
background: blue; position: absolute;
z-index: 0; left: 0px; top: 0px;
}
And here the javascript (in jQuery):
$("#frontDiv").click(function(){
$("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});
At the end you can position the wrapper div wherever you want.
Full example at this fiddle: http://jsfiddle.net/w7RVe/
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.