Here is my current code, http://jsfiddle.net/HRZ3D/2/ with it I have been unable to do the following,
Make the 10px side of the dock appear upon mouseover to an area 10px wide starting at the side of the window
Make that edge of the dock clickable so as to make the dock's content then appear afterwards, or otherwise disappear if the mouse moves away
Make the docks content then disappear again, once the mouse has re-clicked the dock's edge.
If I can get all this to work, I hope to be able to animate it in a way that the dock looks to actually slide out of the side of the screen. I don't know why my current code is incapable of at least doing the first three things in that sequence and would greatly appreciate help with this.
I updated the CSS and modified the jQuery.
See: http://jsfiddle.net/Kai/LrsGc/
Hopefully that gets you close enough to where you need to be. :)
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
So essentially what I am looking to do is have a section that has a solid background at some point on my page, and at the top of that a pair of sunglasses that as you begin to scroll, the reflection of the sunglasses changes from a few different images, as well as some text changes below the sunglasses to match each change in the sunglasses. Then once the final image is scrolled through, you reach a new section with different information. I am not entirely sure what this effect is called or how to achieve it, though I am guessing it will require a significant amount of jquery.
An existing website that demonstrates the effect I am trying to achieve is https://software.dakno.com/ with the phone effect in the second area down the page. (I do not own this site nor am I affiliated with the owners). I used chrome developer tools to figure out how it is working, but didn't get too far.
The site that I am working on is http://zack2171.github.io . This is an example site I am using to practice css and web design. The second section is where I am trying to get this effect to work. If someone could help me out a bit and give me some pointers, that would be great. Thanks
To achieve your goal, your definitely looking towards a mixture of jQuery and css. Most of your time will be dedicated towards the scroll position and at what pixel (Scroll distance) is covered to showing your images/text. I would start to align your image that you want in a position that is either fixed or absolute, to give you a better adjustment. Then start to play around with jQuery's Scroll Position. My personal approach would be to to detect the distance scrolled and after reaching those milestones (Half a page / 3/4 of a page) you would use jQuery to verify the position and then display those extra materials you want to show. I hope this kind of let you onto a good starting path.
Quick example, scroll down within the script below and check the console it logs!
$(window).scroll(function() {
console.log($(window).scrollTop());
})
.box {
background-color:#333;
height:5000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
See this page:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
Try and scroll to 10,20 or 30% position using the mouse-wheel. It is not possible. It seems to jump to 33%, 66% and 100% as if they are anchors. That makes sense on a large page if you want to scroll quickly through the page.
But the page I am using it for I need more control, I need it to be able to easily scroll to specific points. Is that possible to do that where I can use the mousewheel to scroll more specifically to say 8,22,47%. Of course, it might not be possible to scroll to those exact points but it should be easy enough to scroll and slightly adjust with the mouse-wheel to get to that point you want.
Is that basically what smooth scroll is and if so do I just turn it off or do i need a jquery script to able to do this on my website or can you adjust your current script to change the anchors so instead of jumping 10% it only jumps 2% which would likely give more control.
On this particular page there wouldn't be a ton of scrolling needed but you do want to be able to stop it at specific points otherwise one tile is half cut off and then you have to use your mouse on the scrollbar to move it to a specific point where its not cut off.
I did not really know what was the best solution at the time but the problem was that I had a view like Trello with cards and when I used the mouse scroll often it would stop with half the card cut off, the only way to see the full card was to stop the mouse wheel scroll and manual use the scrollbar to pull it to an exact position.
As it turns out there was a perfect solution. http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
See the last solution, snap scrolling to images, I used that but snapped to the top of the card so for each mouse scroll it moves to show a new card which is the perfect solution for me and hopefully will solve other users with similar layouts.
The initial link I posted did not have this solution even though it was the same code repo, I stumbled across the solution later but I accept I probably did not explain my question very well initially
I am having a weird problem and cannot even diagnose what is causing it. I am working on my professor's website: jurgec.net
The problem is only on the mobile website. If you click one of the links such as "I am an undergraduate student" then scroll down a little bit, and then press back, the website doesn't fully land at the top of the page. You can see a bit of the yellow page at the bottom.
I have a feeling its because each section's height depends on the browser's screen size. And since on mobile chrome, scrolling down causes the URL bar to disappear, it changes browser's height hence ruining the size of the website's sections.
Any help is greatly appreciated!
This is because the back button returns you to the previous "state" of the website you were at. If you scroll down it's going to go to that part where you were when you made the Click.
Does $(document).ready() functions fire after a back button press?? If they do (not sure at the moment) you could do something like this.
$(document).ready(function(){
scroll(0,0)
});
Which if that works shouldn't really affect you because on initial page load you are already at (0,0) so you wouldn't notice any jumping. Not sure if this would work for you, but good luck!
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.