Sending a div to separate page for printing - javascript

So I am working on a website that will have a lot of recipes. I want to have a button that sends whatever recipe is being displayed to that page for printing. However, the way I have each page set up is making this complicated. I have a page for each type and have the recipes displayed via the use of divs and javascript. You click a recipe from a list and that calls a function to make the corresponding recipe go from 'none' to 'block'. Here is my current code
$('.main').each(function() {
if(style.display=="block"){
var divData = $('.card').html();
window.location.href = "print.html";
document.write(divData);
}
});
How can I alter this code so it calls in the one that has its display set to "block"?

You should try using a print stylesheet based on the active recipe class.
Here's more info about print stylesheets
https://css-tricks.com/print-stylesheet-approaches-blacklist-vs-whitelist/

Related

How can I dynamically control a Region Display Selector in Oracle APEX?

I'm hoping to select a particular Region to highlight on the page load based on the link the user follows to get to that page. This is a drill-down report with multiple options, so the goal is to have all options available but focus on the one the user selected to reduce the number of times a user has to navigate to/from the base report to the drill-downs.
Currently, I'm trying to implement this solution https://svenweller.wordpress.com.../, further explained in an Oracle Community discussion here: https://community.oracle.com/..., but it is not working for me.
What I have now is similar to what is shown in those examples, and for now I'm just trying to link to a static Region Display Selector (RDS) tab (the goal will be to have the selected Region be dynamic based on which link is clicked in the feeder page, but I'm clearly not there yet).
I have a Dynamic Action set to fire on Page Load event, and a True action that executes JavaScript code and uses the JavaScript in the example (both with and without the Timeout function suggested in the Oracle thread). I have set Static IDs for the RDS and Region, but when I load the page the RDS still defaults to Show All (or the first region if Show All is off).
Can someone help me understand what I'm doing wrong?
Thanks.
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
setTimeout(sesStorage.setItem( "tabs.activeTab", "#R3" ) { apex.region("tabs").widget().aTabs("getTabs")["#R3"].makeActive();}, 300);
\\version without setTimeout
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
sesStorage.setItem( "tabs.activeTab", "#R3" );
I have done something like this in the past. Create a hidden variable on the page P1_TEST, make sure to set the value not to be protected.
You will need to set the value of that variable when the link is clicked.
Then you need to add static IDs TAB1, TAB2 etc. to the tabs of you region display selector.
Then add a DA on Page Load:
if (apex.item("P1_TEST").getValue() === "Value1"){
$(".apex-rds [href='#TAB1']").trigger('click');
} else if (apex.item("P1_TEST").getValue() === "Value2"){
$(".apex-rds [href='#TAB2']").trigger('click');
}

Using information from a previous page on a new page with JS

I'm new to Javascript and I need help figuring out this process, or at least figuring out what methods to use. I don't really need a full solution, just some advice on what direction to go in.
I have a page with a list of links. When a user clicks on any of the links, they are directed to the same html page ("park.html"). However, that page will be filled with different information based on which link the user clicks. I will populate "parks.html" with info using a JSON and Javascript, but I just need some type of identifier to be supplied to "park.html" that will be different depending on which link is clicked.
I'm not sure whether to use event listeners, cookies, or possibly React? I tried giving each link an event listener which calls a function that uses "event.target.innerHTML" to get the text of the link the user clicked on. I've also tried running that function onload of "park.html", but I don't know how to pass information from the link clicked to that function call.
This is my code that creates the list of links. "Entry" is drawn from a JSON file -- the list is being created correctly.
function appendToList(entry, resultsList) {
let listElement = document.createElement("li");
let listLink = document.createElement("a");
listLink.setAttribute("href", "park.html");
listLink.setAttribute("id", entry.fullName);
listLink.appendChild(document.createTextNode(entry.fullName));
listLink.addEventListener("click", () => {
qVal = listLink.id;
console.log(qVal);
get_park_data(qVal);
});
listElement.appendChild(listLink);
resultsList.appendChild(listElement);
return resultsList;
}
I think the function that the listener calls (get_park_data) is running correctly, but runs on the page that the list is on -- not the page that the list elements link to.
So, how do I get an identifier of which link was clicked to be supplied to the page that is called?
I'd appreciate any insight! Thanks!
Why not use query parameters in the URL? It's pretty much easier. You'll just have to append it to the URL and you can change it everytime a user clicks a link.

Showing or hiding div elements while waiting for a value from another site

In PHP, is it possible to use conditions that will display either one of two div elements? My pseudocode:
//in Site 1
$tokenFromSite1 = 'xxx';
$tokenFromSite2 = '';
while($tokenFromSite1 != $tokenFromSite2){
//show div containing Connect button;
clickConnect(); //includes $tokenFromSite1 value as URL param "token" and opens a new tab to Site 2
//in Site 2
//gets $tokenFromSite1 value and opens a URL containing this value as param "token" and redirects to site 1
//back to Site 1
$tokenFromSite2 = //GET value of param "token"
}
//div containing Connect button disappears and shows a div that says "Connected"
I am not sure if my logic is correct, and how exactly is Site 1 going to "wait" for the token value from Site 2. Also, how do I hide/show div elements?
It's not possible. PHP is compiled server side. It will run the full script and then output the results. In order to achieve what you want you will need a jQuery code that uses AJAX. Because it's a client side script it can interact with the user's screen after the page is loaded.

How to use location hash to simulate browsing to different pages with JQuery?

I'm trying to make a simple example in order to better understand the capabilities of the location hash.
Essentially, I created a page with a button. Every time you press the button a new button is added and a new hash is added to the base url. The hash varies according to the number of buttons present in the page so if there are two buttons the hash will be "/#buttons2" and if there are three buttons the hash will be "/#buttons3".
I was under the impression that if I am in the url "/#buttons3" and then return to the url with "/#buttons2" the page will update and it will show me only two buttons instead of the current three but this does not happen. Also, reloading the page will preserve the hash but it will not preserve the changes that I have made, in this case the buttons that I have added disappear.
This is my code:
//HTML
<button>I am a button</button>
// JavaScript
<script>
var buttons = 1;
$("button").click(function () {
location.hash = 'buttons' + ++buttons;
$("body").append("<button>Click me</button>");
});
});
</script>
I was trying to mimic the behavior that you get with, for example, by using Angular, but without using a JavaScript framework. Is this possible? Can it be done with JQuery?

jquery back button to previous category in sortable gallery

I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD
Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.
One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.

Categories