I've created a basic html page with a top navbar which has one of the code snippets as follows
<a href="./team.html" class="hover-effect scroll">
<span>
<span><b>THE TEAM</b></span>
<span><b>THE TEAM</b></span>
<span></span>
</span>
</a>
Now for reasons unknown to me, when I click on the link normally nothing happens. When I click on the scroll wheel to open a new tab, nothing happens. However, when I right click and click on open a new tab then it works.
Also the following works perfectly if on index page:
<a href="./index.html#about" class="hover-effect scroll">
<span>
<span><b>ABOUT</b></span>
<span><b>ABOUT</b></span>
<span></span>
</span>
</a>
But only when I'm on the index page. Not on any other page.
Any ideas why this is happening?
Related
I'm learning HTML.
I've following code piece:
<a href="#B" id="specialClass" class="primary-btn icon-cart" data-one="#A" data-five="google.com" data-ten="#C" target="_blank">
<span id="pressButton">New Button</span>
</a>
When I press button based on slider and data-five gets triggered, I for some reason open in a new tab mywebsite.com/google.com instead of google.com.
What am I doing wrong?
If it is an address outside your web page you have to put the full path with https://google.es
<a target="_blank" href="https://google.es">Google</a>
I have an anchor in a webpage I'm building like this:
<a id="Equity"> </a>
In IE11, the link https://example.com/myPage.html#Equity brings me to the anchor location for a second, and then back to the top of the page. The anchor works correctly with Chrome and Firefox.
I have also tried these, with the same result:
<a name="Equity"> </a>
<div id="Equity"> </div>
<a id="Equity">Some text</a>
Anyone know what could be happening? I've scoured the web without success. I would very much appreciate any help.
Edit: I've discovered that this issue only occurs the first time the URL is loaded in a window/tab. If you refresh the page, it jumps to the anchor correctly, and does not return to the top of the page.
I have an index.html that includes:
<li>
<a href="imprint.html#imprint-link">
<div class="main-menu-title">IMPRINT</div>
</a>
</li>
When I click on this item another html file (imprint.html) is loaded, but when I click on Home, which includes the following code to go back to index.html, it doesn't work!
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
What is wrong here?
Update 1: When hovering the mouse over the link I get:
try using this code :
<a href="index.html">
<div class="main-menu-title">HOME</div>
</a>
inplace of :
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
To answer your original question.
What's wrong here?
As a couple kind folks already commented and one person already provided a nice solution, clicking on your original link
href="#index-link"
while you are on the imprint.html page will not take you to your index.html page. Why? Because
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
is saying, "Take me to an element on the current page (imprint.html) that has an ID of 'index-link'. If there is no element with and ID set to index-link, on the imprint.html page, nothing will happen. And, you will stay on the current page because you didn't specify an URL outside of the current page, which is still imprint.html.
So, with that current setup, you will not get to see index.html.
I am trying to develop a dropdown data toggle, that can be used to open a dropdown-menu but simultaneously allows the user to click a link.
Currently, the link can only be opened via right-click "open in new tab". However, a left-click on the link always opens the dropdown, even though the browser recognizes the target of my link properly (I can see the target url in the bottom left of my browser).
I Already tried split-buttons, but their layout is not flexible enough.
Basically, I need one button (dropdown-toggle) with two lines.
The first line is an anchor with a link name and an url.
The second line is the actual label of the button.
(Background: When the user selects a new item from the dropdown, the displayed link and button label are updated by angular.)
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link">
{{link name}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
<ul class="dropdown-menu">
<li ng-repeat="item in items"> item </li>
</ul>
Expected result:
* If the user clicks on the link, I would like to load the linked page.
* If the user clicks somewhere else on the button (no matter whether its first or second line), I would like to open the dropdown menu.
However, a left-click on the link always opens the dropdown,
The <a> tag needs a click handler that stops propagation of the click:
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
{{linkName}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
This will prevent the click from bubbling to the <div> element that opens the dropdown.
For more information, see
MDN Web API Reference - Event.stopPropagation()
I'm trying to get a table cell that is one big href to contain two things - an icon that opens a popup (at location A), and some text that follows the cell's href (to location B). However I can't quite get it working.
Here's the HTML I have that only works for the icon/popup:
<table><tr><td>
<a href="http://www.google.com>
<span>
<a onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')">
<img src="smiley.png" />
</a>
</span>
Go to Google
</a>
</td></tr></table>
This works fine for clicking on the smiley icon and opening the yahoo popup, but clicking on "Go to Google" doesn't do anything.
Here's the HTML I have that works for following the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" />
Go to Google
</a>
</td></tr></table>
This follows the href no matter what I click on in the cell (which makes sense, there's only one href).
I also tried this, but clicking on the icon would both open the popup and follow the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')"/>
Go to Google
</a>
</td></tr></table>
Any help?
You can't just have a link contain another link. Have two links, but separated. Use CSS to make them fill the cell if you have to.