I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.
This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!
The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}
Related
I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.
I'd like to know how to link to the page with tabs from a different page on my site but instead of having the first default tab active have the second or third tab be active. You can see exactly what I'm referring to by visiting http://codepen.io/andrewjcurrie/details/qbqvxo/ and below is the JavaScript that powers the tabs.
$(document).ready(function () {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a')
.addClass('is-active').next().addClass('is-open').show();});
$('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
if (!$(this).hasClass('is-active')) { event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal');
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active'); } else {
event.preventDefault();}});});
As you can see on the pen, I'm hoping to have the links work with hash tags. I'd like to be able to add #Second_Tab to the base URL and have the second tab become active when that link is accessed. Any tips or suggestions on how best to accomplish this would be greatly appreciated, Thanks!
Andrew.
Three steps to get this to work:
remove is-active from the first tab-link in your HTML
add the necessary IDs to each of your tabs (following your example, I added id="Second_Tab" etc.
update the first JS function as follows:
$('.accordion-tabs-minimal').each(function(index) {
if (window.location.hash) {
var hash = $.trim(window.location.hash);
$(hash).addClass('is-active').next().addClass('is-open').show();
} else {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
}
});
This first checks if the URL has a hash and, if so, adds the necessary classes to that tab and content and displays them. If no hash is in the URL, it instead does the default behavior of displaying the first tab. You can see my working CodePen here http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
OK so I was using a bit of jquery to select all the <a> tags on the page and if they link to an image file to add a zoom class to it for the purposes of a lightbox.
This is the code which works
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
There is a problem with this though;
Say I have a link which just goes to another page but passes an image url as a GET variable in the URL the lightbox is activated as a result of this and fails because the link is not actually to an image. For example:
Link text
In the above instance the jQuery script will add the zoom class to this anchor even though it doesn't actually link to a picture.
This wouldn't usually be an issue as you would leave the page to go to the link's destination before the lightbox has a chance to appear, but in times where a new tab/window is opened I get a failed lightbox coming up.
This is particularly prevalent on social media buttons such as Pinterest which passes an image url within the link.
[apologies for the title - I wasn't sure how best to phrase it. Please feel free to edit to something more suitable]
you could add the zoom class only if href attribute doesn't contain a ? (or, in other words, a querystring is not included), e.g.
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').each(function() {
if (this.href.indexOf('?') < 0) {
$(this).addClass('zoom');
}
});
});
You can parse the href with a simple regex to check that the image is not in the query string, and filter out the false positives.
$(document).ready(function () {
$imgLinks = $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"]');
$imgLinks.filter(function() {
return !$(this)
.attr('href')
.match(/^http\:\/\/.*\?.*http\:\/\/.*\.(png|gif|jpg)$/);
})
.addClass('zoom');
});
I want to link my page with another page on condition.
Suppose I have 3 HTML pages, namely 1.html, 2.html and 3.html. What I want is that if 1.html is loaded then load page 2.html; If 1.html is not loaded then load 3.html.
please help.
I can't follow your explanation about pages 1, 2 and 3, but in a general sense you can have a hyperlink go to different URLs depending on some condition(s) by handling its "onclick" event to cancel the default navigation and do it from JavaScript instead:
My link
<script>
function doClick() {
if (someCondition || someOtherCondition)
window.location.href = "firstURLhere";
else
window.location.href = "alternativeURLhere";
}
</script>
The URL specified in the anchor's href attribute will be used if JavaScript is disabled. Otherwise, the doClick() function is called to decide which URL to navigate to. Of course the function can be as simple or complicated as you need.
The onclick needs to return false; to cancel the default behaviour of a click on the anchor because (obviously) the default is to navigate to the URL in the href attribute.
I am not fully sure what you want to achieve.
I think you want to show hyperlink on a page only if some other pages are opened earlier.
If this is the case, you can create cookies on window.load of page 1, and check if that cookie is set on windolow.onload event of page 2.
If cookie is set, create a dynamic hyperlink on page 2 to redirect to page 3. If cookie is not set, do not create a link.
You may also show / hide hyperlink (instead of dynamically creating) depeding on whether cookie is set or not. This is an easy and crossbrowser way if you are not using jQuery.
Refer: http://www.w3schools.com/js/js_cookies.asp
It should be something along the lines of:
If you add the script at the bottom of the page, the javascript will search for all the <a> tags and compare them to the current url. If theres a match it will set its style to invisible.
<script>
linkNodes = document.getElementsByTagName("a");
for(i = 0; i < linkNodes.length; i++){
if(linkNodes[i].getAttribute("href") == document.url){
linkNodes[i].style.visibility= "hidden";
}
}
</script>
This way if you are in 1.html, 2.html and 3.html are displayed but not 1.html itself. the same happens for 2.html which would show only 1.html and 3.html... etc.
Here is my situation - I have a newsletter that I am sending out, what I am attempting to do is when a user clicks a link in the email it redirects to my web page where a lightbox will then pop-up showing a video. I cannot have the lightbox triggered on page load because you can go to the same page and view the content before viewing the lightbox.
Any ideas how to trigger the lightbox from just a link in an email? Is this even possible?
(I am using Fancybox Lightbox)
Thanks!
Trigger the lightbox via a parameter in the URL that you are not currently using. For example, make the link go to http://www.mysite.com/page.ext?lightbox=1. Then, setup a JavaScript that runs on page load and checks if the lightbox value is set to 1, and if so, execute a click() event on whatever button normally brings up the lightbox.
Since you are using a new parameter, if someone visits the page normally, they can still view the content without the lightbox immediately popping up because they won't have the lightbox=1 in the query string.
EDIT:
Here is an example of the JavaScript to check the query string. It uses the fancybox on the main page of the site in your profile:
$(document).ready(function() {
var url = window.location.href;
url = url.toLowerCase();
if (url.indexOf('?lightbox=1') != -1 || url.indexOf('&lightbox=1') != -1) {
$j("#start").fancybox({
'padding': 0
});
}
});