Here
https://glueckundsegen.de/stammbuch/
(I've included the url, since I expect that maybe the problem is not in the code snippets below)
is a red button saying "Mehr erfahren" thats like "more ...". The button is basically a link:
<a href="https://glueckundsegen.de/stammbuch/#mehr" target="_blank">
<div id="gus--details" class="gus--details">
Mehr erfahren ...
</div>
</a>
And its intended to target an anchor at the headline "Unsere Stammbücher: Durchdacht in allen Details":
<hr />
<p><a id="mehr"></a> </p>
<h2 class="headone">Unsere Stammbücher: Durchdacht in allen Details</h2>
Intended behaviour is, to open a new window and jump down to that anchor. I thought this is pretty simple and bulletproof stuff but it doesn't work for some reason.
It works well in firefox 66 Developer Edition but fails reproducibly in Safari 12.0.2 and most of the time in Chrome 71.0.3578.98
I don't have any idea why? Any help or suggestions?
<a href="#mehr">
<div id="gus--details" class="gus--details">
Mehr erfahren ...
</div>
</a>
without target _blank
example: http://jsfiddle.net/5eztgq3p/
Your href
href="https://glueckundsegen.de/stammbuch/#mehr"
is slightly wrong. Remove the last / leaving
href="https://glueckundsegen.de/stammbuch#mehr"
The url you are using indicates a page within the stammbuch folder at https://glueckundsegen.de
Related
I'm currently stuck with some HTML code. On my website, I currently have 5 existing tabs but I wanted to make one clickable that redirects the user to a printable page that pops open the print menu specific to their browsing. I think I may be missing something in my HTML code. Underneath you can find a simplified version I extracted from one of my tabs:
<div class="tab-item">
<a class="tab-label text-center"><i class="icon-1-map"></i> Ligging</a>
<div class="tab-content">
<iframe src="<!--GOOGLE MAPS LINK-->" style="width:100%; height:400px; frameborder:0; border:0" allowfullscreen></iframe>
</div>
</div>
I wanted to implement something like this
<div class="tab-item">
<a href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
The problem is, sometimes the tab doesn't even show up and if I change my code to the one underneath, it doesn't bring me to the linked page.
<div class="tab-item">
<a class="tab-label text-center" href="../../print/k420-torhoutsesteenweg306.html">
<i class="icon-1-print"></i> Print deze pagina
</a>
</div>
Can anybody help me?
If you'd like to see the full sourcecode, please click here
Thanks!
Welcome to StackOverflow.
1) To just open the print dialogue of the page upon loading, simply add this at the bottom of your HTML's <body> : <script>window.print()</script>
2) As for your disappearing code, please provide more information and/or link your CSS. Also, why are you using <i> on its own like that? <i> is to display text in italics
The information you provide is not enough to correct any issues.
I haven't tested this on all versions of IE but I have a problem that when I go to this site: http://www.yourwhiteknight.com/manufactured/ and click on one of the image links in the navigation menu (Home, Manufacted Homes, or Real Estate) it just opens the image of the button in the same window. It doesn't do this in Chrome or Firefox (it goes to the link as it should). Has anyone seen this before or does anyone know a solution?
Here is the HTML:
<div class="textwidget">
<a href="http://yourwhiteknight.com/">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/home.button.png" class="icon">
</a>
<a href="http://yourwhiteknight.com/manufactured/">
<img width="233" height="38" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png" class="homes">
</a>
<a href="http://realestate.yourwhiteknight.com">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/11/real-estate-tab.png" class="real">
</a>
</div>
Thanks in advance for your help!
UPDATE:
I did just notice that when I inspect the element in IE it shows the code for an image as this:
<img width="233" height="38" class="homes" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png"></img>
I tried to add a slash at the end of the image code to no avail ()
Funny thing is that if you go to our other site that is a mirror of this one the buttons work: http://realestate.yourwhiteknight.com/ even though the code on the back end is the exact same.
Add target="_self" to the links and it works as a workaround. There is probably some JavaScript (maybe Google Analytics) interfering with the page.
This was being caused by a plugin called: Google Analytics Suite. I just deactivated it and it started working. Thanks everyone for pointing me in the right direction!
This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?
When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.
You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.
Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
I have a problem with links in firefox. only happens in firefox and in chrome works well.
If I have a board and I link a document like this:
link
I have in the document:
<a name="mark"> </a>
Anyone know that in going from the front to the page does not take me to that part of the document? only works in firefox when already loaded page while chrome always work.
Use
<a id="mark"> </a>
instead.
Or you could link to a heading directly like:
<h1 id="mark">This is my heading</h1>
Use id <a id="mark" href="#"> </a>
Call by
link
(or)
link (if it is same page)