using lightbox that can open another file - javascript

Now I have a lightbox that only can use to show its <div> in current file . Is it possible to use a lightbox to show something from another file.
This is where my lightbox linked to <a id="list" href="?lightbox[width]=808&lightbox[height]=365#div_currentfile" class="lightbox">Change Password</a>
and the example file I want to open up from my lightbox is test_lightbox.php
any help will be appriciated

There are two ways to achieve this:
Load your php file inside your div using AJAX call by providing the relative path of test_lightbox.php
Put an IFrame inside your div and load that .php file in IFrame.
First method is best if you are trying to load the php file from the same domain. If test_lightbox.php file is served from some other place, then second method is the right choice.
If you are not sure how to load, have a look in the following url. But without jQuery also you can acheive the result.
jQuery Load

Related

Opening html code as a file preview

I am fetching the HTML code from some external API. On my website, I want to create an anchor, which will open a new tab showing that HTML code parsed. How can I do that?
One way I know of is to just make an iframe, and show the code there, but that won't open a new tab and won't adjust the size easily.
What's the best way to solve this? I am using node.js express as a website's server.
you could use window.open("your url here") javascript function. You could just use an onclick attribute to call it like below:
<span onclick='window.open("your url here")'>view</span>
after which you could replace contents of a tag (lets say the body tag) with the html code received from the external API with standard javascript

Can't load url on same tab

I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.
You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.

Load External javascript, but HTTP request repeatedly for one file javascript

I have problem when load external html into specific <div>. Here is the problem :
I have html files, "index.html" and "problem.html".
In problem.html I use skrollr to animate content.
When I click the "open" button in index.html, I use jquery load() method to load problem.html into specific in index.html.
The content was loading, but slowly.
When I check using firebug, I see many request skrollr.min.js. Why do I get skrollr.min.js and other file repeatedly?
When I refresh the page, load the menu and see at the firebug there are so many get skrollr.min.js and file that are called.
You could try to load the Page via iframe to see if it's faster. Just set the innerHTML of your container to
<iframe src="http://yourdomain.com/problem.html"></iframe>
when he clicked the Button.

jQuery in CSS style sheet

I’m working on making my web site fade in and out every time I click a link to another page. I need to use jQuery to do this. Do I need to put the jQuery code on every page or can I write jQuery into the CSS Stylesheet? If so, how do I format the CSS Stylesheet to accept jQuery?
I’m experimenting with the code from this forum post: Fade Out between pages – CSS-Tricks
Edit to question based on comments
So, I now know that I can’t put JavaScript in CSS file. What’s the best way to put JavaScript code that applies to all pages in a site? I want to write this transition code and then not have to write/edit it into every page.
Save the JavaScript in a file with the extension .js, for example main.js. Then give it a public URL, in a similar way that your CSS files are accessible from a URL. An example URL: http://example.com/js/main.js. You might do that by putting it in a js folder in your public_html folder on your server – it depends on your server.
Then, near the end of each page’s HTML, right above </body>, add this HTML tag:
<script src="/js/main.js"></script>
The script tag with a src attribute will load the JavaScript at the given URL and then run it immediately.
I recommend putting it at the end of your <body> element and not inside the <head> because the script prevents the rest of the page from loading and displaying to the user while the script runs. If you make the script run only at the very end of the page, the page is already loaded and the user can see all of its content.
you need to do a $.fadeout on the window.beforeunload event, bye
PD: in a js file, not in a stylesheet, you can´t use JS in a stylesheet. bye.

Include a dynamic menu using JavaScript

I want to include a file based on the page name or another unique element using Javascript for each html page on my website.
The script would need to identify the element then load the correct file.
My website pages end with the extension .html -- If I could change them to .php I would and I would be set, but I cannot change the structure.
So for example, a script would check the beads.html for a unique element then it would load the beads-nav.html file that's associated with that element. jewelry.html would load the jewelry-nav.html file, etc.
You can load external pages via ajax.
With jquery it could be as easy as this: $('#result').load('ajax/test.html');
Taken from here.

Categories

Resources