I have a form that I set up for staff to fill out when ordering spray paint for our company. This form is submitted to a PHP page which shows the results of the order form and allows the user to print however. It also prints the print button as well as the URL to the page. How can I make it print without these two things? This is the code I am using inside the style tag...
#media print {
.hide-on-print { display:none; }
}
And this is my print button...
echo '<br /><br />Print';
Thanks for the help!
You can't hide the URL or any other header or footer text. These are settings controlled by the browser and are not accessible via any API. Ultimately it is up to the user to decide whether they are printed or not.
You can hide the print button by using display:none for that element in the print CSS for that page.
Recently I have seen here this similar question. If you want to get rid of the URL address, you can create a new window, copy the printable content there and print the new window, then close it. Then the original address will be replaced by the about:blank.
function printpage() {
var styles = document.getElementsByTagName('style');
var style = '';
for (var i=0; i<styles.length; i++) {
style += styles[i].innerHTML;
}
var data = document.getElementById('print_content').innerHTML;
data += '<br/><button onclick="window.print()" class="noprint">Print the Report</button>';
data += '<br/><button onclick="window.close()" class="noprint">Close Preview</button>';
data += '<style type="text/css" media="print"> .noprint {visibility: hidden;}</style><style type="text/css">'+ style +' </style>';
myWindow = window.open('', '', 'width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.body.innerHTML = data;
myWindow.focus();
}
jsfiddle code + result page (works with IE7+)
Related
I am building a website in which left side is restaurant name and in right side there is anchor link button.All button are produced from a single link inside a while loop.
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
<a class='morebtn hvr-rectangle-in' href='#'>Menu!</a>
}
All anchor button is same so how to know which button is get selected so that I can display menu page for that restaurant.
Change your code to this
$i = 0;
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
echo "<a class='morebtn hvr-rectangle-in' id = 'a_'.$i href='#'>Menu!</a>";
$i++;
}
And then write javascript like this
<script type = "text/javascript">
$(document).ready(function(){
$('.morebtn hvr-rectangle-in').click(function(){
var myId = this.id;
//alert(myId);
});
});
</script>
then use that id.
I don't know if I understand your problem correctly.
Maybe you can do it in JS using scrollspy.
Example:
http://getbootstrap.com/javascript/#scrollspy
I have a query regarding web development using html and css and here it goes:
I have created a horizontal tabbed input using html and css. The URL for accessing this page is http://example.com/tabbedInput.html. The user see a row of tabs and there is a huge space below the horizontal tab bar. Now, when the user clicks on one of the tabs, i will have to draw various html components into this space. Could any body let me know how can i achieve this? I mean, drawing the components in the same web page.
Thanks!
There are a few methods to effect tabs and it depends on several factors which you choose.
If you have lightweight content that needs to be segregated you can simply output ALL of the tabs' content HTML, hiding all but the selected tab. To do that you would need to observe the tab links and act appropriately.
However, if you have content on each tabs that requires queries to build or heavy processing, you wouldn't want to output all the tabs at once, but you might use AJAX to load the contents of each tab on click.
EDIT: Example
<html>
<head>
<script type="text/javascript">
// <!--
function showTabs(currentTab) {
var tabs = document.getElementsByClassName('tab_content');
if (tabs.length == 0) {
return;
}
for(var i = 0; i < tabs.length; i++) {
if(tabs[i].id != currentTab) {
tabs[i].style.display = 'none';
} else {
tabs[i].style.display = '';
}
}
}
window.onload = function() {
showTabs('general');
document.getElementById('general_link').onclick = function() { showTabs('general'); return false; };
document.getElementById('special_link').onclick = function() { showTabs('special'); return false; };
};
// -->
</script>
</head>
<body>
<a id="general_link" href="javascript:void()">General</a> — <a id="special_link" href="javascript:void()">Special</a>
<div id="general" class="tab_content">
general contents
</div>
<div id="special" class="tab_content">
special contents
</div>
</body>
</html>
i'd like to change the background image of a div depending on wich link is selected in my navigation!
exemple :
let's say I have a menu item called :
#nav li.menu-item-59
when the link is selected it changes to
#nav li.menu-item-59.selected a
I'd like that whenever one of the menu item is selected the background image of the div footer change to a different file...
I've read some articles about sibling operators but can't seem to make it work and I'm not sure it is the best way to go ..
can anyone help?
thanks ! :D
It looks like you're using JS to add the class of selected to the menu. At the same time you're adding that, also add the the menu item name to the footer. something like:
var menuName = $(this).attr('id');
$('.footer').addClass(menuName);
Then in your css for the footer, add the class to the end of the element:
.footer.menu-item-59 {
// background goes here
}
based on your fiddle below, try:
$(window).scroll(function(){
for(var i = 0; i < sections.length; i++)
if($(window).scrollTop() +5 >= sections[i].top &&
$(window).scrollTop() <= sections[i].bottom){
sections[i].link.addClass('selected')
.siblings().removeClass('selected');
var selection = 'selected' + i; // new stuff starts here
$('footer #flag').removeAttr('class');
$('footer #flag').addClass(selection);
}
});
I don't know about sibling operators but this might work...
save all the images in one place.
give all links the same class. for this example ive used 'yourmenuclass'.
then query the document and listen for which one has been clicked.
then in the switch statement to assign a different image, depending on which one has been clicked.
function init() {
[].forEach.call(document.querySelectorAll('.yourmenuclass'), function (el) {
el.addEventListener('click', change);
});
function change() {
if (this.id == 'firstlink') {
var back = document.getElementById("footername");
back.style.backgroundImage =" url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Ferns02.jpg/220px-Ferns02.jpg')";
}
if (this.id == 'secondlink') {
var back = document.getElementById("footername");
back.style.backgroundImage ="url('http://www.dailyshame.co.uk/wp-content/uploads/2012/09/badger.jpg')";
}
}
}
onload = init;
if you are using simple anchors then this may not work, but should be fine for buttons or image inputs.
js fiddle
I'm using PHP to echo out 50 video id's from an XML file. I use the video id's to embed 50 YouTube videos into my website. This works fine but I need to isolate the videos two at a time. I don't want the user to see all fifty videos at once. I want them to see two, then click next, see another two, then maybe click back, etc. etc.
Here's what I have so far:
$url = "http://www.theURLofmyXML.blah";
$xml = simplexml_load_file($url);
$i = 0;
while ($i < 49) {
$title = (string) $xml->query->results->item[$i]->title;
$videoid = (string) $xml->query->results->item[$i]->id;
$explanation = (string) $xml->query->results->item[$i]->explanation;
$i = $i + 1;
echo $title."<br />";
echo '<iframe width="400" height="225" src="http://www.youtube.com/embed/'.$videoid.'?rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe><br/>';
echo $explanation."<br /><br />";
}
So I think the best thing to do is echo all fifty items to the page inside divs labeled 0 to 49...then use JavaScript to hide all divs except 0 and 1 until you click a next button and it switches to hiding everything except 2 and 3...and so on...
But I'm not sure how to do that in JavaScript/jQuery. I think using .show() and .hide() would work but I'm not sure of the syntax.
You can use the following HTML structure:
Previous videos
<div class="video-row active">
<!-- First couple videos -->
</div>
<!-- Loop through all videos, writing the other rows -->
<div class="video-row">
<!-- Last couple videos -->
</div>
Next videos
Note: Use the active class only in the first video row to show them by default on the page load.
With CSS, hide all .video-row (using: display:none;) and show only .video-row.active (using: display:block;).
Finally, use the following Javascript (jQuery needed) to navigate between video rows:
jQuery('.prev-video-row').click(function (event)
{
event.preventDefault();
var prev = jQuery('.video-row.active').prev();
if (prev.length)
{
jQuery('.video-row').removeClass('active');
prev.addClass('active');
}
});
jQuery('.next-video-row').click(function (event)
{
event.preventDefault();
var next = jQuery('.video-row.active').next();
if (next.length)
{
jQuery('.video-row').removeClass('active');
next.addClass('active');
}
});
Honestly speaking, I don't think it's great to have 50 videos embedding in a page - regardless of visibility or not; simply because they will be processed by the browser despite not being visible. (Feel free to correct me if I'm wrong, but the browser is going to see, and process, the whole DOM - and just apply the styles to the "hidden" bits.)
Gustavo Straube has given a really good answer on how to do this if you want to have 50 elements in the DOM despite the effects it may have on both browser and bandwith.
I'd probably go for something more along the lines of parsing the XML, storing all the data as JSON then dynamically updating the DOM with jQuery from HTML supplied with a templating framework like Mustache.js.
/* Generate JSON */
$url = "http://www.theURLofmyXML.blah";
$xml = simplexml_load_file($url);
$i = 0;
$json = array();
while ($i < 49) {
$arr['title'] = (string) $xml->query->results->item[$i]->title;
$arr['videoid'] = (string) $xml->query->results->item[$i]->id;
$arr['explanation'] = (string) $xml->query->results->item[$i]->explanation;
$json[] = $arr;
}
echo json_encode($json);
Then, in your markup have something like the below, just to initialise your first x videos - in this example 10..
$(document).ready(function(){
var template = '{{$title}}<br /><iframe width="400" height="225"'
+ 'src="http://www.youtube.com/embed/{{$videoid}}?rel=0&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe><br/>'
+ '{{explanation}}<br /><br />';
var html = '';
var i=0;
for(; i<10; i++){
var item = json[i];
html += Mustache.to_html(template, item);
}
$('#videos').html(html); //where #videos is a div to contain your videos
Next up have an anchor (in this example #next) to get the next 10 videos..
$('#next').click(function(){
/* template, i and json are still in scope! */
var j = i+10;
for(; i<j; i++){
var item = json[i];
html += Mustache.to_html(template, item);
}
$('#videos').html(html); //where #videos is a div to contain your videos
});
The advantage of this is it's also easy to do a previous anchor...
$('#prev').click(function(){
/* template, i and json are still in scope! */
var j = i -10;
i -= 20; //10 for the current page, 10 for the start of the previous page
for(; i<j; i++){ //rebuild div content of previous page
var item = json[i];
html += Mustache.to_html(template, item);
}
$('#videos').html(html);
});
Just to re-iterate, this is an alternative solution - I've suggested it as using JSON is a little bit more lightweight and more flexible than XML, and it also removes the requirement for having 50 DOM elements that aren't in use at one time. There may be a reason you've chosen the implementation that you have, but it's not the implementation I would take if I was given this problem!
For html like:
<div id="section0"></div>
Your jquery would look like:
$(document).ready(function() {
$('#section0').show();
$('#section1').show();
$('#nextButton').click(function(e){
e.preventDefault();
$('#section0').hide();
$('#section1').hide();
$('#section2').show();
$('#section3').show();
return false;
}
});
And so on...
I'm trying to modify Gaya Design's Tabbed Content (Available Here) to have the current tab persist when the page is reloaded, yet have it change when a new tab is clicked. I've already changed it a little to be able to change default tab by using a PHP GET variable. The current condition of the page I'm working on can be viewed here.
So here's my likely scenario. If you've clicked on the link above, you'll see I'm working on a simple PHP shopping cart. Now when a user clicks an add link, it has to reload the page, and when it does that it resets the tab. So, I'm thinking this should easily be solved with a cookie that updates whenever a new tab is clicked....I'm just not too sure how to go about this. Any thoughts, suggestions, or advice will be greatly appreciated.
Here's my current JS:
var TabbedContent = {
init: function() {
$(".category").click(function() {
var background = $(this).parent().find(".selected");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 350
});
TabbedContent.slideContent($(this));
});
},
slideContent: function(obj) {
var margin = $(obj).parent().parent().find(".sliderContainer").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".displayContent").stop().animate({
marginLeft: margin + "px"
}, {
duration: 1
});
},
gotab: function( obj ) {
var background = $(obj).parent().find(".selected");
$(background).stop().animate({
left: $(obj).position()['left']
}, {
duration: 1
});
TabbedContent.slideContent( $(obj) );
}
}
$(document).ready(function() {
TabbedContent.init();
});
Here's how a tab is initialized when it is linked to:
<?php
// Load a specific tab if required
if(isset($_GET['tab'])) {
// Array storing possible tab IDs
$tabChoices = array('productsTab', 'specsTab', 'brochuresTab', 'bannersTab', 'kitsTab', 'displaysTab');
$tab = '';
if(in_array($_GET['tab'], $tabChoices)) $tab = $_GET['tab'];
// Default to productsTab if not in array list
else $tab = 'productsTab';
// JS to actually do the switch
echo '<script>$(document).ready(function() {TabbedContent.gotab($("#' . $tab . '"))});</script>';
}
?>
You're painting yourself into a corner by inline scripting a solution. You should always only have one $(document).ready... call in your entire product, in order to avoid order dependent explosions in code, and have a clear point of entry.
That said, you are almost there. Instead of calling a function, assign a value.
echo "<script>var selectedTab=$tab;</script>"
Then during your initialization function, make use of that value. My example is in global scope. There may be a race condition if you try to assign it to a namespace. In that case, try putting that script at the bottom of the page.
One more suggestion, have one and only one function handle all of your animations calls for that object.
Instead of using get/post params you could use hash; creating links like this in the tabs:
<a class="tab_item" href="#one_go" id="one">
And then put this in the javascript:
var gototab = document.location.hash.replace('_go',"")
if(gototab){
$(gototab).each(function(){
var pos = $(this).prevAll(".tab_item").length,
left = pos * $(this).outerWidth(),
margin = pos * $(this).parent().parent().find(".slide_content").width() * -1;
$(this).parent().find('.moving_bg').css('left',left)
$(this).parent().parent().find(".tabslider").css('margin-left',margin)
})
}