I've tried all of the following:
<a name="test"></a>
<a id="test"></a>
<h4 id="test">SOME TEXT</h4>
And then linking to them like this:
<a href="pagename#test">
All of the above work with Firefox, IE and Chrome, but none of them worked with Safari 5.xx on a mac. Any help is very much appreciated.
Go to Test
.
.
.
<div id="test">This is Test.</div>
This should work.
EDITED:
Also, if you want to link to a particular id in a different page, which I think you do, use:
Go to Test on some different page.
Looks like you have a misunderstanding of how anchors work, you need to use the href attribute.
<a name="test"></a> <!-- not required -->
<a id="test"></a> <!-- not required -->
<h4 id="test">SOME TEXT</h4> <!-- this is correct -->
To link to the <h4 id="test"> element do this (if target on the same page):
Go to Test
If target on a different page:
<a href="other_page.html#test">
Related
I have added addthis to a Joomla site. By default it loaded like this:
<div class="addthis_sharing_toolbox"></div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
And it looks like this:
I have enabled JCH (to improve speed), but addthis is not working. I have to keep JCH. I manage to make it work, using following code:
<div class="addthis_sharing_toolbox addthis_default_style addthis_64x64_style" data-title="title">
<a class="addthis_button_facebook at-icon-wrapper at-share-btn at-svc-facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_google_plusone" style="cursor:pointer"></a>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
As you see I have added the tags with the icons, in that way they load, but the styling is totally different, how can I keep same design?
The answer is here: https://www.addthis.com/academy/customizing-the-addthis-toolbox/.
In my div I had the class "addthis_sharing_toolbox" but I had to use "addthis_sharing_toolbox"
<div class="addthis_toolbox addthis_default_style addthis_64x64_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
</div>
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.
This is my link to the specific page from another page.
<a href="http://test.com/#test"
and this is my part of page I want to display but it does not work...
<div id="test"><h4>Title of test</h4></div>
I am using WordPress, could it cause the problem?
Change this:
<div id="test">
<h4>
Title of test
</h4>
</div>
to this...
<a name="test">
<h4>
Title of test
</h4>
</a>
You should be able to link to it with this:
Test
In HTML, you can jump to a specific page section by using an anchor tag with a name or id attribute, like:
<a id="test"><h4>Title of test</h4></a>
or
<a name="test"><h4>Title of test</h4></a>
Actually, it looks like name was only for HTML4, ID is what should be used for HTML5 per here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-name
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)
I'm trying to make my tumblr posts link directly to the source when clicked rather than going to the post page and having the source link there to click.
Here's the code I have for the photo posts.
{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="photo">
<div class="photobox"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
I've tried changing the photobox 'permalink' to source etc with no avail.
Anyone got any ideas?
In the hope that someone who needs this will find it, here's a way I found to show {LinkURL} when it's available, and some other url when it's not.
Tumblr offers {block:LinkURL} to display some code when {LinkURL} is available, but there's no {block:NoLinkURL} to use when {LinkURL} is NOT available.
Ideally, this should be possible:
<a
{block:LinkURL}href="{LinkURL}"{/block:LinkURL}
{block:NoLinkURL}href="{Permalink}"{/block:NoLinkURL}> <!-- does NOT work -->
<img src="{PhotoURL-400}"/>
</a>
But {block:NoLinkURL} doesn't exist, so I'm using {block:LinkURL} to hijack the normal link instead:
<a {block:LinkURL} href="{LinkURL}" data-ignored-{/block:LinkURL}href="{Permalink}">
<img src="{PhotoURL-400}"/>
</a>
If {LinkURL} is available both links will be in the HTML, but only one is read.
Example output
This is the output when {LinkURL} is not available:
<a href="/permalink">
<img src="/image.jpg"/>
</a>
And this when is the output when {LinkURL} is available:
<a href="/linkurl" data-ignored-href="/permalink">
<img src="/image.jpg"/>
</a>
after comments edit
It should be <a href="{LinkURL}">
You have to make sure when you're adding the image that you've specified the target as outside of tumblr too.