I'm under a bit of a deadline so I was hoping that before I proceed down any paths someone could tell me if what I'm doing is feasable or if there is an easy/quick way to resolve it:
After running into some issues with an accordion menu I have opted for an interim fix of using several menus and replacing each of them with js. I don't have the code in from of me but essentially:
function change-menu(menu){
var new-menu = menu + ".php";
(#menu-area).load(new-menu);
}
(I've only done a little work with js so far so please ignore the above syntax... I'll try to fix it later.)
And my link would be something like:
<a onclick="change-menu('something')">Something</a>
Inside the side menu are thumbnails for the artwork that will load in the window area and to keep it simple I'm just using a php include that will look something like:
[img goes here]
But I realized that when I do that I should also pass the menu to the next page as well so it knows what menu to initially load in the new page. But then I though - and I'm overanalyzing this and bit - if I want the experience to be stremalined and look a certain way even if I'm coding it a bit bitmakeshift at the moment I dont want someone to hit the back button and have the menu start opening and closing different parts.
So the question is:
Is there a way that I can tell the php link to import whatever the current state/value of the sidebar? I just want to make sure that the side menu only changes when the user clicks on it and not from hitting the back or forward buttons. Is this an easy action? Is it even a possible action? Are there better solutions?
You should look into AJAX to achieve this. Using AJAX, you can get the new content as HTML from a php page and then use JavaScript to replace the existing content of the sidebar with the AJAX return. This way the content of the sidebar will be changed without reloading the page.
No you can't do it in php. Use Javascript instead.
Related
I have an invoice system made in PHP. There is a view with all customer's invoices. I'd like to make an option to print an invoice.
I know about window.print() and media="print" for CSS. But I was thinking, is it possible to just print an invoice by clicking a button next to it, but staying on the list page? It would just open a printing prompt with different content and do nothing to the current experience.
I thought of a workaround. On click, I could just replace contents of some element with invoice's data and make the styles hide everything else besides that container. That looks like a trick to me though. Is there any other solution to that problem? Perhaps something like download attribute for links:
Download Me
That could be something like:
<a href="invoice.php?id=3" print>Print Me</a>
Or perhaps an HTTP header? Please share some advices.
I would suggest to use JQuery PrintJS plugin below:
http://printjs.crabbly.com/
This will ultimately solve your problem.
I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/
I've a problem that I'm not really sure if can be solved:
I want to have a modal that pops up in sites of my clients. If a user goes to a client page, after some second, my pop up will appear.
I have built my modal pop up using bootstrap, jquery and some other javascript.
The problem is: there is a way to avoid the inclusion of my css in my clients' pages? This is because, maybe, one of them does not use bootstrap and using it will change the presentation of his page.
So, there is a way to include only a javascript that calls my server to get the information it needs (css etc...)?
I thought that I could include my code in an Iframe, but there is a way to have the pop up display in the parent window?
Thank you very much!
I think I might have solved the problem with a workaround. I use a pop up that takes data from an iframe. My clients need only to include the javascript code for the pop up and nothing more; everything else will stay on my server and will be retrived once the pop up "makes" the call.
I am calling a new url from inside an iframe and want the new url to abandon the iframe (it can close / destroy it if necessary) and appear full screen. The complication is that i do not have control of the call to the new php file becuase it is done by a credit card payment server as a redirect.
To clrify, I have a page called order3.php whihc has an iframe in it where the credit card action takes place. At the end, I tell the credit card server that we want to now go to order4.php (but i can't tell it anything else such as script with this instruction, just the page name). As one would expenct order4.php now appears in the ifrmae within order3.php. What i want is for order4.php to declare independence as it loads and insist that it is full screen.
I am not being lazy and i have had a good look areound, but i cannot understand the posts that give a single line of javascript and say that that will work because i don't know where to put it!
I have tried this:
<script>document.location.replace('order4.php');</script>
in the header of order4.php, but needless to say it doesn't work. It does cause the iframe to disappear, which is a start, but you then get a white area where the iframe was and order3.php is still showing. Actually, the browser seems to get stuck in a loop at that point.
So in summary, what can i do to order4.php so that when it is displayed it forgets the past and just goes whole screen what ever anybody else says.
Please, be concise and tell me exctly where to put any code snippets you are kind enough to provide and please remeber that i cannot control the syntax of the call to order4.php. I'm not sure, but i think that you may need to know that i have this in my header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Thanks is advance.
[SOLVED]
Not sure if this was not picked up because it is tricky or simply beneath contempt, but here is the solution for anybody who wants it.
So Order3.php has the iframe and is the starting point. The third party server is instructed to call an intermediate page which handles the closure of the iFrame and a redirect to order4.php rather than calling order4 directly. So instead of going straight to the final target, go via a control URL within the iFrame which calls a function in the parent (the original order3.php) to close the iframe and redirect the whole window to the eventual goal, order4.
1st declare the function that you are going to call within the head of the original php, order3. I have an included .js file in my header so the code below goes in there, but you will need to enclose the code in script tags if you are going to just put it in the HTML head of order3. Thinking about it, you could probably get away without closing the iFrame and just doing the replace, but this seems to work and it gets rid of any doubt.
function breaktoorder4() {
window.frames[0].close();
location.replace("https://www.website.co.uk/order4.php");
}
Next create the intermediate php (or html) that will be called within the iFrame. I have called it breakframe.php. Here is the whole page:
<html>
<head></head>
<body onload="parent.breaktoorder4();">
</body>
</html>
Now tell the third party to point to breakframe.php rather than order4.php and hey presto, you should end up with order4 being shown in the whole window.
I have not tested this in all browsers, but it only uses very simple functions, so i can't think that there should be any problems. Hope this helps.
I need to automate a process that involves getting data from a series of links on a website.
Greasemonkey could do the job, but I can't get the content from inside that link.
The link looks like this:
<a id="ctl00_main_gvPolite_ctl02_lbDetaliiPolita" title="Detalii polita" class="icon16 icon-detalii" href="javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')"></a>
This would be the important part: javascript:__doPostBack('ctl00$main$gvPolite$ctl02$lbDetaliiPolita','')
I can't find that function defined anywhere in the javascript, it's only used at various points.
A frame pops up over the website displaying the content I need. After I get it in a variable I can just send it to a script on my server for processing.
For anyone interested, I was missing an input called __VIEWSTATEENCRYPTED
It's further down the page in the source code, just include it in your $.post(); or whatever you use and it will work.
All credit goes to MaxArt for this one. Thank you!