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>
Related
Good night, I will be quick in my explanation. I need to get information from the element clicked on the site, for example, I want to get the css information from the elements I clicked, however, they can be div, button, li, etc. Getting the information is not a problem, the problem is being to identify which was the element that received the click, because it can have any id or any class. They are not fixed ids or classes. I'm using this js code but it's not working. He's giving me the html of the whole body.
$("*").click(function() {
console.log($(this).html());
});
Can someone help me please?
Att
if I don't get you wrong, you can view the properties of any element I click on the body thanks to event bubbling.
document.getElementById("body").addEventListener("click", function(e) {
console.log(e.target)
})
<body id="body">
<div class="container">
<div>
<h5>
<button>
ı am a button
</button>
</h5>
</div>
</div>
<div class="container-fluid">
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
For a project i must include an HTML file into a div. This HTML file contains a menu that will be displayed on each page of the website. (To make it easier to edit the menu if we need to add something in it)
I include this file in my div with jQuery (.load). It works correctly on Firefox and IE. The menu displays well and I can click on the "parents" to show children.
But with Chrome, when I click the parent, the page refresh. It doesn't do anything else that refreshing the page without showing the children. (Sometimes when we spam click the menu, it opens, I don't know why and how)
But when I paste the code for the menu directly in my main HTML file, the menu works fine on all browsers.
Did you have any idea of why my menu doesn't want to work when it's included and used with Chrome ?
The include in my main html :
<div id="menuLeftLoad"></div>
<script>
$("#menuLeftLoad").load("Menuleft.html");
</script>
Here is the MenuLeft.html file :
<ul class="nav nav-pills nav-stacked">
<li class="parent"><i class="fa fa-bars"></i> <span>Tables</span>
<ul class="children">
<li id="basic-tables">Basic Tables</li>
<li id="data-tables">Data Tables</li>
</ul>
</li>
</ul>
Here is a link to see this problem in real: http://allanresin2.tk/testui/index.html
EDIT (Solution) :
The solution has been founded by #CarstenLøvboAndersen .
I had a JS file (custom.js) that acted on my menu before everything else, so it caused problems when i wanted to click in the menu.
So, i replaced this :
jQuery('.leftpanel .nav .parent > a').click(function()
With this :
jQuery(document).on('click','.leftpanel .nav .parent > a',function()
So now, we have this function that wait for my click to execute. Before, the function was executed while the menu had not even finished loading.
Thanks to all people that tried to help me
As far as I can see in your code, there is no click event for the a tags.
So what you need is a click handler, that prevents the default behaviour of the a tag and loads the html file instead.
Here you have some dummy code:
main.html:
<main>
<h1>Hi i am main</h1>
<a class="clicker" href="new.html">New</a>
<div id="foo"></div>
</main>
<script>
$('.clicker').on('click', function (evt) {
$("#foo").load("new.html");
return false;
});
</script>
new.html:
<div class="new">
<p>I am new!</p>
</div>
I have 2 div's, the first is just a link,
<div id="click1" class="grid-66 mobile-grid-100 user-photo-tag-click" style="display:block" onclick="replace()"> CLICK AND SHOW TAGS
</div>
The second is a list of photo tags,
<div id="click2" class="grid-66 mobile-grid-100 user-photo-tag" style="display:none">
<ul>
<li>RACE SHOP
</li>
<li>AAA
</li>
<li>77
</li>
</ul>
</div>
I am trying to set it up so that when the link is clicked, it disappears and the photo tags show in its place. I have started a JSFIDDLE here, https://jsfiddle.net/patricksharer/g43t1bnh/ so that my code can be viewed cleanly. My javascript function doesnt seem to be working. Can somone please take a look and tell me why? Thanks
I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".
Please help me with this......soon
/**************Script used to open Different menu div on page*********************/
$(".menu a").click(function(){
var id = $(this).attr('class');
id = id.split('-');
$("#menu-container .content").hide();
$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
return false;
});
<div class="menu-wrapper">
<ul class="menu">
<li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>
<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>
<li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
This will work
<a target="_blank" href="yourlink">Link</a>
In your case
<div class="menu-wrapper">
<ul class="menu">
<li><a target="_blank" class="show-1" href="#">About Us</a></li> <li><a target="_blank" class="show-2" href="#">Rooms</a></li>
<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
<li><a target="_blank" class="show-4" href="#">Gallery</a></li>
<li><a target="_blank" class="show-5" href="#">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.
What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.
Please Try this fiddle
Demo
Just make minor change in your a tag
<a href="#" target="_blank">
You can give divs id:
<div id="show-1">About Us Content</div>
And create hyperlinks like:
<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>
This will open your div directly in new tab.
The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.
Regarding your code, the
... href="your new page link here"
that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on
it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here
But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.
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>