Develop Reference

how to call or display a div by changing url using href?

i am trying to show a div which is currently hide and inside body tag.by changing url using anchor tag attribute href.Like below---
<a id="ai" href="managevendors" class="tablink" onclick="openCity()">Manage Vendors
</a>
<div class="w3-container city" style="display: none;" id="managevendors">
<h1>hi,how are you</h1>
</div>
when i click on this anchor tag my url will definitely changed.and based on url i wants to display a div.
my js code...
function openCity() {
if (window.location.hash == "managevendors") {
$("#managevendors").show();
}
}
i dont know why this is not working.but i teide with different way like below..
<a id="ai" href="#managevendors" class="tablink" onclick="openCity('managevendors')">Manage Vendors
</a>
and js code.....
function openCity()
{
if (window.location.hash == "#managevendors") {
$("#managevendors").show();
}
}
but i dont want the # sing,how can i solve it.help me experience brothers.thanks in advance.

You must use the hash if you expect the navigation to work. Once you do that, you don't need to check for it, you can just show the section:
$("#ai").on("click", openCity);
function openCity() {
// The only reason this code is running is because the link was clicked.
// No need to test for it.
$("#managevendors").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- You have to include the hash in the href for navigation to work -->
<a id="ai" href="#managevendors" class="tablink">Manage Vendors
</a>
<div class="w3-container city" style="display: none;" id="managevendors">
<h1>hi,how are you</h1>
</div>

I think the problem here is that you are using an anchor tag when you should be using a button. The reason the first way is not working is due to the page refreshing when you click the link.
Try changing your <a> to a <button>

From what I understand, you most likely need the href="#xyz" with a hash. This will keep clientside logic active without trying to solve the url and take a detour to the server for nothing. If you're going to capture that part, keep it local.
I suggest to remove the onclick handler from HTML. To capture the link you can use jQuery to keep your HTML "clean". If you must, for some odd reason, by all means you can reference onclick="openCity(this)", so the element you click on is passed directly to openCity.
// vanilla
function openCity(element){
var href = element.getAttribute('href'), // expecting a hash here
id = href.substr(1), // remove the hash
target = document.getElementById(id);
target.className += " active";
return false;
}
As Scott suggests with jQuery:
//$('.tablink').on('click', openCity);
$('.tablink[href^="#"]').on('click', openCity);
Then the function can be made dynamic by referencing the href from the clicked element:
function openCity(ev){
var el = $(ev.currentTarget),
id = el.prop('href'), // expecting a hash here
target = $(id);
// since you're providing both with and without hash, the default behaviour is to follow the link, unless referenced with a hash
ev.preventDefault();
target.addClass('active');
}
If the id was not found on the page, this will void silently.
Now if you want to work with the url as entry point, note that this will only happen on load event => share a link and someone clicks on it (with the #xyz attached) or type directly in the address bar.
// 1. bind the event
$(window).load(function(){
/*loadCity defined here or outside*/
loadCity();
});
// 2. define what happens
function loadCity(){
var id = window.location.hash, // expecting a hash here
target = $(id);
target.addClass('active');
}
Since this solution only solves state of an element, the actual show/hide part can be made in CSS. Very simple as you probably already did or with animations, transitions and so on.
.city { display: none; }
.city.active { display: block; }

JQuery built anchor tag will not redirect

Here is the code I am using to build the anchor tag and content within.
$('div#right-slide').html("Click Here for Limited</h1>Time Specials</h1>");
I am sure there is a much better way to go about this but I am new and am just trying to get it to work right now. When I hover over the text, the bottom of the browser shows the addrress for the link but when I click, nothing happens. Can someone point me in the direction of the error? Thanks for any help.

jQuery allows you to avoid string concatenation and do this much more cleanly. For example:
function specialsLink(text, url) {
var $h1 = $('<h1 />').text(text);
var $a = $('<a />').attr('href', url).html($h1);
return $a;
}
$('div#right-slide')
.append(specialsLink('Click Here for Limited',
'http://example.com/limited-specials/'))
.append(specialsLink('Time Specials',
'http://example.com/limited-specials/'));
Fiddle: http://jsfiddle.net/klenwell/CrP3q/

.click jQuery function not working

I've never run into this problem... can someone help me with this?
my ".click" jQuery function is not calling. I'm confident that it's my syntax, but I cannot find the mistake!
Working jsFiddle here: http://jsfiddle.net/cQ43Z/
HTML:
<a id = 'emailoff' href = "" target = "_blank">
<img id= 'email-btn' src="http://www.clker.com/cliparts/2/a/r/5/G/O/save-button-png-hi.png"/>
</a>
Javascript:
$('#email-btn').click(function(){
console.log('email btn clicked');
});

Your img tag has an id of save-btn while you are attaching the click event to email-btn. Either you didn't post all your code or you named your button wrong.
EDIT: Now the problem is that your a tag is redirecting the user off the page. If you don't want that to happen then you should set the href attribute to javascript:;.
<a id = 'emailoff' href = "javascript:;">
You don't need the target attribute either. And unless you are using the a tag for something else, it is entirely unnecessary itself.

Open new window through Javascript

I have some simple code to open reddit, but i need it to open in a new window.
tried some different approaches but can't get any to work. Any idea what to add to below code?
<img src="http://www.reddit.com/static/spreddit7.gif" alt="submit to reddit" border="0" />

You obviously want to suppress the standard link behaviour by adding
return false;
to the onclick handler.
label
Consider putting that logic in a separate click handling function
function handleClick(evt) {
var url = '' // build your url here
window.open(url);
evt.target.preventDefault();
}
And add it to your link with
element.addEventListener('click', handleClick);

Try this
window.open("http://www.reddit.com/submit?url="+encodeURIComponent(window.location))
Check this link for further information

Javascript help, toggle text keeps jumping back to top of page

I hope someone can help with this issue, I've tried many scripts and workarounds, but can't get this simple thing to work. As the title has it, how can I make my text NOT jump to the top of the page. Here is the code:
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
ev.preventDefault();
return false;
}
}
</script>
Click to toggle visibility.</p>
<div id="toggleMe" style="visibility: hidden;"> Something to Hide and show.
Display collapses it's layout while visibility will keep it's layout.
All in the same html file. I read what outhers did and I tried the
ev.preventDefault();
return false;
code at the end of the function, but nothing.

Change the href attribute in the A tag to: javascript:; instead of #
So use this to create your javascript enabled anchor:
<a href="javascript:;">
added (background info):
The # character indicates a bookmark. By omitting the name of the bookmark e.g. #bottom the browser considers the bookmark as 'top of the page' thus scrolling to the top. Your problem does not have to do anything with bookmarks, however using # to define an empty link for a javascript enabling anchor (A) tags is not the way to go. You should use: javascript:; or javascript:void(0); to indicate that this is not a navigation anchor.

Or simply always return false, not just in the Else clause.