I have two divs and I want to show only one of the divs based on clicking a list element. I wrote the following code. Its not working. Its always showing me Div1 (or whichever one I make visible initially). How do I make it show me appropriate div? Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function showPane(paneId) {
document.getElementById("Div1").style.display="none";
document.getElementById("Div2").style.display="none";
document.getElementById(paneId).style.display="block";
}
</script>
</head>
<body onload="showPane('Div1');">
<ul id="nav">
<li>Div1</li>
<li>Div2</li>
</ul>
<div id="Div1">
<h3>This is Div1</h3>
</div>
<div id="Div2">
<h3>This is Div2</h3>
</div>
</body>
</html>
Because the list items are <a> which redirect you to the same page. than the body onload shows div1.
Add href="javascript:;" to the <a> to prevent this.
Or add the event arg to the function:
<a href="" onclick="showPane(event,'Div1')">
and in the function:
function showPane(event,paneId) {
event.preventDefault();
//rest of code
}
To prevent the default behavior of the MouseClick Event. http://codepen.io/yardenst/pen/cKqIy
Just another variation to the already answered
<li><a href="javascript:showPane('Div1');" >Div1</a></li>
<li>Div2</li>
You can add "return false" to the onclick to prevent it from following the link:
onclick="showPane('Div1'); return false;"
you should edit href="javascript:;"
here is your problem:
<li><a href=""
make those to be
<li><a href="#"
when you do
href=""
that is actually a link to the current page you are on, which triggers the body onload and activates div1 right after the click event.
It shows you div2 but then it quickly gets over-written by div1 again.(Try clicking the link for div2 very fast.) This is because when you click the link, the entire page re-loads and the onload event gets triggered and shows you Div1. To overcome this, use buttons or some other element which does not cause a page reload.
You need to set # to href. Otherwise the page will get reload
<ul id="nav">
<li>Div1</li>
<li>Div2</li>
</ul>
Related
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
I've 3 tabs that use javascript to show content when they are clicked:
<ul class="tab">
<li>12 Weeks</li>
<li>4 Weeks</li>
<li>1 Week</li>
</ul>
Divs are placed in my html code as follows:
<div id="12_Weeks" class="tabcontent"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
I'd like the first tab to be open when the page is loaded and have tried the following code:
$( document ).ready(function() {
// Handler for .ready() called.
$("#12_Weeks").trigger('click');
});
however this doesn't seem to do the trick, anyone know what I'm doing wrong here, am sure it's super simple!?
Are you sure there is an element with ID #12_weeks on your page?
It is not present in your sample code.
Your trigger click has tab content but it will be in tab title. See flowing code.
$( document ).ready(function() {
// Handler for .ready() called.
$('ul#tab li:first > a.tablinks').trigger('click');
});
Or
you can user this under your hide execute code. $("#12_Weeks").show('');
Seems I needed to add openCity("12_Weeks") in my javascript function, they seem to have left this bit out at W3schools, thanks all for helping!
You could use style="display: block;" directly in your default <div></div> tag, like this:
<div id="12_Weeks" class="tabcontent" style="display: block;"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
When a different Tab is clicked, the style="display: none;" and the current clicked Tab is given style="display: block;"
This should do the trick.
I have created this simple HTML code but every time I click the button 'push it' it takes me to the link of the above movie. I am not understanding what is happening and it is getting on my nerves. If I change the location of the button, clicking it will go to the link of the above movie. For example if I put this button below Platoon movie clicking it will take me to the Platoon movie page whereas I dont want this button to do anything.
PLZ HELP ME
THANKS
<!DOCTYPE html>
<html>
<head>
<title>Movies List</title>
</head>
<body>
<h1>List of Movies</h1>
<ol>
<li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune"></>Jodorowsky's Dune</li>
<li><a href="http://en.wikipedia.org/wiki/Platoon_(film)"></>Platoon</li>
<li><a href="http://en.wikipedia.org/wiki/Raging_Bull"></>Raging Bull</li>
<li><a href="http://en.wikipedia.org/wiki/Stay_(2005_film)"></>Stay</li>
<li><a href="http://en.wikipedia.org/wiki/The_Equalizer_(film)"></>The Equlizer</li>
</ol>
<button>push it</button>
</body>
</html>
It is happening because you don't closed the tag.
remove the </> before the movie name, and add </a> after the movie name, doing this, the tag will be only affecting the movie name, if you don't close the tag it will be linking everything after it starts (in your case the button).
You should close the anchor tag.
Like this one :
<li>Jodorowsky's Dune</li>
Please see Demo
You haven't closed your anchor tags. Anchor tags are closed using </a> not </>.
Example: Anchor Text
<ol>
<li>Jodorowsky's Dune</li>
<li>Platoon</li>
<li>Raging Bull</li>
<li>Stay</li>
<li>The Equlizer</li>
</ol>
I hope this helps. Happy coding!
You forget to close your "a" tag
<li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune"></>Jodorowsky's Dune</li>
Change to:
<li>Jodorowsky's Dune</li>
I have a script here, and it works amazing, except for one small detail. It basically runs as click function that fades in and out certain DIVs on the click of a link.
The problem is, however, that when you click ANYWHERE on the page, it removes the DIV and leaves an empty content area until you click one of the links. Obviously this is a problem.
I can't use the exact code I'm using for NDA reasons, but here is same setup I am using with just some plain text in the divs.
Just click the links to see the functionality, and then click anywhere else on the page (in the div, in the white space, whatever) and watch the div just disappear. I'm know that that is what the JavaScript is calling, but I don't know how to disable the click in the divs so this doesn't happen. Also, how to do that so it doesn't disable the link that are within that div.
Any help is greatly appreciated. This website is a life saver.
This is the original code I got off of this site edited to show my very basic layout. Basically a bunch of links that are inline and when clicked, they change a section of DIVS to another section of divs:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<a href="#" onclick="return false;" class="toggle" id="toggle1" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle2" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle3" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle4" style="display: inline;">
text here</a>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggleh" id="toggle2h" style="display: none;">
some description in here I suppose #2dsfds sdfdsfa sdf
</div>
<div class="toggleh" id="toggle3h" style="display: none;">
some description in here I suppose #3dffdfasdfdsfdfasf
</div>
<div class="toggleh" id="toggle4h" style="display: none;">
some description in here I suppose #4 dfdafa
</div>
</div>
</body>
</html>
$('*').click(... sets up a click handler for ALL elements (*). You can remove this function.
That's what this code does:
$('*').click(function(e) {
if (this.id != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
It selects all of the elements in the document (including html and head and body and attaches a click handler to it. When you click on the document, it compares the id, which likely is empty and then fades out the displayed div.
Demo without that code.
Not the real expert
But this seems to be the faulty part
$('*').click(function(e) {...............}
New to jQuery/javascript here and looking for a little help. I am writing a site with a simple navigation menu. It works like this. A user clicks a link in the menu, the link is set to an 'active' colour and the appropriate section is set from hidden to visible ( all of the sections are set to hidden when the document loads ). When the user clicks another link that link is set to the active color, the others are set to the default colour, any visible sections are set to hidden and the relevant section is set to visible. This works just fine, but I used individual element and its very ugly with a lot of repetition. I am in the process of rewriting the code to use .classes and be a little bit more flexible with less repeated code.
The Question I have is this: How do I tell it what section to show?
User clicks on a.linkfornavigation, colour is set, section.blah are set to hidden, section#thisiswhatyouwant is set to visible. But how do I tell a.linkfornavigation where it should point? each section has a unique #id ( I guess so could the link they click ) but how do I get the #id of the relevant linked section from the clicked link?
Any help at all would be very much appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/linkthinger-hybrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/linkthinger-hybrid.js" type="text/javascript"></script>
</head>
<body>
<section id="links">
<a class="thinger" href="#">Thing One</a>
<a class="thinger" href="#">Thing Two</a>
<a class="thinger" href="#">Thing Three</a>
<a class="thinger" href="#">Thing Four</a>
<a class="thinger" href="#">Thing Five</a>
</section>
<section id="things">
<section id="thingone" class="thing">I am thing one.</section>
<section id="thingtwo" class="thing">I am thing two.</section>
<section id="thingthree" class="thing">I am thing three.</section>
<section id="thingfour" class="thing">I am thing four.</section>
<section id="thingfive" class="thing">I am thing five.</section>
</section>
</body>
javascript:
$(document).ready(function(){
// Hides .thing class as soon as the DOM is ready.
// $('section.thing').hide(0);
// Highlight selected link & set all others to default.
$('#links a').click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
});
// Shows one section and hides all others on clicking the noted link.
$('a.thinger').click(function() {
$('section.thing').hide(0);
$('#thingone').fadeIn('slow');
return false;
});
})
CSS:
a {
color: darkgreen;
}
.selected {
color: red;
}
section.thing {
background-color: blue;
}
Give the links proper href values. In this case it would be the IDs of the elements:
<a class="thinger" href="#thingone">Thing One</a>
<a class="thinger" href="#thingtwo">Thing Two</a>
....
The advantage is that clicking on the links will make the browser jump to the corresponding element, even if JavaScript is disabled.
Then you access this attribute and use it as ID selector for jQuery:
$('a.thinger').click(function() {
$('section.thing').hide(0);
$($(this).attr('href')).fadeIn('slow');
return false;
});
To get the id of a clicked element do: this.id
To tell it what section to open you can add some data- attribute to determine it:
<section id="links">
<a class="thinger" href="#" data-open="thingone">Thing One</a>
<a class="thinger" href="#" data-open="thingtwo">Thing Two</a>
<a class="thinger" href="#" data-open="thingthree">Thing Three</a>
<a class="thinger" href="#" data-open="thingfour">Thing Four</a>
<a class="thinger" href="#" data-open="thingfive">Thing Five</a>
</section>
JS:
$('#links a').click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
$('.thing').hide();
$("#"+$(this).data('open')).show();
});
Fiddle Demo: http://jsfiddle.net/maniator/sxrap/
Change this line:
$('#thingone').fadeIn('slow');
To this:
$('#things .thing').eq($(this).index('a.thinger')).fadeIn('slow');
It works because $(this).index('a.thinger') returns an integer index of the anchor clicked, and .eq(i) returns a jQuery object containing the ith element from the JQuery object it's called on.
jQuery Docs:
.index()
.eq()
alert($(this).attr('id'); if you are staying true to jQuery