I've recently added an anchor tag to our homepage and it works fine on desktop but on mobile the link is not working.
I've searched for answers that do not involve adding additional Java or CSS amends (I do not have the ability to make those changes). Is there anything via the html that can ensure this works without me having to wait for one of our developers to investigate (lack of resource is killing me right now).
<a class="btn btn-lg navbar-btn btn-dollar" href="#works">See how it works</a>
I've added the corresponding id to a <div id="works"> further down the page.
Related
I added a new class in the custom CSS file in a Django app and changed the HTML accordingly.
The problem is that the class is getting applied to let's say a button but the page is not showing the changes.
For example:
Please check the below snippet
<button type="button" class="btn btn-primary btn-lg">Text</button>
I added a new class .btn-custom in custom.css and changed the HTML file as well.
Now after the refresh, the above tag changed to
<button type="button" class="btn btn-custom btn-lg">Text</button>
But the style is not applied to the page.
I check the custom CSS file by opening the source and the changes I made are there.
After 2 to 3 hrs the changes getting reflected.
I tried hard refresh as well cache clearing and every other option related to cache
The behavior consists of your HTML being successfully changed but your CSS not changed. This indicates the presence of a cache. It can be either the browser cache or server-cache.
I see that you have ruled out caching issues, but from your description it seems that you have ruled out browser cache issues. However, Django has a cache mechanism on its own, which caches static files. And the cache of static files can be turned off.
So i am editing a bootstrap template(it's a free template) for my project. I have removed the images and placed my own. but the problem is that my own image doesn't load, instead the previous background image is being displayed. How is this possible ? that image doesn't have existence and still it's appearing. Also previously i intended to do this
Go Back
but then I changed my mind and instead did this
<button class="btn btn-warning" onclick="history.go(-1);" role="button">Go Back </button>
the problem again is the same. the browser won't load the current code, instead it's loading previous code.
i did everything i could, i changed the browser, cleared cache and cookies, rewrote the codes saved it again and again...still won't get the desired result. what is the problem anyway ? i can't figure it out.
Have you tried clearing your chache? My advice would be to go into chrome dev tool and there is an option under the newtwork tab disable cache this will ensure you are always getting a fresh version when you have dev tool open.
I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).
These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.
My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.
How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?
This is my <noscript> tag, at the bottom of the page:
<noscript>
<div class="scriptError">
<h1>Javascript is disabled!</h1>
<div id="noScriptNotice">
<p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
</div>
</div>
</noscript>
Everything else (including links) is inside this div:
<div class="scriptedContent" style="display: none;">
<script>
//If scripting is enabled, display the site.
$(".scriptedContent").css("display", "block");
</script>
If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.
The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:
font-size: 0;
text-decoration: none;
That should do the trick of hiding the links, that is, if your CSS is affecting them at all.
If not, try to "right click > view source" of the page, and then view and compare the source with your own.
Alternative if that does not work:
Try making your links (in the HTML code) something along the lines of:
Text
and seeing if that stops them from overriding your Styling.
Within a standard SharePoint publishing site, editing the homepage, entering lots of content and then placing a link to the top of the page using the following anchor link doesn't work:
back to top
Clicking on the link above does nothing. However, other named anchors (such as
<a name="test"></a>
and
work fine.
Has anyone come across this issue before?
<a href="#" /> is not supposed to bring you to the top of the page. It targets the empty fragment and basically neuters the default behavior of the link most of the time.
I suspect your <a name="#" /> solution is relying on an artifact of your browsers, because an anchor named # should be called ## (or more probably #%23) in the href attribute of the link.
Since you have to create an anchor anyway, it might be best to give it a meaningful name like TOP and target it using back to top.
I've gotten around it by placing
<a name="#"></a>
at the top of the page, but it would be good to find out why it doesn't work normally, and if there are any other nicer solutions out there.
For example, the link below triggers something in jQuery but does not go to another page, I used this method a while back ago.
<a class="trigger" href="#"> Click Me </a>
Notice theres a just a hash tag there, and usually causes the page to jump when clicked on, right? [I think]. It is only for interactive stuff, doesn't go to another page or anything else. I see a lot of developers do this.
I feel like its the wrong thing to do though. Is there another recommended way to do this without using HTML attributes a way where it is not suppose to be used?
Not using <button> ether because the link would not be a button.
Maybe without a hash?
<a class="trigger"> Click Me </a>
& in CSS:
.trigger {
cursor: pointer;
}
So the user still knows its for something that you should click?
I like to make such links return false on click, that way, clicking them doesn't result in any jumps.
With jQuery that would be as easy as
$(selector).click(function(e)
{
e.preventDefault();
});
or in the HTML as such
<a class="trigger" onclick="return false;" href=""> Click Me </a>
Don't remove that hash.
It's true that under (modern, at least) versions of Firefox, Chrome, Opera, and Safari, an anchor tag with an empty href (i.e. href="", not a missing href) will display as a normal link that simply doesn't respond when clicked, unlike the hash-href which jumps to the top of the page. Internet Explorer, however, takes a different approach.
When a link without an href is clicked in Internet Explorer, it responds by opening your Desktop directory in Windows Explorer. I got this response in IE7 and IE8 (IE6 just crashed, though that could be unrelated - I've had issues with that VM).
If a user browses your site in IE with JavaScript disabled, do you really want all your links to open their Desktop? I think not.
Also important is that removing the href attribute from an anchor element entirely causes it to be rendered as plain text - i.e. it doesn't act as a link, you can't tab to it, etc. Not good.
As for controlling the behaviour of the link when clicked, #partoa has the right, but possibly incomplete answer.
I'm no JavaScript guru by any stretch of the imagination,but from what I've read you don't want to use return false; for this. According to this article I came across a while ago, return false; has some additional behaviours you might not actually want. It recommends you just use preventDefault to stop the links normal behaviours (i.e. navigating to a new resource). Read over that link to see what return false; really does before deciding how you want to handle it.
For interactive purposes:
Removing the href="#" from your tag will also remove it from the default tab order, so users browsing with the keyboard will not be able to activate your link.
I recommend keeping href="#" in your tag and adding return false to the end of the script that is run by the link.
I can't see a reason why you would want to use an A tag for style purposes.
in konqueror (kde browser), you can disable pointers to change. Then your solution fails. But in general, I'm agree with you.