back button and menu navigation - javascript

Okay, I'm trying to design a mobile version of my site and am stuck on my menu.
Basically at the moment I've got a simple onClick running on the page so if the user decides they don't want to view click whats on the menu then they can click the page and the menu disappears.
But what I really want is a way of using the back button on the browser to return from the menu. I'm guessing it takes some kind of event or setting something, but am at a loss.
I'm a newbie, so be gentle, I'm hoping the community can help me a little as to where to start.
My main question is how to use the back button on a browser within my HTML or JavaScript, any ideas as to how to proceed would be greatly appreciated.

Updated JS only version: http://jsfiddle.net/0uk0g0qq/4/ (works everywhere)
:target implementation is buggy in ie. so previous one wasn't working. hash changes only affects css when user directly does something on page, click button that changes hash and unfortunately back button is not considered part of the page
The all the javascript you need is this:
var menu = document.getElementById('menu');
window.addEventListener('hashchange', function(e) {
if (location.hash != "#menu") {
menu.style.display = "none";
} else if (location.hash == "#menu") {
menu.style.display = "block";
}
});
Css Only Version:::
You can do it using just css only. It's time you learned about :target selector.
It lets you apply style to whatever is url hash fragment and is the id of element on page.
Demo: http://jsfiddle.net/0uk0g0qq/1
So i hide menu by default, but if it matches i show the menu. Since hastags in url affect browser history it accomplishes what you asked for.
It was pretty awesome first time i learned it.
#menu:target {
display: block;
}
the whole code:
body {
background-color: cornsilk;
}
.cont {
width: 500px;
margin: auto;
}
#menu {
display: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
background-color: rgba(0,0,0,.3);
margin: auto;
}
#menu > ul {
width: 200px;
list-style-type: none;
background-color: #fff;
margin: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
#menu > ul li {
padding: 20px 10px;
}
#menu:target {
display: block;
}

Related

JQuery UI dialog - need to add a minimize button

Update - Method without JQuery UI Plugin
** I I have added an answer to this question which solves it without use of any plugins (and which is IMO instructive on the JS/CSS involved). Your CSS may need to be different but this is a good start **
--
I am familiar with jQuery but not jQuery UI. A project uses jQuery UI's .dialog() method which I observe to wrap the actual container around the designated element, usually a div.
The title bar, and x or close button is also "painted" or handled automatically on the upper right of the bar.
My goal is to add a minimize button next to the close button, which if clicked minimizes the dialog (bar remains visible, everything else is hidden, and bar moved near page bottom), and if clicked while minimized maximizes the dialog.
I can certainly do this with my own HTML/CSS/JS by creating the button and absolutely positioning it above into the painted bar/container. But is there a more native way to do this in jQuery UI (without an additional plugin)? thank you for your help!
The following JS and CSS successfully manages to create a minimize/maximize button without any additional plugins. This might be helpful if you can't or don't want to install plugins:
Javascript:
$('#chatPanel').dialog({
width : 475,
dialogClass : 'fixedPosition presav-chatPanel',
open: function(event, ui){
var panel = $('.presav-chatPanel');
if(panel.hasClass('presav-minimize')){
//maximize the panel
panel
.removeClass('presav-minimize')
.attr('style', panelStyleMaximized);
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-plusthick')
.addClass('ui-icon-minusthick');
}
//build the minimize button if not already built
if(!$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').length){
$('.ui-dialog-titlebar').append('<span class="ui-icon ui-icon-minusthick">minimize</span>');
$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').on('click', function(){
var panel = $('.presav-chatPanel');
var style = panel.attr('style');
if(panel.hasClass('presav-minimize')){
//maximize the panel
panel
.removeClass('presav-minimize')
.attr('style', panelStyleMaximized);
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-plusthick')
.addClass('ui-icon-minusthick');
}else{
//minimize the panel
panelStyleMaximized = style;
panel
.addClass('presav-minimize')
.attr('style', 'width: 200px; z-index: 1015; bottom: 0px; right: 20px; top: inherit; left: inherit;');
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-minusthick')
.addClass('ui-icon-plusthick');
}
return false;
});
}
},
close: function(event, ui){
//When the UI panel is closed, assume that it should re-open in a maximized state; however the place to maximize is the .open() method
},
});
CSS (related to minimized state, and overriding the crosshairs for draggable-ness):
.presav-chatPanel .ui-dialog-titlebar-minimize{
/* base taken from jquery-ui.min.css:
position: absolute;
right: 40px;
top: inherit;
width: 20px;
padding: 1px;
height: 20px; */
position: absolute;
border-radius: 0;
outline: none;
background: transparent;
right: 38px !important;
border: 1px solid #FFF;
width: 20px !important;
height: 20px !important;
margin: inherit !important;
top: inherit !important;
/* margin: -10px 0 0 !important; */
padding: 0 !important;
text-align: center;
}
.presav-minimize #chatPanel{
display: none !important;
bottom: 0 !important;
right: 10px !important;
}
.presav-minimize .ui-dialog-titlebar{
cursor: default !important;
}

Sticky nav with parallax banner

I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!
First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.

Hiding a div when clicking out of it

I added code to make a div, #pending-friend-list-dropdown, close when clicking outside of it. This works fine, but now when clicking on my image div, friend-icon, the drop-down div will not close now.
As you can see in my snippet, the image div is what opens the drop-down box. I am just trying to figure out how that image div can be used to open and close the drop-down, while using the mouseup function to close the drop-down div as well.
//Hiding Pending Friend Drop-down when clicking out of it
$(document).mouseup(function (e)
{
var container = $("#pending-friend-list-dropdown");
var friend_icon = $("#friend-icon");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
else if (friend_icon.has(e.target)) {
container.hide();
}
});
//Toggle Pending Friend List
$("#friend-icon").click(function() {
$('#pending-friend-list-dropdown').toggle(100);
});
#main-bar {
width: 85%;
height: 60px;
position: relative;
margin-left: 15%;
background: red;
padding: 3px 0;
}
#main-bar-container {
border: 1px solid black;
margin: 0 10px;
position: relative;
width: 95%;
height: 56px;
left: 2%;
}
/*---- Pending Friends List----*/
#friend-icon {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20%;
top: 15px;
}
#friend-icon img {
height: 30px;
width: 30px;
}
#pending-friend-list-dropdown {
height: 500px;
width: 400px;
overflow: scroll;
z-index: 100000;
position: absolute;
left: 70%;
top: 70px;
background: blue;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-bar">
<div id="main-bar-container">
<div id="friend-icon"><img src="../icons/collection/social.png" alt="Pending Friends"></div>
</div>
</div>
<div id="pending-friend-list-dropdown">
</div>
You can achieve this more simply by running the code whenever someone clicks on the html-element (the entire page).
Then check if the click is located on certain elements.
There is also no need to give the instructions in two places for what to be done when clicking on "#friend-icon". I have removed the second instance of this in the below code, and just moved the .toggle up to the if statement.
It now works like a charm:
$("html").click(function(event)
{
var container = "#pending-friend-list-dropdown";
var friend_icon = '#friend-icon, #friend-icon img';
if ( $(event.target).is(friend_icon) ) // clicking on the toggler-div or the img it contains
{
$(container).toggle(100);
}
else if (!$(event.target).is(friend_icon) // clicking outside of the toggler
&& !$(event.target).is(container)) // and outside of the toggled div itself
{
$(container).hide();
}
});
Here's a jsfiddle: https://jsfiddle.net/r54ardcz/2/
I'll give a third option just so that all the ones I know are on this site. This is the option that Office Fabric UI uses (https://dev.office.com/fabric#/components/contextualmenu) where I think #zheer-mchammer-husain's answer is more along the Twitter Bootstrap model.
Essentially you create a layer over your whole page (height: 100vh and width: 100vw; position: fixed) and then put your dropdown content inside that layer. When the user clicks that layer, it closes the whole layer at once disappears and all is done.

HTML/CSS/JS/jQuery Need a tooltip by keydown for a grid

everyone. I'm working on a project that has a list of images. The user can scroll over the images and then press "enter" to bring up tooltip that tells them more about their selection.
I've been looking into tooltips, but they seem to be more geared towards using a mouse and I cannot get modified CSS tooltip code to place the information over the image when selected.
So, what I'm hoping is that someone can direct me to a method that can work with popping up a bubble of information using keystrokes.
function loatTooltip()
{
$('.tooltip').remove();
var name=contentName[navPosition][position.x];
if(position.y>0)
name=contentName[navPosition][position.x+4];
contentList[position.y][position.x].after('<div title="'+name+'" class="tooltip"></div>');
}
.tooltip {
display:block;
position: absolute;
width: 250px;
height: 120px;
background: #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
left:5%;
}
.tooltip:after {
display:block;
content: attr(title);
position: absolute;
display: block;
width: 95%;
z-index: 99;
color:white;
}
content: attr(title);
Thanks!
Consider this a "first draft" - FIDDLE.
Image in a div, hover and an absolutely positioned div pops up with the text inside it.
I've done "hover" and not "active" (selected) because of ease. But you can probably take the concept and move it to an "active" div or put a border around it, and "if border" change the CSS.
JS
$('.holder').hover(
function(){
$(this).children('div').css({ 'display': 'block',
'background-color': 'red'});
},
function(){
$(this).children('div').css('display', 'none');
}
);

Show angular-loading-bar And disable all contents of the page until page loads

I have lots of ASP.NET Pages and server database connection.They takes some time to load fully when requested from server to client. Now I want to show a angular-loading-bar until page loads.. It is working fine. But i want to disable the page at the time loading page. Please see this link which i used for
anulgar-loading-bar example link
Please help me.
Thanks in advance.
I am a huge fan of angular-loading-bar.
No overlay by default, but you can easily tweak the loading-bar with this bit of CSS;
#loading-bar {
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}
Here is a demo.
I actually wrote a block ui module for angular a few days back that does this trick. It should work hand in hand with that nice looking loading bar.
I am not sure if I understand your question 100%. Can't you just overlay a div (may be gray - to show it's disable), and display the loading bar/gif?
Overlaying a div would be quite simple and you can find many resources like,
How to overlay one div over another div
overlay a div over another one with css
Here is my solution based on solution by #andrew above and using ngProgress Bar component.
CSS:
#ngProgress-container.block-editing {
pointer-events: all;
z-index: 99999;
border: none;
/* margin: 0px; */
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.33);
margin-top:10px;
#ngProgress {
margin-top:-9px;
width:5px; /* Force display progress as early as possible */
opacity:1; /* Force display progress as early as possible */
}
}
JS - in the beginning:
$scope.progressbar = ngProgressFactory.createInstance();
//To force display of progress bar as early as possible
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
$scope.progressbar.set(1);
$scope.progressbar.getDomElement().addClass('block-editing');
$scope.stopProgressbar = $timeout(function(){
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
},10);
$timeout(function(){
$scope.progressbar.start();
},100);
JS - in the end:
//Stop progress bar
$interval.cancel($scope.stopProgressbar);
$timeout(function(){
//JIRA: NE-2984 - un-block editing when page loading is done
$($scope.progressbar.getDomElement()).fadeOut(2000, function() {
$($scope.progressbar.getDomElement()).removeClass('block-editing');
});
$scope.progressbar.complete();
}, 3000);

Categories