Issues with href not opening link (tested in Chrome and Safari) - html

Here's what I've got: What I'm trying to do is have a github image on a webpage and when it is clicked it takes you to my github account. Odd thing is that this was working and then stopped and I can't tie it directly to any changes I've made. Note that I'm not using any javascript on this site...
This is in the body of my .html:
<body>
<div>
<a href="https://github.com/mystuff" target: "_blank">
<img src="https://dl.dropboxusercontent.com/u/######/site/octocat_black.png"></a>
<!-- this repeats for 5 different images -->
</div>
</body>
When I hover over the image i can see the link in the chrome bottom toolbar but when I click it the page just seems to reload (not an entire reload, but it doesn't go anywhere). If I use the developer tools and click on the link it goes where it's supposed to. Any thoughts would be greatly appreciated!
Note that all the images I use, .html, and .css all live in the same directory. It's a VERY simple site.

target:="_blank"
html is no pascal where the assignment operator is :=. Write:
target="_blank"

Related

Why Firefox does not show pictures of my web?

I have an issue with web I am developing HTML/CSS (only design), if I open it in firefox from my harddrive no pictures are displayed, there is a small icon instead like picture can not be loaded. If I rightclick on a icon and select open picture in new tab than picture is displayed on a new tab without issue.
But if I open webpage from my hardrive in IE, edge or chrome than all pictures are displayed directly on a page in a browser without issuel.
What can be wrong with mozilla or with page?
I tried all these recomended fixes: https://support.mozilla.org/en-US/kb/fix-problems-images-not-show.
this is picture URL: img src="D:/UserData/z003xner/Documents/My Web Sites/bubabikes/Images/30.1.2023.jpg" and i tried forward slash and bacward shash and nothing helps
Try to put the image inside the project folder for eg : {project_path}/images/1.jpg and call the image using the domain name in the project suppose the project domain is https://example.com call the image using
<img src="https://example.com/images/1.jpg" class="image" />
or if in localhost :
<img src="http://localhost/project-name/images/1.jpg" class="image" />
It’s hard to tell, but the issue may be the spaces in your file path — try replacing them in your html with %20 like this
my/file%20path%20has/spaces.jpg
You can look up “url encoding” for more information!

Unable to use my <a href> links from my website to external sites. (i.e. my site to my discord or patreon)

My site is http://inquizgaming.info/
When you click a link here in edge, it gives you a message saying:
"This content can’t be shown in a frame
There is supposed to be some content here, but the publisher doesn’t allow it to be displayed in a frame. This is to help protect the security of any information you might enter into this site.
Try this:
Open this in a new window"
In chrome, the page just stays blank.
This doesn't make a lot of sense to me, as i am not framing (i.e. using ,, or etc.) these links.
The entire body of the code for that first "Join Discord" button is:
<section id="banner">
<div class="inner">
<h2>Inquisitional Gaming</h2>
<p>An open gaming community for all platforms!</p>
<ul class="actions">
<li>Join Our Discord!</li><br>
</ul>
</div>
</section>
And from this, i just can't seem to understand what the issue is. I've been looking all over online. I am new to html, css, and JS. I am a novice at website building, and i am sure the problem is somewhere im not thinking of.
EDIT: When i right-click (or hold on mobile) and open it in a new window, the link works fine. This is EXTREMELY frustrating.
http://68.185.245.9/ is your host IP. With what I'm gathering, you have an index file linking to your IP which in turn shows your page, but it's linking it with a frame and thus breaks the ability for your links to redirect you. Have your service provider reconfigure your DNS so it has an A record pointing towards your host IP.
If you open your site http://inquizgaming.info/ and right-click to inspect the HTML you see the <frameset border="0" rows="*,1">.
If you now click on a link on your site, the discordapp.com server answers with the HTTP-Header 'X-Frame-Options' set to 'sameorigin'. This Header indicates, that the browser is not allowed to render https://discordapp.com/invite/qDf8DG9 in the visiting browser.
You can read the details about the the HTTP-Header here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
As you cannot change the HTTP-Response from discordapp.com' you need to either remove the all the <frameset>, <frame> and <iframe> or you can add a target="_blank" attribute to every link referencing the external link.
If you open the link in a new window, and the link works perfectly fine, then try adding this to your <a> tag...
Join Our Discord!
The target="_blank" attribute tells the browser to open the link in a new window. Also, it's good practice to place out-going links (that contain content not specific to your website) in a new window.
EDIT: As others have said, your website code is placed within several <frame> tags. Some functionalities, such as the <a> tag, will behave differently. Inspecting your website (using developer's tools by pressing Ctrl+Shift+I on Chrome or Firefox) will show the firstmost tags being <frame> containers.

Flicker in IE11 on page load, but not in developer mode

I'm getting flicker on page load or postback of a coloured page body in IE11, on externally hosted site (ie. not from local disk).
The odd thing is it goes away if I either:
Open F12 developer tools
Add the site to trusted sites
Add the site to restricted sites
I've got a VM with IE9 which works fine. Works fine on Chrome.
I obviously cannot use any of the above as a solution!!!
This sample code has one link that switches between two pages. I've removed everything else, javascript, css files etc.
--- page1.html ---
<html>
<body style="background-color:#000000">
Page 2
</body>
</html>
And then an identical page2.html that refs back to page 1.
Clicking on the link flickers the background from white to black each time, unless using any of the "fixes" above!
I have found another way to temporary fix this bug by adding an empty event handler through JS.
link such .js file to you html
fix_ie.js:
if(window.addEventListener){
window.addEventListener('beforeunload', function(){});
}

View PPT files directly in an iframe (with Chrome Office Viewer?)

So I am currently working on a local web-based application. Here are the facts:
I am using the CSS page transitions found here:
http://tympanus.net/Development/PageTransitions/ Due to this, each "page" of my application is contained in it's own div in a single file.
Example:
<div class="pt-page pt-page-1">
<!-- Page 1 content goes here ... -->
</div>
<div class="pt-page pt-page-2">
<!-- Page 2 content goes here ... -->
</div>
...etc
The client wants to be able to view Powerpoint (.ppt) files directly on the web browser. To attempt a quick and dirty solution, I have installed the Chrome extension "Chrome Office Viewer" https://chrome.google.com/webstore/detail/chrome-office-viewer-beta/gbkeegbaiigmenfmjfclcdgdpimamgkj?hl=en to each machine(this application is going to be isolated to just four machines that will be using Chrome for the application, so usability isn't an issue here)
What I WANT to have happen is to link to the .ppt file in an iFrame in one of my <div> pages as seen above, so when the user clicks on a link to view the PowerPoint, the page transitions and the slides can be viewed within the iFrame due to the Chrome Extension capabilitiy.
What CURRENTLY happens is that as soon as the application loads, the page redirects to the browser FROM the original application page to a seperate page to view the .ppt file. I would like this to be done inside of the <iframe> as mentioned earlier instead of an entire page redirect...
Is this possible or am I limited due to the construction of the Chrome Extension itself? I can always have the client save their .ppt as images and then display those within a <div> page, but I figured the Chrome Extension would be the quickest solution. Any ideas? Thanks in advance.
You can use Google Drive web publishing and embed your documents by iframes.
https://support.google.com/drive/answer/37579
Try making a .html or .php (depending if you use php) and link the .ppt in it, and then just put that .html in an iFrame.
<div class="pt-page pt-page-1">
<iframe src="/page 1 file linked here"></iframe>
</div>
<div class="pt-page pt-page-2">
<iframe src="/page 2 file linked here"></iframe>
</div>
If it still redirects then its an extension thing.
Also in future try keeping away on reliance to extensions and browsers, they are not really reliable enough for commercial use.
And whats the intention of this system? If its gonna stay in the office for work why does it need fancy transitions?
EDIT:
If you need those .ppt files to be dynamic you can use PHP for dynamic .html creation.
http://www.microsoft.com/web/solutions/powerpoint-embed.aspx
This might help, unfortunately I couldn't find any other way, using iframe forces the browser to download the file, and embedding also doesn't work here. Moreover, this method also allows you to add controls below, and its almost same as an iframe window. :)

Why does Google Chrome's popup blocker shoot down a link when it contains an image or any other tag?

Google Chrome is a bit weird nowadays in that v25 no longer respects a 302 redirect header and happily re-posts form data on page refresh, whereas v24 and all the other browsers play nicely. I'm not sure if this is just a temporary browser bug, so let me describe the mystery I'm trying to solve.
As far as I know you cannot open a tab using HTML or JavaScript, but a new window without explicitly set dimensions is going to open as a tab by default.
First I've tried this:
<a href="URL" onclick="window.open(this.href);return false">
<img src="NICE IMAGE" alt="foo">
</a>
This was working everywhere, except in Chrome where it was shot down as an unauthorized popup window. Interestingly, sometimes when I kept clicking on it, Chrome has changed its mind and let the link open anyway (as tab). This was not always the case though, sometimes the link remained dead.
After a couple of hours of experimenting (and having changed from onclick to a simple target="_blank") I have discovered that the reason the link was killed is that the click event started from the <img> tag within the <a>. When I replaced the <img> with a <span> that contained some text and clicked on the <span>, the link could not open (Chrome has identified it as an unwanted popup), but when I clicked on the <a> tag itself (that had a fixed size or a padding), then it was accepted, and a new tab was born.
Finally I just included the images as CSS background and the <a> tags remained empty. Everything seems to be working now in every browser with this markup:
What could be the reason behind the Google Chrome’s logic that when a link contains a tag, then it is forbidden from being opened as a new tab, but when it is empty, then it can go ahead?
After some testing:
Chrome Version - 25.0.1364.172 m : worked fine!
Chrome Version - 26.0.1410.43 m : worked fine!
the "normal" way to open a tab is working in both newer versions.
Tested!
my code:
<?php
echo '
<a href="http://www.google.com" onclick="window.open(this.href); return false;">
<img src="http://static.adzerk.net/Advertisers/2565.png" alt="foo" />
</a>
';
?>
the problem should be in your pages...
EDIT: BUG SEARCH
i searched for reported and fixed bugs in this issue but couldnt find anything.