I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.
Related
How do I make the html go back to previous page?
I do not want to do it via a button, just that when this html gets loaded, it should automatically go back to previous page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='refresh' content='0; URL='>
</head>
</html>
You have two options. JavaScript or HTML Meta Tags.
A JavaScript example would be
window.addEventListener('DOMContentLoaded', function() {
history.go(-1);
});
Or using HTML Meta Tags like this:
<meta http-equiv="refresh" content="2;url=http://example.net">
Hope it helps! Be aware that this behaviour is, generally, not expected by the user, and could cause confusion
You may wanna use the history.back() method that looks up at your history and send you back to the last visited website.
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
When the tag is clicked, I want it to open another .html file (for example could be called discussions.html) in another tab.
<!DOCTYPE html>
<html>
<head>
<body>
open new html file
</body>
</head>
</html>
You just have to set the target of the link to blank, that's all.
See below:
<html>
<head>
<body>
DISCUSSIONS
</body>
</head>
</html>
If you want to open link in a new tab:
some text
Or for page in your domain:
some text
You would want to put a link inside there ^^
e.g. /dist/discussion.html" if you want to make it point on another one of your websites
in this project
or http://google.com if you want it to redirect to another existing site
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
When I click the link home on the page, the corresponding file opens up in the iframe shown by the arrow as it is targeted at it.
But, when I right click the link and click on open link in new tab then only the page corresponding to the link i.e the content of the iframe, opens up in the new tab and not whole layout.
What I want is that when I open that link in a new tab, the exactly same thing opens up in the new tab as shown in figure.
So basicly your problem is: you need to check if the iframe content is actually being open inside an iframe.
With window.top you can achieve that.
After that, if you content is not being open inside an iframe, make it redirect to the main page.
This is a sample, but i guess you can adapt for what you want:
home.html
<html>
<head>
<title>Main Page</title>
<head>
<body>
<h1>Main Page</h1>
Page 2
<iframe name="myIframe" src="page1.html"></iframe>
</body>
</html>
and page2.html
<html>
<head>
<title>Page 2</title>
<script>
if (window.top == window.self) {
window.location.replace("mainpage.html");
}
</script>
<head>
<body>
<h1>Page 2</h1>
</body>
</html>