context menu for printing the page printing the context menu itself - javascript

I am building a context menu on a page that has just one picture and I want users to have only two options whey they right click: print or close the page.
Everything works fine except when they print it, the context menu gets printed as well.
How do I remove the menu as soon as print is clicked so it is not printed?
Here is a fiddle:
View: http://jsbin.com/eQiToLA/2
Edit: http://jsbin.com/eQiToLA/2/edit
$(document).ready(function(){
$('#imgContainerDiv').vscontext({menuBlock: 'vs-context-menu'});
});
My markup here:
<body>
<div id="imgContainerDiv">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" alt="city" />
</div>
<div class="vs-context-menu">
<ul>
<li class="print">Print</li>
<li class="exit">Close</li>
</ul>
</div>
</body>

CSS Print Media can be used to apply styles for printing.
#media print {
.vs-context-menu {display:none;}
}
or you can have a seperate stylesheet
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">

Add a print stylesheet that hides any elements you don't want printed.
Typically a print stylesheet will optimize the page for reading on paper, such as removing the header image, setting the text to black on white, and removing any non-essential elements.

Related

highlight the selected tab

I am working on angularJs and bootstrap application.
Currently working on creating a tabs using angularJS, i want to highlight the selected tab so that users can easily recognize that the tab highlighted is selected. Please suggest how to highlight the selected tab with color #FBDFD9.
Please find the exisiting working code to display tabs : http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview
sample html code:
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
<tab select="addWorkspace()">
<tab-heading>
<i class="icon-plus-sign"></i>
</tab-heading>
</tab>
</tabset>
</div>
--EDIT--
Please suggest how to show the outline of the tabs. If there are many tabs, its appearing just like a text without any outline indicating that as a tab. If noticed the output in http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview , outline of the tab is shown only for the selected tab. Please advice how to show the outlines of all the tabs(active tab and inactive tabs). I tried to find the solution but could not find the appropriate ID or classname of the tab to write the css code to show the outer line of the tabs.
I inspected the HTML with Chrome to see which CSS selector is being used in Bootstrap to style active tabs. Modify your CSS to add this rule:
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background-color: #FBDFD9;
}
Bootstrap adds active class to the active tab, so just target it in your css:
.nav-tabs>.active>a {
background-color: #FBDFD9;
}
Since the specificity of the selector .nav-tabs>.active>a is the same as the specificity of bootstrap's selector, to have your styles override either use !important
.nav-tabs>.active>a {
background-color: #FBDFD9; !important;
}
or place your custom styles after bootstrap's in index.html:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
Here is working example.

How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }

nav going below content on browser resize

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/

styling elements with Javascript without being noticed

I have a webpage which has content layout like 1,2,3 in markup (and also for no-js
) while visually I want it to be 2,3,1.
I'm using Javascript (jQuery) to swap their position. But the problem is, the Javascript code is executed after page loads and therefore the swap process can be obviously seen.
The only solution (and a bad one) I can think of now is to hide the whole body first and restore body when the swap is done.
$(function() {
$("#div2, #div3").insertBefore("#div1");
$("body").css({display: "block"});
});
<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>
Anyone got a better idea?
Try executing JavaScript instantly after those three elements:
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>
Of course, it's a pollution of your HTML, but, in any case, it's better than hiding the whole body element (the page will flicker in some old browsers).

Categories