Right now I am using a javascript to trigger a new tab and load a new page in the parent window. It looks like this:
<script type="text/javascript">
function openOtherLinks(id1, id2) {
var link1 = document.getElementById(id1);
var link2 = document.getElementById(id2);
if(!link1.href || !link2.href)
return;
window.open(link2.href);
document.location.replace(link1.href);
}
</script>
<img class="aligncenter size-medium wp-image-94" src="x" alt="x" width="200" height="43"/>
<a id="link1" href="url1"></a><br/>
<a id="link2" href="url2" target="_blank">`
This triggers the "same" page in a new tab on click (works fine).
The problem is that I want to trigger a popup on click, I´ve tried several plugins for pop-ups without any success. Is it even possible to trigger a popup after loading the page in a new tab?
The pop-up im talking about is a pop-up for that very link. It is going to show a coupon code. Therefore I can not trigger the pop-up on a specific url since the url/page contains several campaigns with different coupon codes.
I´ve seen this type of solution in multiple webpages but can´t figure out how
they´ve done it. The easiest solution would be to simply add a popup #id in the end of the url to trigger the popup but I haven´t found any plugin that works this way.
btw, im talking about "in page popups". Not a new window.
Related
I can't seem to get the modal window to show any content from another link. I'm quite sure I've used the correct classes to link them together. This is the basic js given from http://www.ericmmartin.com/projects/simplemodal_v101/.
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$(' .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});});
I've put the basic class onto
<li><a href="about me/about me.html" class='basic'>about me</a></li>
and in the external html link (about me) I put a div id of
<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based from Toronto. My creative approach falls along the line of biomimicry and human-centric design.
I've recently graduated from the University of Guelph and am currently pursuing my Masters of Industrial Design at Pratt Institute.
Feel free to contact me to just chat and don't forget to look at some of my work.
</p>
I've included my code in this zip (http://www.4shared.com/zip/LGOb7yugba/Darrien_Website_V2.html)
Any help would be much appreciated! :)
You have the following problem:
User click on your link
Click event is fired
Javascript look after some element with ID equals to basic-modal-content
There is no element with this ID
The browser load the about page
What you have to do:
User click on a link (with href='#')
Click event is fired
Use JQuery .load() function to load the html content of about page into a specific div
Call modal with id equals to basic-modal-content
Javascript will look after basic-modal-content and find it
i have an unusual problem. I have a page which contains an iframe, which is controlled by the dropdown. So selection of the dropdown loads different iframes. Anyway - on the bottom I have a button to return to the previous page (I mean the whole page, not previously loaded iframe on that page).
<a href="javascript: history.go(-1)">
Unfortunately it also includes the history of these iframes, so when I click on that button, it loads up the previous iframe instead of taking me back.
Here is how to explain it well:
go to this page: Click here
go to the hyperlink on that page
make couple of selections from the drop down (play with it)
click the return button on the very bottom of the page.
I want it to take me back to the first page (here.html), not go back to the previously loaded iframe on 1.html.
I have to use javascript history.go or similar script. I can't use direct link to here.html, as this page is a part of many other pages, so when the user clicks return, he is forwarded to his specific landing page.
I greatly appreciate any help.
It's a life-saving question
Use document.referer
var referrer = document.referrer;
window.location = referrer;
Check if it works !
<a href="javascript: window.location = document.referrer;">
You need to remove the newly iframe before sending browser back to the actual page.
Add click event on the return link
HTML:
<a id="return_link" href="#">
Javascript:
$(document).ready(function() {
$('#return_link').on('click', function(e) {
e.preventDefault();
$('#iframeId').remove();
window.location = document.referrer;
});
});
try this , Just remove extra spaces from statements.
href="javascript:history.go(-1)
I want to redirect people using a url to a page on my website. The problem is that the page is a popup window created from TinyBox. So basically, I want the whole site to load up and then open the popup, but I need to do this with a url. Can someone help me? Here my code:
<ul class="floatset">
<li onclick="pauseAllVideos(); TINY.box.show({iframe:'/flash',boxid:'frameless',width:800,height:600,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})" class="footer_image_text1"><a class="flash"></a>Flash</li>
</ul>
Are you looking for something like:
$('.floatset li:first-child').click(function() {
event.preventDefault();
pauseAllVideos();
//copied the below from your original question, not familiar with TinyBox
TINY.box.show( {iframe:'/flash', boxid:'frameless', width:800,height:600, fixed:false,maskid:'bluemask', maskopacity:40,closejs:function(){closeJS()}})
})
You can then set the href on the anchor without the user being navigated away when they click on it.
I have the following jQuery code:
$(function() {
var linkSet = $('#link1').add('#link2');
linkSet.click(function() {
linkSet.toggle();
if ($(this).attr('id')=='link1'){
$('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
$('#frame').attr('src', 'www.yahoo.com');
}
});
});
On pageload, the link with id link1 is shown while link2 is hidden. When the user click the link1, it will the link1 then show the link2 then vice versa. While toggle takes place, it also changes the source of an iframe which is named frame.
My problem here is when I hit back button, the content of the frame will go back to its previous content BUT the link are not changing. What did I missed here? Thanks in advance!
Note: The links are on a webpage, then inside that webpage is an iframe.
EDIT:
<div id="header">
<ul>
<li><a id="link1" href=#">Link1</a>
<li><a id="link2" href=#">Link2</a>
</ul>
</div>
<div id="iframe">
<iframe id="frame" src="www.google.com"></iframe>
</div>
You mean when pressing the browser's back button right.
If so:
The issue is you need to have an event to trigger when the history changes, as that is the only easy way to respond to changes in history (such as when clicking the back button). Since the iframe url is indeed changing, it is therefore also affected by the back button naturally.
To get other non history based logic to work when pressing the back button and such...
There are two ways to do this. The new one is by using the history API, while the other more supported, and simpler way is by adding a hash to the url.
WHAT DOES THIS MEAN?
When you click the button you change the url with a hash. Like the url can become
'http://domain.com/blah/#myHash'
Then instead of doing your logic in the click, you do it when the hash changes. So this way as the user clicks back and/or forward the logic always runs fully.
I wrote an entire article about this technique a few months ago at http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
I am using ShareThis widget in my website, here trying to customize some of the functionality of the email widget shown below:-
Currently when you hover on this email icon, a dialog box appears:-
What i am trying to do is, making the popup disable for the icon and implement a url which takes me to a specified url let say http://www.google.com...
I also try to add window.open to the span:-
Before:-
<span class='st_email_large' displayText='Email'></span>
After:-
<span class='st_email_large' displayText='Email' onClick="window.open('http://www.google.com'); return false;"></span>
But unfortunately my all ideas have been so far waste, their is no responce from onclick javascript? Any solution for this?
This code snippet works for me when I type it in the Javascript Console on the sharethis.com Website:
// Disable Sharethis popup
$(".st_email_large")[0].onclick = null;
// Load url instead
$(".st_email_large").click(function() { window.location.href = "http://google.com"; });
You need jQuery for it though.