I want to open an anchor div on my website when a user surfs to a link without the # in the address bar. For example; when a user goes to www.website.com/nameofdiv it has to auto open the div with the same anchor tag name (www.website.com/#nameofdiv)
I use the following script to open and close anchor div's on my website:
function slideonlyone(thechosenone) {
$('.show').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeIn(500);
}
else {
$(this).fadeOut(500);
}
});
}
This is the HTML click event i am using:
link
I tried some stuff with the .htaccess and with the next script but it didnt worked.
window.location.href.replace(/#.*/,'');
I hope I explained it well enough and I hope someone can help me!
If you're calling that code from a click handler, make sure you return false from the click handler, or call event.preventDefault().
Related
I want to popup a message says that "you are not loged out" when user tries to close browser. I use bellow code for that.
var popupMessgae = true;
window.onbeforeunload = function() {
if(popupMessgae == true) {
popupMessgae = false;
return "Are you sure you want to leave?";
}
}
but it also popup message when I click on anchor tag and try to refresh page.I don't want that..There should be a way to handle this situation, please help me to know that.
Thank you
For the anchor tags you could try this in jQuery
$('a[name]').onclick( function(event) {
event.preventDefault()
}
As was suggested here Can I prevent onbeforeunload from being called when clicking on an anchor tag?
I need to have some of my navbar buttons redirect for instance back to my start page. It seems the smooth-scroller coding needs the menu items to direct to hashtag anchors for the menu items to function and this does work, but when I try to redirect to another page entirely, nothing happens. There is no error and there is no div covering the button.
A solution I saw on here involved adding a statement to the scroller code to disable the need for hashtags for specific external links, but I don't know how to code this and my template's code is dissimilar to the one mentioned in the thread. I would in other words need a code that states to do the regular actions onclick, as long as the button does not have the class "ext-link". See the link below for more specific details. One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
I'm not entirely sure the below is the right code, but it seems like it. How would I rewrite it to include an "if click and not class=ext-link" case so that I could enable external links from my site-root for my navbar?
jQuery('#scrollToContent').click(function(e){
e.preventDefault();
jQuery.scrollTo("#portfolio", 1000, { offset:-(jQuery('#header .top').height()), axis:'y' });
});
jQuery('.nav > li > a').click(function(e){
e.preventDefault();
jQuery.scrollTo(jQuery(this).attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
})
jQuery(window).scroll( function() {
//setHeaderBackground();
});
If I got this right you can modify the second click even handler with this code and it should work:
jQuery('.nav > li > a').click(function(e){
var $this = jQuery(this);
if (!$this.hasClass('ext-link')) {
e.preventDefault();
jQuery.scrollTo($this.attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
}
})
Hope this helps. :)
How can I hide URL from displaying when mouse hovers on a hyperlink?
Hyperlink
How can I hide URL from displaying in browser's bottom status bar when mouse hovers?
Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.
This way you can easily hide url when mouse hover on hyperlink.
Simply add one id on anchor link.
HTML
<a href="url" id='no-link'>Hyperlink</a>
Jquery code
$(document).ready(function () {
setTimeout(function () {
$('a[href]#no-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.open(href, '_blank');
}
});
});
}, 500);
});
Here is demo link https://jsfiddle.net/vipul09so/Lcryjga5/
you technically have window.status to make custom status bar messages. you can set it during an "onmouseover" event for that element and set the window.status to a blank string.. thats how we did it a long time ago however..
browsers these days prevent the modification of the status bar by default (as far as i know, firefox prevents it). so there is no guarantees as to this approach will do anything at all.
<button class="class" onclick="window.location.href='https://stackoverflow.com'">Visit StackOverflow</button>
OR
<button class="class" onclick="window.location.replace('https://stackoverflow.com')">Visit StackOverflow</button>
Just use onclick="location.href='#'"
just remove href attribute from a element. :)
I am using the script below on my wordpress sidebar menu and it works perfectly. However on some of the menu options I want to slide the div AND link to a page. I've worked on this all morning with no success. Can you please tell me what I need to add to this script to make it work? Thank you in advance for your help.
function slideonlyone(thechosenone) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);
} else {
$(this).slideUp(500);
}
}
);
}
The page I am referencing is: http://www.nicksardone.com/slide-down.php
The javascript in the question is a function that when a top level menu item is selected it slides the selected div down to show other links. The question is I want the top level menu option (Human resources) for example to slide the div down AND link to another page on the site. Hope that clarifies...
the question is not clear, what do you mean with "and link to page" ?
EDIT:
if your problem is that clicking on the div it works fine but clicking on the link doesn't work.
you have to call the slideonlyone function on the href property of the link passing as parameter the id of his parent div.
link this:
<a id="someID" href="javascript:slideonlyOne(MyParentDivID)">text</a>
but if you want that it opens another page:
function slideonlyone(thechosenone, url) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);window.open(url);
} else {
$(this).slideUp(500);
}
}
);
}
I have this HTML div with or withouth embeded content, I want to block right and left click.
So if the user clicks or right clicks nothing happens.
Can you do that with HTML/CSS/ Java Script ?
Basicly this is a question about breaking the rules, say you have an youtube embeded video in a div in html, how do you block the click from the user so that if he clicks the video he does not go to youtube dot com.
*note, i am not interested in youtube only, i just want a way to block clicks and right clicks in a div.
So take a much simple scenario:
In a basic HTML page, there is a div with absolute position and size, If the user clicks a link in that div I want it not to work, but if he clicks a link anywhere else on a page I want it to work.
Another way to do ignore the clicks is using css 'pointer-events'.
For instance:
div.style.pointerEvents = 'none'
OR
<div id="content" style="pointer-events:none;">
Use an overlay with a bigger DIV or use the following code
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Guess this would help you:
function disableClick(){
if(window.event.target.id && window.event.target.id=="myDiv"){
window.event.preventDefault();
}
}
document.onclick = disableClick;
document.oncontextmenu = disableClick;