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.
Related
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
So I am trying to achieve a responsive website.
Here is my navigation so far (Window is maximized):
What I am trying to achieve is that when the window is resized, a new tab will appear called menu. This will be a button which once clicked will show all the existing links I have.
I have two lists in two separate div's, ideally, when the window is resized, I would want the content from both lists to be view able in this new menu.
This is what it looks like when Chrome is resized to its lowest width:
As you can see, those links in the image (Stretches, posture etc), those should not be visible. They should dynamically show up once menu is clicked, which is another issue, clicking menu does nothing.
Everything I have can be found in this fiddle: https://jsfiddle.net/hudnybux/
This is quite a common use-case as im sure you can imagine. Googling it took me 5 seconds, this was the first one that popped up. It seems simple and straight forward to follow.
As a general rule at stack overflow, try looking around a bit before you ask a question...people will generally respond better to your answers. :)
Here is the setup, I have multiple divs on a page which are full widths and have blocks of color. The number of divs can vary from page to page. Each div with have a class associated to it (light or dark) and I have a logo pinned to the top of the browser window.
What I am trying to accomplish is this. I want to detect when each on of these div (with a common class) reach the top of the browser window. I then want to see if it has a light or dark class (only this div that just reached the top.) and then change the logo on the page depending on that value.
The closest thing I have come across is some onscreen jquery plugins that will add an :onscreen value to the current div that is on the screen. This would be great if I could only add this onscreen attribute when it reaches the top rather than just into view.
Does anyone have any suggestions as to how one might accomplish this?
// jsfiddle example
http://jsfiddle.net/UhrrR/
Funny, I was just looking at a library that does this very thing:
http://imakewebthings.com/jquery-waypoints/
You can add listeners to your elements that will fire off when your element hits the top of the viewport:
$('#myDiv').waypoint(function() {
var color = $(this).css('background-color');
$('img.logo').attr('src', 'logo.png');
});
For an amazing demo of it in use:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
I completely agree with Chris Hardie that Waypoints is the way to go. I built a simple example based on your description.
https://github.com/imakewebthings/jquery-waypoints
http://codepen.io/cgspicer/pen/FrCgI
Here is the fiddle, I've used my own, because I've started before you posted your fiddle, but the idea is pretty the same.
I have a position of a logo element, and when scroll happens I check whether one of the desired blocks intersects logo block. On success a class from a custom data-trigger-class attribute is assigned to a logo element.
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.