Showing content based on a URL Anchors - javascript

I have links that lead to another page with different contents.
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This the code on the /services page:
<div class="menu-content item-1">Content item 1</div>
<div class="menu-content item-2">Content item 2</div>
<div class="menu-content item-3">Content item 3</div>
I found the bellow JS, but it works only when clicking on the anchor link on the same page.
var $content = $('.menu-content');
function showContent(type) {
$content.hide().filter('.' + type).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
I need is to display only the content related to the anchor link when load the /services page.

Once you change the page on websites ( not single page apps ) , javascript ' forgets ' what you have done before.
So for your logic to work it can't be inside a click event which happened on another page. It should be inside a document.ready or window.onload function.
You can use location.hash to get the # anchor from your url.
In the below example i changed the location.hash value to show you that the solution works. You can skip that first line and just use the next ones.
$(document).ready(function() {
location.hash = "item1"; // skip this
const myHash = location.hash.substr(1)
$('.menu-content').hide().filter(`.${myHash}`).show();
// or use : $('.menu-content').not(`.${myHash}`).hide()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-content item1">Item 1</div>
<div class="menu-content item2">Item 2</div>

Related

How can I create a drop down menu with JQuery

I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.
When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.
What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.
HTML
<!-- original code -->
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- my code -->
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
JS
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
// rename the JS to use the id/class for my script
The JSfiddle is here https://jsfiddle.net/cRsZE/982/
You have to update the click event in your jQuery to work for clicking the menu icon. This works:
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
Edit As requested via the comments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
And working Fiddle
Need To update Code Like That :
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
For Documentation :https://jqueryui.com/menu/
Cleaned up code a little. Like this?
https://jsfiddle.net/cshanno/cRsZE/990/
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});

Trigger event with same ID elements

I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});

store the current tabs after postback

I am creating an application where i want to store the current value of tabs during postback. I want to store the current value of tab using hidden variable.
what i doing wrong?
This is my jquery code:
$(document).ready(function () {
$('ul.tabs').each(function () {
tab active.
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
This my html Code:
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>
I guess you are trying to append the tabs href to url, in that case use the following code rather than handling the click event on each tab.
$('.tabs').tabs({
activate: function(event, ui) {
window.location.href = window.location.href.toString().split('#')[0] + ui.newTab.find('a').attr('href');
}
});
If you postback from a control in one of the tabs, your server-side code will know what tab you came from, yes? If you want the postback to return to the same tab, set your hidden field's .Value to the appropriate index with the handler code, and have this in your jQuery ready function:
$("#tabs").tabs({ active: <%= hfLastTab.Value %> });

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

How do you find a div with a variable class?

HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.
Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});
http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});
$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example
I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});

Categories

Resources