I am trying to build an iframe that reacts to the URL that is being inputted.
For example if the user goes to:
domainA.com/somethingnice then the iframe src should be sub.domainB.com/somethingnice
so basically always following the path.
I also plan to use javascript to hide the frame src - something like this:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','https://sub.domainB.com/');
});
</script>
<body>
<iframe src="" />
</body>
But I have no clue even where to start in making that src to change based on the user's links or inputs.
Any ideas are really welcome!
BTW: the src should NOT change if the users click anywhere inside the iframe - it should act just like a normal wesbite. Only when they follow an external (or direct) link to that subdomain the src for the iframe should be rewritten
Thank you!
Related
I have a lightbox script that Im using:
<a class="lb-image-link" href="images/image-1.jpg" data-lightbox="lb-set">
<img class="lb-image" src="images/thumb-image-1.jpg" width="150" height="150"/></a>
But for my clients sake to use CMS software I need to make the data-lightbox="lb-set" function work for all <a> tag on the page or to make it work as a class somehow if possible.
The page is HTML, how can I make this work? Im guessing I need to create javascript for this. Any help is greatly appreciated, thank you
One way would be to learn some jquery, if you are not already familiar with it
http://jquery.com/
and then you can easily attach a function to all click events on every a tag on the page with something like:
$("a").click(function(event) {
//your lighbox code goes here ...
});
EDIT
With the lightbox2 script you are using it doesn't look like there is a way to assign it to a group of links on your page based on class or tag type, so the above function is not relevant. At a quick glance, if you stick with that script the only way to have it work on multiple links on the same page is to include a unique data-lightbox="" attribute in each link, eg.
image #1
image #2
image #3
There are other lightbox scripts that allow you to set the lightbox based on tag type or class, for instance http://fancyapps.com/fancybox/ allows you to do the following:
<a class="fancybox" rel="group" href="big_image_1.jpg">image #1</a>
<a class="fancybox" rel="group" href="big_image_2.jpg">image #2</a>
and then use the script
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
the above essentially attaches the fancybox lightbox to anything that has a class="fancybox"
Not sure if that helps - there may not be much difference for you having to add a unique data-lightbox="image-3" to each link as apposed to adding a standard class to them :-)
Glen
I have created a Wordpress theme but am having a problem with the page loading.
When I move between pages there is one table (with 2 images) in the header that stays behind on the page when all the other elements have been unloaded.
Any ideas how can I fix this so that this image only shows with the rest of the page?
see http://thetaonline.co.za/newWeb/ and click on each of the menu items to see the image that remains (loads before the rest of the page).
Your HTML code is messed up. Its opening a <table> before the <html> and closing after the </html>. This stuff should go inside the <body>...</body> area.
Thats basically the reason why its being shown before the page completes to load, because the external resources being called with <script src=... or <link href=... will hang the page rendering at this point until they are loaded. Thats the reason why this stuff is usually called before everything, inside the <head>...</head> block where there is (or should be) still nothing defined for display.
Sinse you are doing it wrong, it will show what is ready for rendering -- basically just that image -- until the rest is loaded.
As of putting the external resource calls inside the <head> block, it seems to be correct, so basically you only have to bring that table to the right place to make the page display properly.
I see there are also some typos that may cause issues, like <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" missing the > in the end etc. You should review your code.
try to use jquery and do something like this:
$(function() {
$.preload(["image1.png", "image2.png"]);
}
edit: You should rather take a look at Havenard's answer!
I don't know, if this is a good idea (I guess it is not!), but you could actually hide those images first and then show them with jquery after the page is loaded completely:
<table width="35" border="0" cellspacing="0" cellpadding="0" style="display:none" id="specialimages">
<!-- your 2 images in here -->
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#specialimages').show();
});
</script>
I have an aspx page which shows preview of html-email. The html email comes from DB as text. This is assigned to a div.
Now i have a base tag which carries a url which is dynamic based on the DB server name.
When i assign the html from DB to the div, the base for the relative url of the images inside the html are taking the base url of the page instead of the base url from the html text.
basically,
the page is rendered as,
<html>
....
<div> <html>
<head>
<base href="dynamic url" />
</head>
<body>
<img src="images/header.jpg" />
.....
</body>
</html>
</div>
.....
</html>
The 2nd html comes from DB.
How to force the dynamic url of the img tag to take the base url from base tag.
Now the img src is coming as, page_url/images/header.jpg. I want it as dynamic_url/images/header.jpg.
I think you should be able to do this in two different methods. First replace the text "images/" to your dynamic URL on the server side before you assign the email HTML to the container. It should be straight forward whatever language you are using.
If that is not possible then you can do that on client side with JQuery. The code below loops through all the img tags on the page and replaces to a path you specify. This does not actually change the source code but it renders the images with the new path.
$(document).ready(function(){
$("img").each(function(i) {
$(this).attr('src', $(this).attr('src').replace('old_path', 'new_Path'));
});
});
Is there any reason why registering a javascript file from the head tags of an ASP.NET master page wouldn't work? For example, I have the following (plus many other) file referece:
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
but jquery (and every other JS reference) doesn't work when the page loads.
Any thoughts? Thanks.
The src attribute is relative, try
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
and see if that fixes your problem
If that doesn't work, you can try this:
<script type="text/javascript" src="<%# ResolveUrl("~/js/jquery/jquery-1.4.2.min.js") %>"></script>
and in your Page Load handler in the master page add this code:
Page.Header.DataBind();
The masterpage can have script resources just like a normal HTML page; you'll probably want to check the problem with an HTTP debugger like FireBug or Fiddler2, if phsr is correct you'll see the requests failing with an ErrorCode.
Using master pages will not affect the loading of JavaScript files. Your problem is either the location of the file or the script tag is formatted incorrectly.
The Background
I run an ASP.NET site using Graffiti CMS for a local charitable/service organization.
The leaders of the organization want to start integrating a third-party back-end management system that exposes content as full HTML pages.
One of the pages, the officer list, uses inline script to load pictures or placeholders (depending on whether or not there is a picture for the given officer).
I've created a server-side proxy that enables loading the content from these pages using jQuery's .load() AJAX function.
I can display this content fine using an iframe, but that feels really kludgy, and if the size of the content changes, I may need to alter the size of the iframe to ensure it all displays (blech!).
The Problem
If I create a <div> in a Graffiti post, and use $("#divid").load(url) to load the content, the HTML content loads fine, but the inline script is stripped out, so neither the officer images nor the placeholders are displayed.
The Question
Understanding that the reason for the problem is that jQuery is almost certainly trying to protect against potentially bad stuff by removing the inline script before I load it into my DOM, is there a way using jQuery to grab this HTML and load it into my DOM that will preserve the script, but not open major security holes? I do trust the system from which I'm loading the content, if that makes a difference.
Suggestions? I'm looking to keep this as simple as possible...anything too complex, and I'm just as well off to stick with the iframe.
Thanks in advance!
#devhammer
There is an issue when you use document.write. If you have the ability to modify the source pages you can modify them to use the innerHtml technique instead.
To do so you would change something like this:
<div id="testDiv">
<script type="text/javascript">
document.write("<img src='image1.jpg' alt='' />");
</script>
</div>
To this:
<div id="testDiv">
<div>
<script type="text/javascript">
document.getElementByid('testDiv').innerHTML = "<img src='image1.jpg' alt='' />";
</script>
Doesn't work for me...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var dynamic = 'begin <script type="text/javascript">alert("hello");<\/script> end';
$('#test').html(dynamic);
});
</script>
<div id="test"></div>
</body>
</html>
The alert box is showing.. but if you replace it with a document.write, nothing in the document.write appears... you have "begin end"
Hope this helps!
Try setting the HTML manually, like this:
$.get(url, function(htmlText) { $('#divid').html(htmlText); });
I'm pretty sure this will execute the scripts.