I have a dynamically created <a> tags:
$(".categoryChoice").hover(
(eventObj)=>{
id = eventObj.target.id
$("#subCategories").empty()
if(id === "clothing") {
$("#subCategories").append(`<div id="col1" class="col-6" style="border-right: 1px solid grey"></div>`)
$("#subCategories").append(`<div id="col2" class="col-6"></div>`)
clothing.map((val,i)=>{
$("#col1").append(`<a class="subCat nav-link" href="products/featured.html?type=clothing&subType=${val.replace(/\s/g, '')}">${val.toUpperCase()}</a>`)
})
}
...
}
)
They work on android devices when I tap on the link and across all browsers, but not on iPhones.
When I try to tap on the link it won't do anything, but it only works when i press it for longer. I don't understand the behaviour.
I've checked similar questions and tried putting target="_self"in the tag as well, but it wouldn't change anything.
I'm kinda stuck here. I thought of creating a function instead that would get me to desired page, but if there is any simpler way of fixing it, that would be great.
Instead of using a tag I changed it to li with function that fires when onclick and ontouchstart and sends the user to the page. It works well on iphone now.
Related
I have a MudSelect on a MudPopover but I encounter a somewhat weird behavior when using the select. The select dropdown will not appear over everything else as it should, but instead, it will be layered behind /underneath other components and is unclickable. The confusing thing about this is that a simple reload (when opening the page) fixes the issue. Does somebody know what triggers the "broken" behavior and how it is then fixed by reloading? Or does somebody know how to fix it without forcing a reload upon entering the page?
when it is broken
how it should normally look
<MudPopover Open="#_open" RelativeWidth="true" Fixed="true">
<div class="d-flex flex-column">
<EditForm Model="#items" Context="itemUpload">
<MudSelect #bind-Value="selectedH" Margin="Margin.Dense" Variant="Variant.Outlined" Label="whatever" AnchorOrigin="Origin.BottomCenter">
#foreach (var item in items)
{
<MudSelectItem Value="#item.id">#item.name</MudSelectItem>
}
</MudSelect>
</EditForm>
<MudButton Disabled="#uploading" OnClick="Upload" Variant="Variant.Filled" Color="Color.Primary">
#if (uploading)
{
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
<MudText Class="ms-2">Processing</MudText>
}
else
{
<MudText>Upload</MudText>
}
</MudButton>
<MudButton OnClick="#ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Schließen</MudButton>
</div>
</MudPopover>
#InCo placed this in the comments, but it appears to be the best solution I have seen, so I pulled this out into an answer. Instead of using MudPopover, use MudDialog. It solves the Z-Index issue for MudSelect as well as MudDatePicker
I have a very strange problem, i have a div with an anchor tag with an id in it, when i click on the anchor tag, it doesnt open the link in it, but if i right click it and open it in a new tab, it works perfectly, do you guys know why is that ?
here is my exemple :
<div class="toto">
<a id="tutu" href="https://www.google.com" >my cocorico</a>
<div>
cocorico
</div>
</div>
here is a jsfiddle: https://jsfiddle.net/mog8zf3t/5/
This issue is caused by using jsfiddle rather than your html.
The code runs in an iframe on jsfiddle and Google have specifically blocked you from being able to do this by setting 'X-Frame-Options' to 'sameorigin'
Either try running the code on your local machine or pick a different website which will allow you to display it in an iframe.
function go_to_href(href){
window.open(href,'_blank')
}
.toto{
background: grey;
color: white;
text-align: center;
font-size: 1em;
}
.toto a {
display:block;
}
<div class="toto" onClick="go_to_href('https://www.google.com')">
<a id="tutu" href="">my cocorico</a>
<div class="eps-Chip-content">
cocorico
</div>
</div>
Thank you all for your answers, i found the problem, and it was in my js, i had a event.preventDefault(); on the click of the anchor tag, and that's why it wasn't working. take it of and it works perfectly.
here is where i found my answer : https://api.jquery.com/event.preventdefault/
The reason is cause of frames and iframes. Two things.1 is same thing as #hairmot said. sameorigin.
But second reason is when you have your main site an https site like https://jsfiddle.net/mog8zf3t/7/ you cant have http links there. So you cant for example open an http://jsfiddle.net link on that page. So in real time usage you should consider both.
So in order to observe the reason this is what you can do. open inspect element on your browser go to console section. try to click on link and check the error.
for the fiddlejs code you provide the error is cause of same origin
problem ( the link you provide is not from same origin as the main
site).
In my case I had data-toggle="buttons" in the surrounding <div> which I discovered after a few frustrating hours. Posting as an answer as it may be helpful for someone.
All day long I am trying to find the source of the following problem.
I am using this HTML:
<div class="sharebox">
<a class="shlink tooltipS" title="trumpa nuoroda į šį puslapį" href="http://www.klaustukai.lt/5"></a>
<a class="shprint tooltipS" title="spausdinti" href="javascript:window.print();"></a>
<a class="shfb tooltipS" title="dalintis Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shgp tooltipS" title="dalintis Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shtw tooltipS" title="dalintis Twitter" href="https://www.twitter.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
</div>
with this CSS:
.shlink, .shprint, .shfb, .shgp, .shtw {
position:absolute;
display:inline-block;
background:url(http://www.klaustukai.lt/qa-theme/kt/elements.png) no-repeat 0 0;
border:0;
height:16px;
width:16px;
}
.shlink {background-position:-2px -250px;left:4px;top:5px;}
.shprint {background-position:-22px -250px;left:27px;top:5px;}
.shfb {background-position:-40px -250px;left:50px;top:5px;}
.shgp {background-position:-58px -250px;left:73px;top:5px;}
.shtw {background-position:-76px -250px;left:96px;top:5px;}
.shlinktxt {display:block;width:115px;margin-top:30px;}
.shlinktxt input {font-size:10px;color:#555;width:100%;}
where elements.png holds the graphics for the background. Nothing special, nothing fancy. And works for years in all browsers.
The weird thing: When I do a test in a separate test.html it works fine, even in Firefox 27.0.1. But having the exact same code in this forum: klaustukai.lt will not show the google plus button class .shgp.
This happenend after the last update of Firefox to version 27.0.1. Before it worked! This is why I think it might be a Firefox bug. In Chrome and Internet Explorer displaying the button works as expected:
Firefox 27.0.1
What I see from the Firefox developer tool Box Model is that the .shgp element has height:0 and width:0 - it also seems to have lost position, the indicator shows it now top left on the website.
I also tried to reposition the sharebox, I disabled javascript, same problem, it is always the .shgp anchor that fails.
When testing, I realized that if I save the HTML page locally and load it again in the browser, the button is displayed correctly. Even more confusing.
This is such a weird issue for me. Who knows what is causing this behaviour? And how can the .shgp anchor be displayed correctly?
Your help is very much appreciated.
Found the source of the problem!
The culprit has been the Addon Adblock Plus that is blocking the google plus anchor!
If you disable the addon the button appears.
Cannot believe... but now everything gets more clear. I installed Adblock Plus on Chrome and the button disappeared as well. Good to know that it is not a Firefox bug.
In my project all my anchor tags are working perfectly in IE and Chrome but none of them are not working in Safari browser.
below is my tag.
<a id="btnNewCompany" href="#" onclick="btnNewCompany_OnClick()"
runat="server"> Add Company </a>
From the above i am calling the btnNewCompany_ OnClick() javascript.
function btnNewCompany_OnClick() {
$get('btnEdit').click(); -----> onserverclick event
}
Can ay one please help me why Anchors are not working in Safari?
I think in asp.net webforms onclick will look for that method in the server side code, try changing it to OnClientClick instead
If #thebiffboff isn't right, try declaring it like this:
btnNewCompany_OnClick = function() {
}
My html anchor is as follows.
<a name="template-8"/>
<h4 class="template" id="template-8">A title</h4>
As far as I know the browser should skip to the element with a matching name or id attribute.
When I type in the url http://my.site.com/templates#template-8 safari jumps down the page as expected.
However when linking as below the anchor does nothing. Chrome, Opera, IE7 and Firefox all work.
A link
Safari is version 5.0, could this be a safari bug?
The problem was I had a redirect header in the page I was linking to.
Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.
If you are having trouble with safari anchors disable any redirects.
For me, I simply had to change
http://domain.com/page#myanchor
to
http://domain.com/page/#myanchor
I just ran into the same issue and found your post while searching - obviously you've fixed this since it was back in 2010 and but figured I would post what I found in case someone else finds this. :)
I'm using htaccess to redirect my url from mydomaincom/index.php to mydomaincom/ and found that my nav didn't work in Safari since my href addresses where index.php#value and Safari v5 wouldn't carry over the anchor links.
Rather than turn off my redirect I just changed the urls to point to mydomaincom/#value. Not only did this work great for all browsers but it also made my page quicker (not yet sure how but will search this now :))
There are two side issues I see, which aren't the cause (since you found the problem already) but probably don't help:
Self-closing <a> tag. You can't self-close tags that are supposed to have end tags, it should be: <a name="template-8"></a>.
The name and id attributes share the same "namespace", so you cannot have the same value for a name and id attribute. All browsers from the past 10 years support anchors on IDs, so scrap that useless link tag.
It has not worked with the previously proposed solutions, it has worked for me to create a redirection using javascript in the following way.
<!-- <a href="#first-block"> -->
<a href="javascript:redirection('first-block')">
function redirection(destination){
window.location.href = "example.com/page.html#" + destination;
}
I leave it here in case someone serves you in the future.
To fix an anchor tag in Safari. I proceed this way :
A tag
And on my css file :
.btn{
display:block;
width:100%;
height:100%;
}
The important thing is for some reason, sometimes Safari needs to see your link as a block, and it can be useful if you create a list, with some links inside.
Example :
<ul>
<li>A tag</li>
<li>A tag</li>
</ul>
Works for Safari 6+