I was asked to create several websites that essentially mirror a specific live website. With the difference between the live site and the new sites being that there is a floating header that displays at the top of the page no matter how far you scroll down. This is the same technique that sites like StumbleUpon use. My initial thought was to use an Iframe, for the view portal and a absolute div for the header. However I was then asked to make it so that when someone clicks on a link within the iframe that they be taken to the actual site, in a new window. This is the part that has me thrown. Is there a way to tell the I frame to open all links in a new target? If not what would you recommend?
See attached image for clarification:
Targeting blank in the anchor should work just fine here.
<a target="_blank" href="http://google.com">google</a>
With some cross browser hacks you may be able to tell when the iframe src changes, on that basis you could then reload the page in a new window. It isn't possible though to tell what the new URL is, so it won't be the best user experience as you'll be sending them back to the page that you loaded originally.
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/
Related
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
Similar to Stumbleupon, if you load random domains (ones that I do not own) and want to have the links within that page not just change within the iframe, but change on the parent url.
If that's hard to understand here's more layman terms:
URL: mywebsite.com/reddit.com
opens iframe on my website showing: reddit.com
click link within the iframe (showing reddit.com).
rather than it loading the new page in the iframe, can it load in the parent window at mywebsite.com/reddit.com/newlink
which would then open the iframe in my website, but would allow me to track what URL is being view and thus allowing me to perform my site-specific functionality.
Thanks!
in short, it cant happen. external sites are made to open links relative to their sites. there is no way to accomplish this.
you can set the link target to _top. <a href='www.someothersite.com' target='_top'>Link</a>
edit: Sorry, mis-read something. You can not edit the page on the other site through the iframe to change the target of the links. This is why on places like google images or stumbleupon they have an "X" in the corner that takes you to the page in the iframe.
If you could modify external pages, that would be a major phishing security risk as anyone could then make a page that is just an iframe to your bank but collects whatever you type into the username/password boxes.
In the old days if you made a page with frames you could specify what section your links took you to. Modifying links that aren't under your control is possible but rather a task and a half.
To use frames you could specify your target= within your tag. Each frame is named on creation to make it easy.
That's an old approach. Hope it helps
I have a Joomla site, the content is loaded in an iframe from another site.
In this iframe I have another iframe (a news ticker), when I click on a link in the news ticker, a page should open in the parent iframe.
When I click on it now, it opens the correct page full screen, and not in the iframe in the joomla site.
(Inception!)
Go check it out:
http://www.rtc-antwerpen.be/Site/content/view/14/47/
Click on 'Hybridevoertuigen' in the scroller
Warning: This site is very old, ugly and slow, I just have to upgrade it.
Thanks
Within the a-tag you have to define target="_parent"
<a href="link.php" target="_parent">
This will cause the link to open in the parent frame.
EDIT:
What you seam to be trying to do, is target a div-block outside the IFrame, which is not possible (at least not with some JS running on your main site).
Are the contents you are linking contents, that exist within joomla? Then try to link to their correct URL.
For example, instead of "detail.php?id=435" link to "/Site/content/view/14/435". Then joomla will load the whole site, wrapping the content.
Except for target="_parent" (which should work if your site is structured like you described) or target="_self" (which should work in your site as it actually is structured now), you could also specify the name of a frame in target. That allows you to more specifically point to a target frame, and it is ignored if such a frame does not exist.
I have this problem to solve.
I gonna make an email campaign to my clients with some affiliate promotions.
The email will have some direct links to the promotions that goes through a php script in my site. (ex: http://mysite.com/promo.php?promoId=x)
In this script I will manage my database queries and cookie.
In cases that I detect through the cookie that this user has not made any click in the last x days I would like to present him with two html pages: my main website page and the external site referring to the promo.
How can I do this? I currently use header( "Location: $promo_url" ) to redirect to the promo url... but in same cases stated before I would need two urls to open.
Thanks in advance for all your answers
GS
You can either use frames (ugh), an iframe within the main page to display the second page (somewhat less ugh), or use popup windows (truly ugh, and probably not possible due to everyone having popup blockers these days).
You could have the script output JavaScript with window.open instead.
<script type="text/javascript">
window.open("link1"); // open link1 in a separate window
window.location.href = "link2"; // point this window to link2
</script>
If you can, however, it would be much better to explicitly show the user a link to the second location somewhere on the page instead of forcefully opening another window / tab for them.
Show them your site, and in your site have a hidden a link tag, which will link to the affiliate site with the attribute _blank. Using jQuery, once the DOM is ready trigger a click event to the hidden link tag.
E.x.
HTML
<a id="affiliateLink" href="http://www.affiliatesite.com/asdad" target="_blank" style="display:none;">Visit Affiliate</a>
JavaScript
$(document).ready(function(){
$('#affiliateLink').trigger('click');
});
There's really no good way to do what you want without using iframes (ugh) or popups (double ugh). The other answers are how to use those techniques, but a possible 'better' solution would be to display a banner on your page when you detect the user hasn't been to your site in a while. The banner could say something along the lines of Click here for information about our awesome promotion, and it'd be easy to make it stand out. That way, you're not forcing popups (which no one will ever see), and while iframes aren't terrible from a user perspective, they don't really scream "modern web design".
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});