Making dropdown menu in html & css with javascript or jquery - javascript

This is my problem in my <li class="drop-down"></li> then my position in my page is in bottom then when I click that -> drop-down <- then my page is going on top how can i fix that problem, my navigation bar is fixed position.

href="#"
casuses that issue for you. Try linking it to an actual item in your page. Or what you could do:
href="#!"
or a third option:
href="#" class="stop"
with jQuery
$('.stop').click(function(e) {
e.preventDefault();
});

It is the normal behaviour of any browser, that it will navigate to the top of your page if you click on an anchor that's href ttirbute is a hash "#".
If you want to prevent this behaviour, please leve the hash away, or prevent it by using Javascript.

You can use the following without JavaScript
<a href="javascript:;>My link</a>
Or
My link

Related

<a href> Anchor remains in URL and in page after refreshing

I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E
http://localhost/public/product/1#mod1
The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:
.overlay:target
is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.
(?)
<div id="mod{{$key}}" class="overlay">
content
</div>
Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.
You cannot use href with angularJS because it will misdirect the target link. AngularJS is a markup language for HTML, it is not HTML. Because angularJS is not HTML, we're provided a special set of directives to write angularJS values inline into HTML markup. The answer to solve your issue would be to replace the href tag in the anchor element with the angularJS directive ngHref. You can find more information about how to use ngHref and other directives at the link below. Good luck.
https://docs.angularjs.org/api/ng/directive/ngHref
Well I wanted to purely solve this without JS, but here's what I did, HTML:
<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
Then replaced the CSS of overlay:target to -> overlay:active, and implemented JS:
var curmod;
$('a.button').on('click', function(e)
{
curmod = document.getElementById($(this).attr('ng-href'));
$(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
$(curmod).removeClass('active');
curmod = null;
});

How to disable URL tooltip (status bar)?

When I click on a link (or hover with a mouse), the URL shows up at the bottom of the screen. That's the default behaviour in Firefox.
How can I prevent this ?
I'm making a website for tactile interfaces.
Thanks !
It would be better if you are using any other tag other than <a> if suppose you are using a
<div id='idofdiv'> tag
the query will be
$('#idofdiv').click(function(){
window.open('www.google.com');
});
hope this helps!!
Browsers don`t show what object will do onClick, so try this:
<div onclick="location.href ='http://www.google.com';"> click me </div>
Or you can use span which is inline element:
<span onclick="location.href ='http://www.google.com';"> click me </span>
you can achieve this using jquery,
first inlcude the jquery library in your page then
write the script in the page
$(function(){
$('[data-url]') //select all elements having data-url
.click(function(e){ e.preventDefault();
window.location.href= $(this).attr('data-url')})
})
and in the html
<span data-url="#/inbox" >Go to inbox</span>
<a data-url="mydraft.html">Drafts</a>
This is not possible and CSS is nowhere here, you just cannot do it with CSS, well you can use something like this to spoof the <a> link but I suggest you don't use all this, without any specific reason, anyways they'll find the URL from the source page
Spoofing
Demo
Note: Actually just checked, the demo is not working on the fiddle page but just make a local .html page and it will work

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Hide anchors using jQuery

I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...Back to Top</div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...Back to Top</div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
I've also tried prepending an extra character to all anchor names to 'disable' them, but IE won't change the names using attr("name"). The only real manipulation it's letting me do is remove().
Try doing it this way:
$(".slideShowSlide").each(function() {
$(this).children().first().hide();
});
Or even this way:
$(".slideShowSlide").each(function() {
$(this).children(':first').hide();
});

Can I create an html link to the current page without refreshing to the top? [duplicate]

This question already has answers here:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
(16 answers)
Closed 8 years ago.
I have a javascript fade function that I implemented into a banner div so that when it is clicked, the current banner image is faded into another one. The html link tag calling the function is as follows:
<a href="#" onclick="fade('bannerDiv');">
<div id="bannerDiv">
<img src="banner_image.gif" />
</div>
</a>
The problem is, the banner is located somewhat towards the middle of the page (middle between top and bottom, not left and right) and when I click on the banner to change the image, it brings me back to the top of the page. Is there a way I can fix this?
The proper way is to make the browser not evaluate the href parameter at all - javascript:void(0) and similar targets are an ugly hack.
You can simply return false in your onclick event:
<a href="#" onclick="fade('bannerDiv'); return false;">
It would be a good idea to put the actual link to the current file in the href so it doesn't cause any problems if people don't have JavaScript enabled. However, # is fine for that, too.
Use javascript:void(0) instead of #.
<a href="javascript:void(0)" onclick="fade('bannerDiv');">
<div id="bannerDiv">
<img src="banner_image.gif" />
</div>
</a>
Clicking on the link will execute the void function and the user will not be taken anywhere.

Categories

Resources