I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
Related
I picked up HTML/CSS/Js a few days ago and I made my first very own website. I have this code that is a pop-up:
<div class="popupwindow">
<div class="popupbody">
<button class="closebtn">X</button>
<h3>Title</h3>
<p>Text</p>
</div>
</div>
And I have a menu with four buttons. The buttons look like so:
<ul>
<li class="menuone">button one</li>
<li class="menutwo"><a href="#">button two</a</li>
<li class="menuthree">button three</li>
<li class="menufour">button four</li>
</ul>
Right now my jQuery code only triggers when the button with the tag "menuone" is pressed.
My question is, can I use the same jQuery code somehow and generalize this?
You can use jquery selector for all buttons like following:
$('ul li a').on('click', function(){
// write your code here
})
I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
When the cursor hovers over my link, I want it to display a message saying "Hovering". I have tried the code below, but it does not create this window. Why not?
HTML:
<body>
<nav id="menu">
<ul>
<li><a href="index.html" id="home_button">
</ul>
</nav>
</body>
Javascript:
$(document).ready(function()
{
$("#menu ul li a").mouseover(function()
{
alert("Hovering");
});
});
Your code works, you just need to fix your HTML tags.
You are missing the anchor and list-item closure tags.
<nav id="menu">
<ul>
<li>Home</li>
</ul>
</nav>
JSFiddle: https://jsfiddle.net/40acxxet/1/
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.
I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app.
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons.
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. How would I achieve this? My code is...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated.
EDIT: I've found an example of something similar. Here it is...link. Click a thumbnail and it shows on the iPhone.
I'd probably set it up as follows:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
$('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
<script>
$('.screenshots a').click(function(){
switch($(this).attr('id')){
case 'src1':
$('.iphone').css('background-image','url("image1.png")');
break;
case 'src2':
$('.iphone').css('background-image','url("image2.png")');
break;
}
});
</script>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li>Screen 1</li>
<li>Screen 2</li>
</ul>
It's more appropriate to use actual links instead of adding a click event to an li. Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot.
With that in place, the following jQuery should work:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch event handler, instead of click.
I'd suggest a single jQuery click handler that can set the desired image background for each one:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
$('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>